实训第五天：我的页面布局，API接口（一言，天气预报）

1.不用不用脚本和弹窗获取手机信息，用微信公众平台的组件开发能力 open-data用于展示微信开放的数据。
部分代码：

<view class="container">

<view class='bg'>

<view class='usericon'>

<open-data type="userAvatarUrl"></open-data></view>

<open-data class="text" type="userNickName"></open-data>

</view>

<view class='system'>

<view id='info'><text>设备信息</text></view>

<view>

<text >手机型号：</text>

<text class='color'>{{model}}</text>

</view>

<view>

<text >手机版本号</text>

<text class='color'>{{system}}</text>

</view>

<view>

<text>微信版本：</text>

<text class='color'>{{version}}</text>

</view>

<view>

<text >手机屏幕分辨率：</text>

<text class='color'>{{screenWidth}} * {{screenHeight}}</text>

</view>

<view>

<text>地区</text>

<view class='color'>

<open-data type="userProvince" lang="en"></open-data>

<open-data class="ml_10" type="userCity" lang="en"></open-data>

</view>

</view>

</view>

</view>

再对各个信息格式进行设定，最后运行截图：

2.请求和响应：API  网络发起请求一言和天气预报的API接口获得网站信息
首先在微信公众平台填好自己的微信小程序信息，且将两个平台的API接口填到开发设置的服务器域名中，实现小程序能适应两个平台的数据。
一言请求：
 

click:function(){

var _this = this;

//发起一个网络请求

wx.request({

url: 'https://v1.hitokoto.cn/', //仅为示例，并非真实的接口地址

data: {

c: "a"

},

header: {

'content-type': 'application/json' // 默认值

},

success(res) {

// console.log(res.data)

_this.setData({

yiyan: res.data

})

}

});
一言实现页面（wxml页面）：
<text class="color">{{yiyan.hitokoto}}</text>

<text class="color">---{{yiyan.from}}</text>

<button id="id" bindtap='click'>一言 </button>
天气预报请求：

wx.request({

url: 'https://www.tianqiapi.com/api/', //仅为示例，并非真实的接口地址

method:"get",

dataType:"json",

data: {

version: "v1",

city:'湛江'

},

header: {

'content-type': 'application/json' // 默认值

},

success(res) {

console.log(res.data)

_this.setData({

weather:res.data,

flag:true

})

console.log(res.data);

}

}),

天气预报实现页面部分代码：

<view class="week"> {{weather.update_time}} 更新</view>

<view id='img'><image class="photoes" src='../../images/{{weather.data[0].wea_img}}.png'></image></view>

<view class="week"> {{weather.data[0].tem}},{{weather.data[0].wea}}</view>

<view class="futherweather">

<text class="humity" decode="{{true}}"> 湿度:{{weather.data[0].humidity}}&nbsp;&nbsp;&nbsp;&nbsp; </text>

<text decode="{{true}}"> 空气指数：{{weather.data[0].air}}&nbsp;&nbsp;&nbsp;&nbsp; </text>

<text>空气质量：{{weather.data[0].air_level}}</text>

</view>

<view>

<text class="futureweather">生活小贴士：{{weather.data[0].index[3].desc}}</text>

<text class="futureweather">{{weather.data[0].index[0].desc}}</text> </view>

<text>\n</text>
页面运行截图：