微信小程序笔记（七）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章微信小程序笔记（六）中，我们学习了微信小程序的相关知识点，包括应用生命周期、页面生命周期、通过生命周期获取场景值、通过生命周期获取页面跳转参数等相关知识点。在本篇文章中，我们将学习小程序的模块规范、使用 npm、全局数据、WXS介绍等相关知识点。

JS模块化：模块规范

小程序中的 JS 默认使用 CommonJS 模块化规范（同 Node.js）。

• 导出: module.exports
• 导入: require()

操作步骤：

1. 在 utils 目录创建一个 common.js 模块文件。
2. 在 common.js 中编写一个函数，并导出。

const str = 'hello, world!'

const add = (a, b) => a + b

module.exports = {
  str,
  add
}

3. 在需要调用这个js模块的其他js代码中，导入common.js, 调用导出的函数。

const common = require('../../utils/common')

Page({
  onLoad() {
    console.log(common);
    console.log(common.str, common.add(1, 4));
  }
})

JS模块化：使用 npm

在小程序中使用 npm 下载的模块包，要经过以下几个过程：

1. 确保项目下是否有package.json，如果没有则创建
2. 下载 npm 包
3. 构建 npm 包(把小程序不认识的node_modules变成小程序认识的miniprogram_npm)
4. 设置项目启用对 npm 的支持
5. 在代码中引入并调用 npm 包中的内容

操作步骤：

1.使用 npm 安装一个模块，比如 lodash.trim。

# 初始化
npm init -y

# 安装 lodash.trim 模块
npm i lodash.trim

2. 点击微信开发者工具的 “工具” -> “构建npm” 菜单。

构建完成后工程中会多出一个 miniprogram_npm 目录：

3. 在详情面板的“本地设置”中勾选"使用npm模块"

4. 在某页面的 js 代码中导入 lodash.trim 模块并调用

const common = require('../../utils/common')
const lodashTrim = require('lodash.trim')

Page({
  onLoad() {
    console.log(common);
    console.log(common.str, common.add(1, 4));
    console.log(lodashTrim('   1 2 3   '));
  }
})

JS模块化：全局数据

如果有需要被全局访问的数据或函数，应该放到哪里？放在 app.js 中的 App 实例上，调用 getApp() 即可获取 App 实例。

操作步骤：

1. 将需要全局访问的数据/函数放在 app.js 文件内调用的 App() 函数对象参数中。

App({
	...
  globalData: {
    name: 'ls',
    age: 19
  }
})

2. 在页面的 js 中使用 getApp() 函数获取 App 实例（即 app.json 中定义的内容）。

// getApp 是小程序内置提供的函数，用于获取全局应用实例
const app = getApp()

3. 通过 App 实例，调用它上面存放的全局数据/函数。

const common = require('../../utils/common')
const lodashTrim = require('lodash.trim')

const app = getApp()
console.log(app);

Page({
  onLoad() {
    console.log(common);
    console.log(common.str, common.add(1, 4));
    console.log(lodashTrim('   1 2 3   '));
    
    console.log(app.globalData.name);
  }
})

WXS

WXS是一套运行在小程序渲染层的脚本语言，与 JavaScript 是不同的语言，但语法和 JavaScript 非常类似。它的目的是解决 WXML 中无法调用函数的问题。为什么 WXML 中无法调用函数呢？因为小程序架构设计上的限制。小程序运行环境内部被分两个部分：渲染层和逻辑层，且之间不能互相直接访问。

• 渲染层职责：执行 WXML 和 WXSS 代码
• 逻辑层职责：执行 JavaScript 代码
• 两层之间通信：通过 Native 层（也就是微信本身）