小程序列表渲染、模板語法、wxml的引入、wxs

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/reference/

小程序列表渲染其實和vue的很類似，只是有微小的差別

 

 

 block標簽

 block和view、text組件不一樣，block就是一個標簽，不是組件，不會渲染出來的

 

 

 

 

 

 

 

 

 

 我們可以使用 :wx:key="*this";來綁定key，簡單易行，不用花費時間去給key取別名（:wx:key=" 'name' + index "）

 模板語法：

 

 

 

 模板在沒被使用前是不會被渲染的

之前小程序沒有自定義組件，為了提高代碼的復用性，搞了個模板，現在有自定義組件了，用的相對少一些

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

wxml的引入：

在一個文件中創建一個wxml文件，里面放着一個模板，

 

 

在需要用的wxml頁面，這樣寫：

<import src="相對路徑/絕對路徑" />

 

 import導入不能循環導入，（循環導入，導入的模板中還導入了另一個模板），在小程序中會報錯

include是不能導入模板的

include是導入wxml文件的：（可循環導入）

比如多個頁面都用到了頭部和底部，那么我們可以將頭部和尾部單獨的寫在一個wxml文件中，在需要用到的頁面用include導入：

先創建一個header.wxml

 

 在home.wxml中用include導入

<include src="相對路徑/絕對路徑" />

另外，include和import還有一種不同的是，include可以循環導入，比如a.wxml被include導入到b.wxml，然后b.wxml又被include導入到了c.wxml，那么c.wxml就有了a.wxml和b.wxml的內容。

 wxs：weixin  Script

 

 

 

 

 

 

 

 

 上面這種代碼是不能在小程序中寫的

 

 

 

也就是說，在wxml中不能調用page中定義的函數的，只能以綁定事件的形式調用

 

 

 

 

 

 

 

 

 

 

 

 

 

 注意 <wxs module="模塊名稱"></wxs>

wxs必須有module屬性，定義模塊名稱，在wxml中才可以使用

另外需要注意的是，如果用<wxs src="相對路徑"  />引入wxs文件   不能使用絕對路徑

 

。