定义模板

  • 在跟目录创建用于存放模板的文件夹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关键字不能引入 templatewxs 文件
    • 可以用于头部、尾部以及其他一些情况的引入
    • 创建模板文件,如 /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"/>
    • 效果
      1.png

      1.png

      模块定义与使用

  • 在跟目录创建用于存放工具的文件夹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>
Last modification:March 17, 2022
如果觉得我的文章对你有用,请随意赞赏