微信公众号网页开发

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中使用

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

再详细写一下wx.config

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是你想在网页中想要调用什么方法,比如

{
	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_tokenjsapi_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)。 示例:
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×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名,得到signature:

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了。

提示:使用这个必须公众号是认证的
Alt text
否则就会出现以下的页面
Alt text

2 CSS

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

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

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

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

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

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

posted @ 2018-01-30 14:25  哲楠  阅读(1495)  评论(1编辑  收藏  举报