前端开发---微信小程序中的页面代码中的模板的封装

         最近在进行微信小程序中的页面开发，其实在c++或者说是js中都会出现这种情况，就是相同的代码会反复出现，这就是进行一定的封装，封装的好处就是可以是程序中在于减少一定的代码量，并且可是使代码结构更加清晰。那今天所要记录的就是关于微信小程序中的页面的模板封装。

         在微信小程序中的文件名都带有wxml等样式，在wxml中提供了模板，即可以在模板中定义代码片段，然后可以在页面中的不同位置进行调用，模板的定义：

< template name= "products" >

< block wx:for= "{{productsData}}" >

< view class= "product-desc" >

< view class= "product-cun" >有货 view >

< view class= "product-name" >{{item.name}} view >

< view class= "product-price" >￥{{item.price}} view >

view >

block >

template >

name主要就是给封装好的模板进行命名，因为可能模板文件中不一定就只存在这一个模板，所以命名化可以方便区分哪个是要引入的模板。

wx:for就是微信小程序中的循环，里面就是要循环的数组数据，这个值是可以在引入模板的时候进行引入赋值的。

模板的导入：

< import src= "" / >---要找到要引入的模板文件路径，这里面的路径写相对路径会很方便

模板的使用：

< template is= "products" data= "{{productsData}}" / >

is的作用就是在模板文件中选择要使用的具体是哪个模板

data主要就是模板中要使用的数组数据

这里面就是出现一个问题，由于你的模板文件中的数组是写死的，使用的是productData，那么在你引入模板之后对里面的数据进行赋值使用的时候可能会出现

VM1171:2 ./pages/theme/theme.wxml
 Bad attr 'data' with message
   6 |  
   7 |  
>  8 |