基于大家对"漫话开发者"前面的微信支付x低代码、微信小程序消息推送x低代码等系列文章的关注，最近也有同学问到公众号相关的问题，今天就简单介绍下低代码开发的H5应用如何调用微信公众号的能力，目前的方式主要有如下两种，大家可按需选取适用方案。

【资料图】

一、基于云开发环境调用公众号能力

该方案基于微信云开发能力来完成，可以不依赖自建服务器以及实现任何后端逻辑代码，完成微信公众号接口能力的鉴权流程。

优势，如已开通微信云开发环境，整体流程操作相对简单，且不需要单独代码实现不足，公众号必须具备企业资质的服务号，不支持个人订阅号

1 准备工作

开通企业主体的小程序，同时在该主体下，有通过已认证的公众号 开通一个微信云开发环境（用上述小程序在微信IDE开通云开发环境即可）

注：如果发现微信IDE中的”云开发“入口置灰，一般情况下是由于当前小程序已经授权给其他服务商所致，需要到对应服务商控制台解绑当前的小程序，再回到微信IDE重新登录即可。

在微信IDE中完成云开发环境的共享设置（即将新开通云开发环境共享给对应公众号appid）

2 操作步骤

完成上述准备工作之后，接下来的工作就比较简单了，如果只是调用常规的公众号能力，比如分享朋友圈/获取网络信息 等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。

优势，可以是任意类型的订阅号，个人和企业资质均可。不足，需要有公网服务器并且具备后端服务语言的开发能力（如PHP，Java等）

1 准备工作

需具备一定开发能力以及独立的服务器域名，熟悉至少一种服务端语言（如PHP/Java等均有官方示例）需开通一个微信订阅号，个人或企业均可完成公众号的js安全域名设置：登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

2 操作步骤

对于很多个人公众号/订阅号来说，因为无法使用云开发的公众号免鉴权能力，只能用当前的第二个备选方案了，即自行开发公众号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)

复制

2.2 示例体验

在微搭低代码中完成应用发布之后，可在微信中打开如下链接体验：微搭H5调用公众号示例页

三、最后

到此，基于微搭低代码调用公众号能力的两种方案都介绍完了，有开通服务号的小伙伴可以试试方案一微信云开发方案，没有的话也可以试一下自定义代码的方案。如果有希望看详细视频教程的朋友也可以在漫话开发者公众号留言，我们会按需在后续补充手把手视频教程。

春节后开工的第一篇文章，祝大家新年快乐，enjoy~