初入小程序 | 文档使用 | 注意汇总 - 视图篇rpx（responsive pixel）:可以根据屏幕宽度进行自适应

WXML

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

数据绑定

使用方法：

Text

<view>{{ message }}</view>

Page({
    data: {
        message: 'Hello World!'
    }
})

Property

<view id="wx-{{ id }}">xixi</view>

Page({
    data: {
        id: 9527
    }
})

Keyword

<checkbox checked="{{ isChecked }}"></checkbox>

Page({
    data: {
        isChecked: false
    }
})

注意：

不允许直接写 checked="false" 会变编译为字符串

运算

三元运算符
算术运算
逻辑判断

组合

<view wx:for="{{ [zero, 1, 2, 3, 4, 5] }}">{{ item }}</view>

Page({
    data: {
        zero: 0
    }
})

对象

运用解构赋值

<template is="objectCombine" data="{{ ...obj, c: 3 }}"></template>

Page({
    data: {
        obj: {
            a: 1,
            b: 2
        }
    }
})

注意：如果花括号和引号之间有空格，最终会被解析为字符串

<view wx:for="{{ [1,2,3] }} "></view>

解析成

<view wx:for="{{ [1,2,3] + '' }}"></view>

列表渲染

<block 
    wx:for="{{ [1, 2, 3] }}" 
    wx:for-item="num" 
    wx:for-index="idx">
    <view>{{ num }}</view>
    <view>{{ num }}</view>
</block>

注意：

block 制作逻辑控制，不做渲染
默认的下标为 index, 当前项为 item

wx:key 的值以两种形式提供

id, 直接写 item 里的key
*this, 解析 item 成唯一的 key

条件渲染

<block wx:if="{{ true }}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意：

wx:if 更高的切换消耗
hidden 更高的初始消耗

频繁切换的采用 hidden, 否则采用 wx:if

模板

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

<template is="msgItem" data="obj"></template>

Page({
    data: {
        obj: {
            index: 1,
            msg: 'Hello World!',
            time: '2018-07-19'
        }
    }
})

提醒：template is 可以使用 Mustache 写法动态添加模板

事件

<view id="tapTest" bindtap="tapHandle">Click Me!</view>

Page({
    tapHandle: function (event) {
        console.log(event)
    }
})

提醒：

bindtap 和 bind:tap 一样，1.5后支持
bindtap 和 catchtap 的区别在于，第一个冒泡，第二个阻止冒泡
冒泡事件列表查阅

事件的捕获阶段

点击 inner view, 先后触发 handleTap2， handleTap4， handleTap3 handleTap1

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

点击 inner view, 只触发 handleTap2

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  outer view
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
    inner view
  </view>
</view>

提醒：capture-catch 中止了捕获，取消了冒泡

事件对象

dataset

data-emlice-top => event.currentTarget.dataset.emliceTop (驼峰发)
data-emliceTop => eent.currentTarget.dataset.emlicetop(大写转小写)

引用

提供 import 和 include 两种引用

import

<!-- item.wxml -->
<template name="item">
    <text>{{ text }}</text>
</template>

<!-- index.wxml -->
<import src="item.wxml" />
<template is="item" data="{{ text: 'Emlice' }}"></template>

注意：import 具有作用域，即 C import B ，B import A，在 C 中只能使用 B 中定义的 template

include

include 可以将除了的代码外全部拷贝进来

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view>header</view>

<!-- footer.wxml -->
<view>footer</view>

wxs

小程序的一套脚本语言

模块

在 wxml 中采用 wxs 标签形式引入,并使用单闭合标签

src 路径必须为相对路径，暂不支持绝对路径，若 wxs 标签中有值则该属性设置无效
module 属性命名规则

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9）

<wxs src="../xxx.wxs" module="xxx" />

在 wxs 中采用 require 形式引入

const common = require('../xxx.wxs')

console.log(common.foo)

注意：wxs 只能在引入的 wxml 内被访问到，在 import 和 include 是访问不到的

变量

命名规则：

首字符必须是：字母（a-zA-Z），下划线（_）
剩余字符可以是：字母（a-zA-Z），下划线（_），数字（0-9
常见标识符，关键字不能作为变量名

其他文档详见

wxss

一套样式语言

尺寸单位 - rpx

rpx（responsive pixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iphone5	1rpx = 0.42px	1px = 2.34rpx
iphone6	1rpx = 0.5px	1px = 2rpx
iphone6 plus	1rpx = 0.552px	1px = 1.81rpx

建议：以iphone6 做为视觉稿的标准注意：在较小的屏幕上会出现一些毛刺，开发的注意

样式引入

@import 引入外部样式，用相对路径，并以 ; 号结尾。

注意：尽量少用甚至不用内联样式。

小程序样式只支持的选择器：

id
class
element
element，element
::before / ::after

app.wxss 为全局样式，page.wxss 为局部样式，局部样式可以迭代全局样式