增强微信小程序基本概述（微信小程序基础知识）

本文介绍了微信小程序的相关问题。 主要介绍了自定义组件、样式分离、数据、方法、属性等基础内容，我们一起来看看吧。 ，希望对您有帮助。

【相关学习推荐：小程序学习教程】

1. 项目内部创建组件

，在根目录中单击鼠标右键，然后选择“组件 -> 创建测试文件夹”。

右键单击新创建的组件 -> 测试文件夹，然后单击“新建组件”。

输入组件。 如果在名称后按回车，则会自动生成相应的四个组件。 文件后缀分别为.js、.json、.wxml 和.wxss。

1.2。 引用的组件

本地引用：该组件仅在当前引用的页面内可用。

全局引用：该组件在每个小程序页面均可用。

1.3. 本地引用组件

页面方法的 .json 配置文件中的引用组件，称为本地引用。 示例代码如下。

# 在页面的 .json 文件中引入组件 { "usingComponents": { "my-test": "/components/test/test" }}#。 使用页面的 .wxml 文件，组件

1.4，app.json 中的全局引用组件

。 在如何引用组件中，全局配置文件称为全局引用。 示例代码如下。

# 在app.json文件中，引入组件 { "usingComponents": { "my-test": "/components/test/test".; }}

1.5。 全局引用VS局部引用

根据元件的使用频率和范围选择合适的引用方式。

如果该组件在多个页面，由于使用频繁，建议全局引用

如果该组件仅在特定页面使用，建议浏览本地。

1.6. 组件和页面的区别

组件和页面表面上由四个文件组成：.js、.json、.wxml 和 .wxss。 但是，组件和页面的 .js 和 .json 文件之间存在明显差异。

您必须在组件的 .json 文件中声明 "component": true 属性。

组件的 .js 文件调用 Component() 函数

组件的事件处理函数必须在节点内的方法中定义

2。 分离样式

2.1. 分离组件样式

默认情况下，自定义组件样式仅影响当前组件，不会影响组件外部的 UI 结构。 。

防止外部样式影响组件内部样式

防止组件样式破坏外部样式

2.2. 组件样式分离注意事项

app.wxss中的全局样式对组件无效

样式分离仅影响类选择器、ID选择器、属性选择器、标签 选择器不受样式分离的影响。

我们建议对引用它们的组件和页面使用类。 选择器。 避免使用 ID、属性和标签选择器。

2.3. 更改组件样式分隔选项

默认情况下，自定义组件样式分隔功能不允许组件使用内部和外部样式。 相互干扰问题。 但是，有时您可能希望能够从外部控制组件内的样式。 目前，您可以通过 stylelssolation 更改组件的样式隔离选项。 使用方法如下：

# 添加以下配置。 组件（{ 选项：{ 样式隔离：'isolated' }})# 或者，将以下设置添加到组件的 .json 文件中 { "stylellsolation": "isolated"}

2.4. stylelsolation 的可选值

| 选项值 |默认值 | 描述                                                                                                              :----------: | :----: | ----------------[k3 ] ]-----------[k 3]---------------- ------------ ----------------[k3 ] ]-----------[k 3]---------------- ------------------------ | ----[ k3]------------ ]----------------[ k3][ k3][k 3]---------------- -[ k3]---------------- - |

| 孤立 | 是 | 表示已启用样式分离。 | 表示已启用样式分离。 在自定义组件内部和外部使用类指定的样式不会相互影响 |

| 应用 - 共享 | 页面的 wxss 样式会影响自定义组件的显示。 但自定义组件wxss中指定的样式不影响页面 |

| 表示页面的wxss样式影响自定义组件。 自定义组件 wxss 中指定的样式也会影响设置为 apply-shared 或共享的页面和其他自定义。 组件 |

3. 数据、方法、属性

3.1。ta data

小程序组件使用，用于组件模板渲染和私有数据。 必须在数据节点中定义。 一个例子是：

Component({ data: { count: 0 }})

