公众号开发:实现自定义分享功能

news/2024/7/10 23:49:40 标签: javascript, 前端, es6

公众号开发:自定义分享功能的实现,参考微信公众号开发文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

一、绑定域名,引入js文件
将网站域名添加到公众号js接口安全域名中,引入js文件:
https://res.wx.qq.com/open/js/jweixin-1.6.0.js

二、前端js中注入配置信息

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

这里面有5个参数: appId、timestamp、nonceStr、signature、jsApiList。

其中, appId是公众号的id,timestamp是时间戳,很容易获取。

jsApiList是初始化的功能,可以把所有的功能都写上去。

jsApiList: [
                  'onMenuShareTimeline',
                  'onMenuShareAppMessage',
                  'hideAllNonBaseMenuItem',
                  'chooseImage',
                  'showMenuItems',
                  'hideMenuItems',
                  'translateVoice',
                  'updateAppMessageShareData',
                  'updateTimelineShareData',
                  ] 

而nonceStr是一个16位的随机字符串。以下是生成16位的随机字符串:

 $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
       $str = "";
        for ($i = 0; $i < 16; $i++) {
              $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
            }
       $nonceStr=$str;

重点来了,signature这个参数要怎样获取呢?

三、获取signature
如何获取signature,这是最大的难点。按照文档上说,
签名算法signature的格式为:

signature=”jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value“;

$signature=sha1($signature);

其中,jsapi_ticket是临时票据,url是当前网页地址(注意:是带全部参数的详细地址!!!)

$url = 'https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];

那么怎样获取jsapi_ticket呢?按照文档上的说明:
先获取access_token,再用http GET方式请求获得jsapi_ticket。请求的URL地址为:
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

总结
$signature获取这一块非常坑,需要一点点的排查,所需的参数全都不能有错。


http://www.niftyadmin.cn/n/875464.html

相关文章

canvas生成海报toDataUrl报错,解决方案

微信公众号H5页面&#xff0c;生成带参数二维码海报的思路。 一、生成带参数二维码 使用插件phpqrcode&#xff0c;这个功能在之前的文章中有记录。不在赘述。 二、生成canvas画布 先将海报内容通过cavans画出来。再将canvas图片利用toDataUrl转换为Base64编码。然后&#xf…

错误:网络请求错误:request:fail -2

错误原因&#xff1a;SSL证书配置错误 在配置SSL证书时&#xff0c;pem文件有两段密钥&#xff0c;需要将两段密钥全部复制粘贴。如果缺少后面一段&#xff0c;就会出现&#xff1a;网络请求错误:request:fail -2。解决方法&#xff1a;将两段密钥全部复制&#xff0c;然后重启…

你在休息,钱在工作_富爸爸_新浪博客

▲三项炼金术—-理财学习理论篇&#xff01; 如何将300元变成100万元呢&#xff1f;这个看似“白日做梦”的想法&#xff0c;通过投资理财你完全可以实现。 我们耳熟能详的亿万富翁&#xff0c;无一不是精明的投资家&#xff0c;如股神巴菲特、金融炼金师索罗斯等&#xff0c;不…

uni-app中scroll-view隐藏滚动条

在App.vue的style代码部分加入&#xff1a; ::-webkit-scrollbar{display: none;}即可完美解决。

js验证邮箱格式、手机格式,适用于uni-app

用js判断邮箱格式&#xff0c;适用于uni-app var reg /^([a-zA-Z]|[0-9])(\w|\-)[a-zA-Z0-9]\.([a-zA-Z]{2,4})$/; if(!reg.test(this.email)){uni.showToast({title:"邮箱格式不正确",icon:"none"});return false; }判断手机格式 var myreg/^[1][3,4,5,…

宝塔面板中thinkphp6.0配置redis

1、安装redis 确认redis已经安装。在宝塔面板->软件商店中找到redis&#xff0c;确认其已经安装。 2、安装redis扩展 在宝塔面板->软件商店中找到&#xff1a;PHP版本->设置->安装扩展->redis扩展,选择安装即可。 3、配置redis 在config->cache.php中&a…

thinkphp6.0中使用中间件

1、创建中间件文件 在app->common中新建middleware文件夹&#xff0c;在此文件夹下面新建中间件类:Auth.php,代码如下&#xff1a; <?php namespace app\common\middleware; class Auth {public function handle($request,\Closure $next){halt(ceshi); return …

thinkphp6.0使用内置的验证码

一、引入模块 使用composer安装 composer require topthink/think-captcha二、前端引用 在验证码模块的helper.php文件中&#xff0c;修改验证码样式&#xff1a; function captcha_img($width,$height,$id , $domid ): string {$src captcha_src($id);$domid empty($d…