微信小程序小技巧系列《八》picker-view日期選擇器，獲取用戶openId ...
發布時間：2018-02-06 16:55 所屬欄目：小程序開發教程
一：微信小程序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
這個算不上技巧，而是一個基礎
-
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或登錄查看更多文章和帖子
