自定义微信浏览器分享卡片和朋友圈内容

首先 :小编恭喜你已经掉入uniapp的坑,你是别想爬出去了,那是不可能的!!!

大家都被uniapp的“一套代码,适用多个平台”所吸引,但是都是成年人,天底下有那么好的事情吗?是没有的。

 

  但是今天小编给大家带来的“自定义微信分享卡片内容”是一个在微信开发中常用到的功能,自然uniapp也是会有的,下面就听小编来说:

    uniapp官方并没有特别指出微信分享卡片和分享朋友圈的功能,但是好在微信团队的给力,给我们提供了方法,我们只需要调用此方法就可以了。

   -----在 uniapp 中可以使用模块方式引用微信 js-sdk ,微信官网直接下载的使用有问题,可以使用 jweixin-module

  

安装

- NPM安装方式(不会用NPM就不要用这种方式)

复制代码npm install jweixin-module --save

- 下载使用方式

下载地址:https://unpkg.com/jweixin-module@1.6.0/lib/index.js

使用

复制代码var jweixin = require(‘jweixin-module‘)  
jweixin.ready(function(){  
    // TODO  
});

完整API

  微信JS-SDK说明文档

 

接下来是具体的使用方法:

  前面的一系列操作完成后引入对应的组件,或者引入到main.js里。

1、首先咱们还是得获取微信分享的四要素:appId, nonceStr, signature, timestamp(具体意思请到微信官网查询),一般是通过接口,有后端提供。

2、就要通过jweixin的方法进行分享了,具体的代码:

let { appId, nonceStr, signature, timestamp } = res
        let title = this.shareTitle
        let imgUrl = this.shareImage
        let desc = this.shareSubtitle
        let link = this.shareLink
        jweixin.config({
          // debug: true,
          appId: appId, // 必填,公众号的唯一标识
          timestamp: timestamp, // 必填,生成签名的时间戳
          nonceStr: nonceStr, // 必填,生成签名的随机串
          signature: signature, // 必填,签名
          jsApiList: [‘updateAppMessageShareData‘, ‘updateTimelineShareData‘] // 必填,需要使用的JS接口列表
        })
        jweixin.ready(function() {
          jweixin.updateAppMessageShareData({
            title, // 分享标题
            desc, // 分享描述
            link: link,
            imgUrl, // 分享图标
            success: function() {
              // 设置成功
            }
          })
          jweixin.updateTimelineShareData({
            title, // 分享标题
            link: link,
            imgUrl, // 分享图标
            success: function() {
              // 设置成功
            }
          })
        })
        jweixin.error(function(res) {
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
        })

  3、title, // 分享标题,desc, // 分享描述,link: //分享链接,imgUrl, // 分享图标  这四要素就是你要显示在微信卡片上的内容,但是如果分享朋友圈的话是没有分享描述的。

  4、jsApiList: [‘updateAppMessageShareData‘, ‘updateTimelineShareData‘] // 必填,需要使用的JS接口列表,这是必填项,如果只想分享给朋友或者是朋友圈那么可以只写其中一个,相对应的js也不需要。

 

  好了,这就是微信发送给朋友和朋友圈的全套js,小伙伴们看懂了吗,可以评论留言,我会第一时间回复。

自定义微信浏览器分享卡片和朋友圈内容

上一篇:微信小程序使用模板Template


下一篇:crmeb打通版3.x小程序商城公众号重复无限刷新登陆解决