目標

完成基於uni-app H5平臺上微信公眾號JS-SDK的接入

uni-appH5接入JS-SDK

接入說明

1，環境說明

1. vue版的uni-app環境，使用npm來管理uni-app具備更好的靈活性，不用限制在HBuilder上開發，如果不是用npm管理，那麼需要在html中匯入js
2. (可選)微信公眾號賬號，這不是必需的，因為微信提供有測試號的沙盒環境，因此，具有個人微訊號在開發階段也是可行的
3. (可選)公網web地址方便公網測試，但基於內網除錯，可以形成除錯閉環，但需要能夠訪問外網的能力，因為要訪問微信。

2，JS-SDK接入說明

先說一下整體的接入概要，讓整個框架有個思路

1. JS-SDK本質是通過js注入完成的，為web頁面提供一些基於微信客戶端執行時的便捷功能，比如：圖片上傳、微信登入、分享、地理位置、掃一掃、支付等，總的來說就是面向手機底層的一些應用。我們接入JS-SDK的目的就是為了讓H5網頁，具有像"App"一樣的功能。
2. JS-SDK中的功能是受微信限制的，這裡JS-SDK的功能方法，就是微信文件中的“介面”，所有介面都是受微信管控的，這也能理解，比如像支付這類，肯定就需要與微信產生通訊聯絡。這裡的“限制”是廣義的，也包含一些無限制的介面
3. 微信“限制”了介面，那是為了考慮使用者安全，需要在微信公眾賬號配置“JS安全域名”，配置了此域名，H5頁面才能接入JS-SDK，作為微信服務商也就知道了你是誰，所以當H5被開啟時，微信服務商知道“頁面的提供者是誰(這裡的主體是公眾號)”，同時也知道是誰開啟的H5頁面(微信使用者)。基於這點原理，微信端的H5頁面打通了使用者與服務商標識的通道，極大提升了便捷性。
4. 微信公眾號的登入邏輯，登入是基於OAuth2的第三方授權登入邏輯來實現的。,至於原理稍後再說，這裡只需要注意一點，第三方授權登入會重定向到公眾號H5頁面，不支援基於ajax的方式

3，資源準備

本文只是輔助教程，所以還是需要一些資源

• JS-SDK說明文件
• 微信公眾平臺介面測試帳號申請
• web開發者工具
• 公網訪問內網方案：Frp輕鬆解決內網訪問方案

開始接入

前面說了那麼多廢話，終於要看是實幹了。

本人前後端開發框架

• 前端uni-app
• 後端maven、Spring Boot

第一步，下載web開發者工具

在上面的連線地址中，下載web開發者工具，方便預覽

第二步，uni-app安裝JS-SDK並初始化（前端）

1. 安裝

npm install weixin-js-sdk --save # --save將依賴儲存到package.json中

2. 初始化(這裡是指初始化JS環境，不是初始化配置)

import wx from 'weixin-js-sdk';
//這裡將wx重新命名為wxmp的全域性變數，目的是防止與uni-app等發生變數衝突。
window.wxmp = wx

這裡說明一下wxmp.config方法是JS-SDK的功能初始化，其中涉及到AppId、加密演算法、簽名等，所有config方法中的引數我們是通過服務端獲取的

第三步，初始化微信公眾賬號沙盒

點選上面的微信公眾平臺介面測試帳號申請進入沙盒申請

授權登入後如下：

配置JS安全域名（重要、重要、重要）

由於沙盒環境，可以配置內網、localhost地址

第四步，後端接入微信公眾號，實現wx.config配置引數(後端)

1. 提供jsSdkConfig介面(公共介面)

import me.chanjar.weixin.common.bean.WxJsapiSignature;
import me.chanjar.weixin.common.error.WxErrorException;
import me.chanjar.weixin.mp.api.WxMpService;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;
@RestController
@RequestMapping("/openApi/comm")
public class JsSdkRest {
    @Resource
    private WxMpService wxMpService;

    @GetMapping("jsSdkConfig")
    @GetMapping("jsSdkConfig")
    public RestObjectResponse<WxJsapiSignature> jsSdkConfig(@ApiParam("url包含查詢引數") @RequestParam("url") String url) throws WxErrorException {
        return RestObjectResponse.ok(wxMpService.createJsapiSignature(url));
    }
}

RestObjectResponse你應該沒有，自行替換

2. 引入公眾號對接依賴

WxMpService是基於開源的公眾號接入庫maven依賴如下:

<dependency>
   <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-mp</artifactId>
    <version>3.9.0</version>
</dependency>

3.配置WxMpService Bean

我沒有用starter版，習慣自行配置bean，這樣更靈活

@Configuration
public class WxConfiguration {
    /**
     * 微信公眾號配置
     * @return
     */
    @Bean
    public WxMpService wxMpService(){
        WxMpServiceImpl wxMpService = new WxMpServiceImpl();
        WxMpDefaultConfigImpl conf = new WxMpDefaultConfigImpl();
        conf.setAppId(ProjectWxMpConfigBean.INSTANCE.getAppId());
        conf.setSecret(ProjectWxMpConfigBean.INSTANCE.getSecret());
        conf.setToken(ProjectWxMpConfigBean.INSTANCE.getToken());
        conf.setAesKey(ProjectWxMpConfigBean.INSTANCE.getAesKey());
        wxMpService.setWxMpConfigStorage(conf);
        return wxMpService;
    }
}

第五步，前端呼叫配置介面初始化配置

獲取配置介面

其實這沒啥好說的，但是有一點需要注意，那就是獲取配置介面需要傳入url並且包含查詢引數

參考程式碼:

let getJsSdkConfig = ()=>{
    let url = escape(window.location.href)
    return PFApi.apiGet(
        {
            uri:'/openApi/comm/jsSdkConfig'
        },{url:url})
}
export const ApiComm = {
    getJsSdkConfig:getJsSdkConfig
}

這裡順便囉嗦一下url組成

紅框中每個屬性自行理解，肯定是有差異的。

js配置

wxmp.config({
  debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來，若要檢視傳入的引數，可以在pc端開啟，引數資訊會通過log打出，僅在pc端時才會列印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS介面列表
});

jsApiList,要用到的wx方法都需要配置在這裡面，字串陣列，方法名

第六步，確認

重新整理頁面出現下面的彈框說明配置ok，如果報錯，根據錯誤碼在微信文件去找