小程序基础知识点讲解-WXML + WXSS + JS，生命周期

小程序基础

小程序官方地址，小程序开发者工具，点击此处下载。在微信小程序中有一个配置文件project.config.json，此文件可以让开发者在不同设备中进行开发。

微信小程序共支持5种文件，wxml，wxss，js，json，wxs以及图片文件等。每一页面都具有wxml，wxss，js，json文件，但比不是必须的，小程序和网页类似，一种以html+css+js，而小程序则是wxml+wxss+js，如wxml用来描述页面结构，wxss用例描述页面的样式，js用来添加逻辑信息的。

wxml

wxml用来构建页面的结构

//数据绑定

<view> {{message}} view>

// page.js
Page({
  data: {
    message: 'Hello world!'
  }
})

学会用数据绑定，wxml中的动态数据都可来自对应的Page的data中的数据，如何绑定是很简单易懂的。如

// 使用{{ ... }}
<view> {{ message }} view>

<view id="item-{{id}}"> view>

// 对应中的Page的data数据
Page({
  data: {
    id: 0
  }
})

<view wx:if="{{condition}}"> view>
Page({
  data: {
    condition: true
  }
})

重点

true：代表真值。
false：代表假值。

// 不可少的 {{ ... }}
<checkbox checked="{{ture}}"> checkbox>

<view hidden="{{flag ? true : false}}"> Hidden view>

// 必备掌握
<view>{{object.key}} {{array[0]}}{{array[1]}}view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['hh','da']
  }
})

// 数组
<view wx:for="{{[zero, 1, 2, 3]}}"> {{item}} view>
Page({
  data: {
    zero: 0
  }
})
// item，条目

<template is="object" data="{{for: a, bar: b}}">template>
Page({
  data: {
    a: 1,
    b: 2
  }
})
// {for: 1, bar: 2}

// 用...来将一个对象展开

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})
// {a: 1, b: 2, c: 3, d: 4, e: 5}

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})
// {foo: 'my-foo', bar:'my-bar'}

// 后边的会覆盖前面
<template is="object" data="{{...obj1, ...obj2, a, c: 6}}">template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})
// {a: 5, b: 3, c: 6}

列表的渲染，通过wx:for，下标变量名为 index，数组当前项的变量名为 item。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

wx:for-item
wx:for-index

<view wx:for="{{array}}" wx:for-index="indexcoding" wx:for-item="itemcoding">
  {{indexcoding}}: {{itemcoding.message}}
view>

// wx:if="{{condition}}" wx:else wx:elif
<view wx:if="{{length > 5}}"> 1 view>
<view wx:elif="{{length > 2}}"> 2 view>
<view wx:else> 3 view>

重点

wx:if 为 false，框架什么也不做，只有为真的时候才开始局部渲染。
wx:if 有更高的切换消耗而， hidden 有更高的初始渲染消耗。

// 模板 template