小程序模块化开发

╰半橙微兮° 2022-11-19 04:05 88阅读 0赞

### 文章目录 ###

*  1. 模块
 *   *  模块的定义和使用：
     *  注意
 *  2. 模板
 *   *  模板的定义和使用：
     *   *  定义
     *  使用
     *  注意

# 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属性：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]

## 注意 ##

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

项目链接：[https://download.csdn.net/download/weixin\_45525272/16669876][https_download.csdn.net_download_weixin_45525272_16669876]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNTI3Mg_size_16_color_FFFFFF_t_70]: /images/20221022/c1775b85519f426ca7b55fce902aec68.png
[https_download.csdn.net_download_weixin_45525272_16669876]: https://download.csdn.net/download/weixin_45525272/16669876