目錄

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

目標(biāo)

完成基于uni-app H5平臺(tái)上微信公眾號(hào)JS-SDK的接入

uni-appH5接入JS-SDK

接入說(shuō)明

1，ç’°(huán)境說(shuō)明

1. vue版的uni-appç’°(huán)境，使用npm來(lái)管理uni-app具備更好的靈活性，不用限制在HBuilder上開(kāi)發(fā)，如果不是用npm管理，那么需要在html中導(dÇŽo)å…¥js
2. (可選)微信公眾號(hào)賬號(hào)，這不是必需的，å› ?yàn)槲⑿盘峁┯袦y(cè)試號(hào)的沙盒環(huán)境，å› æ­¤，具有個(gè)人微信號(hào)在開(kāi)發(fā)階段也是可行的
3. (可選)公網(wÇŽng)web地址方便公網(wÇŽng)測(cè)試，但基于內(nèi)網(wÇŽng)調(diào)試，可以形成調(diào)試閉環(huán)，但需要能夠訪問(wèn)外網(wÇŽng)的能力，å› ?yàn)橐L問(wèn)微信。

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

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

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

3，資源準(zhÇ”n)å‚™

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

• JS-SDK說(shuō)明文檔
• 微信公眾平臺(tái)接口測(cè)試帳號(hào)申請(qǐng)
• webé–‹(kāi)發(fā)者工具
• 公網(wÇŽng)訪問(wèn)å…§(nèi)網(wÇŽng)方案：Frp輕松解決內(nèi)網(wÇŽng)訪問(wèn)方案

開(kāi)始接入

前面說(shuō)了那么多廢話，終于要看是實(shí)干了。

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

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

第一步，下載webé–‹(kāi)發(fā)者工具

在上面的連接地址中，下載webé–‹(kāi)發(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

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

第三步，初始化微信公眾賬號(hào)沙盒

點(diÇŽn)擊上面的微信公眾平臺(tái)接口測(cè)試帳號(hào)申請(qǐng)進(jìn)入沙盒申請(qǐng)

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

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

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

第四步，后端接入微信公眾號(hào)，實(shí)現(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)該沒(méi)有，自行替換

2. 引入公眾號(hào)對(duì)接依賴

WxMpService是基于開(kāi)源的公眾號(hào)接入庫(kù)maven依賴如下:

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

3.配置WxMpService Bean

我沒(méi)有用starter版，ç¿’(xí)慣自行配置bean，這樣更靈活

@Configuration
public class WxConfiguration {
    /**
     * 微信公眾號(hào)配置
     * @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)用配置接口初始化配置

獲取配置接口

其實(shí)這沒(méi)啥好說(shuō)çš„，但是有一點(diÇŽn)需要注意，那就是獲取配置接口需要傳入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組成

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

js配置

wxmp.config({
  debug: true, // é–‹(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
  appId: '', // å¿…å¡«，公眾號(hào)的唯一標(biāo)è­˜(shí)
  timestamp: , // å¿…å¡«，生成簽名的時(shí)間戳
  nonceStr: '', // å¿…å¡«，生成簽名的隨機(jÄ«)串
  signature: '',// å¿…å¡«，簽名
  jsApiList: [] // å¿…å¡«，需要使用的JS接口列表
});

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

第六步，確認(rèn)

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