微信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

 

原文地址:https://www.cnblogs.com/baiyygynui/p/6151090.html