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

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

})```

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

银行数据仓库体系实践（14）--数据应用之内部报表及数据分析

银行数据仓库体系实践（14）--数据应用之内部报表及数据分析

在银行日常经营中&#xff0c;每个部门、分支行随时随地都需要进行数据统计和分析&#xff0c;才能对银行当前业务状况及时了解&#xff0c;以进行后续经营策略、营销活动、风险策略的调整和决策。那在平时进行数据分析时除了各数据应用系统&#xff08;如各类监管报表系统、财…
阅读更多...
数据可视化 pycharts实现时间数据可视化

数据可视化 pycharts实现时间数据可视化

自用版 数据格式为&#xff1a; 运行效果为&#xff1a; from pyecharts import options as opts from pyecharts.charts import Polar, Page import csv filename "./hot-dog-places.csv" data_x [] data_y [] with open(filename) as f:reader csv.reade…
阅读更多...
Android悬浮窗实现步骤详解

Android悬浮窗实现步骤详解

最近想做一个悬浮窗秒表的功能&#xff0c;所以看下悬浮窗具体的实现步骤 1、初识WindowManager 实现悬浮窗主要用到的是WindowManager SystemService(Context.WINDOW_SERVICE) public interface WindowManager extends ViewManager {... }WindowManager是接口类&#xff0c…
阅读更多...
基于springboot招生管理系统源码和论文

基于springboot招生管理系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括招生管理系统的网络应用&#xff0c;在外国招生管理系统已经是很普遍的方式&#xff0c;不过国内的管理网站可能还处于起步阶段。招生管理系统具有招生公告信息管理功能的选择…
阅读更多...
三款精选数字孪生产品大比拼

三款精选数字孪生产品大比拼

作为一名数据可视化领域的资深用户&#xff0c;我接触过众多数据可视化产品。本文将介绍三款备受关注的数据可视化工具&#xff0c;并对它们进行详细的比较。 首先&#xff0c;让我们了解一下数据可视化产品的核心价值。在信息爆炸的时代&#xff0c;数据可视化成为快速理解复…
阅读更多...
Kubernetes k8s

Kubernetes k8s

Kubernetes k8s 一个开源的容器编排引擎&#xff0c;用来对容器化应用进行自动化部署、 扩缩和管理。 从架构设计层面&#xff0c;k8s能很好的解决可用性&#xff0c;伸缩性&#xff1b;从部署运维层面&#xff0c;服务部署&#xff0c;服务监控&#xff0c;应用扩容和故障处…
阅读更多...
C++——特殊类

C++——特殊类

特殊类 文章目录 特殊类一、请设计一个类&#xff0c;不能被拷贝二、请设计一个类&#xff0c;只能在堆上创建对象方案一&#xff1a;析构函数私有化方案二&#xff1a;构造函数私有化 三、请设计一个类&#xff0c;只能在栈上创建对象四、请设计一个类&#xff0c;不能被继承五…
阅读更多...
互联网加竞赛 基于深度学习的人脸性别年龄识别 - 图像识别 opencv

互联网加竞赛 基于深度学习的人脸性别年龄识别 - 图像识别 opencv

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 毕业设计…
阅读更多...
初学者在Python中的基本图像处理库 - OpenCV和imutils

初学者在Python中的基本图像处理库 - OpenCV和imutils

处理图像处理和操作的最常用的库之一是 Python 的 OpenCV。对于图像分类、目标检测或光学字符识别&#xff0c;在人工智能领域与图像相关的任何工作大多数时候都需要某种形式的图像处理和操作。 在本教程中&#xff0c;我们将专注于 OpenCV 的一些基本功能。这些功能基础且有时…
阅读更多...
tcpdump在手机上的使用

tcpdump在手机上的使用

首先手机得root才可以&#xff0c;主要分析手机与手机的通信协议 我使用的是一加9pro&#xff0c; root方法参考一加全能盒子、一加全能工具箱官方网站——大侠阿木 (daxiaamu.com)https://optool.daxiaamu.com/index.php tcpdump&#xff0c;要安装在/data/local/tmp下要arm6…
阅读更多...
ES(ElasticSearch)技术栈简介

ES(ElasticSearch)技术栈简介

ElasticSearch简介 Elaticsearch&#xff0c;简称为es&#xff0c; es是一个基于apache开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别的数据。es也使用Ja…
阅读更多...
机器学习系列-2 线性回归训练损失

机器学习系列-2 线性回归训练损失

机器学习系列-2 线性回归&训练损失 学习内容来自&#xff1a;谷歌ai学习 https://developers.google.cn/machine-learning/crash-course/framing/check-your-understanding?hlzh-cn 本文作为学习记录1 线性回归&#xff1a; 举例&#xff1a;蝉&#xff08;昆虫物种&…
阅读更多...
深度学习(7)--卷积神经网络项目详解

深度学习(7)--卷积神经网络项目详解

一.项目介绍&#xff1a; 用Keras工具包搭建训练自己的一个卷积神经网络(Simple_VGGNet&#xff0c;简单版VGGNet)&#xff0c;用来识别猫/狗/羊三种图片。 数据集&#xff1a; 二.卷积神经网络构造 查看API文档 Convolution layers (keras.io)https://keras.io/api/layers/…
阅读更多...
氢气传感器报警值：守护实验室安全的隐形卫士

氢气传感器报警值：守护实验室安全的隐形卫士

随着科技的发展&#xff0c;我们的生活变得越来越便捷&#xff0c;但是与此同时&#xff0c;安全问题也日益凸显。其中&#xff0c;氢气作为一种清洁能源&#xff0c;被广泛应用于各个领域&#xff0c;但是如果不加以控制&#xff0c;氢气泄漏也可能带来严重的安全隐患。因此&a…
阅读更多...
burp靶场--xss上篇【1-15】

burp靶场--xss上篇【1-15】

burp靶场–xss https://portswigger.net/web-security/cross-site-scripting 1. 什么是xss: 跨站脚本 (XSS) 是一种通常出现在 Web 应用程序中的计算机安全漏洞。XSS 允许攻击者将恶意代码注入网站&#xff0c;然后在访问该网站的任何人的浏览器中执行该代码。这可能允许攻击…
阅读更多...
计算机设计大赛 深度学习 opencv python 实现中国交通标志识别

计算机设计大赛 深度学习 opencv python 实现中国交通标志识别

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 &#x1f525; 优质…
阅读更多...
如何将rmvb视频转换成mp4格式？如何播放rmvb视频？

如何将rmvb视频转换成mp4格式？如何播放rmvb视频？

RMVB文件格式的特性及使用场景 RMVB以其独特的可变比特率压缩方式而著称。这一特性使其能够根据视频内容自动调整比特率&#xff0c;不仅保证了视频质量&#xff0c;同时高效减小了文件大小。这种优势使得RMVB常见于在线视频、电视剧以及一些高清电影资源中。 RMVB文件格式的…
阅读更多...
exec函数族和守护进程

exec函数族和守护进程

exec函数族 进程调用exec函数族执行某个程序 进程当前内容被指定程序替换 实现让父子进程实现不同的程序： 父进程创建子进程 子进程调用exec函数族 父进程不受影响 execl和execlp #include <stdio.h> int execl (const char * path, const char * arg , ...); i…
阅读更多...
微信小程序（二十六）列表渲染基础核心

微信小程序（二十六）列表渲染基础核心

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.列表渲染基础写法 2.外部索引和自身索引 源码&#xff1a; index.wxml <view class"students"><view class"item"><text>序号</text><text>姓名</text…
阅读更多...
大数据 - Hadoop系列《四》- MapReduce（分布式计算引擎）的核心思想

大数据 - Hadoop系列《四》- MapReduce（分布式计算引擎）的核心思想

上一篇&#xff1a; 大数据 - Hadoop系列《三》- MapReduce&#xff08;分布式计算引擎&#xff09;概述-CSDN博客 目录 13.1 MapReduce实例进程 13.2 阶段组成 13.4 概述 13.4.1 &#x1f959;Map阶段&#xff08;映射&#xff09; 13.4.2 &#x1f959;Reduce阶段执行过…
阅读更多...
最新文章

Copyright @ 2022~2023