<!--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.js
Page({
/**
* 页面的初始数据
*/
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',
}
}
})
亲测有效，原创总结，转载请注明出处！