zoukankan      html  css  js  c++  java
  • 专门用于微信公众平台的Javascript API导言

    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

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

    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

  • 相关阅读:
    Python 30分钟入门——数据类型 and 控制结构
    类球多面体生成——经纬划分法
    GLUT的简洁OO封装
    Resource Acquisition Is Initialization(RAII Idiom)
    为什么operator>>(istream&, string&)能够安全地读入长度未知的字符串?
    斯坦福2014机器学习笔记六----神经网络(一)
    斯坦福2014机器学习笔记五----正则化
    斯坦福2014机器学习笔记四----逻辑回归
    斯坦福2014机器学习笔记三----多变量线性回归与梯度下降法
    斯坦福2014机器学习笔记二----梯度下降法
  • 原文地址:https://www.cnblogs.com/guanguan/p/4211588.html
Copyright © 2011-2022 走看看