强化微信小程序基础总结（微信小程序总结与展望）

这篇文章给大家带来了一些关于微信小程序的问题，主要介绍了一些基本内容，包括自定义组件、样式隔离、数据、方法和属性等。下面就一起来看看吧，希望能帮到你。

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

1.定制组件1.1。创建组件

在项目的根目录中，右键单击并创建components -》test文件夹。

在新创建的组件-》测试文件夹中，右键单击并单击新建组件。

键入组件名称并按enter键，将自动生成与该组件对应的四个文件，后缀名称为。js。json。wxml和。wxss分别。

1.2、参考组件

本地引用:该组件只能在当前引用的页面中使用。

全局引用:组件可以在每个小程序页面中使用。

1.3、本地参考组件

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

#在。json文件中，引入组件{“using components“:{“my-test“:“/components/test“} } #页面的wxml文件，使用组件1.4和全局引用组件。

在app.json全局配置文件中引用组件的方式称为全局引用。示例代码如下:

#在app.json文件中引入组件{“using components“:{“my-test“:“/components/test/test“} } 1.5、全局引用VS局部引用。

根据组件的使用频率和范围，选择适当的参考方法:

如果一个组件经常在多个页面中使用，建议使用全局引用。

使用组件仅在特定页面中使用，因此建议进行部分引用。

1.6、组件和页面的区别

从表面上看，组件和页面由四个文件组成:。js。json。wxml和。wxss。但是，之间有明显的差异。js和。组件和页面的json文件:

“component”:true属性需要在。组件的json文件。

Component（）函数在。组件的js文件。

组件的事件处理程序需要在方法节点中定义。

2.风格隔离2.1。组件风格隔离

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

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

防止组件的样式破坏外部世界的样式。

2.2.组件风格隔离的注意事项

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

只有类选择器具有样式隔离的效果，id选择器、属性选择器和标签选择器不受样式隔离的影响。

建议在组件和引用组件的页面中使用类选择器，而不是id、属性和标记选择器。

2.3.修改组件的样式隔离选项。

默认情况下，自定义组件的样式隔离功能可以防止组件的内部和外部样式相互干扰。但有时，我们希望能够控制外部组件内部的样式。此时，您可以通过样式隔离来修改组件的样式隔离选项，用法如下:

#添加以下配置组件（{ options:{ style solution:& # 39；孤立& # 39；} }）#或者在中添加以下配置{“styles isolation“:“isolated“} 2.4和可选的styles isolation值。组件的json文件。

|可选值|默认值|说明|

| :----------: | :----: | --------------------------------------------------------------------------- --------------------------------------------------- | ----------------------------------------------------------------------- |

|隔离|是|表示启用了样式隔离|表示启用了样式隔离，并且由类指定的样式不会在自定义组件内外相互影响|

| apply-shared | No |表示页面wxss样式将影响自定义组件，但自定义组件wxss中指定的样式不会影响页面|

| shared | No |表示页面wxss样式将影响自定义组件，自定义组件wxss中指定的样式也将影响页面和其他带有apply -共享或共享集的自定义组件|

3.数据、方法和属性。数据资料

在applet组件中，用于组件模板渲染的数据和私有数据需要在数据节点中定义。例子如下:

组件（{数据:{计数:0 } }）3.2，方法数据。

在applet组件中，事件处理程序和自定义方法需要在methods节点中定义。示例代码如下:

