8-小程序数据promise化、共享、分包、自定义tabbar

news2024/10/6 20:30:26

小程序API Promise化

wx.requet
官网入口
默认情况下，小程序官方异步API都是基于回调函数实现的

wx.request({
  method: '', 
  url: '', 
  data: {},
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  },
  fail () {},
  complete () { }
})

缺点：容易造成回调地域，代码可读性可维护性差。

实现API Promise化

API Promise化依赖 miniprogram-api-promise 第三方npm包

安装

npm i --save miniprogram-api-promise

安装完之后点击 工具->构建npm
在这里插入图片描述
查看miniprogram_npm文件夹中包是否存在

实现API Promise化

小程序入口文件app.ts，调用一次promisifyAll()

app.ts

import { promisifyAll } from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx, wxp)

App<IAppOption>({
	...
})

使用：异步获取api
wxml

<van-button bind:tap="getInfo" type="primary">getInfo</van-button>

ts

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

全局数据共享

全局数据共享（又叫：状态管理），为了解决组件之间数据共享的问题

常用的方案如：vuex 、 redux

小程序中使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享

  • mobx-miniprogram用来创建store实例对象
  • mobx-miniprogram-bindings把store中的共享数据或者方法绑定到页面或组件中

安装

yarn add mobx-miniprogram mobx-miniprogram-bindings
npm i --save mobx-miniprogram mobx-miniprogram-bindings

安装完之后点击 工具->构建npm
查看miniprogram_npm文件夹中包是否存在

创建store实例 定义get计算属性和action方法
在这里插入图片描述

import { action, observable } from 'mobx-miniprogram'

export const store = observable({
	numA: 1,
	numB: 2,
	getSum() {
		return this.numA + this.numB
	},
	//action 函数用来修改store中数据的值
	updateNumA: action(function (step) {
		this.numA += step
	}),
	updateNumB: action(function (step) {
		this.numB += step
	})
})

页面中使用store

wxml

<view>
	{{numA}}+{{numB}}={{sum}}
</view>
<van-button bind:tap="btnHandler" data-step="{{1}}">numA+1</van-button>

ts

import { createStoreBindings } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

Page({
	btnHandler(e: WechatMiniprogram.CustomEvent) {
		console.log(e.target.dataset.step);
		this.updateNumA(e.target.dataset.step)
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad() {
		this.storeBindings = createStoreBindings(this, {
			store,
			fields: ['numA', 'numB', 'sum'],
			actions: ['updateNumA']
		})
	},
	onUnload() {
		this.storeBindings.destoryStoreBindings()
	},
})

组件中使用store

wxml

<view>
	{{numA}}+{{numB}}={{sum}}
</view>
<van-button bind:tap="btnHandler" data-step="{{1}}">numA+1</van-button>

ts

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../../store/store'

// components/test/test.ts
var myBehavior = require('../../behaviors/my-behavior');
Component({
	behaviors: [myBehavior, storeBindingsBehavior],
	storeBindings: {
		store,
		fields: {
			numA: () => store.numA,
			numB: () => store.numB,
			sum: () => store.sum,
		},
		actions: {
			updateNumA: 'updateNumA'
		}
	},
	methods: {
		btnHandler(e: WechatMiniprogram.CustomEvent) {
			console.log(e.target.dataset.step);
			this.updateNumA(e.target.dataset.step)
		},
	},
})

点击btn按钮numA会自增，同时sum会重新计算，page和组件的数据会同时改变。
在这里插入图片描述

分包

官网入口
独立分包和普通分包区别

独立分包可以独立于主包和其他分包单独运行 ，不下载主包的情况下，独立运行
普通分包 依赖主包才能运行

配置方法

假设小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── moduleA
│   └── pages
│       ├── rabbit
│       └── squirrel
├── moduleB
│   └── pages
│       ├── pear
│       └── pineapple
├── pages
│   ├── index
│   └── logs
└── utils

开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}
  • 独立分包中不能依赖主包和其他分包中的内容，包括 js 文件、template、wxss、自定义组件、插件等（使用 分包异步化 时 js 文件、自定义组件、插件不受此条限制）
  • 主包中的 app.wxss 对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
  • App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
  • 独立分包中暂时不支持使用插件

