js使用微信分享功能

news/2024/7/19 15:08:17 标签: js, 分享, 微信分享

在使用微信分享(包括微信api里的其他方法)之前,需要有一些准备、比如要准备 appId、timestamp、nonceStr、signature 这四个数据,只有在有这四个字段后,我们才可以去使用微信的一些方法和功能,
但这些东西是不能写死的,得是活的,所以就麻烦后端同学配合了一下,将数据帮忙生成了一下,但在调研阶段还是使用的手动生成,生成后他把得到的这几个字段发给我,我拿到后放到对应的位置就可以了。但是在开发的时候,这个就要改成一个接口,通过ajax给我返回这些我需要的数据,当接口返回的数据被放到下面代码中放的字段位置后,如果不报错,就说明是ok的了。

准备工作代码:

js"> wx.config({
         debug: false, // 为true时,就是调试模式,会弹出一些信息,正确、错误都会弹。
         appId: ''xxxxxxxxx'', // 必填,公众号的唯一标识
         timestamp: ''1537372373'', // 必填,生成签名的时间戳
         nonceStr: ''sjwufnskfnskjfhjksfkjsfkjshfwk'', // 必填,生成签名的随机串
         signature: " 1ejsjsdjffklj0dj3uds3h3e",// 必填,签名,
         // 必填,把要使用的方法名放到这个数组中。
         jsApiList: [
               'onMenuShareTimeline',
               'onMenuShareAppMessage',
               'onMenuShareQQ',
               'onMenuShareQZone'
         ]
 });

这里需要注意的是,signature这个字段一定要生成正确,不然的话,就会报signature无效,就没法使用微信方法了,这个签名的生成需要根据当前页面url去生成,所以,一定要保证url的正确。

微信分享开放的几个方法有:分享给朋友、分享到朋友圈、分享到QQ、分享到QQ空间这四个方法,其他的暂时没有开放。

如何自定义分享内容呢?

js">wx.ready(function(){
     wx.checkJsApi({
              jsApiList: [
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareQZone'
              ],
              success: function (res) { 
                        // alert(JSON.stringify(res));
              }
      });
}

这里是校验jsApiList的,如果可以使用,就会弹出xxxx:true这种提示,说明是可以使用这些方法的。

js"> // 分享到朋友圈
wx.onMenuShareTimeline({
         title:"宏远时代体育", // 分享标题
         link:'', // 分享链接
         imgUrl:"xxxxxxxxx",
         success: function (res) {
         },
         cancel: function (res) {
         },
         fail: function (res) {
             // alert(JSON.stringify(res));
         }
 });
js">// 分享给朋友
wx.onMenuShareAppMessage({
        title:"宏远时代体育", // 分享标题
        desc:'第一届SuperBA宏超篮球联赛,快来关注吧!', // 分享描述
        link:'', // 分享链接
        imgUrl: "xxxxxxxxxxxxxxx", // 分享图标
        type: '', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () {
                // 用户确认分享后执行的回调函数
        },
       cancel: function () {
             // 用户取消分享后执行的回调函数
       }
});
js"> // 分享到QQ
wx.onMenuShareQQ({
          title: "宏远时代体育", // 分享标题
          desc: '第一届SuperBA宏超篮球联赛,快来关注吧!', // 分享描述
          link: '', // 分享链接
          imgUrl: "xxxxxxxxxxxxxxx", // 分享图标
          success: function () {
               // 用户确认分享后执行的回调函数
          },
         cancel: function () {
              // 用户取消分享后执行的回调函数
        }
  });
js"> // 分享到QQ空间
wx.onMenuShareQZone({
           title: "宏远时代体育", // 分享标题
           desc: '第一届SuperBA宏超篮球联赛,快来关注吧!', // 分享描述
           link: '', // 分享链接
           imgUrl: "xxxxxxxxxxxxxxx", // 分享图标
           success: function () {
                 // 用户确认分享后执行的回调函数
           },
           cancel: function () {
                 // 用户取消分享后执行的回调函数
           }
  });

