【微信小程序】提高语法

要来一个西瓜吗~~~

已于 2024-07-25 17:35:41 修改

阅读量614

点赞数 25

文章标签：微信小程序 notepad++ 小程序

于 2024-07-08 14:46:12 首次发布

本文链接：https://blog.csdn.net/weixin_63904044/article/details/140099487

版权

自定义组件

1.创建组件

① 在项目的根目录中，鼠标右键，创建components ->test 文件夹

② 在新建的 components ->test 文件夹上，鼠标右键，点击“新建 Component

③ 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为js，json，.wxml和.wxss

多个组件分开定义

2.引用组件

组件的引用方式分为“局部引用”和“全局引用”

局部引用组件只能在当前被引用的页面内使用

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

局部引入组件

在页面的.json配置文件中引用组件的方式，叫做“局部引用”

全局引入组件

全局引入 VS 局部引入

根据组件的使用频率和范围，来选择合适的引用方式:

如果某组件在多个页面中经常被用到，建议进行“全局引用”

如果某组件只在特定的页面中被用到，建议进行“局部引用”

组件和页面的区别

从表面来看，组件和页面都是由js、json、.wxml和.wxss这四个文件组成的。但是，组件和页面的.js与.json 文件有明显的不同:

组件的 .json 文件中需要声明"component":true 属性
组件的 .js 文件中调用的是 Component()函数
组件的事件处理函数需要定义到 methods 节点中

样式

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。

有时候，我们希望在外界能够控制组件内部的样式，此时，可以通过styleIsolation修改组件的样式隔离选项

properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据

数据监听器

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化

纯数据字段

概念:纯数据字段指的是那些不用于界面渲染的 data 字段,
应用场景:例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

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

使用规则

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下:

组件的生命周期

在小程序组件中，生命周期函数可以直接定义在component构造器的第一级参数中，可以在lifetimes字段内进行声明（优先级最高）

组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期

例如:每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。

插槽

在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位，这种个数上的限制叫做单个插槽。

定义多个插槽

定义多个插槽时注意在js中添加如下代码

父组件中：

父子组件之间的传值

属性绑定

注意，在子组件中修改父组件传过来的值时，只能改变子组件内的值，而父组件的值不变

事件绑定

获取组件实例

behaviors

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于Vue.js 中的“mixins”。

可用配置

使用npm包

安装vant组件库

官网地址 Vant Weapp - 轻量、可靠的小程序 UI 组件库

1.打开外部终端窗口

2.输入命令

npm init

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

3.构建npm

4.使用npm

5.删除app.json里面的这一行代码

自定义css变量

可以通过vant weapp中的官方主题文档配置样式

API Promise化

传统的请求接口的方式容易造成回调地狱

在小程序中，实现 APlPromise 化主要依赖于 miniprogram-api-promise 这个第三方的 npm 包。它的安装和使用步骤如下:

npm i --save miniprogram-api-promise@1.0.4

在app.js中配置

import {promisifyAll} from 'miniprogram-api-promise'

const wxp = wx.p = {}

promisifyAll(wx, wxp)

使用

  async getInfo(){
    console.log('111')
    const {data:res} = await wx.p.request({
      method: 'GET',
      url: 'https://applet-base-api-t.itheima.net/api/get',
      data: {
        name: 'sss',
        age:24,
      }
    })
    console.log(res)
  },