时间:2021-05-18
前言
小程序开发语言虽然只能运行在微信小程序中, 但是它的设计同样遵循了主流前端框架的主要特征——组件化,在小程序中组件化的实现有两种方式: template 模版 和 Component 组件。 这两种方式分别适用于不同的场景。
1. 创建 template 模版
不同于 page 和 Component 的创建, 在开发者工具中并不能快速创建一个 template 模版。所以需要单独创建 wxss wxml 文件。
template.wxml 文件语法
一个 template.wxml 文件中使用 <template> 标签包含一个模版, 一个 template.wxml 文件可以包含多个 <template>模版, 使用 name 属性作为模版的名称。
在模版中可以接受变量, 使用 {{}} 展示。 为变量的传递者由调用该模版的页面传递。
template.wxss 模版样式文件
模版可以拥有自己的样式文件
2. 引用 template 模版
index.wxml
3. 引用模版样式
在 调用页面的 wxml 中引用了 template.wxml 后,模版的样式并不会引用, 需要在调用页面的 wxss 中单独引用 template.wxss 文件。
index.wxss
4. 模版文件中的事件处理
在模版中定义的事件, 需要调用页面中执行。
template.wxml
index.js
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 />" 来引用一个模版。
需要注意的是:
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
微信小程序setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题。如下:官网文档在使用setData()设置数组对象的某个元素的属性
哈尔滨一分钱乘车使用方法为: 1、首先进入到微信小程序内,打开微信“发现”、“小程序”。 2、接着在打开的小程序内搜索“腾讯乘车码”,之后系统就会跳出小程序
微信小程序Template模板WXML提供模板(Template),可以在模板中定义代码片段,然后在不同的地方使用。可以保证格式以及数据的相同。1-定义模板使用
微信多开宝是一款方便好用的微信多开软件,使用微信多开宝可以方便用户同时登陆多个微信,其使用方法也很简单,微信多开宝怎么用?来看看小编带来的微信多开宝使用方法
微信多开宝是一款方便好用的微信多开软件,使用微信多开宝可以方便用户同时登陆多个微信,其使用方法也很简单,微信多开宝怎么用?来看看小编带来的微信多开宝使用方法