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

已于 2024-01-30 11:31:56 修改
阅读量1.5k 收藏 22
点赞数 17
CC 4.0 BY-SA版权
分类专栏： 微信 文章标签： 小程序
于 2024-01-26 18:02:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/linfeng_meng/article/details/135836444
本文介绍了如何在微信小程序中将官方异步API转换为Promise形式以提高代码可读性和维护性，以及如何使用mobx-miniprogram进行全局数据共享和处理分包、独立分包、预下载及自定义tabBar的配置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

小程序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: {
	}

})```
微信小程序-分包
program_due的博客
07-08 464
分包前，小程序项目中所有的页面和资源都被打包到一起，导致整个项目体积过大，影响小程序首次启动的下载时间。概念：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。②当用户进入分包某个页面时，客户端会把对应分包 下载下来，下载完成后在进行展示。独立分包本质上是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。非tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载。当小程序从普通的分包中页面启动时，需要先下载主包。
小程序-5（vant组件+全局数据共享+分包+tabBar案例）
2301_80486133的博客
07-19 1498
1.使用npm包小程序对npm的支持和限制使用vant组件在app.json的usingComponents节点中引入想使用的组件，如按钮等，然后在wxml页面中使用<van-button></van-button>标签使用CSS变量定制主题样式在html文件中，为了方便修改样式，可以设置一个全局变量，在想用的地方进行引用，修改的时候也较为方便，在根节点处进行引用，也就是css中的html{}中。
小程序基本命令
aiven1637的博客
10-30 3446
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序之Promise-Promise初始用
最新发布
cau_eric的专栏
05-22 646
本文介绍了如何使用JavaScript的Promise实现一个简单的抽奖功能。首先，搭建了抽奖界面，包括抽奖规则说明和开始抽奖按钮。接着，通过CSS样式对页面进行布局和美化。在实现抽奖逻辑时，使用了Promise对象来处理异步操作。抽奖函数prizeDraw中，通过Math.random生成随机数，判断是否中奖（30%概率），并根据结果调用resolve或reject。最后，使用then方法处理中奖和未中奖的提示信息，通过wx.showModal弹出相应的提示框。整个过程展示了Promise的基本用法，包括
微信小程序（使用npm包、全局数据共享、分包、自定义tabBar）
ZHAOKAIYUR的博客
03-14 1248
黑马程序员，学习记录黑马程序员前端微信小程序开发教程，微信小程序从基础到发布全流程_企业级商城实战自定义 tabBar | 微信开放文档 (qq.com)"custom" : true , // 加上这个即可 "list" : [ ... // 为了兼容性 完整保留下来 ] } ,创建必须叫这个名字。
微信小程序自定义tabbar、自定义导航、分包
前端御书房
03-13 3740
自定义tabbar 在项目根目录下创建custom-tab-bar文件夹，在该文件夹下创建组件 自定义tabbar作为一个自定义组件进行构建。构建完毕后在app.json中的tabBar选项中配置custom，并配置完整的list选项。 "tabBar": { "color": "#000", "selectedColor": "#d8e106", "list": [{ "pagePath": "pages/tabbar/index/index", "
【微信小程序】学习拾遗四（Promise、全局数据/全局状态、自定义Tabbar、引入Vant组件）
世间小学徒
12-20 356
自定义tabBar,全局变量,引入外部包,引入Vant组件
微信小程序 五 npm 包 、安装 vant组件、promise组件、全局数据共享、 分包！！！、自定义 tabBar 案例
m0_55170432的博客
07-09 746
1.0 使用 npm 包 1.1 小程序对 npm 的支持与限制 目前，小程序中已经支持使用 npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用 npm 包有如下 3 个限制： 不支持依赖于 Node.js 内置库 的包 不支持依赖于 浏览器内置对象 的包 不支持依赖于 C++ 插件 的包 总结：虽然 npm 上的包有千千万，但是能供小程序使用的包却“为数不多”。 1.2 Vant Weapp Vant Weapp 是有赞前端团队开源的一套小程序 UI 组件库，助力开发者快速搭建小
【小程序-基础进阶】Vant Weapp，API Promise化，全局数据共享，分包（独立分包、分包预下载）
zilin_taku的博客
10-26 983
开发中常用的全局数据共享方案有: Vuex、Redux、Mobx等。全局数据共享（又叫做：状态管理）是为了解决组件之间数据共享的问题。，从而提高代码的可读性、维护性，避免回调地狱的问题。Vant Weapp是有赞前端团队开源的一套。，助力开发者快速搭建小程序应用。，将官方提供的、基于回调函数的异步API，升。分包预下载指的是：在进入小程序的某个页面时，，在构建时打包成不同的分包，用户在使用时。，从而提升进入后续分包页面时的启动速度。，对商业使用比较友好。，只不过它比较特殊，
小程序开发（五）-使用 npm 包 - Vant Weapp_API Promise化_全局数据共享 - MobX_分包 - 基础概念_案例 - 自定义 tabBar
qq_45811054的博客
03-29 850
指的是通过额外的配置，将官方提供的、基于回调函数的异步API升级改造为基于Promise的异步API，从而提高代码的可读性、维护性，避免回调地狱的问题。
uniapp写小程序如何实现分包
weixin_45041493的博客
03-27 1195
众所众知小程序上传的过程中对包的大小有限制，正常情况下不允许当个包超过2M，所以需要分包。需要再pages.json这个文件夹中进行配置。
微信分包文件夹微信分包文件夹
05-19
微信分包文件夹微信分包文件夹
微信小程序分包
weixin_42959207的博客
11-22 1459
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。 在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。 在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，...
小程序promise类使用教学-经验与案例分享#1
m0_63361829的博客
11-20 784
小程序promise类使用案例，经验分享
【小程序】promise在小程序中的运用
书呆子ITme
03-04 1090
当开发者在开发时，可能会遇到这种情况：一个页面的加载会需要多种请求返回的数据构成，当页面一旦加载，显示加载条，只有当所有的请求都成功之后才会显示其页面，才会隐藏加载条。 但多种请求无法预测哪个请求首先完成。 如果使用请求中套用请求这种方法，用户的体验不是很好。 可以采用 promise.all方法可以把多个promise实例合并为一个，等待所有的子promise全部执行完成之后,才会触发回调函数。...
第147篇：微信小程序开发中Promise的使用(aysnc,await)
weixin_55010563的博客
10-17 1115
当你调用 async定义的函数 (fetchTypelist) 时，返回的实际上是一个 Promise，而不是直接返回的数据。// 这里可以获取到返回的 rows } catch (error) {// 如果需要token,可以在这里添加。async 函数默认返回一个 Promise，即使你在 async 函数中显式返回了值。一个promise是的仅仅只是一个promise,并没有拿到请求返回的结果。第147篇：微信小程序开发中Promise的使用(aysnc,await)// 添加常规的查询参数。
微信小程序分包，分包与主包之间的页面跳转
热门推荐
qq_42661587的博客
01-08 1万+
打包原则 声明subpackages后，将按subpackages配置路径进行打包，subpackages配置路径外的目录将被打包到 app（主包） 中 app（主包）也可以有自己的 pages（即最外层的 pages 字段） subpackage的根目录不能是另外一个subpackage内的子目录 tabBar页面必须在 app（主包）内 引用原则 packageA无法 requirepackageBJS 文件，但可以 requireapp、自己 package 内的 ...
在微信小程序中的异步接口promise 使用方法，个人的写法，希望对你有用
No_bug_is_possible的博客
12-29 1187
promise async + await 微信小程序
微信小程序Promise封装
我的专栏
06-15 266
【代码】微信小程序Promise封装。
小程序分包 自定义tabbar
05-16
小程序分包是指将一个大型小程序分成多个子包，以便更快地加载应用程序。主包是小程序的初始包，而子包是通过动态加载实现的。常见的分包场景包括将不经常使用的功能或页面放在子包中，以减少主包的大小和加载时间。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哚啦A孟

谢谢鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值