信管117132岳颖云——实训第五天：学习总结和作业

一、学习总结

1、个人页面排版

（1）不用授权即可获得用户头像和昵称

mine.wxml

<view class='usericon'>
    <open-data type="userAvatarUrl"></open-data></view>
    <open-data class="text" type="userNickName"></open-data>
  </view>

(2)获取用户手机信息

mine.wxml

<!-- 系统信息 -->
  <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>
      <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>
      <text>分辨率</text>
      <text class='color'>{{screenWidth}}*{{screenHeight}}</text>
    </view>    
  </view>
</view>

2、请求和响应:API  网络发起请求一言和天气预报的API接口获得网站信息

首先在微信公众平台填好自己的微信小程序信息，且在开发设置一栏将两个平台的API接口填到开发设置的服务器域名中，实现小程序能适应两个平台的数据

（1）一言

index.js

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>

(2)天气预报

index.js

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

})

二、作业

1、题目：利用时间实现天气预报页面，交作业时需源码与手机截图！

index.wxml

 

<image src="../../images/1.jpg" class="bg"></image>

<view class="container">

<view class="nowWeather">

<view class="city w">{{weather.city}}</view>

<!--<view class="w b center f50">{{fl}}</view>-->

<view class="temp w b">{{weather.data[0].tem}}</view>

<view class="weather w">{{weather.data[0].wea}} | 空气 {{weather.data[0].air_level}}</view>

<view class="weather w">{{weather.update_time}}</view>

</view>

<view class="weahterDetail">

<view class="" style="flex:1;height:100px">

<view class="w center">明天</view>

<view class="w b center f50">{{weather.data[1].tem}}</view>

<view class="w b center f51">{{weather.data[2].wea}}</view>

</view>

<view class="l"></view>

<view class="" style="flex:1;height:100px">

<view class="w center">后天</view>

<view class="w b center f50">{{weather.data[2].tem}}</view>

<view class="w b center f51">{{weather.data[2].wea}}</view>

</view>

<view class="l"></view>

<view class="" style="flex:1;height:100px">

<view class="w center">周三</view>

<view class="w b center f50">{{weather.data[3].tem}}</view>

<view class="w b center f51">{{weather.data[3].wea}}</view>

</view>

</view>

</view>

<button bindtap='click'>点击</button>