都知道 - 都知道 - 知识图谱网站

小程序开发整理


阅读 小程序开发整理 要知道:

本文将基于个人浅薄的经验来总结和整理一个基本小程序的从零开发到上线流程。从编码上讲小程序的开发非常简单,不过这是相对于目前流行MVVM的框架下的WebApp开发来讲的,换句话说再简单也需要完整的视图、脚本和样式以及服务端支持,在整个流程依上来说仍然是一个不小的体系。
整体的基本架构像这样:


准备工作小程序最直接的优势就是能消除浏览器端的种种适配与兼容问题以及能使用许多微信客户端提供的酷炫原生能力,而代价就是必须在微信后台做好种种配置,并在申请和认证过程中做出种种妥协。笼统来说必要的东西有一下几样:
1. 小程序主体即必须在微信公众平台上注册小程序并提供相关的主体信息,包括小程序名称以及业务范围,还有注册完成后的认证工作,这些直接影响到开发完成后的审核成功率。题外话是虽然现在小程序开放了个人的注册,但小程序本身目的在于提供具体的服务,服务内容不明确恐怕难过审核,这在笔者看来并不适合个人,终究只能玩玩罢了,个人小程序想上线还得先考虑清楚打算提供何种服务,以及没有支付能力带来的影响。
2. AppId、项目管理和https小程序申请完成后即可在后台得到自己的AppId与AppSecret用于开发。直接使用微信开发者工具进行开发个人认为是远远够了,不过这工具对小屏幕的电脑不怎么友好,开发工具内提供的能力已经基本够用来编码与测试了,目前发现客服消息是不能发起的,以及部分页面布局和样式会和真机有出入等问题。微信给出的小程序的代码管理规则比较固执,一个小程序分别会有一个开发版、体验版和线上版本,并且在后台添加指定权限的人员,开发者只能访问开发版,体验者只能访问体验版,整个小程序项目的代码文件暴露出来的只有最表面的代码文件,配置与依赖之类的都是不用开发者操心的。还有一个重要的东西就是https,也就是开发者自己的WebApi服务器必须使用https协议进行通信,这也是必须做的,因为小程序的架构下客户端与WebApi完全分离,认证就显得很重要了。
整体搭建现在专注于小程序的编写,来讲讲小程序如何一点点搭建起来。首先是一般目录结构,这里给出笔者的项目目录结构:

其中assets用来放图片图标等资源,pages下是小程序的所有子页面,utils下是封装的工具代码,包括网络请求代码等的封装。最后的三个app.xxx文件即小程序的全局配置。
app.js内可以处理页面初始化时的参数处理等。比如说对外推广了一个带参数的小程序码,由用户扫描进入后,可以在小程序首页提取小程序码附带的参数,也可以干脆在app.js里来提取,并且可以在这个脚本中定义全局数据等。app.json内配置全局的标题啊背景色啊底部导航啊之类的以及子页面也必须都在此先声明。具体的配置规则见小程序的官方开发文档。app.wxss即全局的样式配置。其中小程序自带的许多组件的样式可以直接覆盖掉,选择器直接写组件名,比如说: