zcdsj
/
factory_mp_old
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加h5微信登录

This commit is contained in:
曹前明 2022-07-25 12:08:51 +08:00
parent a4a1f35657
commit 810142d6db
7 changed files with 122 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
App.vue
View File

@ -2,7 +2,7 @@
export default { export default {
// 此处globalData为了演示其作用，不是uView框架的一部分 // 此处globalData为了演示其作用，不是uView框架的一部分
globalData: { globalData: {
username: '白居易' appid: 'wxf7d6140f507466be'
}, },
onLaunch() { onLaunch() {
// 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中 // 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中
@ -15,6 +15,7 @@
*/ */
//var that=this //var that=this
// 小程序自动登录 // 小程序自动登录
// #ifdef MP-WEIXIN
uni.showLoading({ uni.showLoading({
title: '微信自动登录中...', title: '微信自动登录中...',
mask: true mask: true
@ -54,7 +55,7 @@
}) })
} }
}); });
// #endif
}, },
} }
</script> </script>

9
common/http.api.js
View File

@ -19,18 +19,25 @@ const install = (Vue, vm) => {
let login = (data = {}) => vm.$u.post('auth/token/', data); //账户密码登录 let login = (data = {}) => vm.$u.post('auth/token/', data); //账户密码登录
// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下 // 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
let wxmplogin = (data = {}) => vm.$u.post('auth/login_wxmp/', data); //微信登录 let wxmplogin = (data = {}) => vm.$u.post('auth/login_wxmp/', data); //微信小程序登录
let wxLogin = (data = {}) => vm.$u.post('auth/login_wx/', data); //微信公众号登录
let bindmp = (data = {}) => vm.$u.post('/system/user/bind_wxmp/', data); //微信小程序绑定 let bindmp = (data = {}) => vm.$u.post('/system/user/bind_wxmp/', data); //微信小程序绑定
let unbindmp = (data = {}) => vm.$u.post('/system/user/unbind_wxmp/', data); //微信小程序解绑 let unbindmp = (data = {}) => vm.$u.post('/system/user/unbind_wxmp/', data); //微信小程序解绑
let bindwx = (data = {}) => vm.$u.post('/system/user/bind_wx/', data); //微信公众号绑定
let getDickey = (params={})=>vm.$u.get('/system/dict/', params);//查询字典 let getDickey = (params={})=>vm.$u.get('/system/dict/', params);//查询字典
vm.$u.api = {getUserInfo, vm.$u.api = {getUserInfo,
getCode, getCode,
codeLogin, codeLogin,
login, login,
wxmplogin, wxmplogin,
wxLogin,
bindmp, bindmp,
bindwx,
unbindmp, unbindmp,
getDickey, getDickey,
}; };

8
pages.json
View File

@ -12,19 +12,19 @@
// }, // },
"pages": [ "pages": [
{ {
"path" : "pages/login/login_password", "path" : "pages/login/login",
"style" : "style" :
{ {
"navigationBarTitleText": "密码登录", "navigationBarTitleText": "验证码登录",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
}, },
{ {
"path" : "pages/login/login", "path" : "pages/login/login_password",
"style" : "style" :
{ {
"navigationBarTitleText": "验证码登录", "navigationBarTitleText": "密码登录",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }

87
pages/login/login.vue
View File

@ -48,7 +48,9 @@
export default { export default {
data() { data() {
return { return {
wxcode: null,
imageURL: '/static/banner3.jpg', imageURL: '/static/banner3.jpg',
testUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf7d6140f507466be&redirect_uri=http%3A%2F%2Fqyjy.ctc-zc.com&response_type=code&scope=snsapi_base#wechat_redirect',
loginForm: { loginForm: {
phone: "", phone: "",
code: "" code: ""
@ -88,7 +90,19 @@
}, },
onReady() { onReady() {
this.$refs.uForm.setRules(this.rules); this.$refs.uForm.setRules(this.rules);
// #ifdef MP-WEIXIN
uni.hideHomeButton() uni.hideHomeButton()
// #endif
},
onLoad() {
// #ifdef H5
this.wxcode = this.getUrlCode('code')
// 微信公众号自动登录
if(this.wxcode) {
this.wxcodeLogin()
}
// #endif
}, },
computed: { computed: {
inputStyle() { inputStyle() {
@ -113,8 +127,16 @@
uni.showLoading({}) uni.showLoading({})
this.$u.api.codeLogin(this.loginForm).then(res => { this.$u.api.codeLogin(this.loginForm).then(res => {
this.$u.vuex('vuex_token', res.access) this.$u.vuex('vuex_token', res.access)
// #ifdef MP-WEIXIN
let data = {openid: uni.getStorageSync('wxmp_openid')} let data = {openid: uni.getStorageSync('wxmp_openid')}
this.$u.api.bindmp(data).then(res=>{}) this.$u.api.bindmp(data).then(res=>{})
// #endif
// #ifdef H5
let data = {openid: uni.getStorageSync('wx_openid')}
if(data){
this.$u.api.bindwx(data).then(res=>{})
}
// #endif
this.$u.api.getUserInfo().then(res => { this.$u.api.getUserInfo().then(res => {
this.$u.vuex('vuex_user', res) this.$u.vuex('vuex_user', res)
// 修改资源请求地址 // 修改资源请求地址
@ -154,7 +176,43 @@
this.$u.toast('倒计时结束后再发送'); this.$u.toast('倒计时结束后再发送');
} }
}, },
wxcodeLogin(){
uni.showLoading({
title: '微信登录中...',
mask: true
})
this.$u.api.wxLogin({
code: this.wxcode
}).then(res => {
this.$u.vuex('vuex_token', res.access)
this.$u.api.getUserInfo().then(res => {
uni.hideLoading()
uni.showToast({
title: "登录成功",
icon: "none"
})
uni.reLaunch({
url: "/pages/home/home"
})
this.$u.vuex('vuex_user', res)
// 修改资源请求地址
// this.$u.vuex('vuex_user.avatar', this.vuex_user.avatar +
// '?token=' + this.vuex_token)
})
}).catch(e => {
uni.setStorageSync('wx_openid', e.data.wx_openid)
uni.hideLoading()
uni.showToast({
title: "暂未绑定微信!",
icon: "none"
})
})
},
mpLogin() { mpLogin() {
// #ifdef H5
this.getWxCode()
// #endif
// #ifdef MP-WEIXIN
uni.showLoading({ uni.showLoading({
title: '微信登录中...', title: '微信登录中...',
mask: true mask: true
@ -181,6 +239,7 @@
// '?token=' + this.vuex_token) // '?token=' + this.vuex_token)
}) })
}).catch(e => { }).catch(e => {
uni.setStorageSync('wxmp_openid', e.data.wxmp_openid)
uni.hideLoading() uni.hideLoading()
uni.showToast({ uni.showToast({
title: "暂未绑定微信!", title: "暂未绑定微信!",
@ -189,7 +248,33 @@
}) })
} }
}); });
} // #endif
},
// 获取code
// 先判断url中有没有code，如果有code，表明已经授权，如果没有code，跳转微信授权链接
getWxCode () {
// const isWechat = () => {
// return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
// }
// if(isWechat()) {
// 截取地址中的code，如果没有code就去微信授权，如果已经获取到code了就直接把code传给后台获取openId
let code = this.getUrlCode('code')
if (code === null || code === '') {
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+this.vuex_appid+'&redirect_uri=' + encodeURIComponent(this.vuex_login) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
// redirect_uri是授权成功后，跳转的url地址，微信会帮我们跳转到该链接，并且通过？的形式拼接code，这里需要用encodeURIComponent对链接进行处理。
// 如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会再地址栏中看到code了。
// http://127.0.0.1/pages/views/profile/login/login?code=001BWV4J1lRzz00H4J1J1vRE4J1BWV4q&state=1
}else{
this.wxcode = code
this.wxcodeLogin()
}
// }
},
getUrlCode (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
},
} }
}; };
</script> </script>

11
pages/login/login_password.vue
View File

@ -60,7 +60,9 @@ export default {
}, },
onReady() { onReady() {
this.$refs.uForm.setRules(this.rules); this.$refs.uForm.setRules(this.rules);
// #ifdef MP-WEIXIN
uni.hideHomeButton() uni.hideHomeButton()
// #endif
}, },
computed: { computed: {
inputStyle() { inputStyle() {
@ -79,10 +81,19 @@ export default {
this.$u.api.login(this.loginForm).then( this.$u.api.login(this.loginForm).then(
res=>{ res=>{
this.$u.vuex('vuex_token', res.access) this.$u.vuex('vuex_token', res.access)
// #ifdef MP-WEIXIN
let data = {openid: uni.getStorageSync('wxmp_openid')} let data = {openid: uni.getStorageSync('wxmp_openid')}
this.$u.api.bindmp(data).then(res=>{}) this.$u.api.bindmp(data).then(res=>{})
// #endif
// #ifdef H5
let data = {openid: uni.getStorageSync('wx_openid')}
if(data){
this.$u.api.bindwx(data).then(res=>{})
}
// #endif
this.$u.api.getUserInfo().then(res=>{ this.$u.api.getUserInfo().then(res=>{
this.$u.vuex('vuex_user', res) this.$u.vuex('vuex_user', res)
// 修改资源请求地址 // 修改资源请求地址
}) })
uni.reLaunch({ uni.reLaunch({

10
pages/my/my.vue
View File

@ -26,8 +26,12 @@
<u-tag text="访客" v-if="vuex_user.type == 'visitor'"/> <u-tag text="访客" v-if="vuex_user.type == 'visitor'"/>
</view> </view>
<view class="u-font-14 u-type-info">{{vuex_user.username}}-{{vuex_user.belong_dept_name}}-{{vuex_user.post_name}}</view> <view class="u-font-14 u-type-info">{{vuex_user.username}}-{{vuex_user.belong_dept_name}}-{{vuex_user.post_name}}</view>
<view class="u-font-14 u-type-info" v-if="vuex_user.wxmp_openid">已绑定微信小程序</view> <view class="u-font-14">
<view class="u-font-14 u-type-info" v-if="vuex_user.wx_openid">已绑定公众号通知</view> <u-tag v-if="vuex_user.wxmp_openid" text="小程序" size="mini"></u-tag>
<u-tag v-else type="error" text="小程序" size="mini"></u-tag>
<u-tag v-if="vuex_user.wx_openid" text="微信通知" size="mini"></u-tag>
<u-tag v-else type="error" text="微信通知" size="mini"></u-tag>
</view>
</view> </view>
<!-- <view class="u-m-l-10 u-p-10"> <!-- <view class="u-m-l-10 u-p-10">
<u-icon name="scan" color="#969799" size="28"></u-icon> <u-icon name="scan" color="#969799" size="28"></u-icon>
@ -54,7 +58,7 @@
<view class="u-m-t-20"> <view class="u-m-t-20">
<u-cell-group> <u-cell-group>
<u-cell-item icon="weixin-fill" title="绑定微信" :arrow="false" @click="bindMP" v-if="!vuex_user.wxmp_openid"></u-cell-item> <!-- <u-cell-item icon="weixin-fill" title="绑定微信" :arrow="false" @click="bindMP" v-if="!vuex_user.wxmp_openid"></u-cell-item> -->
<u-cell-item icon="close" title="退出账号" @click="Logout"></u-cell-item> <u-cell-item icon="close" title="退出账号" @click="Logout"></u-cell-item>
</u-cell-group> </u-cell-group>
</view> </view>

4
store/index.js
View File

@ -12,7 +12,7 @@ try{
} }
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名 // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token']; let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_appid'];
// 保存变量到本地存储中 // 保存变量到本地存储中
const saveLifeData = function(key, value){ const saveLifeData = function(key, value){
@ -33,6 +33,8 @@ const store = new Vuex.Store({
// 加上vuex_前缀，是防止变量名冲突，也让人一目了然 // 加上vuex_前缀，是防止变量名冲突，也让人一目了然
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {}, vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},
vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '', vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
vuex_appid: 'wxf7d6140f507466be',
vuex_login: 'http://qyjy.ctc-zc.com/h5/',
vuex_host: 'http://127.0.0.1:8000', vuex_host: 'http://127.0.0.1:8000',
//vuex_api: 'http://47.95.0.242:9101/api', //vuex_api: 'http://47.95.0.242:9101/api',
vuex_api: 'http://127.0.0.1:8000/api', vuex_api: 'http://127.0.0.1:8000/api',