目錄

• 目标
• uni-appH5接入JS-SDK
• • 接入說(shuō)明
  • • 1，環境說(shuō)明
    • 2，JS-SDK接入說(shuō)明
    • 3，資源準備
  • 開始接入
  • • 本人(rén)前後端開發框架
    • 第一步，下載web開發者工具
    • 第二步，uni-app安裝JS-SDK并初始化（前端）
    • 第三步，初始化微信公衆賬号沙盒
    • • 點擊上(shàng)面的(de)`微信公衆平台接口測試帳号申請`進入沙盒申請
      • 配置JS安全域名（重要(yào / yāo)、重要(yào / yāo)、重要(yào / yāo)）
    • 第四步，後端接入微信公衆号，實現wx.config配置參數(後端)
    • • 1. 提供jsSdkConfig接口(公共接口)
      • 2. 引入公衆号對接依賴
      • 3.配置WxMpService Bean
    • 第五步，前端調用配置接口初始化配置
    • • 獲取配置接口
      • js配置
    • 第六步，确認

目标

完成基于(yú)uni-app H5平台上(shàng)微信公衆号JS-SDK的(de)接入

uni-appH5接入JS-SDK

接入說(shuō)明

1，環境說(shuō)明

1. vue版的(de)uni-app環境，使用npm來(lái)管理uni-app具備更好的(de)靈活性，不(bù)用限制在(zài)HBuilder上(shàng)開發，如果不(bù)是(shì)用npm管理，那麽需要(yào / yāo)在(zài)html中導入js
2. (可選)微信公衆号賬号，這(zhè)不(bù)是(shì)必需的(de)，因爲(wéi / wèi)微信提供有測試号的(de)沙盒環境，因此，具有個(gè)人(rén)微信号在(zài)開發階段也(yě)是(shì)可行的(de)
3. (可選)公網web地(dì / de)址方便公網測試，但基于(yú)内網調試，可以(yǐ)形成調試閉環，但需要(yào / yāo)能夠訪問外網的(de)能力，因爲(wéi / wèi)要(yào / yāo)訪問微信。

2，JS-SDK接入說(shuō)明

先說(shuō)一下整體的(de)接入概要(yào / yāo)，讓整個(gè)框架有個(gè)思路

1. JS-SDK本質是(shì)通過js注入完成的(de)，爲(wéi / wèi)web頁面提供一些基于(yú)微信客戶端運行時(shí)的(de)便捷功能，比如：圖片上(shàng)傳、微信登錄、分享、地(dì / de)理位置、掃一掃、支付等，總的(de)來(lái)說(shuō)就(jiù)是(shì)面向手機底層的(de)一些應用。我們接入JS-SDK的(de)目的(de)就(jiù)是(shì)爲(wéi / wèi)了(le／liǎo)讓H5網頁，具有像"App"一樣的(de)功能。
2. JS-SDK中的(de)功能是(shì)受微信限制的(de)，這(zhè)裏JS-SDK的(de)功能方法，就(jiù)是(shì)微信文檔中的(de)“接口”，所有接口都是(shì)受微信管控的(de)，這(zhè)也(yě)能理解，比如像支付這(zhè)類，肯定就(jiù)需要(yào / yāo)與微信産生通訊聯系。這(zhè)裏的(de)“限制”是(shì)廣義的(de)，也(yě)包含一些無限制的(de)接口
3. 微信“限制”了(le／liǎo)接口，那是(shì)爲(wéi / wèi)了(le／liǎo)考慮用戶安全，需要(yào / yāo)在(zài)微信公衆賬号配置“JS安全域名”，配置了(le／liǎo)此域名，H5頁面才能接入JS-SDK，作爲(wéi / wèi)微信服務商也(yě)就(jiù)知道(dào)了(le／liǎo)你是(shì)誰，所以(yǐ)當H5被打開時(shí)，微信服務商知道(dào)“頁面的(de)提供者是(shì)誰(這(zhè)裏的(de)主體是(shì)公衆号)”，同時(shí)也(yě)知道(dào)是(shì)誰打開的(de)H5頁面(微信用戶)。基于(yú)這(zhè)點原理，微信端的(de)H5頁面打通了(le／liǎo)用戶與服務商标識的(de)通道(dào)，極大(dà)提升了(le／liǎo)便捷性。
4. 微信公衆号的(de)登錄邏輯，登錄是(shì)基于(yú)OAuth2的(de)第三方授權登錄邏輯來(lái)實現的(de)。,至于(yú)原理稍後再說(shuō)，這(zhè)裏隻需要(yào / yāo)注意一點，第三方授權登錄會重定向到(dào)公衆号H5頁面，不(bù)支持基于(yú)ajax的(de)方式

