微信网页开发之JS-SDK初使用

最近需要做一个页面，该页面使用微信浏览器打开，功能如下：

1、用户打开链接之后获取到用户的openId，用于支付、获取后台数据等场景

2、自定义分享链接、标题、图标、描述等

3、隐藏微信页面中的某些菜单项列表

阅读本文前需掌握微信公众平台开发相关基础知识。

一、准备工作

1、准备一个通过微信认证的公众号或者申请一个微信测试号，保证该公众号有“网页服务”的权限

二、开始开发

1、微信网页授权

该功能是用于获取用户相对于公众号的openId，每个用户都是唯一的。网页地址：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

注：在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中，修改授权回调域名

该地址里面的APPID是公众号的appId，REDIRECT_URI是用户点击该网址之后跳转的地址，该地址的域名是开发者在公众平台上配置的微信网页授权回调域名。SCOPE代表授权机制，分2种，snsapi_base和snsapi_userinfo，snsapi_base只能用于获取openId，优势是静默授权，如果只需要获取用户的唯一openId的话选这个就可以；snsapi_userinfo用于获取用户信息，包括openId、头像、昵称、城市等，但这个是需要用户手动授权的，本文采用的是第一种。STATE是预留字段，这个可以随便定义值，该参数值可以传递到跳转之后的地址中。

正常情况下，用户点击上面的链接之后会跳转一个地址，该地址就是开发者配置的redirect_uri。微信会传一个参数code到该地址，开发者需要通过code获取用户信息。该code只有5分钟时效，调用如下接口：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

APPID和SECRET分别代表公众号的appId和秘钥，CODE是刚才传来的code，接口会返回openId和access_token，如果是snsapi_base机制，那这样就结束了，因为已经获取到openId了；如果是snsapi_userinfo机制，那还需要通过openId和access_token调用如下接口获取详细的用户信息：

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

注：如果是snsapi_userinfo机制，那access_token需要在服务器中做缓存，因为网页的access_token有效期是2小时，在有效期内都可以使用

笔者redirect_uri填写的是一个后台接口地址，在该接口中通过微信传过来的code获取用户信息，处理程序内部业务逻辑，然后再重定向到对应的html中。具体代码如下

到此，网页授权获取用户信息结束

2、微信网页中自定义分享链接、标题、图标、描述等

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，然后在需要调用微信js的网页中引入微信的js文件http://res.wx.qq.com/open/js/jweixin-1.4.0.js

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。注入配置信息的代码如下：

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

jsApiList为需要使用的微信JS接口列表，本文中使用到了3个接口，分别为onMenuShareTimeline(分享给好友)、onMenuShareAppMessage(分享到朋友圈)、hideMenuItems(隐藏菜单项列表)。

signature为微信签名，该签名需要在后台生成，具体签名方法如下：

a：获取jsapi_ticket。

jsapi_ticket是公众号用于调用微信JS接口的临时票据，jsapi_ticket需要调用如下接口获取https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi，其中ACCESS_TOKEN是公众号的全局access_token，获取access_token方法详见微信公众平台开发文档，本文不再赘述。jsapi_ticket有效期为2小时，开发者需要在服务器端缓存jsapi_ticket。

b：对请求参数进行排序拼装。

参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳，精确到秒）, url（当前网页的URL，不包含#及其后面部分）。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义

即signature=sha1(string1)。请求参数示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=http://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed

后台接口将noncestr、timestamp、jsapi_ticket、signature返回，然后前台js将这些参数值用于注入配置信息。本文实现如下：

通过ready接口处理成功验证

wx.ready(function(){
    var shareData = {
						title: '银座洗车年终钜惠', //	标题
						desc: '抢购优惠洗车资格，腊月二十七放假前均可使用', //	描述
						link: 'http://xxx.html', //	分享的URL，域名为授权域名
						imgUrl: 'http://xxxxx.png' //	缩略图地址
					};
					wx.onMenuShareAppMessage(shareData);
					wx.onMenuShareTimeline(shareData);
					wx.hideMenuItems({
						menuList: ['menuItem:copyUrl'] // 要隐藏的菜单项
					});
        });

配置信息注入成功之后，需要通过ready接口处理成功验证。上面的js完成2个功能。一个是分享该页面给好友或者朋友圈时自定义标题、链接、图标等，另一个是菜单项中去掉“复制链接”按钮。

通过error接口处理失败验证

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

到此，文中开题描述的3个功能已完成，总体来说有2个注意的地方

1、网页授权的openId需要通过微信的code来获取，这个code只有5分钟的失效，如果需要获取用户详细信息还要通过openId和access_token来调接口获得

2、需要使用JS-SDK的页面必须先注入配置信息，注入配置信息过程中会遇到微信签名问题，需要熟悉微信签名算法。同时为了安全，这个签名需要在后台完成。

完成后效果如下：

自定义分享标题、链接、图标等

菜单项里面的“复制链接”按钮没有了

如有疑问，可关注公众号留言，工程师将尽快回答您的问题。公众号二维码：

最后，打波广告。微信搜索公众号"购即省"，淘宝购物领券，购物即省钱。

微信网页开发之JS-SDK初使用

猜你喜欢