微信分享功能总结

魏晓巍

发布于 2019.09.07 18:22 阅读 2573 评论 0

概述

微信JS-SDK始股微信公众平台面向网页开发者提供的基于微信内的网页开发工具包，通过这个工具包，可以定制微信分享功能的内容。

JS-SDK使用步骤

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置“里填写”JS接口安全域名“。

备注：登录后可在”开发者中心“查看对应的接口权限。

PS:在开发过程中，这一部分通常由王旭学长进行。

步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.4.0.js （支持https）。

PS：由于网络请求不稳定，点击进入网页后复制粘贴将网络资源自己封装成js文件。

步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用

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

PS：在我们前端开发过程中，是不能直接获取到这部分信息的，这里就需要后台的配合，前端调用接口来获取这部分信息。

步骤四：通过ready接口处理成功验证

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})

PS：wx.config中的jsApiList内的接口都写在wx.ready内。

步骤五：通过error接口处理失败验证

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

下面上我写的代码：

Vue.http.options.emulateJSON = true;
var vm = new Vue({
    el: '#app',
    data: {
    },
    onload(){
      this.wxSignature()
    },
    methods: {
        wxSignature(){
            var that = this
            var u = location.href.split('#')[0]
            // var u = 'http://hnts.artgreat.cn/pages/afterpay.jsp'
            this.$http.post('/hnts/front/user/getJsParam',{url: u,appid:'wx58796c235ad4c301'}).then(result => {
                // 步骤三：通过config接口注入权限验证配置
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: result.body.appId, // 必填，公众号的唯一标识
                    timestamp: result.body.timestamp, // 必填，生成签名的时间戳
                    nonceStr: result.body.nonceStr, // 必填，生成签名的随机串
                    signature: result.body.signature,// 必填，签名，见附录1
                    jsApiList: [
                        // 分享接口
                        'updateTimelineShareData',
                        'updateAppMessageShareData',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                    ],

                });

                //步骤四：通过ready接口处理成功验证
                wx.ready(function () {
                    wx.updateTimelineShareData({
                        title:'憨牛途舍·时光胶囊', // 分享标题
                        link:location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl:"http://hnts.artgreat.cn/assets/front/images/share.jpg?v="+new Date().getTime(),
                        desc:'憨牛途舍·时光胶囊',//描述
                        success: function () {
                            // 用户点击了分享后执行的回调函数
                            console.log("分享成功");
                        },
                    });
                    wx.updateAppMessageShareData({
                        title: '憨牛途舍·时光胶囊', // 分享标题
                        desc: '憨牛途舍·时光胶囊', // 分享描述
                        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl:"http://hnts.artgreat.cn/assets/front/images/share.jpg?v="+new Date().getTime(),
                        success: function () {
                            // 设置成功
                        }
                    });
                    wx.onMenuShareTimeline({
                        title: '憨牛途舍·时光胶囊', // 分享标题
                        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl:"http://hnts.artgreat.cn/assets/front/images/share.jpg?v="+new Date().getTime(),
                        success: function () {
                            // 用户点击了分享后执行的回调函数
                        },
                    });
                    wx.onMenuShareAppMessage({
                        title: '憨牛途舍·时光胶囊', // 分享标题
                        desc: '憨牛途舍·时光胶囊', // 分享描述
                        link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl:"http://hnts.artgreat.cn/assets/front/images/share.jpg?v="+new Date().getTime(),
                        success: function () {
                            // 用户点击了分享后执行的回调函数
                        }
                    });
                });
            })
        }
}
})

我在使用过程中踩到的坑

1.如果你百度一下，你就会发现有一种说法叫做在html标签最顶部放置一个宽高都是300px的图片，当分享的时候会自动抓取这张图片，显示在缩略图部分。

亲测这个方法无效！

但是在微信PC端分享的时候，微信确实会抓取页面中的图片，但是抓取的逻辑目前尚不清楚，但是绝不是抓取第一个标签的图片。

2.在注入接口权限的时候（wx.config），一定要保持appid和signature的一致，否则将不能成功授权使用接口，这一点需要后台注意。

3.在JS-JDK的1.4版本之后，建议使用例子中的前两个接口，后面两个几口即将废弃。

4.这个分享接口并非是通过点击触发分享，而是需要在用户通过微信分享功能分享之前就要调用，并且这个接口的本质功能是修改分享的内容，这一点一定要明确。

所以在使用的过程中，需要在页面加载完成前就调用这个方法，我使用的vue框架进行开发，所以在vue的声明周期函数created中就调用了这个方法，这样在分享时分享内容的样式就会改变。

5.通常在开发中，我们在js描述路径时都是用FC.ctx+‘路径’的方式，但是图片地址/imgUrl在这里必须使用绝对路径。这里一定要牢记，如果图片路径设置有问题，那么分享时图片部分和没设置之前是一样的，很难看出来存在问题。

6.在调用图片地址/imgUrl时加入参数，这样可以清除缓存，在编写过程中就遇到了首次可以分享，但是再次分享样式就会返回原样的问题，所以在每次打开页面的时候清除换成，就可以解决这个问题了。

发表评论