3，資源準備

本文隻是(shì)輔助教程，所以(yǐ)還是(shì)需要(yào / yāo)一些資源

• JS-SDK說(shuō)明文檔
• 微信公衆平台接口測試帳号申請
• web開發者工具
• 公網訪問内網方案：Frp輕松解決内網訪問方案

開始接入

前面說(shuō)了(le／liǎo)那麽多廢話，終于(yú)要(yào / yāo)看是(shì)實幹了(le／liǎo)。

本人(rén)前後端開發框架

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

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

在(zài)上(shàng)面的(de)連接地(dì / de)址中，下載web開發者工具，方便預覽

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

1. 安裝

npm install weixin-js-sdk --save # --save将依賴保存到(dào)package.json中

2. 初始化(這(zhè)裏是(shì)指初始化JS環境，不(bù)是(shì)初始化配置)

import wx from 'weixin-js-sdk';
//這(zhè)裏将wx重命名爲(wéi / wèi)wxmp的(de)全局變量，目的(de)是(shì)防止與uni-app等發生變量沖突。
window.wxmp = wx

這(zhè)裏說(shuō)明一下wxmp.config方法是(shì)JS-SDK的(de)功能初始化，其中涉及到(dào)AppId、加密算法、簽名等，所有config方法中的(de)參數我們是(shì)通過服務端獲取的(de)

第三步，初始化微信公衆賬号沙盒

點擊上(shàng)面的(de)微信公衆平台接口測試帳号申請進入沙盒申請

授權登錄後如下：

配置JS安全域名（重要(yào / yāo)、重要(yào / yāo)、重要(yào / yāo)）

由于(yú)沙盒環境，可以(yǐ)配置内網、localhost地(dì / de)址

第四步，後端接入微信公衆号，實現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是(shì)基于(yú)開源的(de)公衆号接入庫maven依賴如下:

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

3.配置WxMpService Bean

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

@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;
    }
}

第五步，前端調用配置接口初始化配置

獲取配置接口

其實這(zhè)沒啥好說(shuō)的(de)，但是(shì)有一點需要(yào / yāo)注意，那就(jiù)是(shì)獲取配置接口需要(yào / yāo)傳入url并且包含查詢參數

參考代碼:

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

這(zhè)裏順便啰嗦一下url組成

紅框中每個(gè)屬性自行理解，肯定是(shì)有差異的(de)。

js配置

wxmp.config({
  debug: true, // 開啓調試模式,調用的(de)所有api的(de)返回值會在(zài)客戶端alert出(chū)來(lái)，若要(yào / yāo)查看傳入的(de)參數，可以(yǐ)在(zài)pc端打開，參數信息會通過log打出(chū)，僅在(zài)pc端時(shí)才會打印。
  appId: '', // 必填，公衆号的(de)唯一标識
  timestamp: , // 必填，生成簽名的(de)時(shí)間戳
  nonceStr: '', // 必填，生成簽名的(de)随機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要(yào / yāo)使用的(de)JS接口列表
});

jsApiList,要(yào / yāo)用到(dào)的(de)wx方法都需要(yào / yāo)配置在(zài)這(zhè)裏面，字符串數組，方法名

第六步，确認

刷新頁面出(chū)現下面的(de)彈框說(shuō)明配置ok，如果報錯，根據錯誤碼在(zài)微信文檔去找