关于新版本微信分享的一些汇总

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">因为公司的项目主要是在微信上运行的，所以就要接触微信的分享接口等。</span>

但是因为微信要处理那些类似于“分享后查看结果”的页面，就把接口给改了，发布了新版本的微信，针对这个问题。

新的微信sdk说明文档地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

大概看了一下内容还是挺丰富的，但是：

在使用微信JS-SDK对应的JS接口前，需确保公众号已获得使用对应JS接口的权限，可登录微信公众平台进入“开发者中心”查看对应的接口权限。

注意： 所有的JS接口只能在公众号绑定的域名下调用，公众号开发者需要先登录微信公众平台进入“公众号设置”》“功能设置”里填写“JS接口安全域名”。

所以，要用的话，也不是那么的方便。

昨天听说有牛人破了这个问题，详细的代码如下：

首先引入WeiXinapi.js文件：

一个js代码的地址：http://soth.zerom.cn/zylt_invite_6/js/WeixinApi.js

然后，在html中必须加入以下DOM：

<div style="display:none">
        <p>
            <button id="optionMenu">WeixinApi.hideOptionMenu</button>
        </p>
        <p>
            <button id="networkType">WeixinApi.getNetworkType</button>
        </p>
        <p>
            <button id="imagePreview">WeixinApi.imagePreview</button>
        </p>
        <p>
            <button id="closeWindow">WeixinApi.closeWindow</button>
        </p>
        <p>
            <button id="scanQRCode">WeixinApi.scanQRCode</button>
        </p>

        <p>
            <button id="getInstallState">WeixinApi.getInstallState</button>
        </p>

        <p>
            <button id="sendEmail">WeixinApi.sendEmail</button>
        </p>

        <p>
            <a href="http://www.baidufe.com/fe/demo/static/html/weixin-api-demo.html?" id="refresh">点击这里刷新！！！！</a>
        </p>
    </div>

因为这个是不需要显示的内容，所以display:none;

然后在最后加入分享的js：

// 开启Api的debug模式
        WeixinApi.enableDebugMode();

        // 给按钮增加click事件：请不要太纠结这个写法，demo而已
        var addEvent = function(elId,listener){
            document.getElementById(elId)
                    .addEventListener('click',function(e){
                        if(!window.WeixinApi || !window.WeixinJSBridge) {
                            //alert('请确认您是在微信内置浏览器中打开的，并且WeixinApi.js已正确引用');
                            e.preventDefault();
                            return false;
                        }
                        listener(this,e);
                    },false);
        };

        // 两个Flag
        var optionMenuOn = true;
        var toolbarOn = true;

        // optionMenu的控制
        addEvent('optionMenu',function(el,e){
            if(optionMenuOn) {
                el.innerHTML = "WeixinApi.showOptionMenu";
                WeixinApi.hideOptionMenu();
            }else{
                el.innerHTML = "WeixinApi.hideOptionMenu";
                WeixinApi.showOptionMenu();
            }
            optionMenuOn = !optionMenuOn;
        });

        // 获取网络类型
        addEvent('networkType',function(el,e){
            WeixinApi.getNetworkType(function(network) {
                alert("当前网络类型：" + network);
            });
        });

        // 调起客户端的图片播放组件
        addEvent('imagePreview',function(el,e){
            location.href = "http://www.baidufe.com/wximage?tag=%E7%BE%8E%E5%A5%B3";
        });

        // 关闭窗口
        addEvent('closeWindow',function(el,e){
            WeixinApi.closeWindow({
                success : function(resp){
                    alert('关闭窗口成功！');
                },
                fail : function(resp){
                    alert('关闭窗口失败');
                }
            });
        });

        // 打开扫码
        addEvent('scanQRCode',function(el,e){
            WeixinApi.scanQRCode({
                success : function(resp){
                    alert('扫描器已打开！');
                },
                fail : function(resp){
                    alert('扫描器无法打开');
                }
            });
        });

        // 判断是否安装对应的应用（需要官方打开权限）
        addEvent("getInstallState", function(el, e) {
            WeixinApi.getInstallState({
                packageName: "cn.dxy.android.aspirin",
                packageUrl: "dxy-aspirin"
            }, {
                success: function(resp) {
                    alert("App is installed, version " + resp.version);
                },
                fail: function(resp) {
                    alert("Oops, something goes wrong or app is not installed.");
                }
            })
        });

        // 发送邮件
        addEvent("sendEmail", function(el, e) {
            WeixinApi.sendEmail({
                subject : '邀请函|1月11日紫悦龙庭新品发布会',
                body : '邀请函|1月11日紫悦龙庭新品发布会'
            });
        });

        // 刷新
        addEvent('refresh',function(el,e){
            e.preventDefault();
            location.replace('?' + Math.random(),true);
        });

        // 需要分享的内容，请放到ready里
        WeixinApi.ready(function(Api) {

            // 微信分享的数据
            var wxData = {
                "appId": "", // 服务号可以填写appId
                "imgUrl" : '',
                "link" : '',
                "desc" : '',
                "title" : ""
            };

            // 分享的回调
            var wxCallbacks = {
                // 关闭favorite
                favorite:false,

                // 分享操作开始之前
                ready : function() {
                    // 你可以在这里对分享的数据进行重组
                    //alert("准备分享");
                },
                // 分享被用户自动取消
                cancel : function(resp) {
                    // 你可以在你的页面上给用户一个小Tip，为什么要取消呢？
                    //alert("分享被取消，msg=" + resp.err_msg);
                },
                // 分享失败了
                fail : function(resp) {
                    // 分享失败了，是不是可以告诉用户：不要紧，可能是网络问题，一会儿再试试？
                   // alert("分享失败，msg=" + resp.err_msg);
                },
                // 分享成功
                confirm : function(resp) {
                    // 分享成功了，我们是不是可以做一些分享统计呢？
                    //alert("分享成功，msg=" + resp.err_msg);
                },
                // 整个分享过程结束
                all : function(resp,shareTo) {
                    // 如果你做的是一个鼓励用户进行分享的产品，在这里是不是可以给用户一些反馈了？
                    //alert("分享" + (shareTo ? "到" + shareTo : "") + "结束，msg=" + resp.err_msg);
                }
            };

            // 用户点开右上角popup菜单后，点击分享给好友，会执行下面这个代码
            Api.shareToFriend(wxData, wxCallbacks);

            // 点击分享到朋友圈，会执行下面这个代码
            Api.shareToTimeline(wxData, wxCallbacks);

            // 点击分享到腾讯微博，会执行下面这个代码
            Api.shareToWeibo(wxData, wxCallbacks);

            // iOS上，可以直接调用这个API进行分享，一句话搞定
            Api.generalShare(wxData,wxCallbacks);

            // 有可能用户是直接用微信“扫一扫”打开的，这个情况下，optionMenu、toolbar都是off状态
            // 为了方便用户测试，我先来trigger show一下
            // optionMenu
            var elOptionMenu = document.getElementById('optionMenu');
            elOptionMenu.click(); // 先隐藏
            elOptionMenu.click(); // 再显示
        });

通过上面的三个步骤，就可以实现在新版本的手机微信上正常的分享指定的图片和文案了。

但是昨天测试了一下，如果在：

// 分享操作开始之前
                ready : function() {
                    // 你可以在这里对分享的数据进行重组
                    //alert("准备分享");
                },

这里重新给wxData赋值是无效的，因为分享的链接不是固定的，而是有变化的，所以这个方法暂时解决不了。

不知道是我使用方法有误还是怎么地？如果有大牛知道，请指教。

我在ready里面写的代码是：

wxData = {
                "appId": "", // 服务号可以填写appId
                "imgUrl" : '',
                "link" :sharelink,
                "desc" : '',
                "title" : ""
            };

其中sharelink是变量，在页面的处理程序中，这个sharelink变量会改变，但是在ready里面并没有修改成功，分享出去依然是初始化的值。

发现一个说明新版sdk的使用方法的帖子，收了，日后可以用到。

http://www.cocoachina.com/bbs/read.php?tid=281137&page=1&toread=1#tpc

补充原作者的测试页面以及博客：

http://www.baidufe.com/fe/demo/static/html/weixin-api-demo.html

http://www.baidufe.com/?from=singlemessage&isappinstalled=0