【微信小程序低代码开发】二，在实操中化解小程序的代码组成
作者：互联网
一，最小的小程序文件组成
当我们创建一个小程序项目时，开发者工具会自动帮我们创建一些默认的结构，但为了去了解小程序执行时的步骤，我们可以删除这些结构，只留下pages文件 如下所示： 这时候我们ctrls保存编译一下，会发现它会出现一行报错 app.json: app.json 未找到 也就是说编译时，小程序会先去找我们的app.json文件
- 那么现在我们创建一个app.json文件在根目录下，在里面放上JSON文件的格式，一个大括号包起来，里面不写东西。 再保存编译: 报错如下
- app.json里的pages是什么？里面配置的是我们页面的路径， 那么我们给它填上一个路径 这就在告诉编译器，我们的一个页面的路径，这时候编译器并没有报错，但它警告说没有找到我们的app.js文件
- 在根目录在再添加app.js文件，里面什么都不放，这时候编译成功，这就是一个最小小程序的项目。
app.js文件是小程序项目的入口文件，在编译时，编译器配置全局后，就会去找我们根目录下的app.js文件，通过里面的APP()函数，创建出一个小程序实例
二，与web区别
2.1 WXML和HTML
它与HTML的区别有几点
- 属性节点 在img中，是用属性src存放链接，而在image中，是用url存放
<img src="#"> <image url="#">
- 多了类似vue的语法 什么，没学过？没事，照样学！ 其实就将渲染和逻辑分离的MVVM模式，在网页的开发中，我们经常通过JS操作DOM，当项目越来越大时，你的代码会充斥着非常多交互逻辑和程序的各种状态变量，这样结构上不是很友好，而MVVM开发模式就是提倡不让JS直接操控DOM，JS只需要作为一个管理者，区别出状态，然后通过模板语法（react、vue）来表述状态与界面结构的关系即可 小程序框架也是用到这个思路，如下： WXML可以这样写：
<text>{
{msg}}</text>
JS无需获取变量
this.setData{
{
msg: "Hello World"}}
这种我们称为数据绑定，通过双大括号的方式，将一个变量绑定到页面，我们可以直接在JS对其进行修改，现在可以先了解一下
2.2 WXSS和CSS
- 新增尺寸单位，在CSS样式中，开发中需要手动用rem对不同屏幕大小进行换算，而WXSS新增的rps可以自动换算像素单位
- 全局样式 也就是app.wxss文件，与之前app开头文件一样，里面说设置的样式，会对所有页面生效，也就是全局样式，而各页面的样式文件，只对该页面生效
- WXSS只支持部分选择器 类选择器，id选择器，标签选择器，并集选择器，::after和::before
2.3 JS
与用户的交互我们交由JS脚本文件完成，利用之前提到的数据绑定，如我们获取用户的点击状态然后进行响应：
<view>{
{msg}}</view>
<button bindtap="click">点击有好事发生</button>
bindtap进行事件绑定，当点击后会在该页面对应的Page中找到对应事件处理函数
Page({
click: function(){
this.setData({
msg: "Hello World"})
}
)
这些事件和组件的使用后面会边应用边讲解
在项目结构中，也有各个层次的JS文件
- 如前面提到的app.js文件，是整个项目的入口文件，小程序将调用里面的App函数，将小程序实例化并运行 各页面文件夹下的的.js文件，调用里面的Page函数，实例化并运行页面 还有一个utils文件夹下的普通JS文件，这是功能模块文件，常常用来封装公共的函数和属性
三，配置文件JSON
3.1 app.json
3.1.1 创建新页面Pages
上面说到的app.json就是配置全局的静态数据，像是里面的pages属性，里面存放页面的路径
上一章我们讲过在一个页面文件中需要有四个不同类型的文件，但是我们不需要一一创建
只需要在pages文件夹上创建一个文件夹，然后右键新建的文件夹选择新建page
填入我们想要的文件名，如index，我们会发现，它会自动帮我们新建那四个文件，同时，在app.json中，开发者工具会自动在pages中添加新建页面的路径
3.1.2 修改项目页面首页
小程序会将全局配置文件app.json下pages的第一个页面默认为首页，如果需要更改首页，只需在首页的路径换到pages的第一行即可
{
"pages"[
"pages/list/list",
"pages/index/index"
]
}
3.1.3 app.json其他全局配置
- window 配置小程序所有页面的顶部 用于设置状态栏，导航条，标题，窗口背景色等 这里介绍几个比较常用的
- navigationBarBackgroundColor 设置值为十六进制的颜色值，设置导航仪背景颜色
- navigationBarTextStyle 标题颜色设置，不过只支持white和black
- navigationBarTitleText 标题文本设置
例子展示：
{
"pages": [
"pages/index/index",
"pages/list/list"
],
"window": {
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "第一个小程序"
}
}
- tabBar 底部tab栏设置 主要用到的属性有
- list 底部列表，最少放俩个，最多放五个
- color 文字默认颜色
- selectedColor 被选择是文字颜色
- backgroundColor tab背景颜色 颜色需要使用十六进制颜色值
展示：
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/list/list",
"text": "目录"
}
],
"color": "#fff",
"selectedColor": "#999",
"backgroundColor": "#111"
}
全局配置的属性很多，这里先做一个了解
3.2 project.config.json
项目的配置文件，项目的公共配置会写在里面，如项目名字，项目的appid，源码目录等等 其实还有一个文件叫project.private.config.json，里面会写项目的个人配置