定义模板

• 在跟目录创建用于存放模板的文件夹templates, 可以存放多个模板，每个模板用文件夹区分
• 新建模板文件夹,如 test ,即路径为/templates/test/

• 创建模板文件，如 /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/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>