微信公众号网页开发

March 15 2018

1 JS

微信网页是指利用微信提供的功能，方便地让我们完成交互的过程。
比如调用微信的扫一扫，录音，上传文件等等…
而这些，都是需要微信方确认公众号方-用户之间的关系之后后允许使用的。

1.1 自己开发的网页(JS-SDK)

官方文档
这里是指公众号开发自己的网页。开发时，引入微信提供的JS-SDK文件。因为是前端用的，其实也就是一个js文件，官方还提供一份在线引入的js（http://res.wx.qq.com/open/js/jweixin-1.2.0.js）。这个同时也支持amd/cmd/es6模块引入方案。

1.1.1 前端配置

在使用js-sdk提供的wx.getLocation等方法时，需要在当前页面使用wx.config配置一下。配置完成后，使用的方法需要在wx.ready中使用

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

再详细写一下wx.config

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

里面的参数基本都是由后台返回来的，后台是计算signature的过程
比如有一个/getconfiginfo的接口
请求参数为

参数 说明
url 当前网页的url（不带hash）

返回结果

参数 说明
appId 公众号的appid，可以在公众号里的开发-基本配置里查看
timestamp 计算签名需要的时间戳，由于是后台计算的，也是后台生成的，由后台返回一下即可
nonceStr 和上面的时间戳作用一样
signature 经过一系列的计算，得到的签名

最后jsApiList是你想在网页中想要调用什么方法，比如

1
2
3
{
	jsApiList: ['getLocation']
}

1.1.2 后端配置

后台计算签名的方法，网上可以找到很多，其大体的思路如下：
前台可以不看这部分，后台看了也没啥用-_-!!

  1. 获取access_token，方法，调用https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你公众号的appid&secret=你公众号的secret接口，就可以获取access_token，说明：secret是隐藏的，如果忘了需要重置；
  2. 获取jsapi_ticket，方法，调用https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步获取的access_token&type=jsapi，说明：access_token和jsapi_ticket这两个参数都是有2个小时（7200秒）的有效期，官方建议，后台做好两个小时的缓存，快到时间时，再去获取一下这两个参数；
  3. 通过以下几个参数，通过一定的算法获取签名（signature）
    • jsapi_ticket：由上步获取
    • timestamp：时间戳，由于前台也需要，需要通过接口返回给前端
    • nonceStr：随机字符串，作用和上面的时间戳一样
    • url：当前网页的url，由前台通过接口得到
      签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
      即signature=sha1(string1)。 示例：
      1
      2
      3
      4
      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：

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

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

1
0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事项

  1. 签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
  2. 签名用的url必须是调用JS接口页面的完整URL。
  3. 出于安全考虑，开发者必须在服务器端实现签名的逻辑。

后台算出签名后，需要通过接口将这几个参数返回给前端

  • appid
  • 签名
  • 时间戳
  • 随机字符串

前端拿到这些参数后，通过wx.config就可以愉快地开发了。

1.2使用第三方的网页

如果用户在微信客户端中访问第三方网页，公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

调用第三方网页的套路
直接跳转到请求权限的页面（这个页面的路径带着一个redirect_uri的参数，这个地址就是用户确认权限后，跳转的页面，就是我们处理业务的页面了）

然后，这个路径中还有更多的参数，先看一下列表
|参数|是否必须|说明|
|–|–|–|
|appid|是|公众号唯一标识|
|redirect_uri|是|授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理|
|response_type|是|返回类型，请填写code，固定值，直接写code就可以了|
|scope|是|应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）|
|state|否|重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值，最多128字节|
|#wechat_redirect|是|无论直接打开还是做页面302重定向时候，必须带此参数|

看一下其他参数，主要就是scope，只需要openid是base就可以了，如果还需要其他信息就得使用userinfo的scope了。

提示：使用这个必须公众号是认证的

2 CSS

微信提供了套符合微信原生的UI框架

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI，有如下优势：

1.同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站或小程序

2.便捷获取快速使用，降低开发和设计成本

3.微信设计团队精心打造，清晰明确，简洁大方

该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容，已经在GitHub上开源。访问这里
或微信扫码即可预览。

avatar

changzhn`s blog

中国人睡觉时，美国人大多数人在工作