极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 新手教程 查看內容

小程序 template 模版使用方法

Rolan 2019-4-15 00:36

小程序開發語言雖然只能運行在微信小程序中, 但是它的設計同樣遵循了主流前端框架的主要特征——組件化,在小程序中組件化的實現有兩種方式:template 模版和Component 組件。 這兩種方式分別適用于不同的場景。temp ...

小程序開發語言雖然只能運行在微信小程序中, 但是它的設計同樣遵循了主流前端框架的主要特征——組件化,在小程序中組件化的實現有兩種方式: template 模版 和 Component 組件 。 這兩種方式分別適用于不同的場景。

  1. template 模版 主要用于展示,模版中不涉及事件處理, 需要處理的事件邏輯放在調用模版的頁面中。 一個 template 模版 只包含 wxml wxss 文件。
  2. Component 組件 作為一個單獨的功能模塊,不僅可以包含頁面展示還可以包含該模塊的事件邏輯處理。 像一個頁面一樣, Component 組件 可以包含 wxml wxss js json 文件。

1. 創建 template 模版

不同于 page 和 Component 的創建, 在開發者工具中并不能快速創建一個 template 模版 。所以需要單獨創建 wxss wxml 文件。

template.wxml 文件語法

一個 template.wxml 文件中使用 <template> 標簽包含一個模版, 一個 template.wxml 文件可以包含多個 <template> 模版, 使用 name 屬性作為模版的名稱。

在模版中可以接受變量, 使用 {{}} 展示。 為變量的傳遞者由調用該模版的頁面傳遞。

<template name="A">
    <text>template name: {{name}}</text>
</template>
<template name="B">
    <text>template name: {{name}} {{msg}}</text>
</template>
復制代碼

template.wxss 模版樣式文件

模版可以擁有自己的樣式文件

text{
    color: #cccccc;
}
復制代碼

2. 引用 template 模版

  1. template 模版的引用需要使用 <import> 標簽。 該標簽的 src 屬性為需要引用模版的路徑。
  2. template 模版的使用用 <template> 標簽。 使用 is 屬性來區別模版文件中定義的模版。
  3. 使用 data 傳入模版中的數據。

index.wxml

<import src="../tpls/template.wxml" />

<view>
    <template is="A" data="{{name}}"/>
    <template is="B" data="{{name, msg}}"/>
<view>
復制代碼

3. 引用模版樣式

在 調用頁面的 wxml 中引用了 template.wxml 后,模版的樣式并不會引用, 需要在調用頁面的 wxss 中單獨引用 template.wxss 文件。

index.wxss

@import "./tpls/template.wxss"
復制代碼

4. 模版文件中的事件處理

在模版中定義的事件, 需要調用頁面中執行。 template.wxml

<template name="A">
    <text bindtap="handleTap">template name: {{name}}</text>
</template>
復制代碼

index.js

Page({
    data: {},
    handleTap() {
        console.log('template 模版 click')
    }
})
復制代碼

5. import 有作用域

import 有作用域的概念,即只會 import 目標文件中定義的 template,而不會 import 目標文件中 import 的 template,簡言之就是 import 不具有遞歸的特性。

例如:C 引用 B,B 引用A,在C中可以使用B定義的 template,在B中可以使用A定義的 template ,但是C不能使用A定義的template

6. include 配合 template 模版

如同使用 <import src="xx/xx/xx.wxml"> <tempalte is="A" /> 引用和使用模版一樣, 同樣也可以使用 <include src="xx/xx/xx.wxml />" 來引用一個模版。

需要注意的是:

  1. 使用 <include> 引用模版文件時, 并不能分別出模版文件的模版塊, 所以使用 <include>引用的模版文件中只能定義一個模版塊。
  2. include 可以將目標文件中除了 <template/> <wxs/> 外的整個代碼引入,相當于是拷貝到 include 位置。
<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>
復制代碼
<!-- header.wxml -->
<view> header </view>
復制代碼
<!-- footer.wxml -->
<view> footer </view>
復制代碼
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 閑不住的李先森 來自: 掘金

提示:本頁有 1 個評論因未通過審核而被隱藏

极速快3精准计划 重庆时时杀个位计划 浙江二段剩余计划 福彩3d试机号电脑走势图 快乐赛车三期计划 极速分分彩结果 江西时时开视频 2019年双色球开奖全部 山东福利彩票官网 浙江福利彩票网 中国福利36选7开奖时间