1.微信小程序代码结构及基本配置
1.1 四个目录结构
首先,在这里我们看到了这个目录结构下,他有四个文件,这四个文件的作用就是,帮我们注册一个文件小程序,然后帮我们配置一个微信小程序他的一个全局配置信息,以及帮我们去设置一下微信小程序他的一个全局样式,还有一个project.config.json文件,这个文件的作用就是保存微信开发者工具的配置信息,因为我们平常在使用一个工具的时候,都会根据各自的喜好,去做一个个性化的设置,例如界面的颜色,配置编译等等,如果我们换了一个电脑,重新安装这个工具的时候,往往还需要自己重新配置,考虑到这个点,微信小程序的开发者工具会帮我们在每一个项目的根目录下去生成这样的一个文件,当我们重新安装工具或者换电脑,我们只需要将这个项目的代码导入进去,开发者工具就可以自动的帮我们去恢复这个项目的个性化设置,
app.js就是帮我们的微信小程序去注册一个这样的微信小程序应用
app.json就是帮我们去进行一个微信小程序的一个全局配置,包括我们的一些网络请求的超时时间,还有一些窗口的表现,还有各个页面的注册路径,
app.wxss设置微信小程序的全局样式
pages文件夹里面存放的是微信小程序所有的一个小程序页面,每个小程序页面最多是由四个文件组成,分别是js文件,json文件,wxml文件,wxss文件。 js文件时帮我们去处理小程序页面的逻辑和一些数据交互,json文件是帮我们配置微信小程序的一个页面的一个配置信息,wxml是用来帮我们去展示小程序页面的元素和内容,wxss文件是帮我们去设置小程序页面的元素以及样式,untils文件一般会存放我们的一些工具函数,可以达到一个代码复用的目的。
2.1 文件结构
刚刚我们讲了微信小程序的目录结构,我们可以知道我们小程序它的配置文件其实是有两个,分别是:app.json全局配置文件,另一个是页面的配置文件,在这里全局的配置有五项,分别是pages,tabBar,networkTimeout,debug,navgationStyle,window<br>
pages主要是注册我们微信小程序的所有页面
tabBar是因为如果我们小程序多tab的应用,我们就可以通过这个tabBar的配置项来指定tab栏的表现
networkTimeout可以去设置我们各个网络请求的一个超时时间
通过开启debug在微信开发者工具控制台里面打印出我们所需要的调试信息,
在这张图里面我们并没有展示window对象,是因为我们在微信小程序页面也可以去设置它的一些window对象的配置属性,比如我们导航栏的相关信息设置,其中包括导航栏的背景颜色,导航栏的标题颜色,导航栏标题的文字内容,以及窗体的表现,窗体的表现主要是窗体的一个背景颜色,还有窗体在下拉时的文本样式,通过enablePullDownRefresh这个选项呢,可以去设置微信小程序全局或单个页面下拉刷新的一个表现。如果页面想设置滚动,我们也可以通过disabledScroll设置我们页面是否开启滚动。如果维微信小程序全局和单个页面window的一些配置项重复了,页面的配置项会覆盖我们全局的配置项,
最后说明一下,我们每个文件结构里面的方法都有很多相关设置的参数,大家可以结构官方开发文档来进行学习
3.写一个HelloWorld
3.1 当我们创建了一个小程序项目之后,就会进入到微信开发者工具界面,在代码编辑区这里我们可以看到有一个project.config.json文件,这个文件是开发者工具自动帮我们项目生成的一个开发者工具的配置文件,这个文件主要是保存了我们对开发者工具的一些个性化设置,
3.2 在前面我们提过,构建一个微信小程序应用至少要有两个文件,一个是app.js文件,一个是app.json文件
3.2.1 app.js是帮我们去注册一个微信小程序的应用
3.2.2 app.json是对我们微信小程序应用的一个全局配置,
3.3 创建一个app.js文件
3.3.1 通过调用一个app函数来注册我们小程序的一个应用,这个app函数里面需要去传一个参数,这个参数是object类型的一个参数,在这个参数里面可以传入一些生命周期的钩子和一些事件处理函数,以及一些全局的数据。在这里我们可以传入一个空的类型的参数
3.4 创建一个app.json文件
3.4.1 在app.json这个文件里面,我们需要去注册我们的微信小程序所有页面的一个路径,我们通过page的属性来注册
3.4.2 在app.json这个文件里面,page属性的值是一个list类型的值。list里面是我们所有页面的一个路径
3.5 因为我们要写一个hello world,所以我们至少要有一个页面,在这里我们要去创建一个helloworld的页面,前面我们说过,要创建一个未见小程序的应用,我们需要有四个文件,js文件,json文件,wxml文件,wxss文件
3.5.1 在这里我们去创建一个文件名叫helloworld的wxml文件(wxml就是要描述页面上都有哪些内容)
3.5.2 通过view标签来包含helloworld,(view标签我们后面在小程序的框架和组件的时候我们会提到)
3.6 接下来在创建一个helloworld.js文件
3.6.1 helloworld.js文件是帮助我们去注册一个微信小程序页面,类似于app.js一样,他是通过page函数去帮我们注册的
3.6.2 这个page函数也需要一个参数,这个参数的类型也是object,我们可以在这个参数传入一些我们页面的生命周期钩子,和一些事件处理函数,以及我们页面的一些默认数据等等。我们可以先暂时传入一个空的对象参数
3.7 然后我们在创建一个helloworld.json文件,这个helloworld.json文件是我们helloworld页面的一些配置,这里我们至少要传入一个空的page对象
3.8 我们在创建一个helloworld.wxss文件,这个文件用来描述我们小程序页面的样式
3.9 在这里helloworld算是创建完成了,这四个文件我们需要保持他们的命名一致,
3.10 接下来在app.json文件里面去注册我们刚刚创建的helloworld这个页面的路径,因为这个helloworld页面是在我们的根目录下面,所以我们就填入这个根目录里面对应的文件路径,保存之后,我们可以看到在开发者工具编译之后,我们的模拟器上就显示了一个helloworld,这个就是我们刚刚写的helloworld页面
3.11 在这里大家可以思考一下,如果我们的页面文件过多,我们都放在根目录下面,是不是就会显得杂乱无章?
3.11.1 在这里我们建议是要有一个专门去管理微信小程序页面的文件夹
3.11.2 首先在这里我们先创建一个名称叫pages的文件目录
3.11.3 然后在创建一个名称叫helloworld的文件目录,这个目录是管理这个页面对应的四个代码文件,将这个四个文件放入helloworld的这个文件目录里面
3.11.4 然后我们在将helloworld的这个文件目录在放到名称叫pages的这个目录里面
3.11.5 我们可以看到,在我们的文件路径更改之后,其实开发者工具会自动的再去编译一次,编译之后我们可以看到控制台报了一个错,报的错误的内容是没有找到在我们的app.json文件里面定义的这个helloworld页面对应的wxml文件,所以我们需要重新去配置一些,更改helloworld文件的路径,这个时候保存一下,我们在开发者工具页面左侧就可以看到我们的helloworld页面的内容了
3.11.6 接下来我们可以通过wxss文件的样式让我们helloworld页面的内容显得更好看一些