vue h5微信公众号网页（总结）

vue h5微信公众号网页（bug总结）

1.微信授权获取用户信息

（这个看这一篇博客）vue h5 微信授权

2.微信标题随路由变化

• 1下载

npm install 'vue-wechat-title' --save

• 2在main.js导入并注册

 import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

• 3在路由增加一个title

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Toast } from 'vant';

Vue.use(VueRouter)

const routes = [
{
  path: '/',
  redirect: '/login'
},
{
  path: '/login',
  name: 'Login',
  meta: {
    title: '登录',
    requireAuth: true
  },
  component: () => import( '../views/Login.vue')
},
{
  path: '/index',
  name: 'Index',
  meta: {
    title: '首页',
    requireAuth: true
  },
  redirect: '/index/home',
  component: () => import( '../views/Index/Index.vue'),
  children:[
    {
      path: 'home',
      name: 'Home',
      meta: {
        title: '首页',
        requireAuth: true
      },
      component: () => import( '../views/Home/Home.vue')
    },
    {
      path: 'back',
      name: 'back',
      meta: {
        title: '首页',
        requireAuth: true
      },
      component: () => import( '../views/Back/Back.vue')
    },
    {
      path: 'kebiao',
      name: 'Kebiao',
      meta: {
        title: '课表',
        requireAuth: true
      },
      component: () => import( '../views/Kebiao/Kebiao.vue')
    },
    {
      path: 'chengji',
      name: 'Chengji',
      meta: {
        title: '成绩',
        requireAuth: true
      },
      component: () => import( '../views/Chengji/Chengji.vue')
    },
    {
      path: 'shezhi',
      name: 'Shezhi',
      meta: {
        title: '设置',
        requireAuth: true
      },
      component: () => import( '../views/Shezhi/Shezhi.vue')
    },
  ]

},


{
  path: '/about',
  name: 'About',
  component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]


const router = new VueRouter({
mode: 'history',
routes
})

router.beforeEach((to, from, next) => {

let password=localStorage.getItem("password");
let mima=localStorage.getItem("text");
//有账号和密码，并且已经授权获取用户信息，或者在登录页面，就放行路由
 if(mima&&password &&localStorage.getItem("userinfo") ||to.path == "/login"){
  
   console.log("路由跳转了")
     next();
     //没有账号密码，就拦截路由，跳转到登录页面重新输入
 }else if(!mima|| !password){
     Toast("请输入账号密码")
     next("/login");
  //没有用户信息，说明没有授权，重新返回登录页面，再次授权
 }else if(!localStorage.getItem("userinfo")){
   Toast("请重新授权")
   next("/login");
 } 
})
export default router

• 4在router-view使用

  <div id="app">
    <router-view v-wechat-title='$route.meta.title'/>
  div>

• 5效果

3.微信登录页面左滑404

• 1下载

npm install 'weixin-js-sdk' --save
npm install 'vue-touch' --save

• 2在登录页面使用

import wx from 'weixin-js-sdk'
import VueTouch from 'vue-touch'
Vue.use(VueTouch, {name: 'v-touch'})

• 3使用v-touch组件包裹住整个页面，这样就能监听这个页面的手势（左滑和右滑）

v-on:swipeleft="left" v-on:swiperight="right"

<v-touch v-on:swipeleft="left" v-on:swiperight="right" >
  
v-touch>

     left(){
         console.log("左滑")
         wx.closeWindow()
     },
     right(){
       console.log("右滑")
       //这个使用了import wx from 'weixin-js-sdk'，在微信中会关闭当前页面
           wx.closeWindow()
     },

这样就在登录页面的时候，左滑，或者右滑，就可以被监听到，从而调用left()和right(),关闭当前窗口，返回微信界面，不会出现404