前端设置微信 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，则要供应数据链接，默以为空


$.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 参数 
  

• 在运用 灌音 接口的时刻，碰到了许多坑，等我处理完再来分享