# 微信公众号JSAPI

以下API需要vk-unicloud核心库版本 >= 2.16.0

# 介绍

微信公众号JSAPI是指微信公众平台面向网页开发者提供的基于微信内的网页API

网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

微信公众号文档地址 (opens new window)

从上面的文档开始开发需要写很多代码才能使用微信公众号JSAPI的能力,但基于vk框架的微信公众号JSAPI只需要几行代码即可实现。见 快速上手

# 配置文件

微信公众号JSAPI依赖微信公众号API的配置

打开 uniCloud/cloudfunctions/common/uni-config-center/uni-id/config.json 文件,配置里面的

"h5-weixin" 微信公众号

"h5-weixin": {
  "oauth": {
    "weixin": {
      "appid": "",
      "appsecret": ""
    }
  }
},
1
2
3
4
5
6
7
8

配置完需要上传 uni-config-center 这个公共模块才会生效

# 依赖的云函数

依赖云函数 user/pub/getWeiXinJsapiSign,文件路径:/router/service/user/pub/getWeiXinJsapiSign.js 如果没有这个云函数,请下载最新框架获取。

# 快速上手

以微信分享为例

App.vue 的 onLaunch 增加以下代码

onLaunch(options){
  // #ifdef H5
  uni.vk.h5.init(); // 此方法全局调用一次即可
  // #endif
}
1
2
3
4
5

同时在需要微信分享的页面的 onLoad 增加以下代码(不写在onLoad,写在其他能执行的方法里都可以)

onLoad(options) {
  // 获得wx实例
  let wx = vk.h5.getWeiXinJsApi();
  // 修改自定义“转发给朋友”按钮的分享内容(注意:微信公众号不支持调用API直接分享,执行此API后依然需要点右上角三个点,点击“转发给朋友”)
  wx.updateAppMessageShareData({
    title: "分享给好友的标题", // 分享标题
    desc: "分享给好友的描述", // 分享描述
    link:  window.location.href, // 分享链接地址
    imgUrl: "https://www.xxx.com/a.jpg" // 分享图片url地址
  });
  // 修改自定义“分享到朋友圈”按钮的分享内容(注意:微信公众号不支持调用API直接分享,执行此API后依然需要点右上角三个点,点击“分享到朋友圈”)
  wx.updateTimelineShareData({
    title: "分享到朋友圈的标题", // 分享标题
    link:  window.location.href, // 分享链接地址
    imgUrl: "https://www.xxx.com/a.jpg" // 分享图片url地址
  });
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

完成,就是这么简单,同时为了方便同时设置“转发给朋友”和“分享到朋友圈”,vk框架新增了一个聚合API vk.h5.updateShareData

onLoad(options) {
  // 修改自定义“转发给朋友”、“分享到朋友圈”按钮的分享内容(注意:微信公众号不支持调用API直接分享,执行此API后依然需要点右上角三个点,点击“转发给朋友”或“分享到朋友圈”)
  vk.h5.updateShareData({
    title: "分享标题", // 分享标题
    desc: "分享描述", // 分享描述,仅“转发给朋友”时有效
    link:  window.location.href, // 分享链接地址
    imgUrl: "https://www.xxx.com/a.jpg" // 分享图片url地址
  });
},
1
2
3
4
5
6
7
8
9

再举一个执行打开微信扫一扫的API示例

在需要执行打开微信扫一扫的时候,编写以下代码(注意:需要先在 App.vue 的 onLaunch 执行 vk.h5.init();

// 获得wx实例
let wx = vk.h5.getWeiXinJsApi();
wx.scanQRCode({
  needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
  success: (res) => {
    let result = res.resultStr; // 当 needResult 为 1 时,扫码返回的结果
  }
});
1
2
3
4
5
6
7
8
9

完成,就是这么简单,总结以下一共3句代码

  1. App.vue 的 onLaunch 执行 uni.vk.h5.init();
  2. 执行 let wx = vk.h5.getWeiXinJsApi(); 获得 wx 实例
  3. 执行 wx.xxx 可直接调用微信公众号JS-SDK的API JS-SDK文档 (opens new window)

至于token获取,jsapi_ticket获取,页面签名等等各种繁琐的步骤再也不用管了,直接通过 wx.xxx 调用即可。

# 多公众号调用

只需要修改第一步 App.vue 的 onLaunch 的代码如下

其中 appid 前端传,而 appsecret 在云函数 user/pub/getWeiXinJsapiSign 里通过 appid 获取

onLaunch(options){
  // #ifdef H5
  uni.vk.userCenter.getWeiXinJsapiSign({
    data: {
      appid: "你的公众号appid"
    },
    success: (data) => {
      uni.vk.h5.init({
        ...data.config,
        debug: false
      });
    }
  });
  // #endif
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15