基于大家对"漫话开发者"前面的微信支付x低代码、微信小程序消息推送x低代码等系列文章的关注,最近也有同学问到公众号相关的问题,今天就简单介绍下低代码开发的H5应用如何调用微信公众号的能力,目前的方式主要有如下两种,大家可按需选取适用方案。
该方案基于微信云开发能力来完成,可以不依赖自建服务器以及实现任何后端逻辑代码,完成微信公众号接口能力的鉴权流程。
注:如果发现微信IDE中的”云开发“入口置灰,一般情况下是由于当前小程序已经授权给其他服务商所致,需要到对应服务商控制台解绑当前的小程序,再回到微信IDE重新登录即可。
appid
)
完成上述准备工作之后,接下来的工作就比较简单了,如果只是调用常规的公众号能力,比如分享朋友圈/获取网络信息 等JSAPI能力,则完成下述步骤即可。
2.1 调用微信公众号的基础JSAPI能力
首先,选择需要调用微信能力的页面,打开代码编辑器 加入对应的初始化代码。
然后,在对应页面的lifecycle
文件中,配置如下初始化代码:
const res = await cloud.getJSSDKSignature({
url: '要签名的网页 URL' // 一般为当前URL地址
})
wx.config({
appId: '公众号 AppID', // 必填,公众号的唯一标识
timestamp: res.timestamp + '', // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名
jsApiList: ['JS API 名'] // 必填,需要使用的 JS 接口列表
})
最后,在相应页面节点加上响应事件的调用方法。如期望通过点击某按钮来获取当前网络信息,则在按钮增加点击事件的自定义方法,将微信开放的JSSDK调用方法复制到自定义代码函数体中即可,如:
export default function({event, data}) {
wx.getNetworkType({
success: function (res) {
var networkType = res.networkType; // 返回网络类型2g,3g,4g,wifi
alert(networkType);
console.log({networkType});
},
fail: function (res) {
console.log("wx api getNetworkType failed")
console.log({res})
}
});
}
更多微信开放JSSDK方法,可参考微信公众号前端JSSDK汇总
2.2 在公众号中调用云开发WebSDK
使用微信云开发环境还有一个优势,即可在网页中直接调用微信云开发的云存储、云函数以及云数据库等常用后端基础能力。可通过如下初始化方式来获得授权的小程序的云环境的操作实例,然后进行调用,如调用云开发的云函数示例如下:
// 声明新的 cloud 实例
var c1 = new cloud.Cloud({
// 必填,表示是未登录模式
identityless: true,
// 资源方 AppID
resourceAppid: 'wxe0e2656d74f0bff3',
// 资源方环境 ID
resourceEnv: 'test-f96b31',
})
// 跨账号调用,必须等待 init 完成
// init 过程中,资源方小程序对应环境下的 cloudbase_auth 函数会被调用,并需返回协议字段(见下)来确认允许访问、访问时长以及可自定义安全规则
await c1.init()
// 完成后正常使用资源方的已授权的云资源
c1.callFunction({
name: '云函数名xxx',
data: {},
complete: console.warn,
})
除云函数以外,更多微信云开发SDK可参考:微信云开发JSSDK汇总
另外关于在公众号中如何使用云开发,还有更多玩法在此不再赘述,可参考文档:在公众号中使用云开发
最后,附上作者基于云开发环境搭建的H5调用公众号能力示例(可将相应页面代码部署到微搭低代码环境中即可):公众号能力调用Demo
该方案需要基于自己搭建后端服务,以及开发的微信公众号的签名鉴权等API。
对于很多个人公众号/订阅号来说,因为无法使用云开发的公众号免鉴权能力,只能用当前的第二个备选方案了,即自行开发公众号API。
好在实现公众号的jsconfig签名的方案有很多,主流的主要两种,其一是相对成熟的三方库,比如流行的有基于Laravel的laravel-wechat微信SDK,其次就是对于简单的能力调用来说,只需要完成签名部分开发即可,相对代码也比较简单,下面我们还是以PHP作为后端语言展开做简要说明。
2.1 开发微信公众号的签名API
首先,获取公众号appid,secret,同时在公众号后台配置服务器IP进入白名单。
其次,代码部分基于Laravel框架实现,可选使用Redis作为缓存服务(用于缓存微信access_token和tickets等,微信有请求次数限制),关键代码如下:
//获取access_token
public function getAccessToken() {
$access_token = Redis::get("weixin_access_token_".$this->appid);//存入redis,这里要结合自己的项目,对redis或者memcahe进行设置
if(!$access_token){
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".$this->secret;
$data = json_decode($this->httpGet($url), true);
if(isset($data['access_token']) && $data['access_token'] != ''){
Redis::setex("weixin_access_token_".$this->appid, 7200, $data['access_token']);
$access_token = $data['access_token'];
}else{
Log::error('API getAccessToken failed');
return false;
}
}
return $access_token;
}
//用第一步拿到的access_token 用http请求获得jsapi_ticket
public function getJsApiTicket($isAPI = false) {
$jsapi_ticket = Redis::get("weixin_jsapi_ticket_".$this->appid);
if(!$jsapi_ticket){
$access_token = $this->getAccessToken();
if($access_token){
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
$data = json_decode($this->httpGet($url), true);
if(isset($data['errcode']) && $data['errcode'] == 0){//请求成功
Redis::setex("weixin_jsapi_ticket_".$this->appid, 7200, $data['ticket']);
// $this->redis->set("weixin_jsapi_ticket",$data['ticket'],7200);
$jsapi_ticket=$data['ticket'];
}else{
Log::error('API getJsApiTicket failed');
return false;
}
}else{
Log::error('getToken failed in getJsApiTicket ');
return false;
}
}
Log::info('jsapi_ticket: '.$jsapi_ticket);
if($isAPI) {
return response()->json(array('errorCode'=>22000,'data'=>$jsapi_ticket, 'msg'=>'ok'));
}
else {
return $jsapi_ticket;
}
}
//获取signature
public function genSignature($url) {
$jsapi_ticket = $this->getJsApiTicket();
$timestamp = time();
$nonceStr = $this->createNonceStr();
$signature = '';
if($jsapi_ticket) {
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapi_ticket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);//对string1进行sha1签名,得到signature
}else{
Log::error('jsapiTicket failed in genSignature');
return false;
}
$signPackage = array(
"appId" => $this->appid,
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}
其余的Curl
和createNonceStr
辅助函数参考如下,可按需实现,包括上述的Redis部分也可跳过或使用文件方式做缓存:
public function createNonceStr($length = 16) {
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
$str = "";
for ($i = 0; $i < $length; $i++) {
$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
return $str;
}
public function httpGet($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_TIMEOUT, 500);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_URL, $url);
$res = curl_exec($curl);
curl_close($curl);
return $res;
}
最后,在对应页面的lifecycle
文件中,配置如下初始化代码,其余的页面事件响应部分与方案一相似,这里就先略去了。
const WX_REDIRECT_URI = location.href /* 回调 URL */
let sign_url = `https://weda.xxx.com/wxoffice/sign?url=${WX_REDIRECT_URI}`;
let signConfig = {};
await fetch(sign_url)
.then((response) => response.json())
.then((data) => {
console.log(`jssdk sign res: ${JSON.stringify(data)}`)
signConfig = data.data; // callback("success");
})
.catch((error) => log({ error })); // callback("failed");
const configOpt = {
...signConfig,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'hideMenuItems',
'showMenuItems',
'translateVoice',
'startRecord',
'stopRecord'
] // 必填,需要使用的 JS 接口列表
}
console.log(`wx.config opt ${JSON.stringify(configOpt)}`)
wx.config(configOpt)
在微搭低代码中完成应用发布之后,可在微信中打开如下链接体验:微搭H5调用公众号示例页
到此,基于微搭低代码调用公众号能力的两种方案都介绍完了,有开通服务号的小伙伴可以试试方案一微信云开发方案,没有的话也可以试一下自定义代码的方案。如果有希望看详细视频教程的朋友也可以在漫话开发者公众号留言,我们会按需在后续补充手把手视频教程。
春节后开工的第一篇文章,祝大家新年快乐,enjoy~
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。