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}} </text>
<text decode="{{true}}"> 空气指数:{{weather.data[0].air}} </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>
页面运行截图:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)