位置: IT常识 - 正文

微信小程序--》小程序—全局数据共享和分包(微信小程序开发一个多少钱)

编辑:rootadmin
微信小程序--》小程序—全局数据共享和分包

推荐整理分享微信小程序--》小程序—全局数据共享和分包(微信小程序开发一个多少钱),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序开发公司,微信小程序店铺怎么开,微信小程序店铺怎么开,微信小程序开发公司,微信小程序开发公司,微信小程序店铺怎么开,微信小程序开发公司,微信小程序怎么制作自己的小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页:亦世凡华、

🛺系列专栏:微信小程序

🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。

👀引言

       ⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。

目录

🙈全局数据共享

安装 MobX 相关的包

创建Store实例

将 Store 中的成员绑定到页面中

在页面使用 Store 中的成员

将 Store 成员绑定到组件中

在组件中使用 Store 中的成员

🙉分包

分包的项目构成:

分包的加载规则:

分包的体积限制:

创建分包

打包原则

分包的引用原则

独立分包

独立分包的引用原则

分包预下载


🙈全局数据共享

全局数据共享(状态管理)是为了解决组件之间数据共享的问题,开发中常用的全局数据共享方案有:Vuex、Redux、MobX等。

在小程序中,可用 mobx-miniprogram (用来创建 Store 实例对象) 配合 mobx-miniprogram-bindings (用来把 Store 中的共享数据或方法,绑定到组件和页面中使用)实现全局数据共享。

安装 MobX 相关的包

在项目中运行如下命令,安装 MobX相关的包:(注意要启用管理员权限) 安装完成重新构建 npm

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

创建Store实例// 创建store文件夹下的store.js文件,在这个 JS 文件中,专门来创建 Store 的实例对象import {observable,action} from 'mobx-miniprogram'export const store = observable({ // 数据字段 numA:1, numB:2, // 计算属性 get sum(){ return this.numA + this.numB }, // actions 函数,专门来修改 store 中数据的值 updateNum1:action(function(step){ this.numA += step }), updateNum2:action(function(step){ this.numB += step }),})

将 Store 中的成员绑定到页面中// 路径需要相对路径,不然会报错import {createStoreBindings} from '../../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'import {store} from '../../store/store'Page({ //生命周期函数--监听页面加载 onLoad(options) { this.storeBindings = createStoreBindings(this,{ store, fields:['numA','numB','sum'], actions:['updateNum1'] }) }, //生命周期函数--监听页面卸载 onUnload() { this.storeBindings.detroyStoreBindings() },})在页面使用 Store 中的成员// .wxml文件<view>{{numA}}+{{numB}}={{sum}}</view><van-button type="primary" bindtap="btnHander1" data-step="{{1}}">numA+1</van-button><van-button type="danger" bindtap="btnHander1" data-step="{{-1}}">numB-1</van-button>// .js文件// pages/message/message.jsimport {createStoreBindings} from '../../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'import {store} from '../../store/store'Page({ //生命周期函数--监听页面加载 onLoad(options) { this.storeBindings = createStoreBindings(this,{ store, fields:['numA','numB','sum'], actions:['updateNum1'] }) }, //绑定按钮点击事件 btnHander1(e){ // console.log(e); this.updateNum1(e.target.dataset.step) }, //生命周期函数--监听页面卸载 onUnload() { this.storeBindings.detroyStoreBindings() },})

