微信小程序 - 入门篇

微信小程序入门

---

全局配置

全局配置

---

window配置

window全局配置

window全局配置也属于全局pages配置的一种，是用来配置所有微信小程序页面的

---

微信组件

微信组件

常用：

view：视图容器

text：文本

icon: 图标

rich-text:富文本

button:按钮

input:输入框

checkbox:多选

checkbox-group:多选选择器

radio:单选

radio-group:单选选择器

form:表单

picker:滚动选择器

editor:富文本编辑器

…

---

微信小程序与Vue

{{ }} 双括号语法(微信小程序) -> {{ }} 插值表达式 【用法一样】

wx:if 条件判断(微信小程序) -> v-if条件判断 【用法一样】

hidden 对标 Vue的 v-show 指令 【用法一样】

wx:for 与 Vue 的 v-for 有些区别

• 对于循环的用法有些区别，Vue很明确的告诉你使用的是for…in 循环，在v-if中需要书写for…in循环，而在微信小程序中则是直接填入数组，让微信小程序在后台自己遍历操作，然后我们会隐式的给到你item以及index值

数据绑定 : 数据绑定和Vue类似，也是在页面实例下的data节点中，但是微信小程序修改数据就和Vue有些区别了。他不能直接修改，这有点React了：

      this.setData({
        canIUseGetUserProfile: true
      })

页面声明周期：

经典一张图：

---

复用性

微信小程序主打的就是体积小，所以在复用性这方面做的一定要到位

Style样式复用：

当我们创建好公共CSS之后（当然，在微信小程序提供的公共WXSS中也是可以共用样式的），在需要复用的多个样式表中可以使用 import 导入语法进行样式的导入

单个页面模板复用：

template

多个页面引用复用

import&include

对于import导入WXML语法，官方这样说：import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template

简单理解就是A是B的朋友，C是A的朋友，但是B与C没有关系（只能导入查询一层）

include 可以将目标文件除了