小程序开发常用几个api、生命周期钩子和注意事项

<!--pages/testwxApi.wxml--><view> <view>测试微信api</view> <!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 --> <!-- 头像组件 拿到的是用户微信头像 --> <open-data type="userAvatarUrl"></open-data> <!-- 昵称组件 拿到的是用户微信名 --> <open-data type="userNickName"></open-data> <!-- 需要使用 button 来授权登录 canIUse版本兼容--> <button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button> <view wx:else>请升级微信版本</view> <!--wx.login() 获取登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等 --> <button bindtap="wxLogin">微信登录</button> <!-- 小程序微信支付 --> <button bindtap="wxPay">小程序微信支付</button> <!-- 获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。开启高精度定位,接口耗时会增加,可指定 highAccuracyExpireTime 作为超时时间。地图相关使用的坐标格式应为 gcj02 --> <button bindtap="getGPS">获取当前的地理位置</button> <!-- 小程序数据存储在本地缓存 --> <button bindtap="wxCache">小程序缓存功能</button></view>
// pages/testwxApi.jsPage({ /** * 页面的初始数据 */ data: { canIUse: wx.canIUse(‘button.open-type.getUserInfo‘) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(‘生命周期回调—监听页面加载‘, ‘第一步‘) // "shareAppMessage"表示“发送给朋友”按钮,"shareTimeline"表示“分享到朋友圈”按钮 // 显示“分享到朋友圈”按钮时必须同时显示“发送给朋友”按钮,显示“发送给朋友”按钮时则允许不显示“分享到朋友圈”按钮 // 与之对应的还有 wx.hideShareMenu 隐藏方法 wx.showShareMenu({ withShareTicket: true, // 是否使用带 shareTicket 的转发 menus: [‘shareAppMessage‘, ‘shareTimeline‘], success(res) { console.log(res) }, fail(e) { console.log(e) } }) // 获取系统信息--- 还可以做高度自适应(res.windowHeight // 可视高度) wx.getSystemInfo({ success(res) { console.log(res, ‘系统信息‘) } }) // 查看是否授权 wx.getSetting({ success(res) { if (res.authSetting[‘scope.userInfo‘]) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称 wx.getUserInfo({ success: function (res) { console.log(res.userInfo, ‘微信用户信息‘) } }) } } }) }, // 授权登录 bindGetUserInfo(e) { console.log(e, ‘e‘) console.log(e.detail.userInfo) }, // 微信登录 一般app.js处理 wxLogin() { // wx.login() 发送 res.code 到后台换取 openId, sessionKey, unionId wx.login({ success(res) { console.log(res, ‘res微信登录‘) if (res.code) { //发起网络请求 } else { console.log(‘登录失败!‘ + res.errMsg) } } }) }, // 发起微信支付 wxPay() { wx.requestPayment({ timeStamp: ‘‘, // 必填 nonceStr: ‘‘, // 必填 package: ‘‘, // 必填 signType: ‘MD5‘, // 非必填 paySign: ‘‘, // 必填 success(res) { }, fail(res) { } }) }, // 获取地理位置 需要再 app.json里面配置 permission 字段如: "scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示" } // wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 对应的打开地图选择位置 wx.chooseLocation() getGPS() { wx.getLocation({ type: ‘gcj02‘, success: (res) => { console.log(res, ‘获取地理位置经纬度‘) }, fail: (error) => { console.log(error, ‘error如果拒绝授权继续引导授权‘) wx.showModal({ content: ‘请授权用户地理位置‘, confirmColor: "#ff6700", success(res) { if (res.confirm) { wx.openSetting({ success(res) { // console.log(res.authSetting) res.authSetting = { "scope.userInfo": true, "scope.userLocation": true } } }) } } }) } }) }, // 小程序缓存效果方法 存wx.setStorage(Object object) 取wx.getStorage(Object object) 删wx.removeStorage(Object object) 清除所有 wx.clearStorage(Object object) // 小程序缓存效果方法(同步版本) 存wx.setStorageSync(Object object) 取wx.getStorageSync(Object object) 删wx.removeStorageSync(Object object) 清除所有 wx.clearStorageSync(Object object) wxCache(){ wx.setStorageSync(‘name‘, ‘bob‘) // 也可以用对象键值对的形式存取 console.log(wx.getStorageSync(‘name‘),‘取出缓存的值看看‘) }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log(‘生命周期回调—监听页面显示‘, ‘第二步‘) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log(‘生命周期回调—监听页面初次渲染完成‘, ‘第三步‘) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。 注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮 */ onShareAppMessage: function (res) { console.log(‘点击了右上角分享‘) if (res.from === ‘button‘) { // 来自页面内转发按钮 console.log(res.target) } return { title: ‘自定义转发标题----默认当前小程序名称‘, path: ‘/page/testwxApi?id=11, 转发路径, 默认是 当前页面 path ,必须是以 / 开头的完整路径‘, imageUrl: ‘自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4, 默认是 使用默认截图‘ } }, // 监听右上角菜单“分享到朋友圈”按钮的行为,并自定义发享内容。 注意:只有定义了此事件处理函数,右上角菜单才会显示“分享到朋友圈”按钮 onShareTimeline: function (res) { console.log(res, ‘分享朋友圈‘) // 必须要写return的内容目前的版本分享朋友圈的才不会变灰色 return { title: ‘自定义标题--默认当前小程序名称‘, query: ‘自定义页面路径中携带的参数如id="11"---默认当前页面路径携带的参数‘, imageUrl: ‘自定义图片路径,可以是本地文件或者网络图片。支持 PNG 及 JPG,显示图片长宽比是 1:1,默认使用小程序 Logo‘ } }, // 监听用户点击右上角菜单“收藏”按钮的行为,并自定义收藏内容 onAddToFavorites(res) { // webview 页面返回 webviewUrl console.log(‘WebviewUrl: ‘, res.webviewUrl) return { title: ‘自定义标题--默认-页面标题或账号名称‘, imageUrl: ‘http://demo.png 自定义图片,显示图片长宽比为 1:1 默认-页面截图‘, query: ‘name=xxx&age=xxx 自定义query字段---默认-当前页面的query‘, } } })

亲测有效,原创总结,转载请注明出处!

相关文章