zoukankan      html  css  js  c++  java
  • 微信公众号+h5项目开发

    需求:以微信公众号为入口,提供h5页面共用户进行业务操作,用户信息完全依赖公众号;

    方案:创建公众号-》用户关注公众号-》静默授权到h5页面-》h5页面获取用户信息-》用户在h5页面上进行业务操作;

    准备:公众号一个(必须是需要认证的,认证需要硬性条件,无奈只能用测试账号,测试账号有一个坑的地方,下边会讲到), 可以进行域名访问80端口的服务器一台(域名和服务器都好搞也便宜,但是域名需要备案才能访问,无奈只能找内网穿透的工具,我用的是natapp,一开始用的是免费版的,但是域名很不稳定,每变一次都需要改代码改设置,索性在natapp上买了一个vpi隧道9块钱一个月,然后又在上面买了个域名,3块钱一年,用了一下午还算稳定,用来做开发绰绰有余了)

    工具:VS+HBuilderX+Mysql+微信开发工具

    步骤:

    1 .net创建webapi提供接口 实现功能A 用户验证和信息获取 2 具体业务接口

    2 mysql数据库存储用户信息和业务数据

    3 uni-app创建后h5页面

    也没什么高深的代码,分享一下页面授权部分代码

    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: () => {} }); } }

    踩坑的地方:

    a js跨域的问题,网上解决方案很多,我索性把web站点和api站点部署到一个站点下,其中一个布置成站点,另一个布置成该站点下的应用程序;

    b 如果用户尚未关注公众号,则提示需关注该公众号,错误码10006。眼下之意不关注不能玩。问题原因网上大都说是测试账号的原因;

    c 我一开始授权那里思路错了,按照需求,因为用户是在关注公众号的前提下操作,所以我只要通过静默授权拿到用户的openId就可以通过公众号接口拿到用户详细信息 ,一开始以为一定需要非静默授权。非静默授权一般都是用户没有关注公众号的情况下才会用的。

    d 之前没接触过公众号开发,刚开始跟几个同事讨论这个东西,他们竟然都很肯定的说openid每一次都会变/或者重新关注公众号后会变,今天事实证明他们错了。因为openid变掉的话我都没办法标识用户了,搞得慌慌的。看来实践出真知,而且自己不确定的技术一定不要说的很确定的样子,对人对己都不好,切记。

  • 相关阅读:
    一、JQuery选择器
    二、HelloMaven-第一个Maven项目
    一、maven的简介和环境搭建
    Junit源码
    五、spring和Hibernate整合
    JS 冒泡排序从学到优化
    JS小案例(基础好烦恼少)----持续更新
    JS+PHP实现用户输入数字后取得最大的值并显示为第几个
    将博客搬至CSDN
    HTML表单相关
  • 原文地址:https://www.cnblogs.com/shawn-he/p/11247853.html
Copyright © 2011-2022 走看看