小程序获取地址有两种方式:1.引入第三方地图(腾讯地图)等 。2.小程序提供的获取地址api
这里我是用到第二种:
代码:
wx.getLocation({
type: "wgs84",
success(res) {
wx.chooseLocation({
latitude: res.latitude,
longitude: res.longitude,
success: (data)=>{
var address = list
that.setData({
[address]:data.address
})
}
})
},
complete:data =>{
console.log(data)
}
})
app.json中配置这个,用户询问是否获取地理位置,这里前提是要有用户的授权信息先。
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
2.客服聊天
这里需要在开发者里面配置关联的公众号 。
https://developers.weixin.qq.com/miniprogram/dev/component/button.html 官方文档提到 open-type="contact"
<button class="mgl-20 hiddenButton" open-type="contact">联系客服</button>
这样只有点击后,会触发当前小程序关联的公众号,客服只需要在公众号进行回复即可
3.用户授权
(1)重写一个授权界面
<view class="auth">
<image src="https://res.wx.qq.com/wxopenres/htmledition/images/favicon32f740.ico" class="img" mode="aspectFill"></image>
<view class="title">微信授权页面</view>
<view class="describe">此页面是微信授权页面,点击下方按钮弹出授权或跳转页面</view>
<button class="btn" open-type='getUserInfo' wx:if="{{canIUse}}" bindgetuserinfo='onAuth'>点击微信授权</button>
<navigator wx:if="{{!canIUse}}" class="btn" url="/pages/auth/auth" open-type="reLaunch" hover-class="other-navigator-hover">已经授权点击调转</navigator>
</view>
/* pages/auth/auth.wxss *//* 开始 */
page {
height: 100%;
display: table;
}
.auth {
margin-top: 0;
text-align: center;
display: table-cell;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
padding: 100rpx;
vertical-align: middle;
}
.img {
border-radius: 50%;
border: 1px solid #fff;
background-color: #fff;
margin: 0 0 60rpx;
display: inline-block;
width: 200rpx;
height: 200rpx;
line-height: 0;
}
.title {
display: inline-block;
width: 100%;
margin: 0 0 60rpx;
}
.describe {
color: #a7aaa9;
font-size: 26rpx;
margin: 0 0 60rpx;
border-radius: 50%;
text-align: center;
display: inline-block;
width: 100%;
}
.btn {
padding: 0 60rpx;
background-color: #19be6b;
margin: 20rpx 0 200rpx;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
white-space: nowrap;
user-select: none;
font-size: 14px;
border: 0 !important;
position: relative;
text-decoration: none;
height: 44px;
line-height: 44px;
box-shadow: inset 0 0 0 1px #19be6b;
background: #fff !important;
color: #19be6b !important;
display: inline-block;
border-radius: 10rpx;
}
// pages/auth/auth.js
var app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo'),
code:'',
pid: 0,
url: "../index/index",
productId: 0,
ishow: 0,
decodeStr: '',
decoUrl: '', //解密URL
pkid: '', //会员id
productpkid: '', //产品ID
bulkID: '', //是要扫码进入到片装区的参数
bulkstoreID: '', //这个是门店id(是要扫码进入到片装区的)
SaleMethod: '', //代表是线上还是线下的字段(是要扫码进入到片装区的)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
that.setData({code:res.code})
var code = res.code
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
that.setData({
ishow: 0
})
that.setData({
code:code
})
} else {
that.setData({
ishow: 1
})
}
}
})
}
})
},
// 点击过后,授权,在不清除缓存的情况下依然可以调用的方法
onAuth: function(code) {
var that = this
var code = that.data.code
wx.getUserInfo({
lang: 'zh_CN',
success: res => {
var encryptedData = res.encryptedData;
var iv = res.iv;
that.setData({
isUserid: 1,
ishow: 0
})
wx.showLoading({
title: '登录中',
})
// 这个是一般的登录
wx.request({
url: app.globalData.baseUrl + '/user/decodeUserInfo',
data: {
code: code,
encryptedData: encryptedData,
iv: iv,
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
method: "POST",
success: function(res) {
if (res.data.status) {
var userInfo = wx.getStorageSync('userInfo') || []
userInfo = res.data.data.wxUser
var userToken = res.data.data.token
wx.setStorageSync('userInfo', userInfo)
wx.setStorageSync('userToken', userToken)
wx.reLaunch({
url: '/pages/order/order',
})
} else {
wx.showToast({
title: '登录失败',
icon: 'none'
})
}
},
fail: function(res) {
}
})
}
})
},
})
(2)调用小程序api进行授权。官方提供open-type="getUserInfo" 去触发授权
<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="hideBtn"><image src="{{userImg}}"/></button>
bindGetUserInfo:function(e){
if(wx.getStorageSync('userInfo')){return}
var that = this;
var encryptedData = e.detail.encryptedData;
var iv = e.detail.iv;
var code = that.data.code
wx.showLoading({
title: '登录中',
})
wx.request({
url: app.globalData.baseUrl + '/user/decodeUserInfo',
data: {
code: code,
encryptedData: encryptedData,
iv: iv,
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
method: "POST",
success: function(res) {
wx.hideLoading()
if (res.data.status == 200) {
var userInfo = wx.getStorageSync('userInfo') || []
userInfo = res.data.data.wxUser
var userToken = res.data.data.token
wx.setStorageSync('userInfo', userInfo)
wx.setStorageSync('userToken', userToken)
that.setData({
userName:userInfo.nickName,
userImg:userInfo.avatarUrl
})
// wx.reLaunch({
// url: '/pages/order/order',
// })
} else {
wx.showToast({
title: '登录失败',
icon: 'none'
})
}
},
fail: function(res) {
}
})
},