微信小程序前端开发代码模板封装

微信小程序开发 - 2018-05-10 17:45

摘要:进行微信小程序中,相同的代码会反复出现,需要进行一定的封装,封装的好处就是可以是程序中在于减少代码量

在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰。微信小程序开发前端代码同样可以封装成模板调用。

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

=products>

={{productsData}}>

class=product-desc>

class=product-cun>有货

class=product-name>{{item.name}}

class=product-price>¥{{item.price}}

name主要就是给封装好的模板进行命名,因为可能模板文件中不一定就只存在这一个模板,所以命名化可以方便区分哪个是要引入的模板。wx:for就是微信小程序中的循环,里面就是要循环的数组数据,这个值是可以在引入模板的时候进行引入赋值的。 

微信小程序前端开发代码模板封装

模板的导入:

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

模板的使用:

is=products 

data={{productsData}}/>

is的作用就是在模板文件中选择要使用的具体是哪个模板,data主要就是模板中要使用的数组数据。 
这里面就是出现一个问题,由于你的模板文件中的数组是写死的,使用的是productData,那么在你引入模板之后对里面的数据进行赋值使用的时候可能会出现