微信公众号网页开发流程
1. 申请服务号，认证
微信公众平台分为服务号，订阅号，小程序和企业微信。
订阅号任何人都可以注册，但是功能受限，只能发发文章啥的；服务号注册是必须要商户号，所以只能企业或组织注册，服务号功能完整，认证后的服务号的自定义菜单可以配置跳转网页地址，因此开发微信商城必须要服务号或订阅号的测试账号小程序就不说了；企业微信没用过，感觉是腾讯出的类似钉钉一样的办公服务。2. 配置自定义菜单跳转网页地址
把你的vue应用放到一个有域名的服务器中，在微信公众号平台配置自定义菜单的跳转网页地址：
我这里用的是自己的订阅号，会提示你认证，但是又只有服务号才能认证，所以现在的订阅号做不了网页了。必须要服务号才行，但是开发的时候还是可以用订阅号生成测试账号来开发网页的。 3. 开发，调试微信网页的正确姿势
首先，不可能为了开发微信网页而去申请服务号，其次，订阅号虽然没有开放网页，但是依然可以通过测试号来进行开发，测试号开放了所有接口，所以比服务号还要方便：
然后，在服务号中开发时，我们是通过配置了地址的自定义菜单访问页面进行调试的，这个地址必须是外网能访问的域名，不能是ip地址，这就意味着每次我们写了代码，要想调试就必须打包，上传到服务器才行，这样显然不科学。我们希望开发微信网页能和开发pc端页面一样，通过本地npm run dev实时进行调试，这是完全可以实现的。原理是npm run dev的时候，webpack-dev-sever会在电脑上启一个web服务，如果把你的电脑配置一个域名，能在外网中访问，那么在微信中就能访问到你的电脑上的东西了。这是就需要内网穿透，他就是用来把你的电脑暴露在外网中，我使用的是natapp，免费，跟着官网教程一步一步走就可以了，最终你会获得一个你指向你本机的域名，我们在微信中打开这个域名，就能访问到本地的项目了。 4. 使用微信授权获取用户信息，微信扫一扫等
获取用户信息——微信授权
如果需要获取用户的微信信息，相当于要使用微信的获取用户信息的接口，因此需要在公众号平台接口权限中配置网页授权这么一个东西。登录公众平台，点击左下角接口权限，找到网页服务，找到网页授权，点击修改，输入域名，这里的域名就是你页面的顶级域名，和你之前配置自定义菜单时的域名一样就行。使用内网穿透本地开发的时候，域名就是穿透工具生成的你的本机域名。
配置好域名后就可以按照开发文档使用api了，微信授权是通过window.location.href并携带规定的参数，跳转到指定的链接，进行授权后在跳转回来，具体可以查看，贴下代码：
/** * 微信授权 * config: * appId - 公众号appId * REDIRECT_URI - 回调域名，授权后跳转的地址 * SCOPE - 授权类型，snsapi_userinfo／snsapi_base */export function auth () { /* eslint-disable */ let appid = 'xxxxxxxxxxxxx', oldURL = window.location.href, REDIRECT_URI = oldURL.split('#')[0], SCOPE = 'snsapi_userinfo', url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + REDIRECT_URI + '&response_type=code&scope=' + SCOPE + '&state=1#wechat_redirect' window.location.href = url}/** * 获取授权后的code * @returns {*} */export function getCode () { let url = window.location.search if (url === '') { return false } let code = url.match(/^\?code=(.+)&/)[1] return code} 微信扫一扫，支付，坐标等——JSSDK
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
其实就是微信提供的api，使用之前也是需要先配置一下：
配置js安全接口域名，和配置网页授权的域名一样，按照文档的方法还需要下载一个文件到你的域名所在的根目录下，比较麻烦，推荐直接npm install weixin-js-sdk安装使用。调用api之前需要先注册，注册需要一些参数，比如timestamp，nonceStr，signature这些，这些都是由后端给我们的，其中signature签名需要我们给后端传一个url过去，这个url可以是项目的顶级域名就行，比如是www.1234.com，这样www.1234.com/a，www.1234.com/a/b对应的页面不需注册也能直接调用jssdk，需要注意的是该url中不能有#，可以有？。贴下代码： import wx from 'weixin-js-sdk'import request from 'utils/request'import Vue from 'vue'export function getJSSDK () { request({ url: '/api/weixin/signature', params: {strUrl: window.location.href.split('#')[0]} }).then(res => { const {nonceStr, signature, timestamp} = res.data wx.config({ appId: 'xxxxxxxxxxxxxxx', // 必填，公众号的唯一标识 timestamp, // 必填，生成签名的时间戳 nonceStr, // 必填，生成签名的随机串 signature, // 必填，签名 jsApiList: ['scanQRCode', 'openLocation', 'getLocation'] // 必填，需要使用的JS接口列表 }) wx.ready((res) => { console.log('wx.ready', res) }) wx.error((err) => { console.log(err.errMsg) }) })}Vue.prototype.$wx = { scan () { return new Promise((resolve, reject) => { wx.scanQRCode({ needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有 success: function (res) { console.log(res) // 当needResult 为 1 时，扫码返回的结果 resolve(res.resultStr) }, fail: function (err) { console.log(err) reject(err) } }) }) }} 其他接口看调用就行。
5. 腾讯地图--计算两地距离接口
项目中有个需求，需要计算用户当前位置和商店的距离，微信JSSDK提供了获取用户位置的接口，商店的经纬度坐标后端也提供了接口，但是如何计算两点的距离，是个问题。自己算最多也只能算个球面距离，并不准确，所以我猜想各种地图应该有这种基本的接口，果不其然，说在怎么在项目中使用：
登录网站，注册一下，登录后生成一个开发密钥（Key），后面会用到。先看看有些啥东西：
其他的就不说了，我需要的是在WebService API里面的距离计算，其实就是一个http请求接口，传规定的参数，返回距离给你，需要注意的是在项目中要设置代理，因为跨域了，写的很清楚了，贴下代码： // config/index.js 配置代理 proxyTable: { '/tcApi': { target: 'https://apis.map.qq.com', changeOrigin: true, pathRewrite: {'^/tcApi': ''} } }// 封装下接口import request from 'utils/request'const tcMapKey = '你的开发密钥（Key）'export function distance (from, to) { return request({ url: '/tcApi/ws/distance/v1', params: { from, to, key: tcMapKey } })}