微信公众号网页开发流程

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
    }
  })
}