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


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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
Jan 13 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
jquery Easyui Datagrid实现批量操作(编辑,删除,添加)
Feb 20 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
基于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阻止页面后退的方法分享
2014/02/17 PHP
js中parseFloat(参数1,参数2)定义和用法及注意事项
2013/01/27 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
2020/07/18 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python cx_Oracle的基础使用方法(连接和增删改查)
2017/11/19 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
详解Python装饰器
2019/03/25 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
python tkinter组件使用详解
2019/09/16 Python
Python实现结构体代码实例
2020/02/10 Python
python的pip有什么用
2020/06/17 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
美国运动鞋类和服装零售连锁店:Shoe Palace
2019/08/13 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
自我评价范文点评
2013/12/04 职场文书
国旗下讲话演讲稿
2014/05/08 职场文书
现实表现证明材料
2015/06/19 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
python实现腾讯滑块验证码识别
2021/04/27 Python
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python