首先是前端的手势插件下载引用，可以去插件市场搜索，我用的这个
https://ext.dcloud.net.cn/plugin?id=49
下载引入就好了。
一、手势密码设定功能
<template>
<view class="content">
<view class="ssmm">
<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
</view>
<view class="uni-center">{{text}}</view>
</view>
</template>
<script>
import mpvueGestureLock from '@/components/mpvueGestureLock/indexsz.vue';
export default {
components: {
mpvueGestureLock
},
data() {
return {
password: [],
text: '请设定手势'
}
},
onLoad() {//禁用页面下滑功能，不然滑动会带动页面
document.body.addEventListener('touchmove', bodyScroll, {
passive: false
});
function bodyScroll(event) {
event.preventDefault();
}
},
methods: {
onEnd(data) {
var access_token=uni.getStorageSync("access_token");
if (this.password.length) {
if (this.password.join('') === data.join('')) {
this.text = '手势设定完成'
this.password = [ ]
uni.request({ //设置完调用接口保存手势密码
url: getApp().globalData.baseUrl+'/admin/user/updateUserLockpwd',
data: {
userId:uni.getStorageSync("userId"),
lockpwd:data.join('-')
},
method:"PUT",
header: {
isToken: false,
'TENANT-ID': getApp().globalData.tenantId,
'Authorization':'Bearer '+access_token
},
success: (res) => {
if(res.data.code==0){
uni.showToast({
title: '手势设定完成',
icon: 'success',
mask: true
});
setTimeout(function() {
uni.reLaunch({
url:"../fxcp/cpjg/cpjg"
})
},1000);
}
}
});
} else {
this.text = '两次手势设定不一致'
this.password = []
}
} else {
this.text = '请确认手势设定'
this.password = data//data是密码数字数组
}
}
}
}
</script>
<style>
page{
height: 100%;
}
.content{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.uni-center{
display: flex;
justify-content: center;
margin-top: 150rpx;
}
</style>
手势密码界面如下：
设置完就是手势登录功能。
二、手势登录
手势登录代码
<template>
<view>
<!-- 1.logo -->
<view class="logobox">
<image class="logo" src="../../../static/ssdl/YH.png"></image>
<text class="hyy">欢迎圆合会员</text>
<text class="qsr">请您输入您的手势</text>
</view>
<!-- 2.手势组件 -->
<view class="uni-padding-wrap uni-common-mt">
<mpvue-gesture-lock :containerWidth="590" :cycleRadius="70" @end="onEnd" :password="password"></mpvue-gesture-lock>
</view>
<!-- 3.忘记密码 -->
<view class="wjmm">
<navigator url="../login" class="btn">
<image class="img" src="../../../static/else/qh.png"></image>
<view>切换为账号登录</view>
</navigator>
</view>
</view>
</template>
<script>
import mpvueGestureLock from '@/components/mpvueGestureLock/indexdl.vue';
export default {
components: {
mpvueGestureLock
},
onLoad() {
document.body.addEventListener('touchmove', bodyScroll, {
passive: false
});
function bodyScroll(event) {
event.preventDefault();
}
},
data() {
return {
password: [],
text: '请输入手势密码'
}
},
methods: {
navito () {
var access_token=uni.getStorageSync("access_token");
uni.request({
url: getApp().globalData.baseUrl+'/mp/wxaccount/my/gzh',
data: {
'TENANT-ID': getApp().globalData.tenantId
},
header: {
// isToken: false,
// 'TENANT-ID': getApp().globalData.tenantId,
'Authorization':'Bearer '+access_token
},
success:(res)=>{
var appid=res.data.data.appid
var redirectUri=res.data.data.redirectUri
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+encodeURIComponent(redirectUri)+'&response_type=code&scope=snsapi_userinfo&state=ssdl#wechat_redirect'
}
});
},
onEnd(data) {
uni.setStorageSync("ssmm",data.join('-'));//data是密码数字数组
this.navito()
}
}
}
</script>
<style>
/* 自定义导航栏 */
/* icon的颜色 */
view /deep/ .navbar .uni-navbar__content_view{
color:#000;
}
/* 标题的字体 */
view /deep/ .uni-navbar__header-container-inner{
font-size:36rpx;
}
/* logo */
.logobox{
height:400rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.logo{
width:130rpx;height:66rpx;
}
.hyy{
font-size:42rpx;
font-weight: bold;
color:#4D4D4D;
margin:40rpx 0 20rpx;
}
.qsr{
font-size:26rpx;
color:#999;
}
.uni-center{
margin-left:170rpx;
}
.wjmm{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size:26rpx;
color:#FFFFFF;
margin-top:100rpx;
}
.btn{
width:350rpx;height:80rpx;
background-color: #3F8BE7;
line-height: 80rpx;
text-align: center;
/* border: 1rpx solid #D2D2D2; */
border-radius: 200rpx;
margin: 0 20rpx 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
.img{
width:50rpx;height:50rpx;
margin-right: 10rpx;
}
</style>
界面如下：
三、调用获取公众号信息接口前往重定向
获取公众号信息接口调用成功，保存返回的appid和redirectUrl值，跳转重定向链接。重定向链接是后端设置，前端只需要拼接：window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+appid+'&redirect_uri='+encodeURIComponent(redirectUri)+'&response_type=code&scope=snsapi_userinfo&state=ssdl#wechat_redirect'
四、新建空白页处理微信绑定
<template>
<view></view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
this.getbdwx()
},
methods: {
// 绑定微信
getbdwx(){
const access_token=uni.getStorageSync("access_token");
const ssmm=uni.getStorageSync("ssmm")
const url = window.location.href.replace('http://www.rlvs.cn/gzh/', '')
const code =url.split("&")[0].replace("?code=","")
const state =url.split("&")[1].replace("state=","").substr(0,4)
if(state=="ssdl"){//手势登录
uni.request({
url: getApp().globalData.baseUrl+'/auth/mobile/token/social',
data: {
mobile:'GZH@'+code,
code:ssmm,
grant_type:"mobile"
},
method:"POST",
header: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
isToken: false,
'TENANT-ID': getApp().globalData.tenantId,
'Authorization':'Basic bHNmdzpsc2Z3'//自定义请求头信息
},
success:(res)=>{
if(res.data.code==1){
uni.showModal({
content:res.data.msg,
showCancel: false
});
}else{
uni.setStorageSync("access_token",res.data.access_token);
uni.setStorageSync("refresh_token",res.data.refresh_token);
uni.setStorageSync("username",res.data.username);
// uni.setStorageSync("password",this.password);
uni.setStorageSync("userId",res.data.user_id);
uni.showToast({
title: '登录成功',
icon: 'success',
mask: true,
});
setTimeout(function() {
uni.reLaunch({
url:"../../../cpzx/index"
})
},1000);
var access_token=uni.getStorageSync("access_token");
// 请求是否首次登录
uni.request({
url: getApp().globalData.baseUrl+'/admin/user/info',
data: { },
header: {
// isToken: false,
'TENANT-ID': getApp().globalData.tenantId,
'Authorization':'Bearer '+access_token
},
success:(res)=>{
uni.setStorageSync("usertype",res.data.data.sysUser.usertype);
uni.setStorageSync("category",res.data.data.sysUser.category);
uni.setStorageSync("firstlogin",res.data.data.sysUser.firstlogin);
uni.setStorageSync("avatar",res.data.data.sysUser.avatar);
uni.setStorageSync("realname",res.data.data.sysUser.realname);
uni.setStorageSync("phone",res.data.data.sysUser.phone);
uni.setStorageSync("xb",res.data.data.sysUser.xb);
// 请求成功,外部用户且首次登录跳转风险测评
if(res.data.data.sysUser.firstlogin==1 && res.data.data.sysUser.usertype==1){//1为首次登陆
uni.reLaunch({
url:"../../pwd/czmm?key=login"
})
// 不是首次登录，跳转首页
}else{
uni.showToast({
title: '登录成功',
icon: 'success',
mask: true
});
setTimeout(function() {
uni.reLaunch({
url:"../../../cpzx/index"
})
},1000);
}
}
});
}
},
fail:(res)=>{
uni.showModal({
content:"失败",
showCancel: false
});
}
});
}else{//账号密码登录
uni.request({
url: getApp().globalData.baseUrl+'/mp/gzh/authorize/'+code,
data: { },
header: {
isToken: false,
'TENANT-ID': getApp().globalData.tenantId,
'Authorization':'Bearer '+access_token
},
success: (res) => {
if(res.data.code==1){
uni.showModal({
content:"绑定失败",
showCancel: false
});
}else{
uni.showToast({
title: '绑定成功',
icon: 'success',
mask: true
});
setTimeout(function() {
uni.reLaunch({
url:"../../../cpzx/index"
})
},1000);
}
}
});
}
}
}
}
</script>
<style>
</style>
空白页一进入就，获取url中code的参数值，并通过绑定微信接口传过去。绑定成功保存用户信息即可。
