更新记录

1.3.3（2022-03-30）

去除依赖

1.3.2（2022-03-30）

完善文档

1.3.1（2022-03-30）

完善文档

平台兼容性

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

zetank-H5weixin

功能

1.基于uniapp的云开发，利用微信公众号的接口开发微信H5页面；该插件已集成好了微信公众号开发所需配置和方法，开箱即用，只需要配置好公众号的appid和appSecret；

2.该插件是依赖uni-id来存储用户数据和操作用户登录与注册，如果用户第一次登录，则在uni-id-users进行注册，并返回用户信息、openid等。

3.自动配置微信公众号js-SDK（官方文档），利用云函数在后端获取配置sdk所需的access_token和ticket，并在数据库进行缓存，使用的时候返回加密的signature；只需调用方法即可自动配置,然后通过sdk实现微信的接口操作（所有接口）。

4.实现设置微信H5页面分享样式

5.实现微信公众号模板消息发送

第一步安装与配置

1.安装uni-id插件 如果已安装uni-id,忽略此步骤。配置见uni-id配置

2.下载插件，如果提示js错误：Unexpected character '' (1:0),需要更新HBuilderX正式版请使用3.2.3。

3.在公共函数uni-config-center里面新增目录H5weixin，新增文件config.json，配置参数，同步公共函数，单独上传uni-config-center函数

{
    "appId": "微信公众号appId",
    "appSecret": "微信公众号appSecret",
    "agent":"反向代理网址，例如wxh5.zetank.com，具体说明见下面第二部微信公众号配置"
}

3.云函数（H5weixin、zetank-user-center）依赖公共函数uni-id和uni-config-center,上传云函数

4.上传database

第二部微信公众号配置

在公众号设置--功能设置页面，先设置好业务域名，JS接口安全域名，网页授权域名三个地方。 把公众号的appId和appSecret填在uni-config-center自己创建的H5weixin目录config.json配置中，并上传公共函数。 在开发--基本配置--IP白名单，设置白名单，用于获取access_token和ticket配置sdk（如果只调用微信登录，不调用sdk，可以不配置）。因为云函数的IP地址是变化的，所以获取ip目前采用反向代理，可以使用第三方的，也可以自己进行配置。

如果想要自己配置反向代理，手里也刚好有多余的服务器，可以自行百度进行配置，可参考公众号IP白名单配置。

如果不想自己配置反向代理，购买插件后可以添加微信获取免费的反向代理；

第三步插件使用

使用参考示例pages页

微信登录

1.页面引入js，这里需要用到条件编译引入，不然在小程序端会报错

// #ifdef H5
import wxH5 from "@/uni_modules/zetank-H5weixin/js_sdk/wxH5.js"
// #endif

2.调用wxH5LoginSep1方法，可以进行微信登录，目的是跳转到微信链接，获取微信用户的code；

async login(){
    let res =await wxH5.wxH5LoginSep1()
    console.log(res);
},

3.把wxH5LoginSep2方法放在页面onShow中，目的是自动获取微信返回的参数code，code通过云函数获取登录所需的openid和用户信息;获取openid和用户信息后可以自定义自己的登录注册方法。

async onShow() {
    // #ifdef H5
    if(wxH5.isWechat()){
        let showloading = true //显示登陆中
        let res = await wxH5.wxH5LoginSep2(showloading)
        //这里写登录后方法
    }
    // #endif
}

完整示例，可见pages中的示例

页面分享样式

1.页面引入js，调用wxH5.isWechat方法判断是否是微信浏览器环境；然后设置标题、副标题、图片参数和页面链接，调用wxH5.shareSet方法进行设置

async share(){
    if(wxH5.isWechat()){
        let imgurl = ''//图片链接
        let title = '标题'
        let desc = '副标题'
        let url = window.location.href
        await wxH5.shareSet(title,desc,imgurl,url)

    }
},

发送模板信息

1.在微信公众号申请模板信息后，调用wxH5.notice方法，需要传参：信息跳转链接、模板信息内容（参看微信模板）、模板id（公众号后台获取）、需要通知的所有openid（通过微信登录的用户）

async notice(){
    // #ifdef H5                
    let url = window.location.href.split('#')[0]
    let noticedata = {

    }
    let template_id = "CjyawW7siCW6MCy-bJ3wtcVss5ifYY_YaPJc3Kr-8z0"
    let allopenid = ['odC556Cq2f7FR-_2EJZhA0XhG83Q']
    let res = await wxH5.notice(allopenid,url,noticedata,template_id)
    console.log(res);
    if(res.result.success){
        uni.showLoading({
            title:"成功通知人数："+res.result.num,
            icon:'success',
            duration: 2000
        })
        setTimeout(()=>{
            uni.hideLoading()
        },2000)
    }

    // #endif
}

微信扫一扫

async scanQRCode(){
    let res = await wxH5.scanQRCode()
    console.log(res);
},

隐藏菜单分享按钮

async hideMenuItems(){
    let menuList= ["menuItem:share:appMessage","menuItem:share:timeline"]
    let res = await wxH5.hideMenuItems(menuList)
},

查看用户是否订阅公众号

1.调用subscribe方法，传入用户的openid即可；需要拿到用户openid后执行。

async subscribe(){
    let openid = uni.getStorageSync('openid')
    if(openid){
        // #ifdef H5
        let res = await wxH5.subscribe(openid)
        console.log(res);
        // #endif
    }else{
        uni.showModal({
            content:"请先登录"
        })
    }

}

其他接口自定义调用

可以自己调用微信公众号提供的接口（所有接口），调用其他接口需要先配置sdk

import wx from '@/uni_modules/zetank-H5weixin/js_sdk/jweixin-module/lib/index.js'
import wxH5 from "@/uni_modules/zetank-H5weixin/js_sdk/wxH5.js"

async getsdk(){
    let jsApiList=[]/* 放入需要调用的接口 */
    let config = await wxH5.getsdk(jsApiList)
    wx.config(config);
    wx.error(function(res) {
        console.log('JS-SDK配置出问题了', res)
    });

    wx.ready(function() {
        /* 执行接口 */
    });
}

方法列表

wxH5

注意与问题

1.配置公众号JS接口安全域名，不要带http

2.运行的时候如果提示错误：Unexpected character '' (1:0)，需要更新HBuilderX正式版请使用3.2.3

3.订阅号不支持，需要服务号；前期可以通过测试账号实现测试；

4.提示openid获取失败：如果公众号配置没问题，请检查登录前的页面链接参数是否携带了code，如果携带了code，将获取失败。

5.测试的时候，不能本地运行，需要打包上传后在微信开发者工具测试。