3.2、方法数据

Applet 组件现在我们需要在方法中定义事件处理函数和自定义方法。 在node中，示例代码为：

Component({ 方法： { _showCount() { wx.showTo ast({ title: 'count value is :' + this. data.count, icon: 'none' }) } }})

3.3、属性属性

小程序 在组件中，属性是组件的外部属性，用于接收从外部传递给组件的数据。 示例代码如下。

Component({ Property: { Max 的完整方法: {type: Number, value: 10 }, max: Number }})

3.4 数据和属性之间的区别

小程序的组成部分是属性和数据。 数据用途相同，均可读写，但存在以下差异：

data 更喜欢存储组件的私有数据。

属性倾向于存储从外部传递到组件的数据。

Component({methods: { showInfo() { console .log(this.data === this.properties) } }})

3.5. 使用 setData 更改属性的值。

数据data和属性的属性没有本质区别，所以你可以使用属性的值来渲染页面，也可以在属性上使用setData。 属性被重新分配。 。 示例代码如下。

# 使用形成的.wxml文件中property属性的值。 max属性的值为：{{max}}Component({Property: {max: Number }, Method: { addCount() { this.setData({ max: this.properties .max ) + 1 }) } }}) 4. 数据监听器

4.1. 什么什么是数据监听器？

数据监听器用于监听并响应属性或数据字段的变化，并执行特定的操作。 这就像 vue 中的监听监听器一样。 小程序组件中数据监听器的基本语法形式是：

Component({observers: { 'Field A, Field B': function (field A mind, field B new value) { } }} )

4.2. 数据监听器的基本使用

Component( { data: { n1: 0, n2: 0 , sum: 0 },messages: { addN1() { sthis.setData({ n1: this.data.n1 + 1 } )}, addN2() { sthis.setData({ n2: this.data.n2 + 1 } )} }, 观察者: { 'n1, n2': function(n1, n2) { this.setData({sum: n1 + n2}) } }})

4.3. 监控对象属性的更改

# 数据监听器支持监控单个或多个属性的更改。 示例代码如下。 Component({observers: { 'Object.Attribute A, par Like.AttributeB': function (属性A的新值，属性B的想法){} }})# 监听对象中所有属性的变化。 Component({ Observer: { 'obj.**': function(obj){ } }}) 5. 纯数据字段

5.1. 什么是纯数据字段？

纯数据字段是指不用于在界面中呈现数据字段的字段。

应用场景：比如某些情况下，你的数据中有些字段在界面中不可见，不会传递给其他组件，只在当前组件内部使用。 具有这种特性的数据字段适合创建数据。设置为数据存储字段

优点：纯数据字段有助于提高页面刷新性能。

5.2. 使用规则

在组件构造函数的选项节点中，指定pureDataPattern 是正则表达式。 字段名与该正则表达式匹配的字段是纯数据字段。 示例代码如下。

Component({ options: { 对于纯数据字段 --> pureDataPattern: /^_/ } , data: { a: true, // 常规数据字段 _b: true // 纯 }}) 6. 组件生命周期

6.1. 所有组件生命周期功能

6.2。 组件的主要生命周期函数

小程序组件最重要的三个生命周期函数是create、attach、detach。 各自的特点如下。

如果组件实例刚刚创建，则会触发创建的生命周期函数。

此时无法调用setData。

通常，此生命周期函数应该仅用于向组件上的此函数添加一些自定义属性字段。

组件一旦完全初始化并进入页面节点树，就会在附加的生命周期函数中触发

p>

此时的数据有this.已初始化。

这个生命周期非常方便，允许大多数初始化工作在此时执行。

分离生命周期函数在组件离开页面节点树后触发。

退出页面会为页面中的每个自定义组件触发单独的生命周期函数。

这是做一些清洁工作的好时机。

6.3. 生命周期节点

在小程序组件中，生命周期函数可以：如果直接在组件构造函数的一级参数中定义，可以在lifetime字段中声明（这是推荐的方法，优先级最高）。 示例代码如下。

Component({ Lifetime: {attached() {}, // 在一组组件实例中运行。页面进入节点树 detach( ) {}, // 当组件实例从页面节点树中移除时执行 }, <view> 这是组件的内部节点 组件 插入槽的内容如下

7.3. 启用多个槽位

小程序中的自定义组件必须使用多个槽位。 可以通过以下方式在组件的 .js 文件中启用插槽： 示例代码如下。

Component({ options: { multipleSlots: true // 定义组件时启用对多个槽的支持 } })

7.4. 定义多个槽

您可以使用多个具有不同槽位的标签组件的 .wxml 中的名称以区分不同的插槽。 示例代码如下。

之后的第二个 slot slot>

7.5。 使用多个槽

当使用具有多个槽的自定义组件时，必须使用槽属性将节点插入到不同的槽中。投币口。 示例代码如下。

<!--这部分内容 Component 会被放入--> 下面的内容会被插入到组件slot name="before" <![k3 ]-这部分 内容将放置在组件位置 --> 组件将插入此处 内容将放置在 slot name="after" 8. 父子组件之间的通信

8.1. 父子组件之间通信的三种方式

属性 绑定

由父组件用于将数据设置到子组件的指定属性。 只能设置 JSON 兼容数据。

事件绑定

子组件用于将数据传递给父组件。 您可以传递任何数据。

获取组件实例。

父组件也可以传递this.selectComponent()。 获取子组件实例对象。

通过这种方式，您可以： 直接访问子组件数据和方法。

8.2.属性绑定

属性绑定用于实现父组件向子组件传递值，只能传递普通类型的数据。 方法不能传递给子组件。 父组件的示例代码如下。

data: { count: 0}<!-[ k3]父组件的 wxml 结构 -[k3 ]>properties: { count: Number} 子组件类型，计数值为：{{count}}

8.3，事件 绑定

事件绑定用于将值从子级传输到父级，可以传递任何类型的数据。 使用步骤如下：

在父组件的js中，定义一个函数，以自定义事件的形式传递给子组件。

syncCount() { console.log('syncCount')}

以自定义事件的形式在父组件的wxml中添加步骤1。 中定义的函数引用被传递给子组件。

协商子组件js。 ，向父组件发送数据。

const child = this.selectCo mponent('.test') child.setData({ count: child.properties.count + 1 }) child.addCount()}9，行为

9.1，什么什么是行为？

就像 Vue.js 中的 mixins 一样，行为是小程序中用于在组件之间共享代码的功能。

9.2，行为如何工作

每个行为都可以具有属性、数据以及一组生命周期函数和方法。 当组件引用它时，它的属性、属性和方法将合并到组件中。

每个组件可以引用多个行为，而行为也可以引用其他行为。

9.3. 创建Behavior

调用Behavior(Object object)方法创建一个共享的行为实例对象以供所有组件使用。

# 调用Behavior()方法创建并使用实例对象使用 module.exports 共享行为实例对象 module.exports = B ehavior({ # Properties 节点properties: { }, # 私有数据节点的数据: {}, # 自定义方法节点的事件处理函数和方法： {}})

9.4, 导入和使用行为

在组件中，使用 require() 方法导入所需的行为。 安装后，您可以访问行为。 示例代码数据或方法如下：

# 使用 require() 导入自定义行为模块 const myBehavior = require('my-behavior')Component( { 行为：[myBehavior]})

9.5，行为 所有节点可用

10。 使用 npm 包

10.1。 小程序对npm的支持和限制

目前小程序已经支持使用npm安装第三方包，提高小程序开发效率。 然而，在小程序中使用 npm 包存在三个限制：

不支持依赖于 Node.js 内置库的包。

不支持依赖于浏览器内置的包对象。

不支持依赖于 C++ 插件的包。

10.2，API Promise

p>

基于回调函数的异步API缺点

默认情况下，小程序官方提供的异步API都是基于回调函数来实现的，比如Network Request API。 您需要通过以下方式调用它：

wx.request( { method: '', url: '', data: {}, success: () => {}})

缺点：容易造成回调地狱问题，代码可读性、可维护性是： 差

什么是 API Promise？

API Promise。 通过额外的配置，指定将官方提供的基于回调函数的异步API升级并改进为基于Promises的异步API。 代码可读性和可维护性，避免回调地狱问题

实现API Promises

在小程序中，实现API Promises主要是通过第三方npm包 minprogram -api[k3 ]承诺。 安装及使用步骤如下：

npm install --save minprogram-api-promise# 在你的小程序入口文件（app.js）中，调用promisifyAll即可。 () 1 次方法 import { promisifyAll } from 'minprogram-api-promise'const wxp = wx.p = {}promisifyAll(wx, wxp)

异步API调用Promise

#页面的.wxml结构vant按钮#在.js文件中page: 定义对应的tap事件处理函数 async getInfo() { const { data: res } = wait wx .p.request({ 方法: 'GET'，URL：''，数据：{} })}11. 全局数据共享

11.1. 什么是全局数据共享？

全局数据共享（也称为状态管理）组件就是解决之间的数据共享问题。

开发中常用的数据共享解决方案包括：Vuex、Redux、MobX等。

11.2。 小程序中的全局数据共享方案

在小程序中，可以使用mobx-miniprogram和mobx-miniprogram-绑定来实现全局数据共享。

mobx-小程序用于创建存储实例对象。

mobx-miniprogram-绑定用于绑定存储中的共享数据或方法。 安装MobX相关包以在组件或页面中使用

安装MobX相关包

# 在项目中运行以下命令安装MobX相关包。 npm install --save mobx-miniprogram mobx-miniprogram-bindings

注意：安装MobX相关包后，请务必删除miniprogram_npm目录并重建npm。

创建示例 MobX 存储

p>import { observable,action } from 'mobx-miniprogram'export const store = observable({ //数据字段 numA: 1, numB: 2, //计算属性 get sum() { return this.numA + this.numB }, //用于更改存储中数据的操作方法 updateNumA: action(function(step) { this.numA += step }), updateNumB: action(function(step) { this.numB += step }),})

将 Store 成员绑定到页面

# 页面的 .js 文件 import { createStoreBindings } from 'mobx-miniprogram-bindings ' import { store } from './store'Page({ onLoad() { This.storeBindings = createStoreBindings(this, { store, fields: ['numA', 'numB', 'sum'], action: ['updateNumA'] }) }, btnHandler(e) { this.updateNumA(e.target.dataset.step)}

是 存储 的成员。 组件

从 'mobx-miniprogram-bindings'导入 {storeBindingsBehavior } 从 './store'Component({ 行为: [storeBindingsBehavior], 商店绑定: { store, fields: { numA : () => store.numA, numB: (store) => store.n umB, sum: 'sum' }, 操作: { updateNumA: 'updateNumA' } }})

在组件中使用。

# 将成员存储在组件中的.wxml结构中 {{numA}} + {{numB} } = {{sum}}numA + 1 numA - 1btnHandler(e) { this.updateNumA(e.target.dataset.step)}

【相关学习推荐：小程序学习教程】

下载微信小程序

微信是手机支持通过移动电话网络发送语音消息、视频、照片和文本的通信软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

下载！

这几篇文章你可能也喜欢：

• 来说说微信小程序中的事件绑定（微信小程序中的一个按钮可以绑定多个事件吗？）
• 简介：实现小程序的授权登录功能
• 微信小程序列表渲染示例介绍（小程序渲染HTML代码）
• 微信小程序窗口导航栏配置（详细示例）（微信小程序导航栏系统按钮）
• 微信小程序支付中如何操作Paysign二次加密（2022年10月最新）

本文由主机参考刊发，转载请注明：增强微信小程序基本概述（微信小程序基础知识） https://zhujicankao.com/140420.html