微信小程序开发详解

微信小程序开发详解

前言

在本文中，我将带领大家深入探讨微信小程序开发原理和技术，包括小程序框架、组件、事件等方面。让各位小伙伴可以更好地理解小程序的开发过程和原理。

什么是微信小程序？

微信小程序是一种可以在微信中运行的应用程序，它使用了微信提供的开发框架和工具，可以在不需要下载安装的情况下直接使用。微信小程序采用了类似Web的开发方式，开发者可以使用HTML、CSS、JavaScript等前端技术进行开发。

与传统的Web应用程序相比，微信小程序具有以下特点：

• 无需下载安装，直接在微信中使用
• 可以访问部分系统API，实现更强大的功能
• 通过微信提供的开发框架和工具，可以方便地进行开发、测试和发布

小程序框架

小程序框架是微信小程序开发的核心，它负责小程序的整个生命周期管理、页面渲染、数据绑定、事件处理等方面。小程序框架由微信团队提供，开发者可以通过使用小程序框架来快速构建小程序。

小程序框架的工作原理

小程序框架的工作原理可以简单概括为以下几个步骤：

1. 解析小程序代码：小程序框架会解析开发者编写的小程序代码，并将代码转换为可执行的JavaScript代码。
2. 初始化小程序：小程序框架会初始化小程序，包括注册页面、组件等，并启动小程序的生命周期。
3. 页面渲染：当小程序启动时，小程序框架会根据页面定义，将页面的结构、样式和数据渲染到屏幕上。
4. 数据绑定：小程序框架支持数据绑定，当数据发生变化时，小程序框架会自动更新对应的页面视图。
5. 事件处理：小程序框架会监听用户的交互事件，如点击、滑动等，并根据事件类型触发相应的事件处理函数。

小程序框架的组成部分

小程序框架由帧层、 stimulate 层、视图层、逻辑层四层组成:

1. 帧层:小程序运行容器,提供运行环境。
2. stimulate 层:定义小程序的生命周期与事件。开发者编写的脚本会受 stimulate 层管理与调用。
3. 视图层:由 WXML 与 WXSS 组成,用于定义小程序界面与样式。
4. 逻辑层:由 JavaScript 组成,用于定义小程序的交互逻辑与数据处理。
   一个标准的微信小程序一般由以下文件结构

├── app.js // 小程序逻辑文件
├── app.json // 小程序全局配置
├── app.wxss // 小程序全局样式表
├── pages // 页面文件目录
│ ├── index
│ │ ├── index.js // 页面逻辑
│ │ ├── index.json // 页面配置
│ │ ├── index.wxml // 页面结构
│ │ └── index.wxss // 页面样式表
│ └── …
├── components // 组件文件目录
│ └── …
├── images // 图片资源目录
├── utils // 工具函数目录
└── project.config.json // 项目配置文件
app.js:小程序逻辑文件,用于处理小程序应用级别的逻辑、事件等。
app.json:小程序全局配置文件,用于设置小程序的名称、版本等信息。
app.wxss:小程序全局样式表,设置全局通用样式。
pages:存放小程序页面文件,每一个文件夹代表一个页面,里面包含四个文件:
index.js:页面逻辑文件
index.wxml:页面结构文件
index.json:页面配置文件
index.wxss:页面样式表
components:存放小程序自定义组件,可在页面中引用。
images:图片资源目录,小程序内页面图片均存放于此。
utils:工具函数目录,用于存放非页面或组件相关的功能函数。
project.config.json:小程序项目配置文件,用于配置项目信息、appid、packOptions 等。
pages、components、utils 三个目录层级系统扁平化。页面中可引用 components 下组件,组件和页面中可以使用 utils 中定义的函数等。

小程序框架的生命周期

小程序框架有自己的生命周期，可以分为两个部分：全局生命周期和页面生命周期。

全局生命周期

全局生命周期指的是整个小程序的生命周期，它包括以下几个阶段：

App() function:小程序初始化,全局只执行一次。用于全局初始化、注册事件等。

