小程序模板网

微信小程序小技巧系列《八》picker-view日期选择器,获取用户openId ...

2018-02-06 大槐宫
一:微信小程序picker-view日期选择器
 

使用微信小程序设计下拉菜单,发现官方文档中关于picker-view的示例代码有错误,

顶部天数不随着滑动而变化,并且默认出现的月份和天数是写死的,不是根据当天日期显示。

修改后的js文件为

const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
    years.push(i)
}
for (let i = 1; i <= 12; i++) {
    months.push(i)
}
for (let i = 1; i <= 31; i++) {
    days.push(i)
}


 

Page({
    data: {
        //数组中保存的可选日期
        years: years,
        months: months,
        days: days,
        //默认的顶部日期
        year: date.getFullYear(),
        month: date.getMonth()+1,
        day: date.getDate(),
        //滑动框中放入的是第几个值
        value: [date.getFullYear(), date.getMonth(), date.getDate()-1],
    },
    bindChange: function (e) {
        const val = e.detail.value
        this.setData({
            year: this.data.years[val[0]],
            month: this.data.months[val[1]],
            day: this.data.days[val[2]]
        })
    }
})

 

date.getMonth()取得的月份比真实月份小1,即从0到11月份,并且需要注意的是getMonth()方法必须带括号,微信开发工具自动提示的不带括号,需要自己手动补上括号。

 

并且data中的value值,目测天数项要减1才能符合,没弄懂这个地方是为什么,

 

wxml文件

<view>
  <view>{{year}}年{{month}}月{{day}}日</view>
  <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
    <picker-view-column>
      <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
    </picker-view-column>
    <picker-view-column>
      <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</view>

二:获取用户openId

这个算不上技巧,而是一个基础

  1. wx.login({  
          success: function (res) {  
            res.code  
        })  

获取到code后,传到后台,

 

然后请求微信接口

https://api.weixin.微软雅黑/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
把参数替换为自己的参数,这个接口就直接返回openId了
更多请在本站搜索openid或登录查看更多文章和帖子


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21668.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询