前端开发---微信小程序中的页面代码中的模板的封装
2017-09-21 09:57
926 查看
最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰。那今天所要记录的就是关于微信小程序中的页面的模板封装。
在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义:
<templatename="products">
<blockwx: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 | </view>
7 | <view class="theme-products">
> 8 | <template is="products" data="{{theme_products[themeid]}}"/>
| ^
9 | </view>
10 | </view>
11 |
像这种在模板中的数据被定义死的话,也是可以有解决办法的,我所使用的办法就是给已经被赋值好的数组进行重新赋值
可以在新的页面js中对productsData数组进行空的初始化,然后在onLoad第一次进行页面,进行加载页面的时候给予赋值,data.kind_products是这个页面要使用到的数组对象
1)js文件中的data{productsData:null}
2)第一次进入页面的时候
onLoad: function (options) {
this.setData({ productsData: this.data.kind_products[0]});
}
setData的作用就是用于将数据从逻辑层发送到视图层也就是页面上,同时改变this.data的值
当然,我觉得这个模板里面的数组应该不写死的,这样会更加方便,可是。。。我还没有试。。。
如果哪位看到这篇文章的大神知道这个写法的话,希望留言,给予指点!!!
在微信小程序中的文件名都带有wxml等样式,在wxml中提供了模板,即可以在模板中定义代码片段,然后可以在页面中的不同位置进行调用,模板的定义:
<templatename="products">
<blockwx: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 | </view>
7 | <view class="theme-products">
> 8 | <template is="products" data="{{theme_products[themeid]}}"/>
| ^
9 | </view>
10 | </view>
11 |
像这种在模板中的数据被定义死的话,也是可以有解决办法的,我所使用的办法就是给已经被赋值好的数组进行重新赋值
可以在新的页面js中对productsData数组进行空的初始化,然后在onLoad第一次进行页面,进行加载页面的时候给予赋值,data.kind_products是这个页面要使用到的数组对象
1)js文件中的data{productsData:null}
2)第一次进入页面的时候
onLoad: function (options) {
this.setData({ productsData: this.data.kind_products[0]});
}
setData的作用就是用于将数据从逻辑层发送到视图层也就是页面上,同时改变this.data的值
当然,我觉得这个模板里面的数组应该不写死的,这样会更加方便,可是。。。我还没有试。。。
如果哪位看到这篇文章的大神知道这个写法的话,希望留言,给予指点!!!
相关文章推荐
- 详解微信小程序中的页面代码中的模板的封装
- 微信小程序基本的开发框架抽取,包括网络请求的二次封装,页面状态管理,常见页面模板封装
- 微信小程序开发之formId使用(模板消息)、跨页面获取数据示例
- 微信小程序前端开发框架,不用再苦逼逼写代码
- 微信小程序前端开发框架,快速自动生成前端页面
- 前端开发人员如何制作微信小程序模板
- 微信小程序前端模板自动生成,不用写代码
- 微信小程序前端开发框架,自动生成前端代码
- 【原创】前端开发人员如何制作微信小程序模板
- 微信小程序开发常用技巧(9)——使用模板文件方便公共代码开发
- 从微信小程序看前端代码安全
- 微信小程序 开发之滑块视图容器(swiper)详解及实例代码
- 微信小程序开发模板消息的时候 出现 errcode: 41028, errmsg: "invalid form id hint:
- [置顶] 微信小程序开发(二):获取微信小程序页面带参二维码全流程
- 微信小程序的开发:通过微信小程序看前端
- 微信小程序开发手记之一:项目的代码结构
- 微信小程序开发之模板
- 微信小程序 开发之顶部导航栏实例代码
- 微信小程序前端布局页面工具,快速布局
- 微信小程序自动切片生成布局软件问世!不用写前端代码