h5微信本地调试 vue_VUE开发微信H5页面总结

写在前面

刚入门前端的时候写过很多的微信H5页面，时隔多年感觉应该是手到擒来，不曾想竟很是费了一些功夫。现在把本次开发过程中遇到的问题以及我是如何解决的，做个记录。防止自己以后再去解决解决过的问题。

github：github.com/qq9694526/v…

一、微信网页授权

网页授权流程分为四步，这里只说前端需要做的，其中的第一步：跳转授权页面获取code。

这里分享下我的授权逻辑(下图)，它有两个优点：

授权跳转在dom渲染之前，体验会好一些；

本地存储了openId，前后端均不用频繁的与微信服务器交互。

二、微信jssdk授权

如果你页面中有用到分享、上传图片、微信支付等功能，那么需要先进行js-sdk授权。我这边封装成了2个方法：initConfig和setShare，方便在路由/页面切换的时候重复调用。

//main.js

import wxsdk from './config/wxsdk.js' //该模块提供initConfig和setShare方法，具体代码太长见github

Vue.prototype.wxsdk = wxsdk;//挂载到全局

//使用

created() {

this.wxsdk.initConfig(location.href.split("#")[0], () => {

this.wxsdk.setShare(this.user.openId);

});