将 Store 成员绑定到组件中import {storeBindingsBehavior} from '../../miniprogram/miniprogram_npm/mobx-miniprogram-bindings/index'import {store} from '../../store/store'Page({ behaviors:[storeBindingsBehavior], storeBindings:{ // 数据源 store, //指定要绑定的store fields:{//指定要绑定的字段数据 numA:()=>store.numA, //绑定字段的第一种方式 numB:(store)=>store.numB,//绑定字段的第二种方式 sum:'sum', //绑定字段的第三种方式 }, actions:{ //指定要绑定的方法 updateNum2:'updateNum2' } },})在组件中使用 Store 中的成员//组件的 .wxml结构<view>{{numA}}+{{numB}}={{sum}}</view><van-button type="primary" bindtap="btnHander2" data-step="{{1}}">numB+1</van-button><van-button type="danger" bindtap="btnHander2" data-step="{{-1}}">numB-1</van-button>//组件的 .js结构methods: { btnHander2(e){ this.updateNum2(e.target.dataset.step) }}

🙉分包微信小程序--》小程序—全局数据共享和分包(微信小程序开发一个多少钱)

分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。

分包的好处:可以优化小程序首次启动的下载时间;在多团队共同开发时可以更好的解耦协作。

分包的项目构成:

分包前:

小程序项目中的所有的页面和资源都被打包到一起,导致整个项目的体积过大,影响小程序首次启动的下载时间。

分包后:

分包后,小程序项目由 一个主包 + 多个分包组成:

主包:一般只包含项目的 启动页面 或 TabBar 页面、以及所有分包都需要用到的一些公共资源。

分包:只包含和当前分包有关的页面和私有资源。

分包的加载规则:

在小程序启动时,默认会下载主包并启动主包内页面:

tabBar页面需要放到主包中

当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后在进行展示:

非tabBar页面可以按照功能的不同,划分为不同的分包之后,进行按需下载

分包的体积限制:

目前,小程序分包的大小有以下两种限制:

整个小程序所有分包大小不超过16M(主包+所有分包)

单个分包/主包大小不能超过2M

创建分包

创建分包很简单,只需要在app.json文件下,通过 subpackages 进行分包创建,创建之后保存文件,分包的文件就会自动出现在目录中。

{ "pages":[ //主包的所有界面 "pages/home/home", "pages/message/message", "pages/contact/contact", "pages/index/index", "pages/logs/logs" ], "subpackages":[ //通过subpackages节点,
本文链接地址:https://www.jiuchutong.com/zhishi/299012.html 转载请保留说明!

上一篇:爬虫基本原理(爬虫基本原理有哪些)

下一篇:CSS中哪些属性可继承,哪些不可以?(css中哪些属性可以使用)

  • 华为荣耀9x 4g和6g的区别(华为荣耀9x6g和8g哪个好)

    华为荣耀9x 4g和6g的区别(华为荣耀9x6g和8g哪个好)

  • 苹果在哪里看内存容量(苹果手机型号在哪里看)

    苹果在哪里看内存容量(苹果手机型号在哪里看)

  • 探探为什么改不了年龄(探探为什么改不了照片)

    探探为什么改不了年龄(探探为什么改不了照片)

  • 叨叨记账发不出去消息怎么回事(叨叨记账为什么没有导出账单)

    叨叨记账发不出去消息怎么回事(叨叨记账为什么没有导出账单)

  • 文档录入合并错误什么意思(文档录入合并错误什么原因)

    文档录入合并错误什么意思(文档录入合并错误什么原因)

  • 微信可见的朋友会有提示吗(微信可见的朋友可以改吗)

    微信可见的朋友会有提示吗(微信可见的朋友可以改吗)

  • 三星手机屏幕出现英文字母无法关机(三星手机屏幕出现彩色条纹)

    三星手机屏幕出现英文字母无法关机(三星手机屏幕出现彩色条纹)

  • qq靓号是新号码还是代替原来的(qq靓号是新号码还是旧号)

    qq靓号是新号码还是代替原来的(qq靓号是新号码还是旧号)

  • ov手机是什么牌子(ov手机是国产品牌吗)

    ov手机是什么牌子(ov手机是国产品牌吗)

  • 15天内发货一般是几天(15天内发货一般等多久)

    15天内发货一般是几天(15天内发货一般等多久)

  • 新电脑硬盘使用次数多少正常(新电脑硬盘使用次数)

    新电脑硬盘使用次数多少正常(新电脑硬盘使用次数)

  • 华为手机来信息振动怎么关闭(华为手机来信息了在顶部显示怎么弄)

    华为手机来信息振动怎么关闭(华为手机来信息了在顶部显示怎么弄)

  • 快手如何制作音乐视频(快手如何制作音频教程)

    快手如何制作音乐视频(快手如何制作音频教程)

  • 什么是计算机多媒体技术(多计算机系统属于什么体系结构)

    什么是计算机多媒体技术(多计算机系统属于什么体系结构)

  • qq不能发图片是怎么回事(qq不能发图片是怎么回事苹果手机)

    qq不能发图片是怎么回事(qq不能发图片是怎么回事苹果手机)

  • 快手自己点算播放量吗(快手自己播提成多少)

    快手自己点算播放量吗(快手自己播提成多少)

  • 天猫88会员怎么退(天猫88会员怎么领取网易云会员)

    天猫88会员怎么退(天猫88会员怎么领取网易云会员)

  • QQ音乐积分在哪里看(qq音乐积分在哪里领)

    QQ音乐积分在哪里看(qq音乐积分在哪里领)

  • 路由器自动获取ip地址上不了网(路由器自动获取不到ip地址怎么办)

    路由器自动获取ip地址上不了网(路由器自动获取不到ip地址怎么办)

  • 小米8wifi已连接但无法访问(小米8wifi已连接但无法访问怎么办)

    小米8wifi已连接但无法访问(小米8wifi已连接但无法访问怎么办)

  • 通知栏hd什么意思(通知栏有hd标志)

    通知栏hd什么意思(通知栏有hd标志)

  • 坎塔布里亚的小教堂,西班牙 (© Luis Miguel Martin/Getty Images)(坎塔布莱恩)

    坎塔布里亚的小教堂,西班牙 (© Luis Miguel Martin/Getty Images)(坎塔布莱恩)

  • yolov5训练自己的数据集,OpenCV DNN推理(yolov5训练自己的模型配置到单片机)

    yolov5训练自己的数据集,OpenCV DNN推理(yolov5训练自己的模型配置到单片机)

  • 增值税发票系统怎么读入发票
  • 个人劳务报酬所得汇算清缴
  • 销售防疫物资免水洗手液需要什么许可证
  • 个体户3万免税免的是哪些税
  • 享受企业所得税三免三减半优惠的起始时间
  • 土地增值税筹划实战
  • 担保费能抵扣吗
  • 企业所得税中管理费用怎么填列
  • 加油站固定资产折旧年限
  • 起征点是什么意思举例子说明
  • 7月1日起,中药生产企业增值税税率为多少?
  • 公司支付广告服务费账务处理
  • 折旧费和摊销费怎么算
  • 自查补缴税款严重吗
  • 关于燃油消费税征收范围及税率
  • 购车保险属于什么费用
  • 坏账损失企业所得税
  • 华为手机记事本app
  • win10电脑键盘灵敏度怎么调
  • 一般纳税人纳税申报表
  • git pull远程
  • 公司和个人分别交什么税
  • 购入研发设备
  • 当月认证抵扣的进项税发票一定要入帐做成本吗?
  • directx/?
  • 电脑卡慢咋办
  • uniapp安装插件
  • enter an integer
  • 浏览器无痕浏览后警察能查到吗
  • vue onblur
  • 单位购买降暑用品
  • 金融工具减值的范围包括哪些?
  • 低代码框架开发
  • 职工教育经费的计提比例是多少
  • /ncrc命令
  • 公司注销清算的会计分录
  • 低值易耗品费用部门
  • 其他综合收益核算的是企业根据企业会计准则
  • 一般户需要做账报税吗
  • 出口退税会计分局
  • python gitpython
  • 制造费用和生产成本结转
  • 税法中减除和减退的区别
  • 认缴出资额就是营业执照上的注册资金
  • 退教育费附加税怎么申报
  • 财务管理考试时间不够怎么办
  • 年度汇算清缴后补税,账务要调整吗
  • 跨年工程施工如何计算成本
  • 税控系统设备可以全额抵扣吗
  • 交通费用报销明细表
  • 报税营业成本包括哪些费用
  • 应纳税额与应纳所得额
  • 电子发票一定要盖章吗
  • 费用多计提了怎么办
  • 收派服务费可以简易计税吗
  • 民营企业固定资产管理规定
  • 关于存储过程的描述
  • 按关键字13,24,37,90,53,34
  • windons10安装
  • windows8计算机在哪儿
  • windows 9
  • 删除默认操作系统选项
  • bios启动项正确设置
  • ubuntu开机黑屏无法进入登录界面
  • 64位的ubuntu15.04怎么安装WPS?
  • linux d
  • suse linux教程
  • win10 系统优化
  • wind移动版
  • cocos2d动画
  • Metaio in Unity3d 教程--- 四:再谈谈图片扫描之tracking配置文件
  • 全面理解全面把握全面落实
  • python 详细
  • nodejs搭建本地资源服务器
  • Metaio in Unity3d 教学--- 二. 创建自己的Application
  • 从安卓设备导入
  • js随机生成一个整数
  • jquery 触发点击
  • 文化服务包括哪些专业
  • 拟录用是正式录用吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设