【移动应用开发技术】小程序的模板化编程

【移动应用开发技术】小程序的模板化编程

笔记内容：小程序的模板化编程笔记日期：2018-01-08将业务中的数据分离到单独的数据文件中之前编写的新闻列表页面中，我们把示例数据都放在了js文件中，但实际上数据是不应该写在js文件中的，所以我们得把这些数据分离到一个单独的数据文件中。然后post.js文件就加载这个数据文件中的数据即可，这样也可以模拟一下加载服务器数据的过程。1.新建一个data目录，并在该目录下创建一个.js文件：2.将数据剪切到该新建的文件中：//将数据整合成数组类型

varlocal_database=[

{

date:"Jan062018",

title:"正是虾肥蟹壮时",

imgSrc:"/images/post/crab.png",

avatar:"/images/avatar/1.png",

content:"“山明水净夜来霜，数树深红出浅黄。试上高楼清入骨，岂如春色嗾人狂。”金秋时节，天高云淡，秋风送爽，气候宜人。秋风秋阳中，硕果坠挂枝头，玉米抚须含笑，高粱引颈高歌，豆荚饱满圆润。",

reading:"112",

collection:"96",

},

{

date:"Jan032018",

title:"比利·林恩的中场战事",

imgSrc:"/images/post/bl.png",

avatar:"/images/avatar/2.png",

content:"伊拉克战争时期，来自美国德州的19岁技术兵比利·林恩（乔·阿尔文JoeAlwyn饰）因为一段偶然拍摄的视频而家喻户晓。那是一次规模不大却激烈非常的遭遇战，战斗中林恩所在的B班班长（范·迪塞尔VinDiesel饰）遭到当地武装分子的伏击和劫持，而林恩为了营救班长不惜铤而走险冲锋陷阵。",

reading:"92",

collection:"65",

},

{

date:"Jan052018",

title:"肖申克的救赎",

imgSrc:"/images/post/xs.jpg",

avatar:"/images/avatar/3.png",

content:"20世纪40年代末，小有成就的青年银行家安迪（蒂姆·罗宾斯TimRobbins饰）因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为肖申克的监狱内，希望似乎虚无缥缈，终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。",

reading:"92",

collection:"65",

},

{

date:"Jan012018",

title:"霸王别姬",

imgSrc:"/images/post/bj.jpg",

avatar:"/images/avatar/4.png",

content:"段小楼（张丰毅）与程蝶衣（张国荣）是一对打小一起长大的师兄弟，两人一个演生，一个饰旦，一向配合天衣无缝，尤其一出《霸王别姬》，更是誉满京城，为此，两人约定合演一辈子《霸王别姬》。但两人对戏剧与人生关系的理解有本质不同，段小楼深知戏非人生，程蝶衣则是人戏不分。",

reading:"92",

collection:"65",

},

{

date:"Jan082018",

title:"这个杀手不太冷",

imgSrc:"/images/post/ss.jpg",

avatar:"/images/avatar/5.png",

content:"里昂（让·雷诺饰）是名孤独的×××，受人雇佣。一天，邻居家小姑娘马蒂尔达（纳塔丽·波特曼饰)敲开他的房门，要求在他那里暂避杀身之祸。原来邻居家的主人是警方缉毒组的眼线，只因贪污了一小包×××而遭恶警（加里·奥德曼饰）杀害全家的惩罚。",

reading:"92",

collection:"65",

},

{

date:"Jan042018",

title:"阿甘正传",

imgSrc:"/images/post/ag.jpg",

avatar:"/images/avatar/1.png",

content:"阿甘（汤姆·汉克斯饰）于二战结束后不久出生在美国南方阿拉巴马州一个闭塞的小镇，他先天弱智，智商只有75，然而他的妈妈是一个性格坚强的女性，她常常鼓励阿甘“傻人有傻福”，要他自强不息。",

reading:"92",

collection:"65",

},

]这个文件实际上充当了一个本地数据库，到时候脚本文件从这个文件中加载数据即可。注意：我把一些属性名称更改了，wxml文件中的名称也要跟着更改。使用require方法加载js模块文件1.在数据文件中增加以下代码，设置一个数据出口：//设置一个数据出口，当前这个文件相当于是一个js模块

module.exports={

//输出的是一个Array对象

postList:local_database,

}2.然后在脚本文件中通过require方法加载js模块文件：//注意：这里只能使用相对路径

varpostsData=require('../../data/posts-data.js')

