小程序1——数据绑定、模板引用、wxss、wxs框架、基础类库

官方文档： https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

一、WXML特性之数据绑定

二、WXML特性之模板及引用

1. template模板

home.wxml

<template is="tempitem" data="{{...people}}"></template>     <!-- 该行代码决定了模板的位置 -->
<template name="tempitem">
  <view>{{name}}</view>
  <button bindtap=''>点击隐藏</button>
</template>

home.js

Page({
  data: {
    people: {
      name: "jack",
      age: 12,
      id: 123
    }
  },

template模板有自己的作用域，不存在嵌套引用，避免造成死循环，比如模板a引用了模板b，在c.wxml中引用模板a时，并不会引用到模板b。

2. 文件引用方式

1. import

home.wxml

<import src="a.wxml"></import>
<template is="a"></template>     <!-- 该行代码决定了模板的位置 -->
<!-- 上面两行代码上下顺序不影响模板位置及引用 -->

<template is="tempitem" data="{{...people}}"></template>
<template name="tempitem">
  <view>{{name}}</view>
  <button bindtap=''>点击隐藏</button>
</template>

home.js

Page({
  data: {
    people: {
      name: "jack",
      age: 12,
      id: 123
    }
  },

a.wxml

<template name="a">
  这是a.wxml模板内的元素
</template>

2. include

home.wxml

<!-- <import src="a.wxml"></import> -->
<!-- <template is="a"></template> -->
<include src="a.wxml" />      <!-- 该行代码决定了模板的位置 -->

<template is="tempitem" data="{{...people}}"></template>
<template name="tempitem">
  <view>{{name}}</view>
  <button bindtap=''>点击隐藏</button>
</template>

home.js

Page({
  data: {
    people: {
      name: "jack",
      age: 12,
      id: 123
    }
  },

a.wxml

<template name="a">
  这是a.wxml模板内的元素
</template>
<view>这是a.wxml模板外的元素</view>

3. import和include的引用区别

1. import引入的是模板内的元素，而include引入的是模板之外的所有元素
2. import必须与<template is=“xxx”></template>一起使用，否则没有效果。而include可以单独使用。

三、wxss

1. rpx

关于px、rpx、em、rem的作用：https://blog.csdn.net/Riven_wn/article/details/80528187

2. 选择器优先级

3. 小程序中的javascript

小程序中没有BOM和DOM对象，所有jquery、zepto等库无法使用。同时也缺少node.js中native和npm模块，因此也不能使用一些原生库和用npm进行包管理。

不同平台上javascript的运行环境。

四、wxs框架

wxs全称：wxscript
可通过标签<wxs>或.wxs结尾的文件来声明。

1. <wxs>和.wxs文件

index.wxml

<wxs module="md">
  module.exports = {
    msg: "hi"
  }
</wxs>
<view>{{md.msg}}</view>

<wxs src="./m2.wxs" module="m2"></wxs>
<view>{{m2.msg}}</view>

m1.wxs

module.exports = {
  msg: 'from m1'
}

m2.wxs

module.exports = require('./m1.wxs')

注意：模块名称在同一文件中引用时会被覆盖。

2. 注释

index.wxml

<wxs module="md">
  var v = 1
  module.exports.value = v
  //单行注释
  /*
  多行注释
  console.log(value)
  */
</wxs>

3. 运算符

wxs模块内不支持try…catch…语句。

4. 数据类型

1. number
2. string
3. boolean
4. object
5. array
6. function
7. date
8. regexp

与平时使用的javascript不同的是，小程序中生成date对象时需要使用getDate()函数，生成regexp对象时需要使用getRegexp()函数，而不是用new操作符。

wxs内数据类型可以用constructor属性来判断。

5. 基础类库

1. Number
2. Date
3. Global
4. console
5. Math
6. JSON

以上类库的使用方法与ES5一致。
console类库之提供console.log()方法。
Date类库只提供ES5中Date构造函数的三个方法：

1. Date.parse() // 可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。
2. Date.now() // 返回当前时间的时间戳
3. Date.UTC() //