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


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 相关文章推荐
用javascript父窗口控制只弹出一个子窗口
Apr 10 Javascript
jquery 简短右键菜单 多浏览器兼容
Jan 01 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
May 25 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
Sep 28 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
Node.js 的 GC 机制详解
Jun 03 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
AngularJS 依赖注入详解和简单实例
2016/07/28 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python之yield表达式学习
2014/09/02 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python3.6连接mysql数据库及增删改查操作详解
2020/02/10 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
会计电算化个人自我评价
2013/11/17 职场文书
怎样写好自我评价呢?
2014/02/16 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
二年级评语大全
2014/04/23 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
信访稳定工作汇报
2014/10/27 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
撤诉申请怎么写
2015/05/19 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