本来题目准备写
最佳实践
的,想了想,自己的水平应该还写不出最佳实践,可是这几天开发微信网页的时候发现了很多极为方便的开发技巧,大大提升了开发效率。本篇着重讲述微信网页前后端开发中的一些痛点以及一个可能的方案。
# 微信网页开发的问题 ↵
一个重要的问题就是线下和线上的不同,微信开发里面几乎很少照顾到线下(非公网IP)的集成开发,年初的时候我用 node 开发过一个简单的营销页的后台,因为项目不算复杂,两张表的数据库还有一些微信登录相关的操作,因此我所有的后台代码,都是在线上的 Linux 服务器上用 SSH + Vim 的方式书写的,还好前端代码是在本地完成,并在 localhost 上开一个端口进行开发,前端会调用远在服务器的跨域 API 执行业务代码。
实话说,这很不好,真的很麻烦,写起来也不方便做这样那样的调试,而且 SSH 时不时会掉线,又要重新登陆。
# 修改 HOST 控制 DNS 解析 ↵
近期,我重新考虑了一下这个问题,如果域名可以解析到本地上,那么有可能可以骗过微信,在本地上进行后台和前端的开发。
而
钦点
解析规则,可以修改 HOST 文件钦点一下。00127.0.0.1 wx.abc.com
在调整了 HOST 文件之后,刷新一下本地 DNS 缓存,再 ping 一下 wx.abc.com 可以看到已经解析到 127.0.0.1 了。
此外,如果你的路由器支持修改 HOST,请在路由器上修改,这样所有连着 Wifi 的手机都会被骗过,适合进行真机测试而无须将代码扔到线上进行线上测试。
# 服务器设置反向代理 ↵
我的电脑上跑的web服务器是 phpStudy 它带了一个 Apache,在网上搜索之后我修改了 vhost 文件,创建了一个新站点
wx.abc.com
,然后设置反向代理。按照优先级从上往下就是:
- /api 代理到本地的服务器 127.0.0.1:7788
- / 代理到本地 Webpack 的服务器 127.0.0.1:6666
这样就可以规避跨域了,所有接口都是同源的。
# 快速部署脚本 ↵
前端的代码部署最好是把前端静态文件全部传到七牛去,减轻服务器带宽压力,然后服务器上只要留一个 index.html 就可以了。(vue 脚手架的 webpack 单页)
为此,最好编写上传脚本把全部静态资源上传到七牛 (除了 index.html)
而且还要记得在 Webpack 配置里面把图片 build 的时候的 root 设置为你的七牛空间的域名。
而且脚本的最后一步还需要把 index.html 搞到服务器上去,我建议是使用 SFTP 就可以了,只要支持 SSH 传起来比较方便。
# 开发体验 ↵
总的来说,能搞定上面的这些活,微信网页开发体验还挺不错的,似乎像是本地搭了一个外网环境一样,确实舒适,严格区分了线上和线下,测试也可以正常进行,所有的开发都变得顺其自然一气呵成 233
我从中学到了很多,近期我在架设许愿墙的后台,学到了大把大把的后台开发技术,尤其是对异步有了进一步的认识,还有 redis 缓存和 mongoose 的使用等等。
当然吃了不少屎,比如应该时刻注意缓存的刷新、微信的这点那点坑、mongoose自带的 mpromise 的行为跟原生 promise 不一致的问题等等。。。
有机会开一篇详细的谈谈许愿墙的前后端实现