首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信公众号x低代码,微搭公众号应用开发快速上手教程

微信公众号x低代码,微搭公众号应用开发快速上手教程

原创
作者头像
漫话开发者
发布2023-01-28 22:05:15
2K0
发布2023-01-28 22:05:15
举报
文章被收录于专栏:漫话低代码漫话低代码
来源:基于Stable-Diffusion AI模型生成
来源:基于Stable-Diffusion AI模型生成

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

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

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

  • 优势,如已开通微信云开发环境,整体流程操作相对简单,且不需要单独代码实现
  • 不足,公众号必须具备企业资质的服务号,不支持个人订阅号
1 准备工作
  • 开通企业主体的小程序,同时在该主体下,有通过已认证的公众号
  • 开通一个微信云开发环境(用上述小程序在微信IDE开通云开发环境即可)

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

  • 在微信IDE中完成云开发环境的共享设置(即将新开通云开发环境共享给对应公众号appid
    image.png
    image.png
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&timestamp=$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; 
    }  

其余的CurlcreateNonceStr辅助函数参考如下,可按需实现,包括上述的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~


原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、基于云开发环境调用公众号能力
    • 1 准备工作
      • 2 操作步骤
      • 二、基于自行开发的签名API调用公众号能力
        • 1 准备工作
          • 2 操作步骤
            • 2.2 示例体验
            • 三、最后
            相关产品与服务
            云开发 CloudBase
            云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档