uni-app微信公众号web JS-SDK开发之一接入

uni-app H5接入微信JS-SDK

最新推荐文章于 2025-10-09 17:44:43 发布

原创最新推荐文章于 2025-10-09 17:44:43 发布 · 3k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#jssdk #uni-app

开发实践同时被 2 个专栏收录

8 篇文章

订阅专栏

公众号开发

2 篇文章

订阅专栏

目标

完成基于uni-app H5平台上微信公众号JS-SDK的接入

uni-appH5接入JS-SDK

接入说明

1，环境说明

vue版的uni-app环境，使用npm来管理uni-app具备更好的灵活性，不用限制在HBuilder上开发，如果不是用npm管理，那么需要在html中导入js
(可选)微信公众号账号，这不是必需的，因为微信提供有测试号的沙盒环境，因此，具有个人微信号在开发阶段也是可行的
(可选)公网web地址方便公网测试，但基于内网调试，可以形成调试闭环，但需要能够访问外网的能力，因为要访问微信。

2，JS-SDK接入说明

先说一下整体的接入概要，让整个框架有个思路

JS-SDK本质是通过js注入完成的，为web页面提供一些基于微信客户端运行时的便捷功能，比如：图片上传、微信登录、分享、地理位置、扫一扫、支付等，总的来说就是面向手机底层的一些应用。我们接入JS-SDK的目的就是为了让H5网页，具有像"App"一样的功能。
JS-SDK中的功能是受微信限制的，这里JS-SDK的功能方法，就是微信文档中的“接口”，所有接口都是受微信管控的，这也能理解，比如像支付这类，肯定就需要与微信产生通讯联系。这里的“限制”是广义的，也包含一些无限制的接口
微信“限制”了接口，那是为了考虑用户安全，需要在微信公众账号配置“JS安全域名”，配置了此域名，H5页面才能接入JS-SDK，作为微信服务商也就知道了你是谁，所以当H5被打开时，微信服务商知道“页面的提供者是谁(这里的主体是公众号)”，同时也知道是谁打开的H5页面(微信用户)。基于这点原理，微信端的H5页面打通了用户与服务商标识的通道，极大提升了便捷性。
微信公众号的登录逻辑，登录是基于OAuth2的第三方授权登录逻辑来实现的。,至于原理稍后再说，这里只需要注意一点，第三方授权登录会重定向到公众号H5页面，不支持基于ajax的方式

3，资源准备

本文只是辅助教程，所以还是需要一些资源

开始接入

前面说了那么多废话，终于要看是实干了。

本人前后端开发框架

前端uni-app
后端maven、Spring Boot

第一步，下载web开发者工具

在上面的连接地址中，下载web开发者工具，方便预览

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

安装

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

初始化(这里是指初始化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接口列表
});