小程序

微信小程序开发之:import、require和include

2022-11-28

1、概述

require:js代码中引用其他js模块代码

include:wxml文件中引用template模板文件

import:既可以在js代码中导入模块代码,又可以在wxml或wxss文件中导入模块文件


2、import和require

2.1 说明

import和require:在js代码文件中导入逻辑代码模块

require 是 AMD规范引入方式

import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法

2.2 使用

import使用示例

import App from './App';


require使用示例

const App = require('./App');


2.3 区别

require和import没有什么区别,这是两种js模块化规范而已


2.4 注意事项

两个js文件互相require,导致其中一个取不到值


3、import和include

3.1 说明

import和include都是小程序中文件的引用方式

import:既可以用在wxml文件中,又可以用在wxss文件中

include:只能用在wxml文件中

3.2 使用示例

import使用示例

模板文件(item.wxml)

<!-- item.wxml -->

<template name="item">

  <text>{{text}}</text>

</template>


使用模板文件的文件(index.wxml)

<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>


include使用示例

被引用文件(header.wxml)

<!-- header.wxml -->

<view> header </view>


引用文件(index.wxml)

<!-- index.wxml -->

<include src="header.wxml"/>

<view> body </view>


3.3 区别

import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,