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

目标

完成基于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.con