虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

前言

撰文:川川

在小程序开发中与网页开发虽然具有相似性,但仍然是有一些区别的,例如绑定事件的方式,处理事件穿透等

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.json

minprogram文件夹是小程序的前台代码,在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图片

(对于拍照,小野一下就好了,外出旅游,没个自拍杆,怎么照出180的大长腿的呢,哈哈)

关于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 要求标签必须是严格闭合的，没有闭合将会导致编译错误

（存片必备,都是一些开发资料,HTML5,JS,Java...请不要用下半身思考,哈哈..）

关于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的写法,但是不同的平台的小程序的脚本执行环境也是有所区别的,小程序目前主要可以运行在三大平台上：

1. iOS平台，包括iOS9、iOS10、iOS11

2. Android平台

3. 小程序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提供的设计稿而来的

至于自己个人的小程序用哪种方式都可以

赞 赏

往期推荐

小程序-云开发基础

React进阶(3)-上手实践Redux-如何改变store中的数据

React进阶(2)-上手实践Redux-如何获取store的数据

【自我介绍】

作者:川川,一个靠前排的90后帅小伙,具有情怀的代码男,路上正追逐斜杠青年的践行者,愿做你耳朵旁边的枕男,眼睛笔尖下的窗户

itclanCoder

添加微信suibichuanji

     

好知识,好经验值得点再看一下！