微信 js-sdk 使用心得

前端配置微信 js-sdk

微信js-sdk 是微信公众平台面向网页开发者提供的基于微信的网页开发工具包，通过使用微信 js-sdk，网页开发者，可借助微信高效的使用 拍照、扫码、录音、定位等原生应用爱具有的能力。

前端开发者使用 js-sdk 的 步骤：

• 在微信公众平台绑定安全域名
• 后端接口实现js-sdk配置所需要的参数
• 页面实现 js-sdk 中 config 的注入配置，并实现成功失败的处理

步骤一 在微信公平台绑定安全域名

• 在微信公众平台绑定安全域名(注意：域名的书写要求，以及那个 txt 文件下载);

-
步骤二 引入 js 文件

• 文件在需要调用JS接口的页面引入如下JS文件，（支持https）：
• http://res.wx.qq.com/open/js/...

备注：支持使用 AMD/CMD 标准模块加载方法加载

步骤三：通过config接口注入权限验证配置

//分享文案
var title = '码客街'; // 分享标题
var desc =  '欢迎您，进驻码客街'; // 分享描述
var link =  'http://*******.com/html/share.html';                    // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
var imgUrl =  'http://******.com/web3/rs/img/about/about-logo.png'; // 分享图标
var type =  '';     // 分享类型,music、video或link，不填默认为link
var dataUrl = ''; // 如果type是music或video，则要提供数据链接，默认为空


// 此接口仅为示意，具体由后端服务实现，url 若带参数需 encode
$.ajax({
    type: "GET",
    url:'http://*********.com/WeixinJDK/GetSignPackageJSONP',
    data: {
        url: window.location.href.split('#')[0]
    },
    dataType: "jsonp",
    success: function(result) {
        //获取appid，timestamp，noncestr，signature等信息，需要后端小伙伴配合
        myconfig(rusult.data);
    },
    error: function() {
        alert('ajax error');
    }
});


function myconfig(data){
    //将data值写入 wx.config
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名，见附录1
        jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });

    //通过ready
    wx.ready(function(){
        // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

        // 在wx.ready 里面 判断当前客户端版本是否支持指定JS接口
        wx.checkJsApi({
            jsApiList: ['chooseImage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            success: function(res) {
                // 以键值对的形式返回，可用的api值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}

                //调用具体 api 接口
                function api();
            }
        });
    });

    wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert(JSON.stringify(res));
    });
}

function api(){
    //分享给朋友
       wx.onMenuShareAppMessage({
           title: title, // 分享标题
           desc: desc, // 分享描述
           link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
           imgUrl: imgUrl, // 分享图标
           type: '', // 分享类型,music、video或link，不填默认为link
           dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
           success: function () {
               // 用户确认分享后执行的回调函数
           },
           cancel: function () {
               // 用户取消分享后执行的回调函数
           }
       });

       //分享到朋友圈
       wx.onMenuShareTimeline({
           title: title, // 分享标题
           link: linkUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
           imgUrl: imgUrl, // 分享图标
           success: function () {
               // 用户确认分享后执行的回调函数
           },
           cancel: function () {
               // 用户取消分享后执行的回调函数
           }
       });

       //分享到qq
       wx.onMenuShareQQ({
           title: title, // 分享标题
           desc: desc, // 分享描述
           link: linkUrl, // 分享链接
           imgUrl: imgUrl, // 分享图标
           success: function () {
               // 用户确认分享后执行的回调函数
           },
           cancel: function () {
               // 用户取消分享后执行的回调函数
           }
       });

        //分享到qq空间
       wx.onMenuShareQZone({
           title: title, // 分享标题
           desc: desc, // 分享描述
           link: linkUrl, // 分享链接
           imgUrl: imgUrl, // 分享图标
           success: function () {
               // 用户确认分享后执行的回调函数
           },
           cancel: function () {
               // 用户取消分享后执行的回调函数
           }
       });

       // ············更多的api 请参见微信 js-sdk 开发文档
}

遇到问题：

• 配置过程中，一定要确保 注入 config 中的参数正确
• . 如果配置过程中，wx.error 弹出 {'errMsg':'config:invalid url domain'}

• 原因：

   - js安全域名配置错误（去掉 http://） 
   - ajax 请求的接口填写错误（我就是大意，写错了）
  
  

• 配置中出现 {'errMsg':'config fail'}
  原因：多半是输入 config 的参数错误，请检查 config 参数
• 在使用 录音 接口的时候，碰到了很多坑，等我解决完再来分享