1. onLaunch：小程序启动时触发，用于初始化小程序的全局数据。
2. onShow：小程序显示在前台时触发，用于处理进入小程序时的逻辑。
3. onHide：小程序从前台切换到后台时触发，用于处理小程序在后台运行时的逻辑。
4. onError：小程序出现错误时触发，用于处理小程序错误信息的上报和处理。

页面生命周期

页面生命周期指的是小程序中每个页面的生命周期，它包括以下几个阶段：

Page() function:用于定义页面配置、事件处理逻辑等。每一个页面都需要声明此函数。

1. onLoad：页面加载时触发，用于处理页面初始化数据的逻辑。
2. onShow：页面显示时触发，用于处理页面显示时的逻辑。
3. onReady：页面渲染完成时触发，用于处理页面渲染完成后的逻辑。
4. onHide：页面从前台切换到后台时触发，用于处理页面在后台运行时的逻辑。
5. onUnload：页面卸载时触发，用于处理页面卸载时的逻辑。

小程序组件

小程序组件是小程序中的可复用部分，包括按钮、输入框、列表等常见UI组件，以及自定义组件。小程序组件可以提高开发效率，减少代码冗余，同时也有利于代码的维护和升级。它具有以下主要特点:

1. 组件化:可构建出具有一定复杂度的组件,实现 UI 与功能的解耦。
2. 可重用:组件可在多个页面中使用,避免重复开发。
3. 隔离作用域:组件有自己的作用域,样式与逻辑不会影响外部页面。
4. 生命周期完整:组件有完整的生命周期,可精确控制其行为。

如何定义组件:

在 components 目录下创建组件文件夹,同级目录创建 json、js、wxml、wxss 四个文件。文件名与文件夹名相同。
components/
├── comp-a
│ ├── comp-a.js // 组件逻辑
│ ├── comp-a.json // 组件配置
│ ├── comp-a.wxml // 组件结构
│ └── comp-a.wxss // 组件样式表
└── …

组件间的关系:

组件可在 pages 页面中使用,pages 页面也可在组件中嵌套使用其他组件。组件的层级不限制,可构建出复杂组件树。
使用组件:在页面的 json 文件中声明使用的组件,并在 wxml 中引用。

// page.json 
{
  "usingComponents": {
    "comp-a": "/components/comp-a/comp-a" 
  }
}
1
2
3
4
5
6

<!-- page.wxml -->
<comp-a /> 
1
2

组件样式隔离:

组件的样式默认只作用于组件内部,不会影响外界。但可在组件 wxss 文件中使用外部样式或设置组件根元素的 CSS 选择器以作用于外部。

/* comp-a.wxss */
.root { /* 组件根元素选择器 */ 
  color: red; 
}

/* page.wxss */
.root {
  font-size: 40rpx;
} 
1
2
3
4
5
6
7
8
9

组件数据监听:

页面可通过 setData 改变传到组件的 data,组件通过监听 properties 进行数据变更响应。

js
// page.js
this.setData({
  compData: 'data changed' 
})

