微信小程序开发之——import、require和include_微信小程序 import_PGzxc的博客

二 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,导致其中一个取不到值 
三 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 位置， 
import和require
 
简书—微信小程序中import和require区别
知乎—require，import区别
阮一峰的日志—JavaScript 模块的循环加载 
import和include
 
小程序官方文档—引用
                    一 概述require：js代码中引用其他js模块代码include：wxml文件中引用template模板文件import：既可以在js代码中导入模块代码，又可以在wxml或wxss文件中导入模块文件二 import和require2.1 说明import和require：在js代码文件中导入逻辑代码模块require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法2.2 使用import使用示例import App f
使用微信web开发者工具新建一个小程序项目，项目目录选择dist目录，该目录是ts源文件编译后存放的目录。
$ git clone git@github.com:linguofeng/wxapp-typescript.git
$ cd wxapp-typescript
$ npm install -g gulp typescript
$ yarn
$ code .
$ gulp watch
通过Gulp工具调用tsc编译ts源文件，其它文件通过gulp的watch进行拷贝。
第三库是通过package.json文件描述，拷贝相关文件到dist/libs，并修改require引用的路径实现。
TODOS:
[x] 加入第三方库支持
[x] 支持Redux
[x] 支持rxjs
[x] 支持moment
[x] 支持bluebird
[x] 支持redux-observable
				小程序支持模块化开发，可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。引入模块通过require方式。创建模块
复制引入模块
复制这是官方提供的方法，我个人还是比较喜欢使用export和import，使用起来比较顺手，可能是因为我一直用Vue开发的原因，下面拿一个实际例子，讲一讲export和import。最近在开发的一个小程序项目，打算使用Promise对API这块做下封装，统一管理API请求。新
				在我们开发程序的时候，一般有很多相似的内容重复出现，那么对于这些内容除了使用模板我们也可以使用另外的一个功能模块---引用。
include可以将目标文件除了<template/><wxs/>外的整个代码引入，相当于是拷贝到include位置，如：
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="...
注意事项：使用inlucde的时，要注意将最后的终止符 / 添加上去，否则不能正常的导入界面内容
1.import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
<!-- index/index -->
1.静态化组件：include
ingclude适用于静态化的模板，直接引用，数据不可动态更改。即简单的代码替换，不存在作用域，也不像import需要data传递变量。它只是简单的将代码拿出去然后再拿回来，其作用只是单纯的简化页面。
2.动态化组件：import
2.1新建一个template文件夹来存放您...
其中，`getToken` 是一个云函数名，您需要先创建这个云函数，然后在云函数中使用 `request` 函数向微信公众平台发送请求获取 `access_token`。
云函数的代码示例如下：
```javascript
const cloud = require('wx-server-sdk')
const request = require('request')
cloud.init()
exports.main = async (event, context) => {
  const { appId, secret } = event
  const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${secret}`
  return new Promise((resolve, reject) => {
    request(url, (error, response, body) => {
      if (!error && response.statusCode == 200) {
        resolve(JSON.parse(body))
      } else {
        reject(error)
在云函数中，我们使用了 `request` 模块向微信公众平台发送了请求，并且将请求结果返回给了小程序。最终，您可以在小程序中获取到 `access_token` 并且进行后续的操作。