component（{ methods:{ add count（）{ this . setdata（{ count:this . data . count+1 }）；这个。_ show count（）}，_ show count（）{ wx . show toast（{ title:& # 39；计数值为:& # 39；+ this.data.count，icon:& # 39；无& # 39；})}}) 3.3.属性特性

在applet组件中，properties是组件的外部属性，用于接收外界传递给组件的数据。示例代码如下:

component（{ properties:{ max:{ type:number，value: 10}，max:number }）3.4、数据和属性的区别。

在applet的组件中，属性属性和数据数据以相同的方式使用，它们都是可读和可写的，除了:

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

属性更喜欢存储从外部传递到组件的数据。

component（{ methods:{ showinfo（）{ console . log（this . data = = this . properties）} }）3.5。使用setData修改属性值。

因为数据数据和属性之间没有本质的区别，所以属性的值也可以用于页面呈现，或者可以使用setData为属性重新赋值。示例代码如下:

#在内置的中使用properties属性的值。wxml文件。max属性的值为:{ { max } } component（{ properties:{ max:number }，methods:{ add count（）{ this . setdata（{ max:this . properties . max+1 }）} }）4。数据监听器4.1。

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。其功能类似于vue中的手表监听器。在applet组件中，数据监听器的基本语法格式如下:

组件（{观察者:{ & # 39；B&油田39号油田a；:function（A字段的mind，B字段的新值）{ } }）4.2。数据监听器的基本用法。

component（{ data:{ n1:0，n2: 0，sum: 0 }，methods:{ add n1（）{ sth this . setdata（{ n1:this . data . nzhujicankao1 }）}，add N2（）{ sth this . setdata（{ N2:this . data . N小编1 }）} } }，observer:{ & # 39；n1、n2 & # 39:函数（n1，N2）{ this。setdata（{ sum:nzhujicankaoN2 }）} }）4.3。被监视对象属性的变化。

#数据监听器支持对象中一个或多个属性的更改。示例代码如下:Component（{ observers:{ & # 39；对象。属性A，对象。属性B& # 39；:function（属性A的新值，属性B的mind）{ } }）#监控对象组件中所有属性的变化（{ observers:{ & # 39；目标。**':function（obj）{ } }）5。纯数据字段5.1。什么是纯数据字段？

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

应用场景:例如，在某些情况下，某些数据中的字段既不会显示在界面上，也不会传递给其他组件，只会在当前组件内使用。具有这种特性的数据字段适合设置为数据存储字段。

好处:纯数据字段有助于提高页面更新的性能。

5.2.使用规则

在组件构造函数的options节点中，将pureDataPattern指定为正则表达式，字段名与此正则表达式匹配的字段将成为纯数据字段。示例代码如下:

component（{ options:{ puredata pattern:/_/}，data: {a: true，//普通数据字段_b: true //纯数据字段} }）6。部件的生命周期。组件的所有生命周期功能。

6.2.组件的主要生命周期功能

在小程序组件中，有三个最重要的生命周期功能，即创建、附加和分离。它们各自的特点如下:

当一个组件实例刚刚创建时，创建的生命周期功能将被触发。

此时无法调用SetData。

通常在这个生命周期函数中，它应该只用于向该组件添加一些自定义属性字段。

附加的生命周期函数将在构建完全初始化并进入页面节点树后触发。

此时，this.data已经初始化。

这个生命周期非常有用，大多数初始化工作都可以在此时完成。

当组件离开页面节点树时，分离的生命周期功能被触发。

退出页面时，将触发页面中每个自定义组件的分离生命周期功能。

这个时候，适合做一些清洁工作。

6.3，生存期节点

在applet组件中，生命周期函数可以直接在组件构造函数的第一级参数中定义，并可以在lifetimes字段中声明（这是推荐的方式，优先级最高）。示例代码如下:

component（{ lifetimes:{ attached（）{ }，//Detached（）{ }当组件实例进入页面节点树时执行，//当组件实例从页面节点树中移除时执行}，attached（）{ }，//当组件实例进入页面节点树时执行Detached（）{ }当组件实例从页面节点树中移除时执行）6.4。组件所在页面的生命周期是什么？

有时，自定义组件的行为取决于页面状态的变化，因此需要使用组件所在页面的生命周期。

6.5.页面生存期节点

#组件所在页面的生命周期函数需要在pageLifetimes节点中定义。component（{ page life times:{ show:function（）{ }，//page is hidden，resize:function（size）{ }//页面大小更改} }）7。插槽7.1。什么是插槽？

在自定义组件的wxml结构中，可以提供一个插槽节点（slot）来托管组件使用者提供的wxml结构。

7.2，单个插槽

在小程序中，默认情况下，每个自定义组件中只允许使用一个插槽，这称为单插槽。

这是组件的内部节点。下面是插入组件插槽的内容。7.3.启用多个插槽。

在applet的自定义组件中，需要使用多个slot插槽。是的，您可以在中启用它们。组件的js文件。示例代码如下:

组件（{选项:{多插槽:true//在组件定义期间启用多插槽支持} }）7.4。定义多个插槽。

您可以在。组件的wxml，用于区分具有不同名称的不同插槽。示例代码如下:

这是一个固定的文本内容7.5，使用多个插槽。

当使用具有多个插槽的自定义组件时，需要使用插槽属性将节点插入不同的插槽中。示例代码如下:

以下是插入组件插槽name =“before“的内容以下是插入组件插槽name =“after“8的内容。父子组件之间的通信8.1。父子组件之间的三种通信方式。

属性绑定

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

事件绑定

用于子组件向父组件传输数据，并且可以传输任何数据。

获取组件实例

父组件也可以通过this.selectComponent（）获取子组件实例对象。

这样，您可以直接访问子组件的任何数据和方法。

8.2.属性绑定

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

数据:{count: 0}属性:{count: number}子组件，计数值为{{count}}8.3，具有事件绑定。

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

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

sync count（）{ console . log（& # 39；同步计数& # 39；）}在父组件的wxml中，将步骤1中定义的函数引用以自定义事件的形式传递给子组件。

在子组件的js中，通过调用this . triggerevent（‘自定义事件名称’，{parameter object}）将数据发送到父组件。

在子组件中，js代码count的方法:{{count}}+1 #子组件:{ add count（）{ this . setdata（{ count:this . properties . count+1 }）this . triggerevent（& # 39；同步& # 39；，{value:这个。属性。count }）}在父组件的js中，传递给子组件的数据是通过e.detail获取的

同步计数（e）{ this . setdata（{ count:e . detail . value }）} 8.4。获取组件实例。

您可以在父组件中调用this . select component（‘id或类选择器‘）来获取子组件的实例对象，从而直接访问子组件的任何数据和方法。

获取子组件实例get child（）{ const child = this。选择组件（& # 39；。测试& # 39；）child . setdata（{ count:child . properties . count+1 }）child . add count（）} 9。行为9.1 .什么是行为？

行为是小程序中的一个特性，用于实现组件之间的代码共享，类似于Vue.js中的mixins

9.2.行为的工作模式

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

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

9.3.创造行为

调用Behavior（Object对象）方法创建供所有组件使用的共享行为实例对象。

#调用Behavior（）方法，创建一个实例对象#并与module . exports = Behavior（{ # property节点属性:{}，#私有数据节点数据:{}，#事件处理程序和用户定义的方法节点方法:{ }）9.4。导入和使用行为。

在组件中，使用require（）方法导入所需的行为，然后可以在挂载后访问行为中的数据或方法。示例代码如下:

#使用require（）导入行为模块const my behavior = require（& # 39；my-行为& # 39；）组件（{行为:

10.使用npm软件包10.1。小程序对npm的支持和限制

目前小程序已经支持使用npm安装第三方包，从而提高了小程序的开发效率。但是，在小程序中使用npm软件包有三个限制:

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

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

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

10.2、API承诺

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

默认情况下，小程序提供的异步API都是基于回调函数的。例如，网络请求的API需要如下调用:

wx . request（{ method:& # 39；'，网址:& # 39；'，data: {}，success:（）=》{ }）缺点:容易造成回调地狱的问题，代码的可读性和可维护性较差。

什么是API Promise？

API Promising是指通过额外的配置将官方提供的基于回调函数的异步API升级为基于Promise的异步API，从而提高代码的可读性和可维护性，避免回调到地狱的问题。

实现API承诺

在小程序中，API Promise的实现主要依靠minprogram-api-promise的第三方npm包。其安装和使用步骤如下:

NPM Install --Save Min Program -API -Promise #在小程序入口文件（app.js）中，你只需要调用promisifyAll（）方法import { promisifyAll } from & # 39minprogram -API -promise & # 39；const wxp = wx . p = { } Promisifyall（wx，wxp）在Promise之后调用异步API。

#页面的wxml结构vant button #在。js文件，定义相应的tap事件处理函数async getinfo（）{ const { data:RES } = awaitwx . p . request（{ method:& # 39；GET & # 39，网址:& # 39；'，data:{ } }）} 11。全球数据共享。什么是全球数据共享？

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

开发中常见的数据共享方案有:Vuex、Redux、MobX等。

11.2.applet中的全局数据共享方案

在小程序中，可以通过mobx-miniprogram -绑定使用mobx-miniprogram，实现全局数据共享。其中包括:

Mobx-miniprogram用于创建商店实例对象。

mobx -miniprogram -绑定用于将存储中的共享数据或方法绑定到组件或页面以供使用。

安装MobX相关包

#在项目中运行以下命令安装MobX相关的包npm Install --Save MobX -mini program MobX -mini program -Bindings注意:安装MobX相关的包后，记得删除miniprogram_npm目录并重新构建NPM。

创建MobX的存储实例

从& # 39；mobx -迷你程序& # 39；exportconststore = observable（{//数据字段numA: 1，num:2，//计算属性getsum（）{ return this . numA+this . num }，//actions方法，用于修改存储中的数据:update numA:action（function（step）{ this。numa+= step}），更新号:action（function（step）{ this。number+= step }）将存储中的成员绑定到页面。

#那个。页面的js文件从& # 39；mobx -迷你程序-绑定& # 39；从& # 39；。/store & # 39；page（{ onLoad（）{ this . store bindings = createStoreBindings（this，{ store，fields:【& # 39；numA & # 39, '麻木& # 39；, 'sum & # 39】，动作:【& # 39；updateNumA & # 39】}}，on unload（）{ this。商店绑定。destructybindings（）}）使用页面上存储区中的成员。

#.wxml { { numa } }+{ { num } } = { { sum } } numa+1 numa -1 BTN handler（e）{ this。update numa（e . target . dataset . step）}将存储区中的成员绑定到组件。

从& # 39；导入{ storeBindingsBehavior }mobx -迷你程序-绑定& # 39；从& # 39；。/store & # 39；component（{ behaviors:【storebindingbehavior】，storeBindings: { store，fields:{ numA:（）=》store . numA，num:（store）=》store . num，sum:& # 39；sum & # 39}，操作:{ update numa:& # 39；updateNumA & # 39}}}）在组件中使用存储中的成员。

#组件的。wxml结构{ { numa } }+{ { num } } = { { sum } } numa+1 numa -1 BTN handler（e）{ this。update numa（e . target . dataset . step）}【相关学习推荐:小程序学习教程】

以上是微信小程序基础的详细总结。更多资讯请关注主机参考其他相关文章！

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：强化微信小程序基础总结（微信小程序总结与展望） https://zhujicankao.com/99849.html