// comp.js
Component({
  properties: {
    compData: String 
  },
  observers: {
    'compData': function(newVal) {
      console.log(newVal) // data changed 
    } 
  }  
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

组件事件:

组件可触发自身的自定义事件,也可接收页面触发的事件。
组件触发事件:通过 this.triggerEvent(eventName, data) 触发事件,页面通过事件代理监听。

// comp.js
Component({
  methods: {
    clickHandle() {
      this.triggerEvent('myEvent', {name: 'John'})
    } 
  } 
})

// page.js 
Page({
  onMyEvent(ev) {
    console.log(ev.detail.name) // John
  } 
}) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

组件接收事件:

在组件的 json 文件中声明接受的事件名,并在 methods 中定义处理函数。

// comp.json
{
  "events": { 
    "myEvent": "onMyEvent" 
  } 
}
1
2
3
4
5
6

// comp.js
Component({
  methods: {
    onMyEvent(ev) {
      console.log(ev)
    }
  }  
})
1
2
3
4
5
6
7
8

组件通信:

小程序组件通信主要有以下几种方式:

1.事件绑定和触发：通过事件绑定和触发，实现组件之间的交互。例如，在父组件中定义事件，子组件中触发该事件，通过事件处理函数实现子组件向父组件传递数据。

父组件示例代码：

//wxml文件
<child-component bindmyevent="onMyEvent"></child-component>
1
2

//js文件
Page({
  data: {
    message: ''
  },
  onMyEvent: function(event) {
    this.setData({
      message: event.detail.message
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11

子组件示例代码：

Component({
  methods: {
    sendMsg: function() {
      this.triggerEvent('myevent', {message: 'Hello World'})
    }
  }
})
1
2
3
4
5
6
7

2.属性传值：通过给子组件传递属性值，实现父组件向子组件传递数据。例如，在父组件中定义属性值，子组件通过使用properties属性获取该值。

父组件

//wxml文件
<child-component message="{{message}}"></child-component>
1
2

//js文件
Page({
  data: {
    message: 'Hello World'
  }
})
1
2
3
4
5
6

子组件

Component({
  properties: {
    message: {
      type: String,
      value: ''
    }
  }
})
1
2
3
4
5
6
7
8

3.Page.setData()：Page对象提供了setData()方法，可以实现组件之间的数据传递。例如，在一个Page页面中，可以通过setData()方法向子组件传递数据。

父组件：

//wxml文件
<child-component></child-component>
1
2

//js文件
Page({
  data: {
    message: ''
  },
  onMyEvent: function(event) {
    this.setData({
      message: event.detail.message
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11

子组件

Component({
  methods: {
    sendMsg: function() {
      let pages = getCurrentPages()
      let currentPage = pages[pages.length - 1]
      currentPage.setData({
        message: 'Hello World'
      })
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11

4.事件总线：使用事件总线可以实现跨组件的数据传递。事件总线是一种事件发布/订阅模式，通过订阅事件和发布事件来实现组件之间的通信。

示例代码

//event.js文件
const eventBus = {
  events: {},
  on: function(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = []
    }
    this.events[eventName].push(callback)
  },
  off: function(eventName, callback) {
    let callbacks = this.events[eventName]
    if (callbacks) {
      this.events[eventName] = callbacks.filter((item) => item !== callback)
    }
  },
  emit: function(eventName, data) {
    let callbacks = this.events[eventName]
    if (callbacks) {
      callbacks.forEach((callback) => callback(data))
    }
  }
}

module.exports = eventBus
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

父组件

//wxml文件
<child-component></child-component>
//js文件
const eventBus = require('event.js')
Page({
  data: {
    message: ''
  },
  onLoad: function() {
    eventBus.on('myevent', (data) => {
      this.setData({
        message: data.message
      })
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

子组件

const eventBus = require('event.js')
Component({
  methods: {
    sendMsg: function() {
      eventBus.emit('myevent', {message: 'Hello World'})
    }
  }
})
1
2
3
4
5
6
7
8

5.getApp()：通过getApp()方法获取小程序实例，实现跨页面的数据传递。通过在小程序实例中定义全局变量或方法，可以实现组件之间的数据共享。

//app.js文件
App({
  globalData: {
    message: ''
  }
})
1
2
3
4
5
6

父组件

//wxml文件
<child-component></child-component>
//js文件
const app = getApp()
Page({
  data: {
    message: ''
  },
  onLoad: function() {
    this.setData({
      message: app.globalData.message
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件

const app = getApp()
Component({
  methods: {
    sendMsg: function() {
      app.globalData.message = 'Hello World'
    }
  }
})
1
2
3
4
5
6
7
8

小程序事件

小程序事件是指用户与小程序交互时触发的事件，如点击、滑动等。小程序框架可以监听这些事件并执行对应的事件处理函数。小程序事件包括：

• touchstart：手指触摸开始时触发。
• touchmove：手指触摸移动时触发。
• touchend：手指触摸结束时触发。
• tap：手指轻触时触发。
• longpress：手指长按时触发。
• scrolltoupper：滚动到顶部时触发。
• scrolltolower：滚动到底部时触发。

小程序事件可以绑定在组件上，也可以绑定在页面上。绑定事件的方法如下：

1. 在组件或页面的wxml文件中，为需要绑定事件的组件或元素添加一个事件绑定属性，例如bindtap、bindlongpress等。
2. 在组件或页面的js文件中，定义对应的事件处理函数，函数名需要和绑定属性的后缀相同。
3. 在事件处理函数中，可以通过event对象获取触发事件的相关信息，如触发事件的位置、触发事件的组件等。

代码示例

<!-- wxml -->
<view>
  <button bindtap="handleTap">点击按钮</button>
</view>
1
2
3
4

// js
Page({
  handleTap: function() {
    console.log('按钮被点击了')
  }
})
1
2
3
4
5
6

小程序API

小程序API是小程序提供的一些功能接口，开发者可以通过调用这些接口来实现各种功能。小程序API可以分为基础API和扩展API两种。

基础API

小程序基础API包括一些常见的功能接口，如数据存储、网络请求、音视频播放等。这些API可以满足大部分小程序的需求。

以下是一些常用的基础API：

• wx.request：发起网络请求。
• wx.showToast：显示消息提示框。
• wx.showLoading：显示加载提示框。
• wx.hideLoading：隐藏加载提示框。
• wx.setStorageSync：同步存储数据。
• wx.getStorageSync：同步获取存储的数据。
• wx.playBackgroundAudio：播放背景音乐。
  

扩展API

小程序扩展API是在基础API的基础上，提供了一些更高级的功能接口，如图像识别、语音识别等。这些API需要在小程序管理后台申请开通，并需要开发者具备一定的技术能力才能使用。

以下是一些常用的扩展API：

• wx.createCameraContext：创建相机上下文对象。
• wx.createCanvasContext：创建画布上下文对象。
• wx.createInnerAudioContext：创建内部音频上下文对象。
• wx.createVideoContext：创建视频上下文对象。
• wx.getBackgroundAudioManager：获取全局唯一的背景音频管理器。

小程序开发工具

小程序开发工具是小程序开发的集成开发环境（IDE），可以帮助开发者完成代码编写、调试、打包等工作。

小程序开发工具包括以下功能：

• 代码编辑器：支持自动补全、语法高亮、代码折叠等功能。
• 调试工具：可以在真机调试、模拟器调试、网页调试等多种方式下进行调试。
• 管理后台：可以管理小程序的发布版本、数据分析、运营推广等工作。
• 打包工具：可以将小程序打包成发布版本，支持自定义版本号、描述等信息。

小程序开发工具的使用方法比较简单，只需要下载安装后，在工具中创建一个小程序项目，即可开始开发。

小程序优化技巧

小程序开发过程中，为了提高小程序的性能和用户体验，常常需要使用一些优化技巧例如：

1. 减少网络请求：小程序的网络请求较慢，因此需要尽可能减少网络请求次数，可以通过数据缓存、合并请求等方式实现。
2. 减少页面渲染次数：小程序的页面渲染较慢，因此需要尽可能减少页面渲染次数，可以通过模板渲染、数据懒加载等方式实现。
3. 避免使用全局变量：小程序的全局变量会占用较多的内存，因此需要避免使用全局变量，可以通过数据传递、组件化等方式实现。
4. 避免频繁触发setData：小程序的setData操作会引起页面重绘，因此需要避免频繁触发setData，可以通过节流、防抖等方式实现。
5. 使用小程序API：小程序提供了一些优化性能的API，如wx.createIntersectionObserver、wx.createSelectorQuery等，可以帮助开发者优化小程序的性能。

结语

微信原生小程序是一种快速开发、轻量级的应用程序，适用于各种场景下的应用开发。本文从多个方面介绍了微信小程序开发相关，希望可以帮到大家