小程序-详解初始代码目录结构

最新推荐文章于 2024-10-07 14:28:07 发布

itclanCoder

最新推荐文章于 2024-10-07 14:28:07 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/wzc_coder/article/details/103231883

版权

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

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

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

点击左上方,可关注本刊

前言

撰文:川川

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

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对象的其他字段下

代码风格