【小程序】模板化

模板化说明:

　　1,将可以重用的WXML部分抽离出来

　　2,将可重用部分的WXML的wxss抽离出来

 

模块化步骤:

　　1,创建一个存放每个模块可重用的wxml文件夹:

　　　　示例图:

　　　　　　

　　2,在templates文件中创建模块文件夹且放入可重用的模板文件:

　　　　示例图:

　　　　　　

　　3,将post中可重用的wxml代码放入post_template.wxml:

　　　　　示例图:

　　　　　　　　

　　　　　说明:

　　　　　　　如上示例图,可重用的wxml代码需要用 "template"标签包起来,且要给template设置一个name属性,更详细的信息请点击下面官方文档连接

　　　　　

　　　　   说明文档:

 

　　　　　　　https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

　　

　　4,在需要使用模板的地方引入改模板文件,并调用:

　　　　示例图:

　　　　　　

　　　　操作说明:

　　　　　　1,如上图第一步要引入要调用的模板块所属文件.

　　　　　　2,用<template is="{name 属性值}" data="{{给name属性值模板块的数据}}"  />来调用模板块:

　　　　　　　name属性值:

　　　　　　　　　　

　　　　　　3,官方文档的连接:

　　　　　　　　。模板引入:

　　　　　　　　　　https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html

　　　　　　　　。模板定义与使用:

　　　　　　　　　　https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

　　　　　　　　。如果不明白上图data={{item}}的由来:

　　　　　　　　　　https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

　　　

　　5,将重用代码的样式也抽离出来单独存放:

　　　示例图:

　　　　　　　

　　6,在需要用到重用代码的地方引入重用代码的wxss:

　　　。示例图:

　　　　　　　　

　　　　

　　　　。官方说明文档:

　　　　　　https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html#样式导入