小程序模块化开发

简介: 小程序模块化开发

1. 模块


模块的定义和使用:


module.exports = {
  welcome: 'welcome'
}


var welcome = require('../utils/welcome.js')
Page({
  data: {},
  onLoad: function() {
   } 
})


注意


需要注意的是,path路径不可以使用绝对路径,否则会报错,应该使用相对路径。


2. 模板


模板的定义和使用:


定义


<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>


使用


<import src="item.wxml" />
Page({
  data: {
    item: {
      index: 0, msg: 'this is a template',
      time: '2019-01-15'}}
})


template组件is属性:


<template name="odd">…
</template>
<template name="even">…
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>



注意


需要注意的是,模板拥有自己的作用域,只能使用data传入的数据以及模版定义文件中定义的 <wxs />模块。


项目链接:https://download.csdn.net/download/weixin_45525272/16669876

相关文章
|
6月前
|
JavaScript 前端开发 开发者
js模块化的好处
js模块化的好处
33 0
|
3月前
|
算法 JavaScript 前端开发
什么是模块化开发
【8月更文挑战第26天】什么是模块化开发
114 1
|
4月前
|
资源调度 前端开发 JavaScript
如何用 Bower 管理前端资源:提升开发效率与项目维护性
【7月更文挑战第2天】**Bower**是基于Node.js的前端包管理器,用于高效管理JavaScript库、CSS和HTML模板等资源。通过安装、配置、搜索、安装、更新及卸载组件,它帮助开发者保持依赖的一致性,提升开发效率。配置`.bowerrc`设定安装目录,`bower.json`记录依赖。遵循最佳实践,如定期更新、锁定版本和清理无用组件,能增强项目维护性。尽管有新工具出现,掌握Bower仍是前端开发基础。
143 0
|
JavaScript 前端开发 UED
JavaScript模块化:提高代码可维护性和可重用性的利器
JavaScript模块化:提高代码可维护性和可重用性的利器
130 0
|
6月前
|
编译器 Go 持续交付
Go语言模块导入的实践与技巧:提升代码重用与模块化开发效率
【2月更文挑战第9天】在Go语言中,模块导入是实现代码重用和模块化开发的关键环节。本文将介绍Go语言中模块导入的实践与技巧,包括本地模块的导入、远程模块的导入、导入路径的解析与重定向、导入别名与包的重命名等,旨在帮助读者更加高效地进行Go语言的项目开发。
|
6月前
|
JSON 缓存 JavaScript
Nodejs 第九章(模块化)
Nodejs 第九章(模块化)
51 0
|
缓存 前端开发 JavaScript
模块化开发与前端打包工具
模块化开发与前端打包工具
182 0
|
编解码 JavaScript
JS基本功系列-模块化相关小结
背景 面试中可能会被问到模块化,类似:谈谈模块化的历程?AMD和CMD的区别?这里整理一下。
75 0
|
JavaScript 前端开发
前端如何实现模块化开发?
在网页开发的早期,JavaScript 制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候的代码还是很少的。
171 0