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


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 相关文章推荐
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
轻松5句话解决JavaScript的作用域
Jul 15 Javascript
Highcharts入门之简介
Aug 02 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
示例vue 的keep-alive缓存功能的实现
Dec 13 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 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设计模式  Command(命令模式)
2011/06/17 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
layer弹出层扩展主题的方法
2019/09/11 Javascript
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python实现快速多线程ping的方法
2015/07/15 Python
让python在hadoop上跑起来
2016/01/27 Python
python实现内存监控系统
2021/03/07 Python
python如何制作缩略图
2019/04/30 Python
详解用python写一个抽奖程序
2019/05/10 Python
python实现键盘输入的实操方法
2019/07/16 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
Python可以用来做什么
2020/11/23 Python
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
怎样声明接口
2014/09/19 面试题
30岁生日感言
2014/01/25 职场文书
改革共识倡议书
2014/08/29 职场文书
基层党员干部四风问题整改方向和措施
2014/09/25 职场文书
接待员岗位职责
2015/02/13 职场文书
护理工作个人总结
2015/03/03 职场文书
2016年暑期见闻作文
2015/11/25 职场文书