携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
小程序(Mini Program)是一种不需要下载安装即可使用的应用，它实现了“触手可及”的梦想，使用起来方便快捷，用完 即走
最初我们提到小程序时，往往指的是微信小程序, 但是目前小程序技术本身已经被各个平台所实现和支持
-
小程序作为介于H5页面和App之间的一项技术,-
相比比传统H5页面， 小程序在APP中的体验要更好
-
而相当于传统的App，使用起来更加方便，不需要在应用商店中下载安装，甚至注册登录等麻烦的操作
-
-
小程序可以间接的动态为App添加新功能- 传统的App更新需要先打包，上架到应用商店之后需要通过审核(App Store)
- 小程序可以在App不更新的情况下，动态为自己的应用添加新的功能需求 (但是依旧需要审核)
核心技术
| 技术 | 说明 |
|---|---|
| WXML | 类似于HTML 本质上是一个个的组件 |
| WXSS | 类似于CSS，添加了某些的功能(类似于rpx) |
| JavaScript + WXS | 类似于JavaScript |
目录结构
. # 一般放在项目根目录下的文件是全局文件，如配置文件，入口文件，全局脚本，全局样式
├── app.js # 注册APP的脚本
├── app.json # App配置文件 也是整个项目的入口文件
├── app.wxss # 全局样式
├── pages # 用于存放小程序页面的文件夹
│ └── index # 一个小程序页面由以下四部分组成
│ ├── index.js # 页面脚本逻辑
│ ├── index.json # 页面配置文件
│ ├── index.wxml # 页面UI结构
│ └── index.wxss # 页面样式文件
├── project.config.json # 整个项目的配置文件
├── project.private.config.json
├── sitemap.json # 配置那些页面可以被爬虫爬取的配置文件
└── utils # 其它文件夹 -- 如存放工具函数的文件夹
└── util.js
初体验
数据绑定
<!--
在小程序中，组件并不需要有且仅有一个根
对于页面，在每个页面的最外部会使用page组件进行包裹
对于组件，会使用shadow dom的方式进行插入
-->
<!-- text是一个行内元素 --- 类似于span -->
<text>在这里编写页面结构</text>
<!-- 数据的绑定也是使用mustache语法 -->
<!-- view组件是一个块级元素 --- 类似于div -->
<view>{{ msg }}</view>
// Page是小程序提供的全局方法
// 该方法需要传入一个配置对象
// 通过该方法会返回一个对应的页面实例
Page({
// 定义数据
data: {
msg: 'Hello World'
}
})
列表渲染
<!-- users: ['Klaus', 'Alex', 'Steven'] -->
<!--
1. block 类似于 vue中的 template标签
2. wx:for 功能 类似于 vue的 v-for
wx:for 中传入的值是需要循环的内容
设置后，默认会生成一个变量 item 存储每一次迭代获取的元素
同时，会默认生成一个变量 index 存储每一次迭代对应的索引
因为wx:for 默认也使用了虚拟dom，需要进行diff算法
所以在循环元素上需要提供wx:key属性
wx:key属性的值 有两种类型:
1. 字符串 表示的是循环变量上的某一个属性 如 wx:key="name" --- item.name
2. *this 表示的是循环变量本身 即 *this === item
ps: 虽然直接将循环变量以字符串形式 作为 wx:key的属性值 小程序也是支持的 但是不推荐
wx:key="item" === wx:key="*this"
-->
<block wx:for="{{ users }}" wx:key="*this">
{{ item }} - {{ index }}
</block>
事件监听
<view class="counter">
<!--
button组件 有一个size属性来决定button的大小
默认情况下，size属性的值为default 也就是以块级元素形式进行展示
size属性还有另一个值 为 mini 表示的是以行内元素的形式进行替换
button也可以通过type属性来决定按钮的默认样式，可选值如下:
default --- 默认值 - 无样式
primary --- 蓝底白字
warn --- 红字显示
-->
<button size="mini" type="primary" bindtap="increment">+1</button>
<text class="count">{{ count }}</text>
<button size="mini" type="primary" bindtap="decrement">-1</button>
</view>
Page({
data: {
count: 0
},
// 对于页面而言, 对应的方法直接写在配置对象顶层即可
increment() {
// 在方法中，可以使用this 获取到当前页面的Page实例
// setData方法会将传入的对象 和 当前Page实例的data对象 进行合并 类似于 Object.assign操作
this.setData({
count: this.data.count + 1
})
},
decrement() {
// 如果直接对data中的数据进行修改的时候
// 对应的数据会发生改变，但是界面并不会进行重新渲染
// 这一点和react一致
// 所以需要调用setData方法进行数据的修改，在数据发生改变后，小程序才会自动重新渲染界面
// setData方法 类似于 React的setState方法
// 不同的是对于setData而言
// 1. setData 在逻辑层的操作是同步，因此 this.data 中的相关数据会立即更新
// 2. setData 在视图层的操作是异步，因此页面渲染可能并不会立即发生
this.setData({
count: this.data.count - 1
})
}
})
MVVM
小程序和Vue一样，也是遵循MVVM架构的
小程序通过MVVM架构，让我们从命令式编程 转向 声明式编程
| 分层 | 说明 |
|---|---|
| View | 对应的wxml 就是对应的视图层 |
| Model | 小程序每一个页面的逻辑 就被称为App Service |
| ViewModel | 小程序原生提供的框架 就被称之为 MINA框架 |
