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

首先 ：小编恭喜你已经掉入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，小伙伴们看懂了吗，可以评论留言，我会第一时间回复。