欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序-template模版

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:733

高端HTML5响应式企业通用网

2020-05-06   浏览:513

html5响应式外贸网站英文版

2020-05-08   浏览:503

HTML5自适应律师工作室类网

2020-04-04   浏览:494

HTML5影视传媒文化公司类网

2020-05-12   浏览:489

微信小程序-template模版

发布时间:2020-11-26  

 

模版是什么?

就是我们预先写好一段代码,供给重复使用。

 

实例

/page/common/common.wxml

 

<template name="demo1">

<view>我是模版demo1</view>

</template>

 

/page/index/index.wxml

 

<import src=http://www.yiyongtong.com/archives/"../common/common.wxml" />

<view>

<template is="demo1" />

</view>

我们就成功的将模版demo1 导入进来了。

模版中添加数据  以common.wxml为例子

 

<template name="demo1">

<view>{{userInfo.nickName}}</view>

<view wx:for="data" wx:for-index="index" wx:for-item="item">

{{index}}=>{{item}}

</view>

</template>

这个模版里面有需要数据对象支持,是直接引用的page({data:{}})这个中的data 吗? 其实不是的。怎么用呢  以index.wxml为例  假设注册中的data为

 

var initJson = {

data:{

userInfo:{"nickname":"我是勇哥"},

dataInfos : {

"name":"勇哥",

"age" :"22"

}

}

}

Page(initJson);

 

<import src=http://www.yiyongtong.com/archives/"../common/common.wxml" />

<view>

<!--方法一,自己领悟。其中的userInfo引用的是注册表中data.userInfo-->

<template is="demo1" data="{{userInfo,data:dataInfos }}" />

<!--方法二。 -->

<template is="demo1" data="{{userInfo:{"nickname":"aaaa"},data:[1,2,3,4,5,6,7]}}" />

</view>

模版也支持wxml模版语法,也就是说也可以在里面添加wx:if wx:elseif 等语句。  用好了,减少代码量。降低维护难度。以及提升开发效率。  可以将一个个模版看成一个个封装好的函数,需要的时候直接导入模版文件,直接调用就好了,当然有参数需要的模版还是要将数据对象传入进去的。

import 模式导入的文件只能识别template 标签标记的代码块  还有一个include 模式导入的文件就恰恰和import 的模式对应了。

include模式导入的文件

/page/demo2/demo2.wxml

 

<view>

include 模式导入文件

</view>

<template name="demo2_tmp">

<view>

我是template2

</view>

</template>

/page/demo1/demo1.wxml

 

<include src=http://www.yiyongtong.com/archives/"../demo1/demo1.xml" />

 

<template is="demo2_tmp" />

运行看看效果吧,你会发现这个运行不了而报错,提示你未定义,那是因为include模式导入的文件只导入非template模版标签的组件。其它的不导入。

小注意:<import src=http://www.yiyongtong.com/archives/"" /> 导入的文件也包含<import src=http://www.yiyongtong.com/archives/"" /> 不会进行二次导入的。  也就是 如果A导入B(import),B需要导入C(import),那么A只会导入B,而不会导入C。

本文标签

:备案管家服务帮您把复杂流程变简单,解决您在进行网站备案过程中遇到的效率低下和成功率不高的问题。个人300/2个域名,企业500/5个域名,qq1650004.