• 微信JSSDK javascript 开发 代码片段,仅供参考


    最全面最专业的微信公众平台开发教程:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html

    比较完整的分享教程:http://www.cnblogs.com/leinov/p/5256879.html

    ajax调用服务器接口:

    function GetWeiXinJsapiConfig() {
        var url = encodeURIComponent(location.href.split('#')[0]);
        alert('url is ' + url);
        $.ajax({
            type: "POST",
            url: "/XXX/GetWeiXinJsapiConfig",
            data: "{'curUrl': '" + url +
                "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(data) {
                console.log(data.d);
                var configData = $.parseJSON(data.d);
                console.log('sig is ' + configData.signature);
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: configData.appid, // 必填,公众号的唯一标识
                    timestamp: configData.timestamp, // 必填,生成签名的时间戳
                    nonceStr: configData.noncestr, // 必填,生成签名的随机串
                    signature: configData.signature, // 必填,签名,见附录1
                    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                });
                wx.ready(function(){
                    alert('OK---');
                    wx.onMenuShareAppMessage({
                        title: shareTitle, // 分享标题
                        desc: descContent, // 分享描述
                        link: lineLink, // 分享链接
                        imgUrl: imgUrl, // 分享图标
                        success: function () { 
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () { 
                           // 用户取消分享后执行的回调函数
                        }
                    });
    
                });
                wx.error(function(res){
                    // alert("err" + res);
                });
            },
            error: function(data) {
                var is_json;
                var json;
                try {
                    var json = $.parseJSON(data.responseText);
                    is_json = true;
                } catch (e) {
                    is_json = false;
                }
    
                if (is_json) {
                    // add_json_error(data, json);
                    console.log(json.Message);
                } else {
                    // Show the response text as plaintext.
                    var status = data.status;
                    var statusText = data.statusText;
    
                    // If we've hit a 400 (Bad Request), show the responseText.
                    if (status === 400) {
                        statusText += ": " + data.responseText;
                    }
                    console.log(status + " " + statusText);
                }
            },
            complete: function() {
    
            }
        });
    }

    定义微信分享数据,一次定义,多处使用:

    // 定义微信分享的数据
    var wxData = {
        "appId": "", // 服务号可以填写appId
        "imgUrl" : 'http://photocdn.sohu.com/20130122/Img364302298.jpg',
        "link" : 'http://www.baidufe.com',
        "desc" : '使用警告:此Api非官方版本,请各位尽量将分享功能迁移至腾讯官方版,会更稳定些!',
        "title" : "欢迎使用WeixinApi"
    };
    
    // 分享的回调
    var wxCallbacks = {
        // 收藏操作是否触发回调,默认是开启的
        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);
        }
    };
    // 自定义分享到:微信好友、朋友圈、腾讯微博、QQ好友
    WeixinApi.share(wxData,wxCallbacks);

    初始化等待分享:

    // 开发阶段,开启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" : '使用警告:此Api非官方版本,请各位尽量将分享功能迁移至腾讯官方版,会更稳定些!',
            "title" : "欢迎使用WeixinApi"
        };
    
        // 分享的回调
        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);
    });

    隐藏右上角option menu入口

    WeixinApi.ready(function(Api) {
        // 隐藏
        Api.hideOptionMenu();
    
        // 显示
        // Api.showOptionMenu();
    });

    隐藏底部工具栏

    WeixinApi.ready(function(Api) {
        // 隐藏
        Api.hideToolbar();
    
        // 显示
        // Api.showToolbar();
    });

    获取当前的网络类型

    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
             */
        });
    });

    调起客户端图片播放组件

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

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

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

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

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

    发送电子邮件

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

    禁止用户分享

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

    常见问题:

    用了这个API怎么没生效

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

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

    就我目前了解到的情况来看,是行不通的,官方都有做权限控制

     

    怎样动态修改分享的信息:wxData

    用到Api提供的async:true配置

    关于分享的其它方法以及注意事项,请移步这位仁兄这里,有比较详细的答案:https://www.baidufe.com/item/f07a3be0b23b4c9606bb.html

     

  • 相关阅读:
    iOS8 定位补充
    iOS系统导航/自绘制导航路线
    自定义大头针
    添加大头针
    iOS 地图
    iOS 定位
    UISearchBar
    NSPredicate谓词
    iOS的设备及分辨率、图片命名
    UIImageView、UISlider、UISwitch、UIStepper、UISegmentControl
  • 原文地址:https://www.cnblogs.com/baiyygynui/p/6151090.html
Copyright © 2020-2023  润新知