Page({

data:{

},

onLoad:function(options){

this.setData({

//通过postsData来拿到postList对象

posts_key:postsData.postList

});

},

})以上就完成了数据与逻辑的分离，在我们平时开发中，应尽量避免这种数据与逻辑或者逻辑与视图代码混杂在一块的情况。关于setData方法的一些问题：1.直接修改this.data而不调用this.setData是无法改变页面的状态的，还会造成数据不一致。2.单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。3.请不要把data中任何一项的value设为undefined，否则这一项将不被设置并可能遗留一些潜在问题。template模板的使用之前我们使用for循环改写了新闻列表页面，解决了重复代码的问题，但是使用for循环只能解决当前页面代码重复的问题，如果别的页面也要使用相同的代码的话，就无法使用for循环来解决了。不过小程序给我们提供了一个template模板，使用template模板就能解决这种问题。因为template可以让多个页面共享一个模板文件中的代码，如果熟悉23种设计模式的话，就应该知道这种模式类似于模板设计模式。1.在posts目录下创建一个目录，并在该目录下创建一个wxml和wxss文件：注：js文件无法作为模板文件，即便创建了也不会运行，因为小程序没有模块化的编程，只有模板化的编程2.将post.wxml中需要被复用的代码剪切到post-item-template.wxml模板文件中：<!--模板文件需要使用template标签包围-->

<templatename="postItem">

<viewclass='post-container'>

<viewclass='post-author-date'>

<imagesrc='{{item.avatar}}'class='post-author'></image>

<textclass="post-date">{{item.date}}</text>

</view>

<textclass='post-title'>{{item.title}}</text>

<imageclass='post-image'src='{{item.imgSrc}}'></image>

<textclass='post-content'>{{item.content}}</text>

<viewclass='post-like'>

<imagesrc='../../images/icon/chat.png'class='post-like-img'></image>

<textclass='post-like-font'>{{item.reading}}</text>

<imagesrc='../../images/icon/view.png'class='post-like-img'></image>

<textclass='post-like-font'>{{item.collection}}</text>

</view>

</view>

</template>3.接着在post.wxml中引入模板文件，代码如下：<!--通过import标签引入模板文件，可以使用相对路径也可以使用绝对路径-->

<importsrc="post-item/post-item-template.wxml"/>

<view>

<!--需要在父节点里定义宽高，indicator-dots属性指定显示轮播图的小点，纵向滚动则使用vertical属性-->

<swiperindicator-dots='true'autoplay='true'interval='5000'>

<!--每一项里都放了一个图片-->

<swiper-item>

<!--使用绝对对路径-->

<imagesrc='/images/wx.png'></image>

</swiper-item>

<swiper-item>

<imagesrc='/images/vr.png'></image>

</swiper-item>

<swiper-item>

<imagesrc='/images/iqiyi.png'></image>

</swiper-item>

</swiper>

<!--wx:for需要接收一个数组、集合类型的值，wx:for-item用于设置一个变量来代表子元素-->

<!--wx:for-index用于设置一个变量来代表下标值-->

<blockwx:for="{{posts_key}}"wx:for-item="item"wx:for-index="index">

<!--is的值是模板文件中定义的模板名称，data是将循环出来的子元素对象传递到模板文件中-->

<templateis="postItem"data="{{item}}"/>

</block>

</view>4.以上完成了wxml代码的模板，现在还需要把一些可复用的wxss代码也做成模板，首先剪切post.wxss样式文件中的代码到模板文件中：post-item-template.wxss文件内容如下：.post-author-date{

margin:10rpx0px20rpx10rpx;

}

.post-author{

width:30px;

height:60rpx;

vertical-align:middle;

}

.post-date{

margin-left:20rpx;

vertical-align:middle;

margin-bottom:5px;

font-size:26rpx;

}

.post-title{

font-size:34rpx;

font-weight:600;

color:#333;

margin-bottom:10px;

margin-left:10px;

}

.post-image{

margin-left:16px;

width:100%;

height:340rpx;

margin:auto0;

}

.post-content{

color:#666;

font-size:28rpx;

margin-bottom:20rpx;

margin-left:20rpx;

letter-spacing:2rpx;

line-height:40rpx;

margin-top:15px;

}

.post-like{

font-size:13px;

flex-direction:row;

line-height:16px;

margin-left:10px;

}

.post-like-img{

height:16px;

width:16px;

margin-right:8px;

vertical-align:middle