微信小程序模板和模块化用法实例分析


Posted in Javascript onNovember 28, 2017

本文实例讲述了微信小程序模板和模块化用法。分享给大家供大家参考,具体如下:

template

模板,在定义的时候使用name属性,如以下声明方式

<template name="mytemp">
 <view>
  name:{{names}} address:{{add}}
 </view>
</template>

模板不能直接在界面上显示,需要调用的时候才能显示出来,调用的时候需要使用is属性来说明调用的是哪个模板,并且传参的形式可以有多种

<!-- 直接给模板里面用到的字段赋值 -->
<template is="mytemp" data="{{names:'aaa', add:'bbbb'}}"></template>
<!-- 通过给模板赋值对象来调用-->
<template is="mytemp" data="{{...person}}"></template>
<!-- 通过给模板赋值数组里面的对象来调用-->
<template is="mytemp" data="{{...persons[0]}}"></template>
<template is="mytemp" data="{{...persons[1]}}"></template>

模块化

我们可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块,微信官方文档给的说明是需要exports和require来配套使用,需要exports来声明供外部调用,使用的时候需要require来引用下,我看有的视频说的是如果使用require调用的时候需要本地下载node.js,反正我是下载了,如果使用的时候有问题就下载下吧。我创建了一个common.js格式如下:

//引用url
require("url.js");
function log(str){
 console.log("log:" + str);
}
//暴露log方法
 module.exports.log = log;

在用到的时候可以用如下方式:

var common = require("../../common/common.js");
Page({
 click:function(){
  common.log("输出消息");
 }
})

此外,本站前面一篇文章微信小程序模块化详细介绍也对模块化做了较为深入浅出的介绍,感兴趣的朋友可以参考一下。

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
jquery引用方法时传递参数原理分析
Oct 13 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 Javascript
Vue实现多页签组件
Jan 14 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
React更新渲染原理深入分析
Dec 24 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 #Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 #Javascript
基于Vue框架vux组件库实现上拉刷新功能
Nov 28 #Javascript
JavaScript中关于class的调用方法
Nov 28 #Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 #Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 #Javascript
weebox弹出窗口不居中显示的解决方法
Nov 27 #Javascript
You might like
php下拉选项的批量操作的实现代码
2013/10/14 PHP
Sublime里直接运行PHP配置方法
2014/11/28 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
vue实现列表拖拽排序的功能
2020/11/02 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
2021/02/24 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python解惑之整数比较详解
2017/04/24 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python生成圆形图片的方法
2020/03/25 Python
Python自动抢红包教程详解
2019/06/11 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python之多进程与多线程的使用
2021/02/23 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
瑞典度假品牌:OAS
2019/05/28 全球购物
JPA的优势都有哪些
2013/07/04 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
学校班班通实施方案
2014/06/11 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
咖啡店创业计划书
2014/08/15 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书