codecamp

支付宝小程序框架 AXML·引用

axml 提供两种文件引用方式 importinclude

import

import 可以加载已经定义好的 template

比如,在 item.axml 中定义了一个叫 itemtemplate

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

在 index.axml 中引用 item.axml,就可以使用 item 模板。

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

import 有作用域的概念,只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template。

比如,C import B,B import A,在 C 中可以使用 B 定义的 template,在 B 中可以使用 A 定义的 template,但是 C 不能使用 A 中定义的 template。

<!-- a.axml -->
<template name="A">
  <text> A template </text>
</template>
<!-- b.axml -->
<import src="./a.axml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- c.axml -->
<import src="./b.axml"/>
<template is="A"/>  <!-- 注意:不能使用 import A -->
<template is="B"/>

注意 template 的子节点只能是一个,例如:

允许的示例:

<template name="x">
  <view />
</template>

不允许的示例:

<template name="x">
  <view />
  <view />
</template>

include

include 可以将目标文件除 <template/> 外整个代码引入,相当于是拷贝到 include 位置。

代码示例:

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

引入路径

模板引入路径支持相对路径、绝对路径,也支持从 node_modules 目录载入第三方模块。

<import src="./a.axml"/> <!-- 相对路径 -->
<import src="/a.axml"/> <!-- 项目绝对路径 -->
<import src="third-party/x.axml"/> <!-- 第三方 npm 包路径 -->
支付宝小程序框架 AXML·模板
支付宝小程序框架 SJS·介绍
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }