小程序-详解初始代码目录结构
小程序-详解初始代码目录结构
作者 | 随笔川迹
ID | suibichuanji
前言
撰文:川川
在小程序开发中与网页开发虽然具有相似性,但仍然是有一些区别的,例如绑定事件的方式,处理事件穿透等
pages下面创建的每个文件代表的就是一个页面,也是一个模块,各个模块页面之间相互独立,具有独立的结构,样式与逻辑.
它与一些现今的流行框架(Vue,React,Angular)一样,都是数据驱动视图的,也是组件化开发方式
您将在本文中学习到
- 小程序项目录结构,每个文件代表的具体含义以及一些注意事项
- 关于JSON文件需要知道的
- 关于WXML文件需要知道的
- 关于WXSS文件需要知道的
- 关于JS文件需要知道的
· 正 · 文 · 来 · 啦 ·
小程序的目录结构
对于开发一个新的应用,上来不是一顿的写代码,如果一开始,弄明白下面几件事情,对于后续的编写代码以及拓展应用都会从容得多
- 小程序的代码文件组织结构,以及每个文件代表的含义
- 确定页面组件之间的边界
- 数据的编写与设计
之前利用微信开发者工具初始化了一个小程序云开发的模板,基于这个初始化项目的目录进行二次开发
该初始化项目对应的目录结构如下所示:
├─project.config.json // 工具配置文件,在工具上做的任何配置都会写入到这个文件
├─README.md // 说明文档
├─miniprogram // 小程序前台代码,前台开发的代码都是在这个目录进行开发
| ├─app.js // 入口文件,是App的启动脚本,可以处理一些App启动过程中页面加载之前要处理的事情,可设置全局变量对象,可相当于Redux中store的作用
| ├─app.json // 全局配置文件,配置包括window,页面,tab菜单栏等
| ├─app.wxss // 项目公共样式,它会被注入到小程序的每个页面,全局起作用
| ├─sitemap.json // 页面收录设置,类似于网页的seo
| ├─style
| | └guide.wxss
| ├─pages // 所有的页面组件都会在这个文件夹下,每个文件夹就是一个页面
| | ├─userConsole
| | | ├─userConsole.js
| | | ├─userConsole.json
| | | ├─userConsole.wxml
| | | └userConsole.wxss
| | ├─storageConsole
| | | ├─storageConsole.js
| | | ├─storageConsole.json
| | | ├─storageConsole.wxml
| | | └storageConsole.wxss
| | ├─openapi
| | | ├─openapi.js
| | | ├─openapi.json
| | | ├─openapi.wxml
| | | ├─openapi.wxss
| | | ├─serverapi
| | | | ├─serverapi.js
| | | | ├─serverapi.json
| | | | ├─serverapi.wxml
| | | | └serverapi.wxss
| | | ├─cloudid
| | | | ├─cloudid.js
| | | | ├─cloudid.json
| | | | ├─cloudid.wxml
| | | | └cloudid.wxss
| | | ├─callback
| | | | ├─callback.js
| | | | ├─callback.json
| | | | ├─callback.wxml
| | | | └callback.wxss
| | ├─index
| | | ├─index.js
| | | ├─index.json
| | | ├─index.wxml
| | | ├─index.wxss
| | | └user-unlogin.png
| | ├─im
| | | ├─im.js
| | | ├─im.json
| | | ├─im.wxml
| | | ├─im.wxss
| | | ├─room
| | | | ├─index.js
| | | | ├─room.js
| | | | ├─room.json
| | | | ├─room.wxml
| | | | └room.wxss
| | ├─deployFunctions
| | | ├─deployFunctions.js
| | | ├─deployFunctions.json
| | | ├─deployFunctions.wxml
| | | └deployFunctions.wxss
| | ├─databaseGuide
| | | ├─databaseGuide.js
| | | ├─databaseGuide.json
| | | ├─databaseGuide.wxml
| | | └databaseGuide.wxss
| | ├─chooseLib
| | | ├─chooseLib.js
| | | ├─chooseLib.json
| | | ├─chooseLib.wxml
| | | └chooseLib.wxss
| | ├─addFunction
| | | ├─addFunction.js
| | | ├─addFunction.json
| | | ├─addFunction.wxml
| | | └addFunction.wxss
| ├─images
| | ├─code-cloud-callback-config.png
| | ├─code-db-inc-dec.png
| | ├─code-db-onAdd.png
| | ├─code-db-onQuery.png
| | ├─code-db-onRemove.png
| | ├─code-func-sum.png
| | ├─console-entrance.png
| | └create-collection.png
| ├─components
| | ├─chatroom
| | | ├─chatroom.js
| | | ├─chatroom.json
| | | ├─chatroom.wxml
| | | ├─chatroom.wxss
| | | ├─dots.gif
| | | └photo.png
├─cloudfunctions // 云函数,相当于于我们的后台代码
| ├─openapi
| | ├─config.json
| | ├─index.js
| | └package.json
| ├─login
| | ├─config.json
| | ├─index.js
| | └package.json
| ├─echo
| | ├─config.json
| | ├─index.js
| | └package.json
| ├─callback
| | ├─config.json
| | ├─index.js
| | └package.jsonminprogram文件夹是小程序的前台代码,在pages文件夹下的每个文件夹,都分别对应着不同的页面,一个页面由三部分组成,界面、配置和逻辑,分别由配置代码json文件、模板代码 wxml文件、样式代码 wxss文件以及逻辑代码 JavaScript文件组成
它与网页开发对应的就是html,css,js,你可以把wxss前面的wx视作为c,而wxml的wx视作为HT,它的作用与网页开发中的文件一样,wxml承载着内容结构,而wxss负责样式,js对应负责页面的交互逻辑
但是需要注意的是,一个页面的文件必须需要放置在同一个目录下,同时描述页面的四个文件必须具有相同的路径与文件名,否则是会报错的,其中WXML文件和JS文件是必须存在的，JSON和WXSS文件是可选的
注意:每新增一个页面模块,都需要在小程序代码根目录app.json中的pages字段声明，否则这个新增的页面不会被注册到宿主环境中的
其实这是相当于配置路由
只是在小程序中,路由的配置(指的是要跳转到哪个页面去),相比与那些框架而言,简单得多了的
在小程序开发中,都是以组件化开发的方式进行的,将原先的div,p,span,img等标签元素封装成了具有特定语义的组件
view就相当于div,ul,li等块级元素,text就相当于span行内元素,而image对应的就是img图片
关于JSON文件需要知道
小程序的页面中的json文件是当前页面的配置文件,可以用于配置小程序窗口表现、设置多tab等。JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据,其实它是用代码的方式对当前页面的一个描述,但是以下几点是需要知道的
- JSON的Key必须包裹在一个双引号中,不能是单引号
- 数据值的格式可以是,数字,字符串,Bool值(true或者false),数组.对象,null,不能是undeifned,否则就会报错
- JSON里面也不能写注释,否则是会报错的
关于WXML文件需要知道
WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以快速构建出页面的结构
这里推荐几个比较实用的微信小程序UI组件库(仅供参考)
- WeUI组件库(微信官方设计团队和小程序团队推出的)https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
- Vant Weapp(有赞团队出品)[vant webapp](https://youzan.github.io/vant-weapp/#/intro](https://youzan.github.io/vant-weapp/#/intro)
- lin-ui(七月大佬出品)http://doc.mini.7yue.pro/
- ThorUI,也是一个开源的UI组件库,但是个人觉得文档不是特别全,但是研究里面的一些模板组件的封装实现,还是不错的http://www.donarui.com/ ... 这种小程序的UI组件库有很多,大家可以多去github上或者技术社区里多搜搜的,就会有意外的惊喜的
至于用不用开源的组件库,视自己的项目而定,如果是个人小程序,完全可以选用一些第三方的UI组件库,快速搭建页面的,也可以自己手撸一个的,但是自己还是要会封装组件的
一个完整的WXML语句由一段开始标签和一段结束标签组成，在标签中可以是内容，也可以是其他的 WXML 语句
这一点上同 HTML 是一致,但有所不同的是，WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误
关于WXSS文件需要知道的
- 每个页面下都有相对应的wxss文件,优先级大于app.wxss,你可以把定义在组件内的样式视作为内联样式,并且它只会对当前页面起作用,而外部的app.wxss视作为类class,公共全局的样式,它对pages目录下面的所有页面都是起作用的
- 选择器支持after,before伪类,但是不支持first-child,last-child,nth-child这类伪类
- wxss是不支持大括号嵌套({{}})的,也就是说key-frames,css animation不可用,但是transition是可以用的
- wxss不能使用本地资源,在给wxml元素添加背景图片时,background-image属性,无法使用本地图片(相对路径或者绝对路径)的方式引用图片,但可以使用网络图片(携带http协议的),base64格式图片,Image组件却是支持的
- wxss的样式不支持级联,比如.class1 p 这种形式的
- 不支持引入字体
引入样式方式
- 默认方式:默认的样式文件是[页面名].wxss,当前页面的样式都可以写在该文件里
- 样式导入:使用@import语句可以导入外部样式
- 内联样式:使用style,class属性控制组件的样式
尺寸单位
支持百分比,像素,rpx,rem,em 5种尺寸单位,如果是固定像素,页面元素尺寸不会变的话,那么用px的,在各个机型保持一致的话,比如:高度height属性值
单位 | 描述 | 示例 |
|---|---|---|
px | 像素(图片或者页面元素的基本单位,可以简单理解而为屏幕上的一个点) | width:750px |
em | 1em等于当前字体尺寸,2em等于当前字体尺寸的2倍,根据它的父级元素而定,它可以自动的适应用户所使用的的字体 | width:10em |
rpx | 可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx,例如:在iphone6上,屏幕的宽度为375px,共有750个物理像素,因此750rpx=375px物理像素,也就是说1px=2rpx,1rpx = 0.5px=1物理像素,通常来说,将设计稿设计成375px为准的 | width:750rpx |
rem | 它是根据页面的根节点的一个尺寸单位,把一个页面分成多少等分,若规定屏幕宽度为20rem,1rem=(750/20)rpx | width:10rem |
小程序当中使用的像素单位,官方推荐使用rpx,一般以一个设备375px为基准的,也就是iphone6作为视觉稿的标准,对应的就是1px = 2rpx的
关于JS文件需要知道的
小程序的js文件代表的是页面的逻辑,它负责页面的交互,一个应用仅仅只有界面展示是不够的，还需要和用户做交互:例如响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作
数据绑定:
WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性,它是利用双大括号,将视图view与页面的数据data绑定关联起来的
例如:如下所示,在wxml模板中
<!--pages/wxml/index.wxml-->
<view>{{time}}</view>在js中
// pages/wxml/index.js
Page({
/**
* 页面的初始数据
*/
data: {
time: (new Date()).toLocaleDateString() // 页面会展示出当前的时间，年/月/日
},
})Page是小程序页面的实例对象,Page() 构造器用来注册一个小程序页面,接受一个Object参数,其中data属性是当前页面WXML模板中可以用来做数据绑定的初始数据,凡是需要渲染到页面上的,则在data中进行初始化
注意事项:
- 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致,也就是修改页面的数据,只能通过this.setData()方法
- 不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug
- 与界面渲染无关的数据最好不要设置在data中，可以考虑设置在page对象的其他字段下
代码风格
- 箭头函数（应当多用,替代let that = this)避免了在函数内增加冗余的代码
- let const支持Es6定义变量的写法
- 模板字符串(反引号``),替代(+)加号字符串的拼接,在路由跳转传递参数时,经常会遇到
- 支持promise,以及async,await..
- ...
由于小程序支持Es6的写法,但是不同的平台的小程序的脚本执行环境也是有所区别的,小程序目前主要可以运行在三大平台上：
- iOS平台，包括iOS9、iOS10、iOS11
- Android平台
- 小程序IDE
这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同,目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准
一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的
如果发现有些代码在旧的手机操作系统上出现一些语法错误。
为了帮助开发者解决这类问题，小程序IDE提供语法转码工具帮助开发者，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在所有的环境都能得到很好的执行。
开发者需要在项目设置中，勾选 ES6 转 ES5 开启此功能,就可以了
菜单栏-->详情-->本地设置-->Es6转Es5(勾选)
结语
本小节主要讲述了小程序的初始代码结构,构建一个页面(组件)应该有哪几个文件,每个文件具体代表什么含义,以及编写WXML,WXSS,JS等的一些注意事项
对于编写样式,用官方或者第三方的一些UI组件库,快速的编写UI页面也是可以的,自己写样式也没问题,这个根据项目和公司的产品而定,如果已经有UI设计,那肯定是自己手写,按照UI提供的设计稿而来的
至于自己个人的小程序用哪种方式都可以