站在巨人的肩膀上: 从微信网页jsSDK入手剖析本地开发

jsSDK是一种在微信公众号网页中使用的Javascript API，它允许开发者在网页中使用微信的功能，如分享、支付、地理位置等。要想在本地开发过程中使用jsSDK，需要进行一系列的配置和测试。

一、jsSDK配置指南

1. 注册微信公众号并获取AppId和AppSecret

   访问微信公众平台（https://mp.weixin.qq.com/），注册一个公众号并获取其AppId和AppSecret。

2. 配置服务器配置

   在微信公众号后台，点击“开发”选项卡，选择“基本配置”页面。在“服务器配置”部分，填写服务器地址、URL和Toke。

3. 验证消息的确来自微信服务器

   在公众号后台，“开发”选项卡中，点击“验证消息的确来自微信服务器”页面，生成一个随机字符串并填写到对应的输入框中，点击“提交”按钮即可完成验证。

4. 使用微信登陆获取到 appId 和 appsecret

   在公众号后台，“开发”选项卡中，点击“接口权限”页面，在“Js接口安全域名”和“Js接口调用域名”输入框中，填写允许调用jsSDK的域名。

5. 填写服务器配置

   在公众号后台，“开发”选项卡中，点击“服务器配置”页面，在“服务器配置”部分，填写服务器地址、URL和Toke。

6. 配置URL和Toke

   在公众号后台，“开发”选项卡中，点击“验证消息的确来自微信服务器”页面，生成一个随机字符串并填写到对应的输入框中，点击“提交”按钮即可完成验证。

二、本地调用jsSDK

在本地开发环境中，可以使用以下方法来调用jsSDK：

1. 引入jsSDK库

   在网页中引入jsSDK库，可以使用以下代码：

   <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
   

2. 初始化jsSDK

   在网页中初始化jsSDK，可以使用以下代码：

   wx.config({
     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
     appId: '你的AppId', // 必填，公众号的唯一标识
     timestamp: '你的时间戳', // 必填，生成签名的时间戳
     nonceStr: '你的随机字符串', // 必填，生成签名的随机串
     signature: '你的签名', // 必填，签名
     jsApiList: [
       'checkJsApi',
       'onMenuShareTimeline',
       'onMenuShareAppMessage',
       'onMenuShareQQ',
       'onMenuShareWeibo',
       'onMenuShareQZone',
       'hideMenuItems',
       'showMenuItems',
       'hideAllNonBaseMenuItem',
       'showAllNonBaseMenuItem',
       'translateVoice',
       'startRecord',
       'stopRecord',
       'onVoiceRecordEnd',
       'playVoice',
       'pauseVoice',
       'stopVoice',
       'onVoicePlayEnd',
       'uploadVoice',
       'downloadVoice',
       'chooseImage',
       'previewImage',
       'uploadImage',
       'downloadImage',
       'getNetworkType',
       'openLocation',
       'getLocation',
       'hideOptionMenu',
       'showOptionMenu',
       'closeWindow',
       'scanQRCode',
       'chooseWXPay',
       'openProductSpecificView',
       'addCard',
       'chooseCard',
       'openCard'
     ] // 必填，需要使用的JS接口列表
   });
   

3. 调用jsSDK接口

   在jsSDK初始化之后，就可以调用jsSDK的接口了。例如，要分享网页到朋友圈，可以使用以下代码：

   wx.onMenuShareTimeline({
     title: '你的分享标题', // 分享标题
     link: '你的分享链接', // 分享链接
     imgUrl: '你的分享图片', // 分享图片
     success: function () {
       // 用户确认分享后执行的回调函数
     }
   });
   

三、测试jsSDK

在本地开发环境中，可以使用以下方法来测试jsSDK：

1. 在本地服务器上运行网页

   将网页上传到本地服务器，并在本地服务器上运行。

2. 打开微信开发者工具

   在微信开发者工具中，打开“调试”选项卡，选择“本地服务器”模式。

3. 在微信开发者工具中打开网页

   在微信开发者工具中，点击“打开”按钮，选择本地服务器上的网页文件。

4. 测试jsSDK接口

   在微信开发者工具中，可以在控制台中输入jsSDK的接口来测试其功能。

5. 注意:

   使用jsSDK时，需要注意以下几点：

   • jsSDK只能在微信公众号网页中使用。
   • jsSDK需要在网页中初始化才能使用。
   • jsSDK的接口需要在初始化之后才能调用。
   • jsSDK的接口只能在微信公众号网页中使用。