增加h5微信登录
This commit is contained in:
曹前明
parent
a4a1f35657
commit
810142d6db
5
App.vue
5
App.vue
|
|
@ -2,7 +2,7 @@
|
|||
export default {
|
||||
// 此处globalData为了演示其作用，不是uView框架的一部分
|
||||
globalData: {
|
||||
username: '白居易'
|
||||
appid: 'wxf7d6140f507466be'
|
||||
},
|
||||
onLaunch() {
|
||||
// 1.1.0版本之前关于http拦截器代码，已平滑移动到/common/http.interceptor.js中
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
*/
|
||||
//var that=this
|
||||
// 小程序自动登录
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showLoading({
|
||||
title: '微信自动登录中...',
|
||||
mask: true
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
})
|
||||
}
|
||||
});
|
||||
|
||||
// #endif
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -19,18 +19,25 @@ const install = (Vue, vm) => {
|
|||
let login = (data = {}) => vm.$u.post('auth/token/', data); //账户密码登录
|
||||
// 将各个定义的接口名称，统一放进对象挂载到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 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);//查询字典
|
||||
vm.$u.api = {getUserInfo,
|
||||
getCode,
|
||||
codeLogin,
|
||||
login,
|
||||
wxmplogin,
|
||||
wxLogin,
|
||||
bindmp,
|
||||
bindwx,
|
||||
unbindmp,
|
||||
getDickey,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,19 +12,19 @@
|
|||
// },
|
||||
"pages": [
|
||||
{
|
||||
"path" : "pages/login/login_password",
|
||||
"path" : "pages/login/login",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "密码登录",
|
||||
"navigationBarTitleText": "验证码登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
"path" : "pages/login/login",
|
||||
"path" : "pages/login/login_password",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "验证码登录",
|
||||
"navigationBarTitleText": "密码登录",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,9 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
wxcode: null,
|
||||
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: {
|
||||
phone: "",
|
||||
code: ""
|
||||
|
|
@ -88,7 +90,19 @@
|
|||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.hideHomeButton()
|
||||
// #endif
|
||||
},
|
||||
onLoad() {
|
||||
// #ifdef H5
|
||||
this.wxcode = this.getUrlCode('code')
|
||||
// 微信公众号自动登录
|
||||
if(this.wxcode) {
|
||||
this.wxcodeLogin()
|
||||
}
|
||||
// #endif
|
||||
|
||||
},
|
||||
computed: {
|
||||
inputStyle() {
|
||||
|
|
@ -113,8 +127,16 @@
|
|||
uni.showLoading({})
|
||||
this.$u.api.codeLogin(this.loginForm).then(res => {
|
||||
this.$u.vuex('vuex_token', res.access)
|
||||
// #ifdef MP-WEIXIN
|
||||
let data = {openid: uni.getStorageSync('wxmp_openid')}
|
||||
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.vuex('vuex_user', res)
|
||||
// 修改资源请求地址
|
||||
|
|
@ -154,7 +176,43 @@
|
|||
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() {
|
||||
// #ifdef H5
|
||||
this.getWxCode()
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.showLoading({
|
||||
title: '微信登录中...',
|
||||
mask: true
|
||||
|
|
@ -181,6 +239,7 @@
|
|||
// '?token=' + this.vuex_token)
|
||||
})
|
||||
}).catch(e => {
|
||||
uni.setStorageSync('wxmp_openid', e.data.wxmp_openid)
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,9 @@ export default {
|
|||
},
|
||||
onReady() {
|
||||
this.$refs.uForm.setRules(this.rules);
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.hideHomeButton()
|
||||
// #endif
|
||||
},
|
||||
computed: {
|
||||
inputStyle() {
|
||||
|
|
@ -79,10 +81,19 @@ export default {
|
|||
this.$u.api.login(this.loginForm).then(
|
||||
res=>{
|
||||
this.$u.vuex('vuex_token', res.access)
|
||||
// #ifdef MP-WEIXIN
|
||||
let data = {openid: uni.getStorageSync('wxmp_openid')}
|
||||
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.vuex('vuex_user', res)
|
||||
|
||||
// 修改资源请求地址
|
||||
})
|
||||
uni.reLaunch({
|
||||
|
|
|
|||
|
|
@ -26,8 +26,12 @@
|
|||
<u-tag text="访客" v-if="vuex_user.type == 'visitor'"/>
|
||||
</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 u-type-info" v-if="vuex_user.wx_openid">已绑定公众号通知</view>
|
||||
<view class="u-font-14">
|
||||
<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 class="u-m-l-10 u-p-10">
|
||||
<u-icon name="scan" color="#969799" size="28"></u-icon>
|
||||
|
|
@ -54,7 +58,7 @@
|
|||
|
||||
<view class="u-m-t-20">
|
||||
<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-group>
|
||||
</view>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ try{
|
|||
}
|
||||
|
||||
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
|
||||
let saveStateKeys = ['vuex_user', 'vuex_token'];
|
||||
let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_appid'];
|
||||
|
||||
// 保存变量到本地存储中
|
||||
const saveLifeData = function(key, value){
|
||||
|
|
@ -33,6 +33,8 @@ const store = new Vuex.Store({
|
|||
// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
|
||||
vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {},
|
||||
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_api: 'http://47.95.0.242:9101/api',
|
||||
vuex_api: 'http://127.0.0.1:8000/api',
|
||||
|
|
|
|||
Loading…
Reference in New Issue