微信web的开发总结


title: 微信web的开发总结
date: 2018-06-21 11:18:21
tags: web


最近写了一个web微信端的项目。关于国际足联世界杯竞猜类的活动。对于第一次写H5有些陌生但却又有些熟悉。而且写项目的那几天很多东西也都是现学现卖。遇到的问题和解决的思路,在这里我先总结一下。


WechatIMG1.jpeg

h5移动端大家选择哪种方式

传统在大家写h5页面的时候,大家会选择jquery + h5 + css 来解决。但是在移动端的时候,因为涉及到移动端的一些情况,大家选择了zepto.js来,因为zepto 是一个轻量级的库,加载项目,大家只需要使用他的api,而zepto的使用极大的参考了jquery,可以说,95%的和jquery的相似。

屏幕快照 2018-06-16 下午10.23.34.png

更多的信息请看官网。
通过上图其实大家不难发现,其实zeptojs的掌握只需要了解他的四大模块,第一就是core的一些方法的使用,第二就是,event 包括on()&off()的处理,第三是ajax 的请求。第四就是 form表单的一些内容。

h5页面的适配问题

h5的适配在项目中,大家通过增加meta。

    <meta name="viewport" content="width=device-width,user-scalable=no" />

并且在渲染的function中增加如下代码。

    <script>
        (function () {
            var html = document.documentElement;
            var htmlWidth = html.getBoundingClientRect().width;
            html.style.fontSize = htmlWidth / 15 + "px";
        })()
    </script>

这样在计算的时候,比如项目的高保真(通常是以iphone6为基准 正式宽高的两倍)测量的高度是 50,这个时候 50/50 = 1 rem 。放入实际项目中运用。当然啦,这个需要大家不断的运算。如果使用less 或 sass 的话,会极大的方便大家的使用。

当然这里的适配方案不唯一。

h5的跨域问题以及解决方案

最糟心的其实是H5的跨域问题。原本因为项目只有一天写代码的时间,而且我看内容也很简单,就没想着package.json。node_module的方式去写,更没用想过写server 去 request 后台请求给前台。

因为后台只支撑post请求, 并且也没加入 cors ,其实最简单的方式就是后台加入

response.setHeader("Access-Control-Allow-Origin","*"); 

更多关于cors的信息,请看阮一峰老师的文章跨域资源共享 CORS 详解

或者支撑get请求的时候,前台请求使用jsonp的方式。

以上方式都不支撑的时候,通常有两种方式,第一种是前端部署+nginx代理。第二种 也就是这次我使用的方式就是 使用 thymeleaf
关于thymeleaf的一些用法。
写习惯了react项目,习惯了MVVM的方式。但是thymeleaf是很典型的mvc的模式,在control层写入请求,把数据response或者放置在model层中,前端直接拿数据使用渲染View层。

微信授权的一些必要常识点

微信网页授权官网

这里的信息基本都是来自上面的官网信息的。首先,想要获取授权,一定要有一个服务号(300一年的认证,必不可少)。其次认证之后。需要在公众平台官网中的“开发 - 接口权限 - 网页服务 - 网页帐号 - 网页授权获取用户基本信息”的配置选项中,修改授权回调域名。请注意,这里填写的是域名(是一个字符串),而不是URL,因此请勿加 http:// 等协议头;

关于网页授权的两种scope的区别说明

  • 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid
  • 以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的

项目中大家采用下面这个。

用户授权获取code的方案。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。

这里需要突出强调的是回调的地址 -需要对回调的地址做urlEncode处理,其他的参数配置好,当大家点击上述链接的时候,微信会自动重定向到大家写入的回调地址。而不需要用户自己ajax请求。

回调的同时大家会取到code ,这个时候,第二步:通过code换取网页授权access_token

第三步:刷新access_token(如果需要)

第四步:拉取用户信息(需scope为 snsapi_userinfo) 以access_token和openid为基础去取信息。

需要测试的话,大家可以使用微信公众号给出的测试账号来进行测试。
拿到你自己的测试账号,配置参数。


image.png

关注你自己的测试公众号就可以进行测试。以上就是微信web开发的一些个人经验。在这里记录。学习了也增长了常识,果然上手项目才是学习和入门最好的方式。

更新的文章同样会更新在我的个人微博 KrisLee 上