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


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实现可拖动DIV的方法
Dec 17 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
javascript中setInterval的用法
Jul 19 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
js面向对象的写法
Feb 19 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
vue实现井字棋游戏
Sep 29 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
wamp安装后自定义配置的方法
2014/08/23 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
Python中的startswith和endswith函数使用实例
2014/08/25 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
python使用Geany编辑器配置方法
2020/02/21 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
党委书记岗位职责
2013/11/24 职场文书
道德演讲稿
2014/05/21 职场文书
单位工作证明书格式
2014/10/04 职场文书
历史博物馆观后感
2015/06/05 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
zabbix配置nginx监控的实现
2022/05/25 Servers