微信小程序模板/模块定义与使用
定义模板
在跟目录创建用于存放模板的文件夹, 可以存放多个模板，每个模板用文件夹区分
新建模板文件夹,如 ,即路径为
创建模板文件，如 /templates/test/test.wxml 和 /templates/test/test.wxss
<!--模板定义-->
<template name="tem">
<view class="container">
<view>{{title}}</view>
<view bindtap="_h1">{{desc}}</view>
</view>
</template>.container{
border: 2px solid red;
}模板定义说明
- 用
<template name="xxx">模板内容</template>定义模板 - 其中
name="tem"为模板名字，{{title}}和{{desc}}为变量 bindtap="_h1"事件处理逻辑应该写到主文件js里面 模板/样式引入、使用、传值
使用关键字import引入
<import src="xxx.wxml"/>引入<template is="xxx"/>使用- 使用
data="{{key:'a',key2:'b'}}"传值
<!--模板引入-->
<import src="/templates/test/test.wxml"/>
<!--模板使用、传值-->
<template is="tem" data="{{title:'php全站',desc:'大数据'}}"/><!--模板样式引入-->
@import "/templates/test/test.wxss"使用关键字include引入
- 注意：
include关键字不能引入template和wxs文件 - 可以用于头部、尾部以及其他一些情况的引入
- 创建模板文件，如
/templates/common/header.wxml和/templates/common/footer.wxml - 定义如下
<view>header</view><view>footer</view>主页面引入以及使用
<!--模板引入-->
<include src="/templates/common/header"/>
<view>body</view>
<include src="/templates/common/footer"/>模块定义与使用
在跟目录创建用于存放工具的文件夹
创建工具文件，如 /tools/tools.wxs
// 求和
function sum(num1, num2) {
//es5 js 语法大致一致
return num1 + num2
}
//暴漏模块方法
module.exports = {
sumFun: sum
}引入以及使用
使用关键字module = "xxx" src="xxx/xxx.wxs"/>引入
<!--引入wxs模块-->
<wxs module="tool" src="/tools/tool.wxs"/>
<view>{{tool.sumFun(1,2)}}</view>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
