微信小程序教程之引用

更新時(shí)間：2016年10月18日 10:59:05 投稿：lqh

這篇文章主要介紹了微信小程序引用的相關(guān)資料,并附簡(jiǎn)單實(shí)例代碼，需要的朋友可以參考下

系列文章：

微信小程序教程之WXSS
微信小程序教程之引用
 微信小程序教程之事件
 微信小程序教程之模板
 微信小程序教程之列表渲染
 微信小程序教程之條件渲染
 微信小程序教程之?dāng)?shù)據(jù)綁定
 微信小程序教程之WXML

引用

WXML提供兩種文件引用方式import和include。

import

import可以在該文件中使用目標(biāo)文件定義的template，如：

在item.wxml中定義了一個(gè)叫item的template：

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

在index.wxml中引用了item.wxml，就可以使用item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import的作用域

import有作用域的概念，即只會(huì)import目標(biāo)文件中定義的template，而不會(huì)import目標(biāo)文件import的template。
如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

<!-- A.wxml -->
<template name="A">
 <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
 <text> B template </text>
</template>

<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include可以將目標(biāo)文件出了<template/>的整個(gè)代碼引入，相當(dāng)于是拷貝到include位置，如：

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

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

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

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序檢查接口狀態(tài)實(shí)例詳解
這篇文章主要介紹了微信小程序檢查接口狀態(tài)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-06-06
element?plus的樣式修改和擴(kuò)展實(shí)例
這篇文章主要為大家介紹了element?plus的樣式修改和擴(kuò)展實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
前端框架arco?table源碼遇到的問題解析
這篇文章主要為大家介紹了前端框架arco?table源碼遇到的問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
JS前端錯(cuò)誤監(jiān)控捕獲以及上報(bào)方法詳解
這篇文章主要為大家介紹了前端錯(cuò)誤監(jiān)控捕獲以及上報(bào)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
微信小程序五星評(píng)分的實(shí)現(xiàn)實(shí)例
這篇文章主要介紹了微信小程序五星評(píng)分的實(shí)現(xiàn)實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)實(shí)例幫助大家實(shí)現(xiàn)改功能，需要的朋友可以參考下
2017-08-08
如何取得中文輸入的真實(shí)長(zhǎng)度？
如何取得中文輸入的真實(shí)長(zhǎng)度？...
2006-06-06
停止編寫 API函數(shù)原因示例分析
這篇文章主要為大家介紹了停止編寫API函數(shù)的原因及示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
JS疑惑的數(shù)據(jù)類型及類型判斷方法詳解
這篇文章主要為大家介紹了JS中疑惑的數(shù)據(jù)類型及類型判斷方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
詳解微信小程序入門五: wxml文件引用、模版、生命周期
本篇文章主要介紹了詳解微信小程序入門五: wxml文件引用、模版、生命周期，具有一定的參考價(jià)值，有興趣的可以了解一下。
2017-01-01
JS時(shí)間分片技術(shù)解決長(zhǎng)任務(wù)導(dǎo)致的頁面卡頓
旨在把一個(gè)運(yùn)行時(shí)間比較長(zhǎng)的任務(wù)分解成一塊一塊比較小的任務(wù)，分塊去執(zhí)行，因?yàn)槌^ 50ms 的任務(wù)就會(huì)被認(rèn)為是 long task，用戶就能感知到渲染卡頓和交互的卡頓，所以我們可以縮短函數(shù)的連續(xù)執(zhí)行時(shí)間
2022-07-07