目錄

• 目標(biāo)
• uni-appH5接入JS-SDK
• • 接入說明
  • • 1，環(huán)境說明
    • 2，JS-SDK接入說明
    • 3，資源準(zhǔn)備
  • 開始接入
  • • 本人前后端開發(fā)框架
    • 第一步，下載web開發(fā)者工具
    • 第二步，uni-app安裝JS-SDK并初始化（前端）
    • 第三步，初始化微信公眾賬號沙盒
    • • 點擊上面的`微信公眾平臺接口測試帳號申請`進(jìn)入沙盒申請
      • 配置JS安全域名（重要、重要、重要）
    • 第四步，后端接入微信公眾號，實現(xiàn)wx.config配置參數(shù)(后端)
    • • 1. 提供jsSdkConfig接口(公共接口)
      • 2. 引入公眾號對接依賴
      • 3.配置WxMpService Bean
    • 第五步，前端調(diào)用配置接口初始化配置
    • • 獲取配置接口
      • js配置
    • 第六步，確認(rèn)

目標(biāo)

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

uni-appH5接入JS-SDK

接入說明

1，環(huán)境說明

1. vue版的uni-app環(huán)境，使用npm來管理uni-app具備更好的靈活性，不用限制在HBuilder上開發(fā)，如果不是用npm管理，那么需要在html中導(dǎo)入js
2. (可選)微信公眾號賬號，這不是必需的，因為微信提供有測試號的沙盒環(huán)境，因此，具有個人微信號在開發(fā)階段也是可行的
3. (可選)公網(wǎng)web地址方便公網(wǎng)測試，但基于內(nèi)網(wǎng)調(diào)試，可以形成調(diào)試閉環(huán)，但需要能夠訪問外網(wǎng)的能力，因為要訪問微信。

2，JS-SDK接入說明

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

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

3，資源準(zhǔn)備

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

• JS-SDK說明文檔
• 微信公眾平臺接口測試帳號申請
• web開發(fā)者工具
• 公網(wǎng)訪問內(nèi)網(wǎng)方案：Frp輕松解決內(nèi)網(wǎng)訪問方案

開始接入

前面說了那么多廢話，終于要看是實干了。

本人前后端開發(fā)框架

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

第一步，下載web開發(fā)者工具

在上面的連接地址中，下載web開發(fā)者工具，方便預(yù)覽

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

1. 安裝

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

2. 初始化(這里是指初始化JS環(huán)境，不是初始化配置)

import wx from 'weixin-js-sdk';
//這里將wx重命名為wxmp的全局變量，目的是防止與uni-app等發(fā)生變量沖突。
window.wxmp = wx

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

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

點擊上面的微信公眾平臺接口測試帳號申請進(jìn)入沙盒申請

授權(quán)登錄后如下：

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

由于沙盒環(huán)境，可以配置內(nèi)網(wǎng)、localhost地址

第四步，后端接入微信公眾號，實現(xiàn)wx.config配置參數(shù)(后端)

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包含查詢參數(shù)") @RequestParam("url") String url) throws WxErrorException {
        return RestObjectResponse.ok(wxMpService.createJsapiSignature(url));
    }
}

RestObjectResponse你應(yīng)該沒有，自行替換

2. 引入公眾號對接依賴

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

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

3.配置WxMpService Bean

我沒有用starter版，習(xí)慣自行配置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;
    }
}

第五步，前端調(diào)用配置接口初始化配置

獲取配置接口

其實這沒啥好說的，但是有一點需要注意，那就是獲取配置接口需要傳入url并且包含查詢參數(shù)

參考代碼:

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, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
  appId: '', // 必填，公眾號的唯一標(biāo)識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

jsApiList,要用到的wx方法都需要配置在這里面，字符串?dāng)?shù)組，方法名

第六步，確認(rèn)

刷新頁面出現(xiàn)下面的彈框說明配置ok，如果報錯，根據(jù)錯誤碼在微信文檔去找