微信JSSDK的使用步骤

喜欢ヅ旅行 2024-04-19 10:42 63阅读 0赞

## 引言 ##

微信官方提供许多实用的接口，通过这些接口我们可以更加丰富应用的功能，完善自己的公众号，通过配置我们就可以使用微信原生的功能，比如扫一扫，拍照、生成图片等等。下面我们来看一下使用JSJDK的步骤（笔者在微信测试号里调试的）

## 步骤1：添加安全域名 ##

![2019091714131392.png][]

## 步骤2：引入JS ##

> [http://res.wx.qq.com/open/js/jweixin-1.4.0.js][http_res.wx.qq.com_open_js_jweixin-1.4.0.js]

## 步骤3：config接口注入权限验证 ##

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

这一步很关键，许多小伙伴都止步于此，首先我们先来看一下signature的生成过程，要获得signature，必须通过access\_token来换取jsapi\_ticket，接着 jsapi\_ticket和其它参数排序后通过sha1算法才能得到signature

![20190917142451963.png][]

**3.1  获取access\_token**

> [https://mp.weixin.qq.com/wiki?t=resource/res\_main&id=mp1421140183][https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421140183]

**3.2 获取jsapi\_ticket**

> [https://api.weixin.qq.com/cgi-bin/ticket/getticket?access\_token=ACCESS\_TOKEN&type=jsapi][https_api.weixin.qq.com_cgi-bin_ticket_getticket_access_token_ACCESS_TOKEN_type_jsapi]

**3.3 拼接字符串**

> jsapi\_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy\_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

> jsapi\_ticket ：通过access\_token获取的jsapi\_ticket
> 
> noncestr     ：随机字符串
> 
> timestamp  ：时间戳
> 
> url               ：调用JSSDK页面的url，必须在安全域名下

**3.4 对拼接的字符串进行sha1签名，得到signature**

$signature = sha1($str);

注：在开发过程中，为了方便调试，我们也可以先用验证工具来生成signature

> [http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign][http_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_jsapisign]

# #

## 步骤4：ready接口处理成功验证 ##

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

# #

## 步骤5：error接口处理失败验证 ##

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

[2019091714131392.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f21c92cb2f604200913a623e43b7f67a.png
[http_res.wx.qq.com_open_js_jweixin-1.4.0.js]: http://res.wx.qq.com/open/js/jweixin-1.4.0.js
[20190917142451963.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/356f54887f7342378ace9e91150cc549.png
[https_mp.weixin.qq.com_wiki_t_resource_res_main_id_mp1421140183]: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183
[https_api.weixin.qq.com_cgi-bin_ticket_getticket_access_token_ACCESS_TOKEN_type_jsapi]: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
[http_mp.weixin.qq.com_debug_cgi-bin_sandbox_t_jsapisign]: http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign