微信小程序开发详解

前言

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

什么是微信小程序？

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

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

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

小程序框架

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

小程序框架的工作原理

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

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

小程序框架的组成部分

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

帧层:小程序运行容器,提供运行环境。
stimulate 层:定义小程序的生命周期与事件。开发者编写的脚本会受 stimulate 层管理与调用。
视图层:由 WXML 与 WXSS 组成,用于定义小程序界面与样式。
逻辑层:由 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:小程序初始化,全局只执行一次。用于全局初始化、注册事件等。

onLaunch：小程序启动时触发，用于初始化小程序的全局数据。

onShow：小程序显示在前台时触发，用于处理进入小程序时的逻辑。

onHide：小程序从前台切换到后台时触发，用于处理小程序在后台运行时的逻辑。

onError：小程序出现错误时触发，用于处理小程序错误信息的上报和处理。

页面生命周期

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

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

onLoad：页面加载时触发，用于处理页面初始化数据的逻辑。

onShow：页面显示时触发，用于处理页面显示时的逻辑。

onReady：页面渲染完成时触发，用于处理页面渲染完成后的逻辑。

onHide：页面从前台切换到后台时触发，用于处理页面在后台运行时的逻辑。

onUnload：页面卸载时触发，用于处理页面卸载时的逻辑。

小程序组件

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

组件化:可构建出具有一定复杂度的组件,实现 UI 与功能的解耦。
可重用:组件可在多个页面中使用,避免重复开发。
隔离作用域:组件有自己的作用域,样式与逻辑不会影响外部页面。
生命周期完整:组件有完整的生命周期,可精确控制其行为。
如何定义组件:
在 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" 
}
}
```
```

<comp-a />
```
组件样式隔离:
组件的样式默认只作用于组件内部,不会影响外界。但可在组件 wxss 文件中使用外部样式或设置组件根元素的 CSS 选择器以作用于外部。
```css
/ comp-a.wxss /
.root { / 组件根元素选择器 /
color: red;
}

/ page.wxss /
.root {
font-size: 40rpx;
}

###  组件数据监听:
页面可通过 setData 改变传到组件的 data,组件通过监听 properties 进行数据变更响应。
```js
js
// page.js
this.setData({
  compData: 'data changed' 
})

// comp.js
Component({
  properties: {
    compData: String 
  },
  observers: {
    'compData': function(newVal) {
      console.log(newVal) // data changed 
    } 
  }  
})

组件事件:

组件可触发自身的自定义事件,也可接收页面触发的事件。
组件触发事件:通过 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
  } 
})

组件接收事件:

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

// comp.json
{
   
   
  "events": {
   
    
    "myEvent": "onMyEvent" 
  } 
}

// comp.js
Component({
   
   
  methods: {
   
   
    onMyEvent(ev) {
   
   
      console.log(ev)
    }
  }  
})

组件通信:

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

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

父组件示例代码：

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

//js文件
Page({
    
    
  data: {
    
    
    message: ''
  },
  onMyEvent: function(event) {
    
    
    this.setData({
    
    
      message: event.detail.message
    })
  }
})

子组件示例代码：

Component({
    
    
  methods: {
    
    
    sendMsg: function() {
    
    
      this.triggerEvent('myevent', {
    
    message: 'Hello World'})
    }
  }
})

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

父组件

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

//js文件
Page({
    
    
  data: {
    
    
    message: 'Hello World'
  }
})

子组件

Component({
    
    
  properties: {
    
    
    message: {
    
    
      type: String,
      value: ''
    }
  }
})

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

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

//js文件
Page({
   
   
  data: {
   
   
    message: ''
  },
  onMyEvent: function(event) {
   
   
    this.setData({
   
   
      message: event.detail.message
    })
  }
})

子组件
Component({
    
    
  methods: {
    
    
    sendMsg: function() {
    
    
      let pages = getCurrentPages()
      let currentPage = pages[pages.length - 1]
      currentPage.setData({
    
    
        message: 'Hello World'
      })
    }
  }
})
4.事件总线：使用事件总线可以实现跨组件的数据传递。事件总线是一种事件发布/订阅模式，通过订阅事件和发布事件来实现组件之间的通信。
示例代码
```js
//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

>父组件
```js
//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
      })
    })
  }
})

子组件

const eventBus = require('event.js')
Component({
    
    
  methods: {
    
    
    sendMsg: function() {
    
    
      eventBus.emit('myevent', {
    
    message: 'Hello World'})
    }
  }
})

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

//app.js文件
App({
    
    
  globalData: {
    
    
    message: ''
  }
})

父组件

//wxml文件
<child-component></child-component>
//js文件
const app = getApp()
Page({
    
    
  data: {
    
    
    message: ''
  },
  onLoad: function() {
    
    
    this.setData({
    
    
      message: app.globalData.message
    })
  }
})

子组件

const app = getApp()
Component({
    
    
  methods: {
    
    
    sendMsg: function() {
    
    
      app.globalData.message = 'Hello World'
    }
  }
})

小程序事件

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

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

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

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

代码示例

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

// js
Page({
   
   
  handleTap: function() {
   
   
    console.log('按钮被点击了')
  }
})

小程序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），可以帮助开发者完成代码编写、调试、打包等工作。

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

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

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

小程序优化技巧

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

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

结语

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

微信小程序开发详解

微信小程序开发详解

前言

什么是微信小程序？

小程序框架

小程序框架的工作原理

小程序框架的组成部分

小程序框架的生命周期

全局生命周期

页面生命周期

小程序组件

如何定义组件:

组件间的关系:

组件样式隔离:

组件事件:

组件接收事件:

组件通信:

小程序事件

小程序API

基础API

扩展API

小程序开发工具

小程序优化技巧

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

微信小程序开发详解

微信小程序开发详解

前言

什么是微信小程序？

小程序框架

小程序框架的工作原理

小程序框架的组成部分

小程序框架的生命周期

全局生命周期

页面生命周期

小程序组件

如何定义组件:

组件间的关系:

组件样式隔离:

组件事件:

组件接收事件:

组件通信:

小程序事件

小程序API

基础API

扩展API

小程序开发工具

小程序优化技巧

结语

热门文章

最新文章

相关课程

相关电子书

相关实验场景