微信公众号+h5项目开发

林修华 發表於 2019-7-26 00:42:00

需求：以微信公众号为入口，提供h5页面共用户进行业务操作，用户信息完全依赖公众号；
方案：创建公众号-》用户关注公众号-》静默授权到h5页面-》h5页面获取用户信息-》用户在h5页面上进行业务操作；
准备：公众号一个（必须是需要认证的，认证需要硬性条件，无奈只能用测试账号，测试账号有一个坑的地方，下边会讲到），可以进行域名访问80端口的服务器一台（域名和服务器都好搞也便宜，但是域名需要备案才能访问，无奈只能找内网穿透的工具，我用的是natapp，一开始用的是免费版的，但是域名很不稳定，每变一次都需要改代码改设置，索性在natapp上买了一个vpi隧道9块钱一个月，然后又在上面买了个域名，3块钱一年，用了一下午还算稳定，用来做开发绰绰有余了）
工具：VS+HBuilderX+Mysql+微信开发工具
步骤：
1 .net创建webapi提供接口实现功能A 用户验证和信息获取 2 具体业务接口
2 mysql数据库存储用户信息和业务数据
3 uni-app创建后h5页面
也没什么高深的代码，分享一下页面授权部分代码
<div class="cnblogs_code">
<pre>onLoad() {
 var appId = 'xxx';
 var reg = new RegExp("(^|&)" + "code" + "=([^&]*)(&|$)");
 var r = window.location.search.substr(1).match(reg);
 var code = "";
 if (r != null)
 code = unescape(r[2]);

 if (code == null || code == "") {
 window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" +
 encodeURIComponent("xxx") +
 "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"; //页面授权
 } else { 　　　　　　　　　　//授权后根据返回的code获取用户信息
 uni.request({
 url: 'xxxx',
 header: {
 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
 },
 method: 'POST',
 data: {
 Code: code
 },
 success: res => {
 this.Data= res.data;
 },
 fail: fail => {},
 complete: () => {}
 });
 }
 }</pre>
</div>
踩坑的地方：
a js跨域的问题，网上解决方案很多，我索性把web站点和api站点部署到一个站点下，其中一个布置成站点，另一个布置成该站点下的应用程序；
b 如果用户尚未关注公众号，则提示需关注该公众号，错误码10006。眼下之意不关注不能玩。问题原因网上大都说是测试账号的原因；
c 我一开始授权那里思路错了，按照需求，因为用户是在关注公众号的前提下操作，所以我只要通过静默授权拿到用户的openId就可以通过公众号接口拿到用户详细信息，一开始以为一定需要非静默授权。非静默授权一般都是用户没有关注公众号的情况下才会用的。
d 之前没接触过公众号开发，刚开始跟几个同事讨论这个东西，他们竟然都很肯定的说openid每一次都会变/或者重新关注公众号后会变，今天事实证明他们错了。因为openid变掉的话我都没办法标识用户了，搞得慌慌的。看来实践出真知，而且自己不确定的技术一定不要说的很确定的样子，对人对己都不好，切记。 
来源：https://www.cnblogs.com/shawn-he/p/11247853.html

頁: [1]

琼殿技术论坛's Archiver

微信公众号+h5项目开发