1、模板

如果相同的wxml代码可能在不同的页面重复使用,ctrl+c配合ctrl+v的方式,后期维护起来未免也太麻烦了。微信提供了“模板”,可以在模板中定义代码片段,然后在不同的地方调用。

使用 <template> 对代码进行模板定义,并使用name属性为模板进行命名,如:
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
6
 
1
<template name="msgItem"> 
2
  <view>
3
    <text> {{index}}: {{msg}} </text>
4
    <text> Time: {{time}} </text>
5
  </view>
6
</template>

而在需要使用模板的地方,首先需要引用模板文件,通过import关键字,可以在文件中使用引用文件中定义的template,如:

<import src="item.wxml"/>
1
 
1
<import src="item.wxml"/>

而使用的话,同样是 <template> ,但使用其 is 属性进行声明使用,并将模板需要的数据传入。如:

<import src="item.wxml"/>
<template is="msgItem" data="{{...item}}"/>
 
1
<import src="item.wxml"/>
2
<template is="msgItem" data="{{...item}}"/>

来实际操作一下,我们接着之前的章节,现在把welcome页面中的代码片段 <text>Welcome,{{nickname}}!{{number}}</text> 抽离为模板:
  • 在pages文件夹下,新建文件夹template,并新建一个wxml文件命名为welcome-template.wxml
  • 按照模板的定义方式,定义模板内容
 
然后,我们到welcome.wxml中引用name为welcome的模板:
 
注:这里的 ... 是wxml中提供的一个扩展运算符,表示将一个对象展开,这样一来在模板中本需要使用pageData.nickname的形式,现在只需要写nickname即可。

可以看到,这里传入的数据参数名为pageData,那么我们在welcome.js中的data也需要修改为json对象的形式:
 
我们看到效果和之前直接写是一样的:
 

2、模块化

在微信小程序中,可以将一些公共的代码抽离为一个单独的js文件,作为一个模块,而在其它需要使用的页面,对该js文件进行引用。而模块的内容只能通过 module.exports 来对外暴露接口。而在需要使用的地方,使用关键字 require(path) 进行引入。

值得注意的是,因为代码执行顺序的缘故,尽量把module.exports放在文件的最后。自己踩过的一个坑就是,曾把它放在第一行,结果引出的变量为undefined。

之前我们的变量nickname是写在welcome.js中的,现在我们把它抽离到其他js文件中,来示范一下“模块化”。

首先建立一个根目录命名为“modules”,在其下新建一个js文件data.js:
 
在js中可以定义变量或者函数,我们简单写一下,然后使用 module.exports 来暴露接口以供外界调用:

 
原来在welcome.js的onLoad函数中,我们的nickname是直接赋值的字符串,现在我们要引用模块文件data.js中的nickname,或者getNickname:
 
编译一下查看效果,妥妥的:

微信小程序开发 [04] 模板和模块化的更多相关文章

  1. 微信小程序开发之模板

    一.简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用. 定义模板 使用name属性,作为模板的名字.然后在<template/>内定义代码片段,如 ...

  2. 微信小程序开发之模板消息

    一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性r ...

  3. 微信小程序开发教程目录

    本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 ...

  4. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  5. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  6. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  7. 微信小程序开发实践

    目录 项目是否适合移植到小程序上? 概要介绍 实践得到的经验 规则 小程序不支持的 新特性 小窍门 会话管理 进阶 项目是否适合移植到小程序上? 小程序由于微信提供了一些组件,在微信中的一些体验确实不 ...

  8. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  9. 微信小程序开发详解——小程序,大颠覆!

    微信小程序开发 联系 苏念 188.1414.7927  微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序  ...

随机推荐

  1. python 类之间的关系

    类与类之间的关系 在我们的世界中事物和事物之间总会有一些联系. 在面向对象中. 类和类之间也可以产生相关的关系 1. 依赖关系 执行某个动作的时候. 需要xxx来帮助你完成这个操作. 此时的关系是最轻 ...

  2. python3爬虫(find_all用法等)

    #read1.html文件 # <html><head><title>The Dormouse's story</title></head> ...

  3. spring 3.2.2后springjdbc中不用queryforInt了

    今天才发现,原来spring 3.2.2之后,jdbctemplate中的queryForInt已经被取消了! 参考博客:http://jackyrong.iteye.com/blog/2086255

  4. Ubuntu16.04搭建kubernetes v1.11.2集群

    1.节点介绍         master      cluster-1      cluster-2      cluster-3 hostname        k8s-55      k8s-5 ...

  5. 禅道项目管理软件 为提交Bug页面设置bug必填字段

    为提交Bug页面设置bug必填字段 by:授客 QQ:1033553122 测试环境: 禅道项目管理软件7.1.stable版本 注:仅适合windows版 步骤1.找到xampp\zentao\mo ...

  6. 网络基础 HTTP协议之http url简介

    HTTP协议之http url简介 by:授客 QQ:1033553122 http url简介 http url通过http协议,用于定位网络资源,是一种特殊类型的URI(统一资源定位) http_ ...

  7. SQLServer 2005客户端远程连接sql2008 数据库服务器

    SQL2005客户端远程连接sql2008 数据库服务器 by:授客 QQ:1033553122 准备工作: 客户端所在pc机配置: 配置数据源 控制面板-管理工具-ODBC数据源-系统DSN-添加- ...

  8. 耐克的定制页用canvas如何实现....跪求前端大神指点。

    选择鞋子的鞋底 鞋底会变色,也可以添加自己定制的id,这个东西看的是用canvas做的,但是小弟确实不知道怎么去做,求大神指点一二,不胜感激! nike的定制页地址:http://store.nike ...

  9. c# 子窗体打开或者切换就最大化

    “用MDI方式打开一个子窗口体后,总是不能最大化显示,明明子窗口体的WindowState设置为Maximized?”,相信有很多人会遇到这的样问题,请按下面的方法设置即可使MDI子窗体最大化:1.把 ...

  10. 利用MVC Chart 打造后台图表、前端图表

    应用场景是这个样子的:要做导出数据到PDF的功能,涉及到文本.表格.图表等内容.在做图表功能时,发现之前用Highcharts做的图表根本就不能集成到PDF中.这里需要一个能在程序后台就生成图表的功能 ...