专门用于微信公众平台的Javascript API---导言

2023-10-19 21:08:10

1、初始化等待分享

// 开发阶段，开启WeixinApi的调试模式
WeixinApi.enableDebugMode();

// 初始化WeixinApi，等待分享
WeixinApi.ready(function(Api) {

    // 微信分享的数据
    var wxData = {
        "appId": "", // 服务号可以填写appId
        "imgUrl" : ‘http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg‘,
        "link" : ‘http://www.baidufe.com‘,
        "desc" : ‘大家好，我是Alien，Web前端&Android客户端码农，喜欢技术上的瞎倒腾！欢迎多交流‘,
        "title" : "大家好，我是赵先烈"
    };

    // 分享的回调
    var wxCallbacks = {
        // 收藏操作不执行回调，默认是开启(true)的
        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);
});

可能有的朋友不知道appId从哪儿获取，请看这里：如何获取appId

分享的数据可以动态修改：

普通模式分享：分享的数据是固定的，代码请参考 sample/sample-normal.html
异步模式分享：分享的数据是可以被动态修改的，代码请参考 sample/sample-normal.html

2、隐藏右上角option menu入口

1 WeixinApi.ready(function(Api) {
2     // 隐藏
3     Api.hideOptionMenu();
4 
5     // 显示
6     // Api.showOptionMenu();
7 });

3、隐藏底部工具栏

WeixinApi.ready(function(Api) {
    // 隐藏
    Api.hideToolbar();

    // 显示
    // Api.showToolbar();
});

4、获取当前的网络类型

WeixinApi.ready(function(Api) {
    Api.getNetworkType(function(network){
        /**
         * network取值：
         *
         * network_type:wifi     wifi网络
         * network_type:edge     非wifi,包含3G/2G
         * network_type:fail     网络断开连接
         * network_type:wwan     2g或者3g
         */
    });
});

5、调起客户端图片播放组件

WeixinApi.ready(function(Api) {
    // 需要播放的图片src list
    var srcList = [src1, src2, ..., srcN];
    // 选一个作为当前需要展示的图片src
    var curSrc = src1;
    // 调起
    Api.imagePreview(curSrc, srcList);
});

调起客户端图片播放组件，还有一种更屌的方法，不需要依赖这个WeixinApi，直接a标签实现就行，具体格式：

<a href="weixin://viewimage/`YourImageURL`">AnyThing</a>

我们可以用A标签来嵌套这个img，具体Demo如下：

<a href="weixin://viewimage/http://www.baidu.com/img/bdlogo.gif">
    <img src="http://www.baidu.com/img/bdlogo.gif">
</a>
<a href="weixin://viewimage/http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
    <img src="http://tb2.bdstatic.com/tb/static-common/img/search_logo_big_6a13b553.gif">
</a>

6、关掉当前微信公众页面窗口

WeixinApi.ready(function(Api) { 
    // 关闭窗口
    WeixinApi.closeWindow({
        success : function(resp){
            alert(‘关闭窗口成功！‘);
        },
        fail : function(resp){
            alert(‘关闭窗口失败‘);
        }
    });
});

7、判断当前网页是否在微信内置浏览器中打开

  // true or false
    var flag = WeixinApi.openInWeixin();

8、打开扫描二维码

WeixinApi.ready(function(Api) {
    // 扫描二维码
    WeixinApi.scanQRCode({
        success : function(resp){
            alert(‘扫描器已打开！‘);
        },
        fail : function(resp){
            alert(‘扫描器无法打开‘);
        }
    });
});

设定needResult:true，则直接获取扫描得到的内容：

WeixinApi.scanQRCode({
    needResult:true,
    success : function(resp){
        alert(‘扫描器到的结果：‘ + JSON.stringify(resp));
    },
    fail : function(resp){
        alert(‘扫描器无法打开‘);
    }
});

9、开启WeixinApi的错误监控

注意，这句代码务必放在WeixinApi.ready之前；上线的时候，根据实际需要，可删掉它

// 方法1：不带任何参数，将以alert方式提示出错信息
WeixinApi.enableDebugMode();

// 方法2：给一个callback，自己处理错误信息
WeixinApi.enableDebugMode(function(errObj){
    // errObj = {
    //     message : errorMessage,
    //     script : scriptURI,
    //     line : lineNumber,
    //     column : columnNumber
    // }
});

// 当然，你还可以做一件事：把这些错误信息上报到服务器

10、发送电子邮件

WeixinApi.sendEmail({
    subject : ‘邮件标题‘,
    body : ‘邮件正文‘
},function(resp){
    // 注意这里可不要轻易alert，会卡死的。。。
});

11、禁止用户分享

// 先对Api进行初始化
WeixinApi.ready(function(Api) {
    // 禁止分享
    Api.disabledShare(function(){
        alert(‘当前页面禁止分享！‘);
    });
});

常见问题

1、用了这个API怎么没生效

如果遇到这种情况，请先回到这里，扫描最上面的二维码 Demo，首先验证Demo是否能运行正确；然后再参照demo.html调整自己的代码：

1）、WeixinApi.js路径是否引用正确
2）、WeixinApi.ready是否正确执行了？（可以在里面加一个alert，简单粗暴可依赖）
3）、开启WeixinApi.enableDebugMode方便问题定位

2、Android上取消分享依然提示成功

传送门：为什么分享到朋友圈，取消了依然提示成功？

3、想自己做一个按钮直接分享

就我目前了解到的情况来看，是行不通的，官方都有做权限控制，感兴趣可以到这里去翻一下评论

4、怎样动态修改分享的信息：wxData

用到Api提供的async:true配置，具体可阅读这里的使用介绍

5、收藏的时候为什么也执行分享的回调了？

请在wxCallbacks中设置favorite:false，关闭收藏操作的callback