欢迎光临
我们一直在努力

微信小程序制作7

lueluelue1026

微信小程序制作7 小程序营销 第1张


01


学习篇
今天来完成我们的天气预报小程序。首先确认一下,我们前面的准备工作是否已经完成,点开详情→项目配置,里面的request合法域名是否有我们的地址。

微信小程序制作7 小程序营销 第2张

确认完成后,才可以进行下一步工作哦。
我们现在需要通过api获取天气信息,我们在js中写一个函数,就叫getweather好了。
 getweather:function(){ var that =this; //this不可以直接在wxapi函数内部使用 wx.request({ url: 'https://free-api.heweather.net/s6/weather/now?', data: { location: that.data.city[1], key: "0c1fffca53494db9b9569bc7c6252606" }, success:function(res){ console.log(res.data) } }) },
其中,用wx.request获取我们所要的结果,如果成功,则返回在控制台上,然后,我们是要在改变所选地区以后就得到天气结果,所以在changecity函数后面要调用我们的getweather函数,使用this.getweather调用。
 changecity:function(e){ this.setData({ city:e.detail.value }) this.getweather(); },
运行,选择相应城市以后,控制台会显示以下信息。

微信小程序制作7 小程序营销 第3张

我们需要的信息在now里面,所以在data中加入now。
 data: { city:["江苏省","常州市","武进区"], now:"" },

我们也需要实时更新这个值,需要在返回成功后更新,即更新getweather函数。

getweather:function(){ var that =this; //this不可以直接在wxapi函数内部使用 wx.request({ url: 'https://free-api.heweather.net/s6/weather/now?', data: { location: that.data.city[1], key: "0c1fffca53494db9b9569bc7c6252606" }, success:function(res){ //console.log(res.data) that.setData({now:res.data.HeWeather6[0].now}) } }) },
这样,我们就可以将所有固定内容全部替换成变量。即更新我们的wxml。
<!-- index.wxml --><view class="container"> <!-- 区域1:地区选择器 --> <picker mode='region' bindchange="changecity"> <view>{{city}}</view> </picker> <!-- 区域2:文本区域 --> <text>{{now.tmp}}℃ {{now.cond_txt}}</text> <!-- 区域3:展示天气图片 --> <image src="/images/{{now.cond_code}}.png"></image> <!-- 区域4:其他天气信息 --> <view class="qita"> <view class="hengxiang"> <view class="wenzi">湿度</view> <view class="wenzi">气压</view> <view class="wenzi">能见度</view> </view> <view class="hengxiang"> <view class="wenzi">{{now.hum}}%</view> <view class="wenzi">{{now.pres}}hpa</view> <view class="wenzi">{{now.vis}}km</view> </view> <view class="hengxiang"> <view class="wenzi">风向</view> <view class="wenzi">风速</view> <view class="wenzi">风力</view> </view> <view class="hengxiang"> <view class="wenzi">{{now.wind_dir}}</view> <view class="wenzi">{{now.wind_spd}}km/h</view> <view class="wenzi">{{now.wind_sc}}级</view> </view> </view></view>

运行,结果如下。

微信小程序制作7 小程序营销 第4张

有一个问题就是,不选择地区,我们的界面就是空白的。我们可以在now中添加初始值,也可以使用生命周期函数–监听页面加载来实现。
这里使用后一种方法,直接在里面调用我们的getweather函数,默认显示的信息就是我们设定的初始地区天气信息。
 onLoad: function (options) { this.getweather(); },

这样,天气预报小程序就算最终完成了。完整代码如下。

<!-- index.wxml --><view class="container"> <!-- 区域1:地区选择器 --> <picker mode='region' bindchange="changecity"> <view>{{city}}</view> </picker> <!-- 区域2:文本区域 --> <text>{{now.tmp}}℃ {{now.cond_txt}}</text> <!-- 区域3:展示天气图片 --> <image src="/images/{{now.cond_code}}.png"></image> <!-- 区域4:其他天气信息 --> <view class="qita"> <view class="hengxiang"> <view class="wenzi">湿度</view> <view class="wenzi">气压</view> <view class="wenzi">能见度</view> </view> <view class="hengxiang"> <view class="wenzi">{{now.hum}}%</view> <view class="wenzi">{{now.pres}}hpa</view> <view class="wenzi">{{now.vis}}km</view> </view> <view class="hengxiang"> <view class="wenzi">风向</view> <view class="wenzi">风速</view> <view class="wenzi">风力</view> </view> <view class="hengxiang"> <view class="wenzi">{{now.wind_dir}}</view> <view class="wenzi">{{now.wind_spd}}km/h</view> <view class="wenzi">{{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;}/* qita 用来控制整个所有信息的布局是垂直分布的,共4行 */.qita{ width: 100%; display: flex; flex-direction: column;}/* 每行也都是横向排布的 */.hengxiang{ display: flex; flex-direction: row; /* 设置外边距 */ margin: 20rpx;}/* wenzi用来设计小字段的样式 */.wenzi{ width: 33.3%; text-align: center;}/* 文本样式,只有区域2会用到 */text{ font-size: 80rpx; color: #4169E1;}/* 图片样式,只有区域3会用到 */image{ width: 268rpx; height: 268rpx;}
// pages/index/index.jsPage({
/** * 页面的初始数据 */ data: { city:["江苏省","常州市","武进区"], now:"" }, // 替换城市的值 changecity:function(e){ this.setData({ city:e.detail.value }) this.getweather(); }, getweather:function(){ var that =this; //this不可以直接在wxapi函数内部使用 wx.request({ url: 'https://free-api.heweather.net/s6/weather/now?', data: { location: that.data.city[1], key: "0c1fffca53494db9b9569bc7c6252606" }, success:function(res){ //console.log(res.data) that.setData({now:res.data.HeWeather6[0].now}) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getweather(); }})

02



生活篇

1.每日锻炼计划

  • 散步+慢跑30分钟

  • 引体向上10×3

  • 深蹲30×1

  • 俯卧撑30×2

2.每日体重记录

  • 110.5

    微信小程序制作7 小程序营销 第5张

3.今日歌单





4.狗子今天都不认识我了,叫它也不过来,好难受啊,只敢在远处一个人自己玩。

微信小程序制作7 小程序营销 第6张

微信小程序制作7 小程序营销 第7张


更新进度:
14/365

今日关键词:小程序制作7

赞(0) 打赏
未经允许不得转载:小程序营销 » 微信小程序制作7
分享到: 更多 (0)

小程序营销

联系我们联系我们