微信小程序

微信小程序的概念

官方解释：微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序是微信生态的一部分，它提供了一种更加 方便和高效 的用户交互方式。

好处：

用户多，用户体验好，底层可以调用原生的各种接口，一端开发，多端运行（iOS端、Android端）

• 类似于Web 开发模式，入门的门槛低：基本是类似于html+css+js；

• 可直接云端更新：微信审核，无需经过App Store等平台；

• 提示用户体验：通过提供基础能力、原生组件结合等方式，提升用户体验；

• 平台管控能力：小程序提供云端更新，通过代码上传、审核等方式，增强对开发者的管控能力；

• 双线程模型：逻辑层和渲染层分开加载，提供了管控型和安全性（沙盒环境运行JS代码，不允许执行任何和浏览器相关的接口，比如跳转页面、操作DOM等）；

小程序的开发主要分成三部分：

• 页面布局：WXML，类似于HTML开发
• 页面样式：WXSS，几乎就是CSS（某些不支持，某些进行了增强）
• 页面脚本：JavaScript+WXS，（JS，以及WeixinScript后续学习）

小程序结构划分：最上层App -> 多个Page -> 多个组件

小程序的MVVM架构

• DOM Listeners：ViewModel 层可以将 DOM 的监听绑定到 Model 层

• Data Bindings：ViewModel 层可以将数据的变量，响应式的反应到View 层

编程范式：

1. 命令式编程：原生操作DOM
2. 声明式编程：Vue/React/Angular

MVVM架构将我们从 命令式编程 转移到 声明式编程

页面脚本

new page({
    // 数据定义在data里面
    data: {},
    // 方法定义
    handleBtnClick(){}
})

wxml模板语法

数据绑定

列表展示（循环）

wx:for=”“

默认索引

默认每一项

wx:for-index 设置索引的变量名

wx:for-item 设置当前项的变量名

:key 绑定当前项是*this

事件绑定

bind事件名=事件处理程序

bind:事件名=事件处理程序

访问，修改data数据

// 1.错误做法：数据修改了，页面视图是不会刷新的
this.data.counter += 1

// 2.数据修改了，页面视图也刷新了
this.setData({
	count: this.data.count += 1
})