微信小程序模板/模块定义与使用

定义模板

在跟目录创建用于存放模板的文件夹, 可以存放多个模板，每个模板用文件夹区分

新建模板文件夹,如 ,即路径为

创建模板文件，如 /templates/test/test.wxml 和 /templates/test/test.wxss

代码语言：javascript复制

<!--模板定义-->
<template name="tem">
  <view class="container"> 
      <view>{{title}}</view>
      <view bindtap="_h1">{{desc}}</view>
  </view>
</template>

代码语言：javascript复制

.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'}}"传值

代码语言：javascript复制

<!--模板引入-->
<import src="/templates/test/test.wxml"/>
<!--模板使用、传值-->
<template is="tem" data="{{title:'php全站',desc:'大数据'}}"/>

代码语言：javascript复制

<!--模板样式引入-->
@import "/templates/test/test.wxss"

使用关键字include引入

• 注意：include关键字不能引入 template 和 wxs 文件
• 可以用于头部、尾部以及其他一些情况的引入
• 创建模板文件，如 /templates/common/header.wxml 和 /templates/common/footer.wxml
• 定义如下

代码语言：javascript复制

<view>header</view>

代码语言：javascript复制

<view>footer</view>

主页面引入以及使用

代码语言：javascript复制

 <!--模板引入-->
 <include src="/templates/common/header"/>
 <view>body</view>
 <include src="/templates/common/footer"/>

模块定义与使用

在跟目录创建用于存放工具的文件夹

创建工具文件，如 /tools/tools.wxs

代码语言：javascript复制

// 求和
function sum(num1, num2) {
  //es5 js 语法大致一致
  return num1   num2
}

//暴漏模块方法
module.exports = {
  sumFun: sum
}

引入以及使用

使用关键字module = "xxx" src="xxx/xxx.wxs"/>引入

代码语言：javascript复制

<!--引入wxs模块-->
<wxs module="tool" src="/tools/tool.wxs"/>
<view>{{tool.sumFun(1,2)}}</view>

import include src templates tools

0 人点赞