标签：function index 项目 天气 https 今日 now 选择器 页面
效果：
重点：
1、picker组件 官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
<picker>是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持5种选择器，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器。若省略mode值不写，则默认效果是普通选择器。
**省市区选择器** 当mode=’region’时为省市区选择器效果
2、天气API：
和风天气： https://dev.heweather.com/docs/api/ （自行注册账户）
获得key：https://console.heweather.com/app/index
获得天气图标：https://dev.heweather.com/docs/refer/condition 【下载解压到项目中即可】
根据网站的相关代码提示和接口信息制作url： https://dev.heweather.com/docs/api/weather
URL：https://free-api.heweather.net/s6/weather/now?location回到微信公众平台，添加服务器域名：
3、调用函数：this."函数名"(参数列表)
4、wx.requst({
url:
data:
success:function(e){
通常先在控制台输出查看一下
}
}) + 更改变量值
步骤：
1、目录结构
2、代码：
<!-- pages/index/index.wxml --> <view class="container"> <!--第一部分--> <picker mode="region" bindchange='regionChange'> <view class="col">{{region}}</view> </picker> <!-- 第二部分 --> <text>{{now.tmp}}℃ {{now.cond_txt}}</text> <!-- 第三部分 --> <image src="/images/{{now.cond_code}}.png"></image> <!-- 第三部分 --> <view class="detail"> <view class="colum"> <view class="row">湿度</view> <view class="row">气压</view> <view class="row">能见度</view> </view> <view class="colum"> <view class="row">{{now.hum}}%</view> <view class="row">{{now.pres}}hPa</view> <view class="row">{{now.vis}}Km</view> </view> <view class="colum"> <view class="row">风向</view> <view class="row">风速</view> <view class="row">风力</view> </view> <view class="colum"> <view class="row">{{now.wind_dir}}</view> <view class="row">{{now.wind_spd}}Km/h</view> <view class="row">{{now.wind_sc}}级</view> </view> </view> </view>/* pages/index/index.wxss */ .container{ height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .detail{ width: 100%; display: flex; flex-direction: column; } .col{ color: rgb(16, 160, 47); } .colum{ display: flex; flex-direction: row; margin: 20rpx 0; } .row{ width: 33.3%; text-align: center; } image{ width:520rpx; } text{ font-size: 80rpx; color: rgb(250, 16, 28); }
// pages/index/index.js Page({ /** * 页面的初始数据 */ data: { region:["河南省","南阳市","宛城区"], now:"" }, regionChange:function(e){ this.setData( {region:e.detail.value} ) this.getWeather(); }, getWeather:function(){ var that=this; //this不可以直接在webAPI函数中使用 wx.request({ url: 'https://free-api.heweather.net/s6/weather/now?location', data:{ location:that.data.region[1], key:"803d0078076840d1a08a6f1585675b96", }, success:function(reslut){ //console.log(reslut.data) that.setData({ now:reslut.data.HeWeather6[0].now }) } }) }, /** * 生命周期函数--监听页面加载 */ onl oad: function (options) { this.getWeather(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
// app.json { "pages": [ "pages/index/index" ], "window": { "navigationBarBackgroundColor": "#3883FA", "navigationBarTextStyle": "white", "navigationBarTitleText": "我的天气", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false }, "sitemapLocation": "sitemap.json" }
标签：function,index,项目,天气,https,今日,now,选择器,页面 来源： https://www.cnblogs.com/pam-sh/p/12329555.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。