资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

小程序的模板化编程

笔记内容:小程序的模板化编程
笔记日期:2018-01-08

为徐汇等地区用户提供了全套网页设计制作服务,及徐汇网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、徐汇网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!


将业务中的数据分离到单独的数据文件中

之前编写的新闻列表页面中,我们把示例数据都放在了js文件中,但实际上数据是不应该写在js文件中的,所以我们得把这些数据分离到一个单独的数据文件中。然后post.js文件就加载这个数据文件中的数据即可,这样也可以模拟一下加载服务器数据的过程。

1.新建一个data目录,并在该目录下创建一个.js文件:
小程序的模板化编程

2.将数据剪切到该新建的文件中:

// 将数据整合成数组类型
var local_database = [
  {
    date: "Jan 06 2018",
    title: "正是虾肥蟹壮时",
    imgSrc: "/images/post/crab.png",
    avatar: "/images/avatar/1.png",
    content: "“山明水净夜来霜,数树深红出浅黄。试上高楼清入骨,岂如春色嗾人狂。”金秋时节,天高云淡,秋风送爽,气候宜人。秋风秋阳中,硕果坠挂枝头,玉米抚须含笑,高粱引颈高歌,豆荚饱满圆润。",
    reading: "112",
    collection: "96",
  },
  {
    date: "Jan 03 2018",
    title: "比利·林恩的中场战事",
    imgSrc: "/images/post/bl.png",
    avatar: "/images/avatar/2.png",
    content: "伊拉克战争时期,来自美国德州的19岁技术兵比利·林恩(乔·阿尔文 Joe Alwyn 饰)因为一段偶然拍摄的视频而家喻户晓。那是一次规模不大却激烈非常的遭遇战,战斗中林恩所在的B班班长(范·迪塞尔 Vin Diesel 饰)遭到当地武装分子的伏击和劫持,而林恩为了营救班长不惜铤而走险冲锋陷阵。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 05 2018",
    title: "肖申克的救赎",
    imgSrc: "/images/post/xs.jpg",
    avatar: "/images/avatar/3.png",
    content: "20世纪40年代末,小有成就的青年银行家安迪(蒂姆·罗宾斯 Tim Robbins 饰)因涉嫌杀害妻子及她的情人而锒铛入狱。在这座名为肖申克的监狱内,希望似乎虚无缥缈,终身监禁的惩罚无疑注定了安迪接下来灰暗绝望的人生。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 01 2018",
    title: "霸王别姬",
    imgSrc: "/images/post/bj.jpg",
    avatar: "/images/avatar/4.png",
    content: "段小楼(张丰毅)与程蝶衣(张国荣)是一对打小一起长大的师兄弟,两人一个演生,一个饰旦,一向配合天衣无缝,尤其一出《霸王别姬》,更是誉满京城,为此,两人约定合演一辈子《霸王别姬》。但两人对戏剧与人生关系的理解有本质不同,段小楼深知戏非人生,程蝶衣则是人戏不分。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 08 2018",
    title: "这个杀手不太冷",
    imgSrc: "/images/post/ss.jpg",
    avatar: "/images/avatar/5.png",
    content: "里昂(让·雷诺饰)是名孤独的×××,受人雇佣。一天,邻居家小姑娘马蒂尔达(纳塔丽·波特曼饰)敲开他的房门,要求在他那里暂避杀身之祸。原来邻居家的主人是警方缉毒组的眼线,只因贪污了一小包×××而遭恶警(加里·奥德曼饰)杀害全家的惩罚。",
    reading: "92",
    collection: "65",
  },
  {
    date: "Jan 04 2018",
    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模块文件:

// 注意:这里只能使用相对路径
var postsData = 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模板文件中:


3.接着在post.wxml中引入模板文件,代码如下: