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


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 浏览器关闭事件
Jul 08 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JavaScript瀑布流布局实现代码
May 06 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python绘制直方图和密度图的实例
2019/07/08 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python几种常用功能实现代码实例
2019/12/25 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
python 8种必备的gui库
2020/08/27 Python
Python中的特殊方法以及应用详解
2020/09/20 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
巴基斯坦电子产品购物网站:Home Shopping
2017/09/14 全球购物
村党支部对照检查材料思想汇报
2014/09/28 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
慈善募捐倡议书
2015/04/27 职场文书
起诉书格式范文
2015/05/20 职场文书
导游词之昭君岛
2020/01/17 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python