用vue開發一個公衆號商城SPA——2.接入微信公衆號

微信公衆號網頁開發流程

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