页面编写
1、引入weui.min.css.
<link rel="stylesheet" href="../css/weui.min.css" />
2、引入weui.min.js和api js.
html和css的布局可参考官方文档:weui. 。
js可参考官方文档:weui.js 。
公众号配置
准备工作:
1、申请微信服务号,并以微信认证方式进行认证(需300元认证费用,时间大概一周)。
2、备案过的域名。
配置:
1、自定义菜单:
填写菜单名称和页面跳转地址,地址url需要是备案过的域名地址,确保地址页面可以访问到,在这填写的地址需要用UrlEncode工具加码。
2、公众号设置-功能设置:
设置JS接口安全域名和网页授权域名(需要备案过的域名)。
3、基本配置-服务器配置:
公众号开发信息中的appid和appsecret要复制出来保存好,后面后台设置token的时候要用到,调用微信sdk的时候也要用到appid。
IP白名单中同时设置自己电脑的ip和服务器的ip。
此处配置的前提是服务器端的校验代码已完成。让后台告知填写的token并填进去。
url必须是可以访问的地址,token必须一致
服务端采用java,token验证失败,解决方案参考:token验证失败
调试
1、下载开发者工具路径:开发者工具-web开发者工具
2、进入web开发者工具之后要绑定开发者微信号之后,才能使用开发者工具调试当前项目。
3、进入工具之后,上方地址栏输入自己静默授权的地址(自己拼接生成的地址)即可访问页面。
参考链接:https://mp.weixin.qq.com/cgi-bin/safecenterstatus?action=devlist&token=790122347&lang=zh_CN
用户授权、openid获取
1、采用静默授权方式
先根据文档拼接完整的url并Encode加码,然后放在自定义的菜单那,点击之后微信服务器返回的URL中获取到code,获取方法code=location.href.split("=")[1].split("&")[0]。
获取到code之后传给后台,由后台返回openid,在前端保存。(须由后台定义接口获取openid,因为获取openid的同时也会获取到secret,容易泄露)。
参考链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
sdk调用
1、关键是要从后台获取到timestamp、nonceStr、signature,后台获取到之后返给前端进行后续接口的调用。
前两个由后台随机生成,最后一个按照规则生成。
获取时须由前端传个页面url,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
参考链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 这里面的附录1 。