分包预下载

在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。对于独立分包，也可以预下载主包。

配置方法

预下载分包行为在进入某个页面时触发，通过在 app.json 增加 preloadRule 配置来控制。

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  "preloadRule": {
    "pages/index": {
      "network": "all",
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
      "packages": ["__APP__"]
    }
  }
}

自定义tabBar

官网入口

配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

添加代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

编写tabbar代码

引入vant tabbar组件
index.json

{
	"usingComponents": {
		"van-tabbar": "@vant/weapp/tabbar/index",
		"van-tabbar-item": "@vant/weapp/tabbar-item/index"
	}
}

wxml使用组件

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="chat-o" info="5">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

ts

Component({
	options: {
	},
	/**
	 * 组件的属性列表
	 */
	properties: {
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		active: 0,
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		onChange(event) {
			// event.detail 的值为当前选中项的索引
			this.setData({ active: event.detail });
		},
	},
	observers: {
	}

})

结果
在这里插入图片描述

修改vant样式

官网入口
在自定义组件中使用 Vant Weapp 组件时，需开启

styleIsolation: 'shared'

修改tabbar组件图标与文字直接距离
ts


Component({
	behaviors: [storeBindingsBehavior],
	options: {
		styleIsolation: 'shared'
	},
	/**
	 * 组件的属性列表
	 */
	properties: {
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		active: 0,
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		onChange(event) {
			// event.detail 的值为当前选中项的索引
			this.setData({ active: event.detail });
		},
	},
	observers: {
	}
})

scss

.van-tabbar-item {
	--tabbar-item-margin-bottom: 0px
}

在这里插入图片描述

共享数据

引入mobx获取store中的数据
将numA显示在徽章图标上

ts


import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'

Component({
	behaviors: [storeBindingsBehavior],
	options: {
		styleIsolation: 'shared'
	},
	/**
	 * 组件的属性列表
	 */
	properties: {
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		active: 0,
	},
	storeBindings: {
		store,
		fields: {
			numA: () => store.numA,
		},
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		onChange(event) {
			// event.detail 的值为当前选中项的索引
			this.setData({ active: event.detail });
		},
	},
	observers: {
	}

})

wxml

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item icon="home-o">标签</van-tabbar-item>
  <van-tabbar-item icon="chat-o" info="{{numA}}">标签</van-tabbar-item>
  <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
</van-tabbar>

在这里插入图片描述

页面切换

使用wx.switchTab()进行切换

ts


import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'

