From 810142d6db853cb8dd13af76655edff443dd42c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9B=B9=E5=89=8D=E6=98=8E?= <909355014@qq.com> Date: Mon, 25 Jul 2022 12:08:51 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0h5=E5=BE=AE=E4=BF=A1=E7=99=BB?= =?UTF-8?q?=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- App.vue | 5 +- common/http.api.js | 9 +++- pages.json | 8 ++-- pages/login/login.vue | 87 +++++++++++++++++++++++++++++++++- pages/login/login_password.vue | 11 +++++ pages/my/my.vue | 10 ++-- store/index.js | 4 +- 7 files changed, 122 insertions(+), 12 deletions(-) diff --git a/App.vue b/App.vue index 2093d48..8d12b31 100644 --- a/App.vue +++ b/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 }, } diff --git a/common/http.api.js b/common/http.api.js index 8c47a49..19a1742 100644 --- a/common/http.api.js +++ b/common/http.api.js @@ -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, }; diff --git a/pages.json b/pages.json index a5c2c2e..06a3124 100644 --- a/pages.json +++ b/pages.json @@ -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 } diff --git a/pages/login/login.vue b/pages/login/login.vue index f5c816d..f421676 100644 --- a/pages/login/login.vue +++ b/pages/login/login.vue @@ -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 + }, + } }; diff --git a/pages/login/login_password.vue b/pages/login/login_password.vue index f96b4b7..2fc6811 100644 --- a/pages/login/login_password.vue +++ b/pages/login/login_password.vue @@ -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({ diff --git a/pages/my/my.vue b/pages/my/my.vue index 3c70e9e..a98da15 100644 --- a/pages/my/my.vue +++ b/pages/my/my.vue @@ -26,8 +26,12 @@ {{vuex_user.username}}-{{vuex_user.belong_dept_name}}-{{vuex_user.post_name}} - 已绑定微信小程序 - 已绑定公众号通知 + + + + + + diff --git a/store/index.js b/store/index.js index 673b1e5..0031ec1 100644 --- a/store/index.js +++ b/store/index.js @@ -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',