微信小程序—老黄历

许睿

2020.01.17

52人浏览

利用日期选择器和wx.request方法调用三方接口完成微信小程序老黄历的制作

开发环境:微信开发者工具

作者:睿萌萌


当打开小程序时,会调用当前系统时间,拉取到当天的数据,进行显示,如下图:

微信小程序—老黄历

点击日期会跳出一个日期选择器,当用户选择相应的日期确认后,会跳转到选定日期。如下图:

微信小程序—老黄历

当用户点击日期旁边的“今”按钮,会回到今天,显示当天的老黄历。


该小程序中日期选择器调用微信官方日期选择器,代码如下:

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}    </view>
  </picker></view>

小程序中还用到了wx.request,类似于ajax,向后台发送请求,后台得到请求以后返回前端,实现局部刷新,代码如下:

wx.request({
    url: 'https://api.jisuapi.com/huangli/date',
    data:{
        year: saerchdate[0],
        month: saerchdate[1],
        day: saerchdate[2],
        appkey:'yourappkey'
    },
    success:(res)=>{
        console.log(res);
        this.setData({
            result:res
        })
    }
})

其中url为地址,data内为传递给后台的值,后台接到值成功后success会得到一个返回值res,我们把这个值赋值给data里面的值在进行调用即可。


在微信小程序搜索:睿萌萌的大胡萝卜

或扫描小程序码:

微信小程序—老黄历

许睿    722 天津市北辰区 设计师杨冰是女孩 1997.08.16
京ICP备17020986号-1
设计师啪啪网2019版