// components/test/test.ts
// var myBehavior = require('../../behaviors/my-behavior');
Component({
	behaviors: [storeBindingsBehavior],
	options: {
		styleIsolation: 'shared'
	},
	/**
	 * 组件的属性列表
	 */
	properties: {
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		active: 0,
		list: [{
			"pagePath": "/pages/home/home",
			"text": "首页"
		}, {
			"pagePath": "/pages/message/message",
			"text": "消息"
		}, {
			"pagePath": "/pages/contact/contact",
			"text": "联系我"
		}]
	},
	storeBindings: {
		store,
		fields: {
			numA: () => store.numA,
		},
	},
	/**
	 * 组件的方法列表
	 */
	methods: {
		onChange(event) {
			// event.detail 的值为当前选中项的索引
			this.setData({ active: event.detail });
			wx.switchTab({ url: this.data.list[event.detail].pagePath })
		},
	},
	observers: {
	}

})```

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1420047.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

CSS之webkit内核中的属性text-stroke

CSS之webkit内核中的属性text-stroke

让我为大家介绍一下text-stroke 大家是否想过要弄一个描边过的文字&#xff0c;接下来&#xff0c;text-stroke就可以为你解决 text-stroke是一个复合属性&#xff0c;里面有两个参数&#xff1a;描边的尺寸 描边的颜色 <!DOCTYPE html> <html lang"en">…
阅读更多...
20世纪物理学：对宇宙认知的一次巨大飞跃

20世纪物理学：对宇宙认知的一次巨大飞跃

20世纪物理学&#xff1a;对宇宙认知的一次巨大飞跃 20th Century Physics: A Monumental Leap in Understanding the Universe 在20世纪这个科学大爆发的时代&#xff0c;现代物理学经历了前所未有的飞速发展与变革。这一时期诞生了众多奠基性的理论和杰出的物理学家&#xff…
阅读更多...
三、ElasticSearch集群搭建实战

三、ElasticSearch集群搭建实战

本篇ES集群搭建主要是在Linux VM上&#xff0c;未使用Docker方式, ES版本为7.10 ,选择7.10版本原因可以看往期文章介绍。 一、ElasticSearch集群搭建须知 JVM设置 Elasticsearch是基于Java运行的&#xff0c;es7.10可以使用jdk1.8 ~ jdk11之间的版本&#xff0c;更高版本还没…
阅读更多...
Python 手签文字识别

Python 手签文字识别

easyocr插件使用 1、上传签字图片&#xff08;图片背景颜色&#xff0c;和图片的大小会影响文字识别准确率&#xff09; 2、服务端代码如下 from flask import Flask, request, Response import easyocr import json from hanziconv import HanziConv reader easyocr.Reade…
阅读更多...
PyFlink使用教程，Flink，Python，Java

PyFlink使用教程，Flink，Python，Java

环境准备 环境要求 Java 11 Python 3.7, 3.8, 3.9 or 3.10文档&#xff1a;https://nightlies.apache.org/flink/flink-docs-release-1.17/zh/docs/dev/python/installation/ 打开 Anaconda3 Prompt > java -version java version "11.0.22" 2024-01-16 LTS J…
阅读更多...
探索Pyecharts：绘制多彩日历图的艺术与技巧

探索Pyecharts：绘制多彩日历图的艺术与技巧

Pyecharts绘制多种炫酷日历图参数说明代码实战 导言 在数据可视化领域&#xff0c;日历图是一种直观展示时间和数据关系的方式。Pyecharts是一个基于Echarts的Python库&#xff0c;可以方便地绘制各种图表&#xff0c;包括炫酷的日历图。本篇博客将介绍Pyecharts中绘制多种炫…
阅读更多...
AI未来10年展望【2024-2034】

AI未来10年展望【2024-2034】

人工智能&#xff08;AI&#xff09;在过去十年中迅速发展&#xff0c;其未来有望取得更加引人注目的发展。 在本文中&#xff0c;我们将探讨人工智能的未来 10 年以及我们对未来十年的期望。 我们将解决一些关键问题&#xff0c;以全面概述人工智能的未来。 NSDT工具推荐&…
阅读更多...
17. 使用 tslib 库

17. 使用 tslib 库

17. 使用 tslib 库 1. tslib 简介2. tslib 移植2.1 下载 tslib 源码2.2 编译 tslib 源码2.3 tslib 安装目录下的文件夹介绍2.4 在开发板上测试 tslib 3. tslib 库函数介绍3.1 打开触摸屏设备3.2 配置触摸屏设备3.3 读取触摸屏设备 4. 基于 tslib 编写触摸屏应用程序4.1 单点触摸…
阅读更多...
CHS_03.2.3.2_2+进程互斥的硬件实现方法

CHS_03.2.3.2_2+进程互斥的硬件实现方法

CHS_03.2.3.2_2进程互斥的硬件实现方法 知识总览中断屏蔽方法TestAndSet指令Swap指令 知识回顾 进程互斥的四种软件实现方法 知识总览 这个小节我们会介绍另外的三种进程互斥的硬件实现方法 那么 这个小节的学习过程当中 大家需要注意理解各个方法的原理 并且要稍微的了解各个…
阅读更多...
OpenHarmony RK3568 启动流程优化

OpenHarmony RK3568 启动流程优化

目前rk3568的开机时间有21s&#xff0c;统计的是关机后从按下 power 按键到显示锁屏的时间&#xff0c;当对openharmony的系统进行了裁剪子系统&#xff0c;系统app&#xff0c;禁用部分服务后发现开机时间仅仅提高到了20.94s 优化微乎其微。在对init进程的log进行分析并解决其…
阅读更多...
机器学习：多项式回归（Python）

机器学习：多项式回归（Python）

多元线性回归闭式解&#xff1a; closed_form_sol.py import numpy as np import matplotlib.pyplot as pltclass LRClosedFormSol:def __init__(self, fit_interceptTrue, normalizeTrue):""":param fit_intercept: 是否训练bias:param normalize: 是否标准化…
阅读更多...
重写Sylar基于协程的服务器（1、日志模块的架构）

重写Sylar基于协程的服务器（1、日志模块的架构）

重写Sylar基于协程的服务器&#xff08;1、日志模块的架构&#xff09; 重写Sylar基于协程的服务器系列&#xff1a; 重写Sylar基于协程的服务器&#xff08;0、搭建开发环境以及项目框架 || 下载编译简化版Sylar&#xff09; 重写Sylar基于协程的服务器&#xff08;1、日志模…
阅读更多...
2.室内设计学习 - CAD 2021 调整经典界面教程及基本设置

2.室内设计学习 - CAD 2021 调整经典界面教程及基本设置

设置经典界面 1.在第二行的空白处右击&#xff0c;弹出对话框&#xff0c;并点击【关闭】&#xff0c;关闭掉。 2.菜单栏没有显示的情况下&#xff0c;在最上面的一排&#xff0c;点击向下的箭头展开下拉框&#xff0c;勾选 【显示菜单栏】 3.点击菜单【工具】-【工具栏】-【a…
阅读更多...
AES 加解密python实现

AES 加解密python实现

1. 要求 编程实现AES-128的加解密算法&#xff0c;满足给定明文和密钥加密得到密文&#xff0c;给定密文和密钥解密得到明文&#xff0c;最终用界面化的形式呈现。 2. 算法流程 程序主要分为加密与解密两个大模块。在加密模块中包括四个小模块&#xff0c;分别为轮密钥加、字…
阅读更多...
C语言KR圣经笔记 6.4结构体指针 6.5自引用结构体

C语言KR圣经笔记 6.4结构体指针 6.5自引用结构体

6.4 结构体指针 为了说明结构体指针和数组的某些注意事项&#xff0c;我们把上一节的关键字计数程序再写一次&#xff0c;不过这回使用指针而不是数组下标。 keytab 的外部声明不需要动&#xff0c;但 main 和 binsearch 确实需要修改。 #include <stdio.h> #include …
阅读更多...
3、css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

3、css设置样式总结、节点、节点之间关系、创建元素的方式、BOM

一、css设置样式的方式总结&#xff1a; 对象.style.css属性 对象.className ‘’ 会覆盖原来的类 对象.setAttribut(‘style’,‘css样式’) 对象.setAttribute(‘class’,‘类名’) 对象.style.setProperty(css属性名,css属性值) 对象.style.cssText “css样式表” …
阅读更多...
开发工具之GIT协同开发流程和微服务部署实践与总结

开发工具之GIT协同开发流程和微服务部署实践与总结

GIT协同开发流程和微服务部署的实践&#xff0c;并总结经验和教训。通过合理的GIT协同开发流程和良好的微服务部署策略&#xff0c;团队可以更高效地开发和部署软件。 ## 引言 在当今快节奏的软件开发环境中&#xff0c;采用合适的工具和流程对于实现高效协同开发和可靠部署至…
阅读更多...
1.25时间序列分析，FB先知模型、简要傅里叶变化解决周期性变化，实例步骤

1.25时间序列分析，FB先知模型、简要傅里叶变化解决周期性变化，实例步骤

目录 FB概念 ​编辑 GEOGEBRA可视化傅里叶​编辑 先知模型步骤 财务数据要考虑到可解释性 FB模型概念 可以用傅里叶级数来描述周期性变化的因素 GEOGEBRA可视化傅里叶 先知模型步骤
阅读更多...
vue+ElementPlus实现中国省市区三级级联动封装

vue+ElementPlus实现中国省市区三级级联动封装

安装插件获取中国省份的所有数据 npm install element-china-area-data -S 借助ElementPlus 级联选择器 Cascader实现 <template><div><el-cascadersize"large":options"options"v-model"selectedOptions"change"handleCh…
阅读更多...
C# 一个快速读取写入操作execl的方法封装

C# 一个快速读取写入操作execl的方法封装

这里封装了3个实用类ExcelDataReaderExtensions&#xff0c;ExcelDataSetConfiguration&#xff0c;ExcelDataTableConfiguration和一个实用代码参考&#xff1a; using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.T…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023