整合微信jssdk、实现微信网页授权、

Author: wmhello

.env.development

@@ -0,0 +1,4 @@
+NODE_ENV="dev"
+BASE_URL="http://wmhello.mynatapp.cc/"
+VUE_APP_REDIRECT="http://wmhello.mynatapp.cc/api/start_oauth"
+VUE_APP_TIMEOUT=2*60*60*1000

.env.production

@@ -0,0 +1,4 @@
+NODE_ENV="production"
+BASE_URL="http://wmhello.mynatapp.cc/"
+VUE_APP_REDIRECT="http://wmhello.mynatapp.cc/api/start_oauth"
+VUE_APP_TIMEOUT=2*60*60*1000

package-lock.json

@@ -7,10 +7,17 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.4.4",
+    "good-storage": "^1.1.0",
+    "js-cookie": "^2.2.1",
+    "qs": "^6.9.1",
+    "vant": "^2.4.6",
     "vue": "^2.6.10",
+    "vue-ls": "^3.2.1",
     "vue-router": "^3.1.3",
-    "vuex": "^3.1.2"
+    "vuex": "^3.1.2",
+    "weixin-js-sdk": "^1.4.0-test"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",

package.json

@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>

public/.htaccess

@@ -1,9 +1,5 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </div>
 </template>

src/App.vue

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getConfig(url, params) {
+    return request({
+        url: '/api/jssdk/config',
+        method: 'post',
+        data: {
+            api: params,
+            url
+        }
+    })
+}
+
+
+export function pay(price) {
+    return request({
+        url: '/api/spa-pay',
+        method: 'get',
+        params: {
+           price
+        }
+    })
+}
+
+

src/api/jssdk.js

@@ -2,8 +2,37 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import '@/plugins/storage.js'
+import '@/permission.js'
+import Vant from 'vant'
+import 'vant/lib/index.css';
+Vue.use(Vant);
+import { Grid, GridItem } from 'vant';
+Vue.use(Grid);
+Vue.use(GridItem);
 
 Vue.config.productionTip = false
+import wx from 'weixin-js-sdk'
+import { getConfig } from '@/api/jssdk'
+
+const actions = ['openLocation','getLocation','updateAppMessageShareData', 'updateTimelineShareData', 'chooseImage', 'uploadImage', 'previewImage', 'getLocalImgData', 'downloadImage','closeWindow','hideMenuItems', 'scanQRCode','','', 'showMenuItems', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'chooseWXPay']
+
+router.afterEach(async (to, from) => {
+  let _url = window.location.origin + to.fullPath
+  // 非ios设备，切换路由时候进行重新签名
+  if (window.__wxjs_is_wkwebview !== true) {
+   let config = await getConfig(_url, actions)
+    wx.config(config)
+  }  
+})
+
+// ios 设备进入页面则进行js-sdk签名
+if (window.__wxjs_is_wkwebview === true) {
+  let _url = window.location.href.split('#')[0]
+  getConfig(_url, actions).then(function (res) {
+    wx.config(res)
+  })
+}
 
 new Vue({
   router,

src/assets/jssdk.png

@@ -0,0 +1,7 @@
+export default {
+	methods: {
+		onClickLeft(){
+			this.$router.go(-1)
+		}
+	}
+}

src/main.js

@@ -0,0 +1,32 @@
+import router from '@/router'
+import { saveToken } from '@/utils/cache'
+import wx from 'weixin-js-sdk'
+import store from '@/store'
+// import { getConfig } from '@/api/jssdk'
+import qs from 'qs'
+
+router.beforeEach((to, from, next) => {
+	const loginStatus = Number(store.getters.loginStatus)
+	const token = store.getters.token
+	if (loginStatus === 0) {
+	    // 微信未授权登录跳转到授权登录页面
+	    const url = window.location.href
+	    // 解决重复登录url添加重复的code与state问题
+	    const parseUrl = qs.parse(url.split('?')[1])
+	    // 无论拒绝还是授权都设置成1
+	    store.dispatch('user/setLoginStatus', 1)
+	    // 跳转到微信授权页面
+	    window.location.href = process.env.VUE_APP_REDIRECT +`?end_url=${url}`
+	  } else if (loginStatus === 1) {
+	    const url = window.location.href
+	    // 解决重复登录url添加重复的code与state问题
+	    const parseUrl = qs.parse(url.split('?')[1])
+	    saveToken(parseUrl.token)
+	    store.dispatch('user/setLoginStatus', 2)
+	    delete to.query.token
+	    next()
+	  } else {
+	   // 已登录直接进入
+	    next()
+	  }
+	})

src/minix/operate.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import Storage from 'vue-ls';
+
+// options = ;
+Vue.use(Storage, {
+    namespace: 'vuejs__', // key键前缀
+    name: 'ls', // 命名Vue变量.[ls]或this.[$ls],
+    storage: 'local', // 存储名称: session, local, memory
+});

src/permission.js

@@ -17,6 +17,16 @@ const routes = [
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  },
+  {
+	  path: '/img',
+	  name: 'img',
+	  component: () => import(/* webpackChunkName: "img" */ '../views/Img.vue')
+  },
+  {
+	  path: '/pay',
+	  name: 'pay',
+	  component: () => import(/* webpackChunkName: "img" */ '../views/Pay.vue')
   }
 ]
 

src/plugins/storage.js

@@ -0,0 +1,6 @@
+const getters = {
+  // user
+  token: state => state.user.token,
+  loginStatus: state => state.user.loginStatus
+}
+export default getters

src/router/index.js

@@ -1,15 +1,17 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import getters from './getters'
+import app from './modules/app'
+import user from './modules/user'
 
 Vue.use(Vuex)
 
-export default new Vuex.Store({
-  state: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
+const store = new Vuex.Store({
   modules: {
-  }
+    app,
+    user
+  },
+  getters
 })
+
+export default store