• 微信小程序 - 入门篇

    微信小程序入门

    文章目录

    微信小程序

    全局配置

    全局配置

    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
      })

    • 1
    • 2
    • 3

    页面声明周期：

    经典一张图：
    请添加图片描述

    复用性

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

    Style样式复用：

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

    单个页面模板复用：

    template

    多个页面引用复用

    import&include

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

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

    include 可以将目标文件除了