微信分享功能开发-优快云博客

微信分享

微信分享功能是微信开发小伙伴们最常用得基础功能之一，但对于刚刚学习微信开发和一只以来都是用他人配置好的方法的小伙们来说对其中得一些实现原理还不理解，我再第一次开发中同样遇到了许多坑。下面我就来说一说微信的分享功能的开发流程和自己遇到的一些问题。

js-sdk的使用配置

这个微信公众平台的官方技术文档介绍的已经很明白了我大概说以下流程。

JS接口安全域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，这里的安全域名对一级域名或二级域名没有硬性的要求，而且也可以写路径（例：wx.qq.com或wx.qq.com/mp），但是不支持IP地址、端口号及短链域名。如果你写的是路径那么就要将MP_verify_F0x99sJiBIsHYIN8.txt（配置过程中便能看到该文件的下载地址）文件放到该路径下而不能放到域名下，所以为了以后的开发在没有安全问题的情况下可以将域名设置成微信安全域名，然后将文件放到域名下，这样以后开发中该域名下得所有路径都可以运行微信的js-sdk。

权限验证配置

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

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

开发中，这里的配置除去debug可以根据需要自行编辑外其他的一般多需要与后台配合从后台获取。

分享接口

这里拿微信接口做一个示例

wx.onMenuShareAppMessage({
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () { 
    // 用户确认分享后执行的回调函数
},
cancel: function () { 
    // 用户取消分享后执行的回调函数
}
});

这里写图片描述

最后我把一个完整的分享功能代码粘出来，


$.ajax({
        type: "get",
        async: true,
        url: "",//后台接口地址
        dataType: "jsonp",
        data: {
            "weburl":location.href.split("#")[0]
        },
        success: function (json) {//后台返回的数据
            wx.config({
                debug: false,
                appId: json.appId,
                timestamp: json.timestamp,
                nonceStr: json.nonceStr,
                signature: json.signature,
                jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
            });
        },
        error: function () {
            console.log("share error");
        }
    });
    wx.ready(function () {
        var obj_co = {
            title: "",
            link: location.href.split("#")[0],//分享本页
            imgUrl: "",
            success: function () {
                console.log("share successfully");
            },
            cancel: function () { }
        },
        obj_co_desc = {
            desc: ""
        },
        obj_timeline = $.extend({}, obj_co),
        obj_appmsg = $.extend({}, obj_co_desc, obj_co),
        obj_qq = $.extend({}, obj_co_desc, obj_co),
        obj_wb = $.extend({}, obj_co_desc, obj_co),
        obj_qzone = $.extend({}, obj_co_desc, obj_co);

        wx.onMenuShareTimeline(obj_timeline);
        wx.onMenuShareAppMessage(obj_appmsg);
        wx.onMenuShareQQ(obj_qq);
        wx.onMenuShareWeibo(obj_wb);
        wx.onMenuShareQZone(obj_qzone);
    });

下边说一下可能会遇到的问题

appid：这个一定要填写正确，开发遇到权限问题时要先对appid进行校对，这个是基础，这个错了其他在正确也无法成功。（因为我们的分享功能在我来之前就已经写好了，只是后期有了问题一直没有解决，项目上线之前搞了一天各种调试，最后发现后台那边appid是错误的）
链接操作出现问题：分享链接或者获取链接信息，我们经常会用window.location.href 来获取当前页的地址，然后再对其进行一些处理获得自己想要的信息，但是有时候页面直接在路径中打开是没有问题的，但是分享出去后在打开有一些功能会出现问题，那是因为微信分享出去后会自动在链接后边加一个from参数但是往往浏览器中是不显示的你又当你用js打印出来才会发现连接和自己想想的并不完全一样。

好了以上就是我再微信分享中遇到的一些问题和微信分享的大概流程。因为自己也是编程小白所以理解的并不深刻，发博客只是为了尽可能的帮助大家的同时，培养自己一个好的习惯，希望各路大神多多指导。