以上四个就是目前微信开放的几个分享方法,都有一个共同点,就是可以自定义title、图片等字段,区别是分享给朋友、qq、qq空间的时候,可以自定义分享描述,但是分享到朋友圈是没有这个字段的, 这个没有自定义分享的链接,因为分享的就是当前页面,如果写了自定义链接以后,就无法二次分享了,因为这个链接写死的话,分享出去的地址,微信会默认增加参数,分别是fom(分享到哪里)和isappinstalled(代表用户是否安装了app)。

除了签名那块的问题之外,需要注意的几个问题:
1、苹果手机分享出去的时候,是有isappinstalled参数的,但是安卓手机分享出去,就只有form字段,没有isappinstalled字段的。
这个问题是因为我们有个需求,就是要区分是不是分享出去的链接,如果是,就显示个东西,当时开发测试时,只用了苹果手机去测,所以链接里面是两个参数都有,写了个判断就是有form并且有isappinstalled,后来在安卓上测试时,并没有执行这个判断里要执行的程序,就看了一下分享链接,果然没有isappinstalled,所以以后使用的时候要注意一下这一点。
2、分享到qq的时候,有时候是不会有自定义的图片的,他会默认去显示该公众号的二维码,这里也需要注意下。
3、一定要注意的是,微信公众号一定一定要配置js安全域名,否则分享是有问题的。比如自定义的一些内容无法显示。


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

相关文章

DB2中不同于其它数据库的操作

一、两个字段联接<br>select ID,LASTNAME||FIRSTNAME from T_EMPLOYEE DB2中用“||”来将两个字段联接起来注意&#xff1a;不同于其它数据库中用""来将两个字段联接起来<br><br>二、查出前几条记录如SQLSERVER中的TOP select * from T_EMPLOY…

学习笔记--(平衡树)splay

坑爹的splay,毁我青春,耗我钱财,颓我精力是一种用于保存有序集合的简单高效的数据结构。伸展树实质上是一个二叉查找树。允许查找&#xff0c;插入&#xff0c;删除&#xff0c;删除最小&#xff0c;删除最大&#xff0c;分割&#xff0c;合并等许多操作&#xff0c;这些操作的…

火狐浏览器刷新之后表单会保留上一次选择项兼容性问题解决方案

在进行项目开发中&#xff0c;发现一些筛选条件&#xff0c;上一次选中后&#xff0c;刷新页面仍然存在。 页面上的数据仍然是上一次表单中的数据&#xff0c;其实是很火狐浏览器的兼容性造成的。 解决方案&#xff1a; 只需要加上 autocomplete“off” 就可以了。 <input…

多表查询一例子

四张表 T_ORGANIZATION T_EMPLOYEE_ROLE T_ROLE T_EMPLOYEE T_EMPLOYEE --------------- ID 员工编号 FIRSTNAME 用户名 LASTNAME 用户名 T_ORGANIZATION --------------- ID PARENT_ID NAME DESCR 组织全称 T_ROLE --------------- ID NAME 角色名称 DESCR T_EMPL…

oracleXE(oracle学习版)在windows的安装配置

oracleXE其实安装基本就是一路下一步. 在安装前记得先把tomcat打开,不然oracleXE会占用8080端口且安装过程无法更改端口. 如果需要远程连接此oracle XE的话,要关闭这台电脑的防火墙 1.打开setup等一会,出现一下画面 下一步 接受,下一步 看安装位置要不要更改,最好指向一个空文件…

js使用微信上传图片功能

在说上传图片之前&#xff0c;先说一下准备工作&#xff0c;其实在上一篇微信分享功能那篇文章已经说过了&#xff0c;就是使用wx.config里面去把appId、timestamp、nonceStr、signature这四个参数的值给加上&#xff0c;这些准备工作跟分享是一样的&#xff0c;微信目前开放的…

批剃度下降算法 Batch Gradient Descent Algorithm

名词解释 batch 指的是每一次迭代计算参数的时候都是对整个样本进行遍历 计算流程 对于样本数量为m个的训练集 首先初始化参数值(对于有多个局部极值local optimum的问题 不同的初始化值会得到不同的局部极值) 即令每一个θ都为某一个值 然后利用公式 h是预测值 y是样本输出值 …

将A表和B表的产生的笛卡尔积一次性插入C表

A表一个字段&#xff0c;B表一个字段&#xff0c;C表两个字段是A表和B表的&#xff0c;将A表和B表的产生的笛卡尔积一次性插入C表 insert into c select * from a,b