微信 js-sdk 使用心得

岳光发布于2019-08-20 17:28 / 1461人阅读

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

前端配置微信 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 参数

在使用录音接口的时候，碰到了很多坑，等我解决完再来分享

云服务器服务器托管微信js-sdk 使用心得使用心得与技巧阿里云使用心得

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83603.html

深究WeixinJSBridge未定义之因

摘要：未使用微信如果网页中未使用微信用户在微信中打开网站可能会触发这个错误，目前看来只有忽略。关于微信支付方法监听事件之后再进行下一步操作方法直接使用文档中的支付代码，不要使用公众号支付文档里面的代码。 Fundebug并没有使用微信JS-SDK，然而却收到了WeixinJSBridge is not defined的报错： showImg(https://segmentfault.com...

gself 2019-05-29 17:49 评论0 收藏0
如何正确的在项目中接入微信JS-SDK

摘要：进过下面的步骤，一步一步的配置，就可以让你正确的在项目中引入微信的。在进行了正确的微信文件引入后看上面在页面中调用如下代码就可以注入权限验证配置。可以通过微信提供的两个接口来进行事件回调。到这为止，微信的接入就完成了。微信JS-SDK的功能如果你点进来，那么我相信你应该知道微信的JS-SDK可以用来做什么了。微信的官方文档描述如下。微信JS-SDK是微信公众平台面向网页开发者提供...

ivyzhang 2019-08-23 10:41 评论0 收藏0
微信JS-SDK选择图片遇到的坑

摘要：微信选择图片遇到的坑有个需求要在微信企业号里面做开发，有个功能是选择图片，使用标签肯定是不管用了，手机上不能多选，所以使用了微信的提供的相关，这个地方真的是有坑，记录一下。微信JS-SDK选择图片遇到的坑有个需求要在微信企业号里面做开发，有个功能是选择图片，使用input标签肯定是不管用了，Android手机上不能多选，所以使用了微信的JS-SDK提供的相关API，这个地方真的是有...

explorer_ddf 2019-08-26 12:11 评论0 收藏0
vue使用微信JS-SDK实现分享功能

摘要：最近开发微信公众号内嵌页面，使用搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信。最近开发微信公众号内嵌H5页面，使用vue搭建的项目，由于业务需求，需要实现微信自定义分享功能，所以项目中集成微信JS-SDK。微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、...

ShowerSun 2019-08-26 10:58 评论0 收藏0
微信公众号页面(VUE)中如何配置微信JS-SDK和高德地图,以及遇到的一些问题记录

摘要：安装并引入依赖包这里是说明文档下载依赖包在需要用到的模块引入检查是否引入成功可以在引入的模块中执行控制台显示以上代码表示引入成功配置微信所有需要使用的页面必须先注入配置信息，否则将无法调用开启调试模式调用的所有的返回值会 1.安装并引入JS-SDK依赖包这里是JS-SDK说明文档 1.1 npm 下载依赖包 npm install weixin-js-sdk --save 1.2.在...

Joyven 2019-08-23 17:05 评论0 收藏0