微信小程序开发概述

微信小程序开发概述

由于微信的使用人数众多，因此微信小程序也受到许多企业公司的推崇。除此之外小程序还有开发简单容易，用户流量较大的优点，因此学习小程序还是很有意义的。

开发入门

浏览器环境的前端html、css、js分别对应于微信中的wxml、wxss、js文件。与浏览器环境不同的是每个页面(Page)和整个应用(App)都有对应名称的json文件用于配置，project.config.json文件用于开发环境的配置。

wx架构.png

WXML

wxml(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

wxml页面数据绑定使用双括号的形式

 {{a + b}} + {{c}} + d 

数据是单向绑定的，只有通过setData方法改变Page的data对象中的属性才能改变页面中对应表达式中的值

条件渲染与列表渲染

条件渲染与列表渲染相当于，vue中的组件

条件渲染

 1 
 2 
 3 

wx:if是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

列表渲染

  {{idx}}: {{itemName.message}}

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 中的输入内容，的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key的两种值：字符串代表item中的某个熟悉;*this代表循环中的item本身

template

template定义的模板可以在任意地方引用