位置: 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中哪些属性可以使用)

  • 苹果11换电池有影响吗(苹果11换电池有必要移植电芯吗)

    苹果11换电池有影响吗(苹果11换电池有必要移植电芯吗)

  • vsphere storage vmotion的作用

    vsphere storage vmotion的作用

  • 小米8怎么拍出长曝光照片(小米8怎么拍出星星)

    小米8怎么拍出长曝光照片(小米8怎么拍出星星)

  • 微机上常见的操作系统有(微机常见操作系统有哪些)

    微机上常见的操作系统有(微机常见操作系统有哪些)

  • 苹果11如何双击亮屏(苹果11如何双击截图截屏)

    苹果11如何双击亮屏(苹果11如何双击截图截屏)

  • 微信资料里咋显示电话(微信资料怎么不显示)

    微信资料里咋显示电话(微信资料怎么不显示)

  • 华为p40听筒声音小怎么办

    华为p40听筒声音小怎么办

  • 小度不开机了怎么回事(小度不开机怎样开机呢)

    小度不开机了怎么回事(小度不开机怎样开机呢)

  • wechat files是什么意思(wechat files是什么文件夹可以删除吗)

    wechat files是什么意思(wechat files是什么文件夹可以删除吗)

  • 小度在家智能屏是什么(小度在家智能屏x8多少钱)

    小度在家智能屏是什么(小度在家智能屏x8多少钱)

  • 微店退货有保障吗(微店买东西退货)

    微店退货有保障吗(微店买东西退货)

  • 快手保证金500是一年吗(快手保证金500元有退成功的么)

    快手保证金500是一年吗(快手保证金500元有退成功的么)

  • 手机电池的电压是几伏(智能手机电池的电压)

    手机电池的电压是几伏(智能手机电池的电压)

  • 引入操作系统的主要目的是(引入操作系统的方法)

    引入操作系统的主要目的是(引入操作系统的方法)

  • 惠普的平板模式可以触屏吗(惠普的平板模式怎么用)

    惠普的平板模式可以触屏吗(惠普的平板模式怎么用)

  • ipadair有128g的吗(ipadair有没有128g)

    ipadair有128g的吗(ipadair有没有128g)

  • 电脑键盘连接不上电脑是怎么回事(电脑键盘连接不上主机)

    电脑键盘连接不上电脑是怎么回事(电脑键盘连接不上主机)

  • 手机启用短信呼是什么意思 (手机启用短信呼服务是怎么回事)

    手机启用短信呼是什么意思 (手机启用短信呼服务是怎么回事)

  • 抖音被重置了怎么解除(抖音被重置了怎么还原)

    抖音被重置了怎么解除(抖音被重置了怎么还原)

  • 苹果怎么使用nfc(苹果怎么使用NFC添加门禁卡)

    苹果怎么使用nfc(苹果怎么使用NFC添加门禁卡)

  • 小米9运行内存有几种(小米9运行内存怎么看)

    小米9运行内存有几种(小米9运行内存怎么看)

  • ipad连不上手机热点(ipad连不上手机热点低数据模式)

    ipad连不上手机热点(ipad连不上手机热点低数据模式)

  • qq屏蔽好友对方知道吗(qq屏蔽好友对方知道吗还能发信息吗)

    qq屏蔽好友对方知道吗(qq屏蔽好友对方知道吗还能发信息吗)

  • 若依(RuoYi )权限管理设计(若依和pig)

    若依(RuoYi )权限管理设计(若依和pig)

  • discuz 如何关闭发帖和回复功能(关闭论坛)

    discuz 如何关闭发帖和回复功能(关闭论坛)

  • 餐具报损表格样板
  • 实际出资人享有什么权利
  • 个人独资企业怎么取钱
  • 一般纳税人普票怎么做分录
  • 水泥沙子开票属于什么类别
  • 住宿发票要附清单吗
  • 合作建房如何纳税
  • 销售农业产品的税率
  • 微信支付工资怎么做账
  • 企业比赛奖品买什么好
  • 员工就诊发票可以报销吗
  • 基本电费等于
  • 结转报告中错误结转科目是什么意思
  • 认证的增值税发票怎么做成账本格式
  • 土地闲置费是否可以列入生产成本
  • 项目合作费包括
  • 现金流净额为负值说明什么
  • 社保显示已录入什么意思
  • 小规模纳税人领发票要带什么
  • 营改增的销售额规定
  • 营业外收入属于什么会计要素
  • 其他资金账簿和资产账簿
  • 企业所缴税款能抵税吗
  • 有限责任公司的人员构成
  • 年终股东利润分配方案
  • 跨年度暂估成本入账冲回如何会计分录
  • 委托加工代收代缴增值税吗
  • 非盈利组织又称
  • 企业购入固定资产,价值3000元,误记入管理费用账户
  • 收到某公司的钱的会计分录
  • php生成html
  • 分公司能不能独立法人
  • web前端基础教程
  • vue动态绑定背景图
  • 加盟代理需要什么手续
  • 所得税的季末从哪里算
  • 高新技术企业研发费用加计扣除
  • 企业税收类型有几种
  • 实收资本确认时间什么入账
  • 被冲红发票怎么处理
  • 代收代缴水费可以加多少损耗
  • mac安装mysql8.0
  • 矿产资源补偿费属于管理费用吗
  • 边际贡献分析法案例
  • 银行日记账期初余额写哪儿
  • 印花税每个月都要申报吗
  • 哪些需要缴纳企业所得税
  • 改革性补贴是否纳入团费基数
  • 收到企业所得税汇算清缴退税账务处理
  • 线上线下财务
  • 厂房监理要点
  • 到期不续约补偿金怎么算
  • 应付账款和预付账款都属于负债类科目
  • 差旅费车票是否可以报销
  • 电子产品多少金额要交税
  • sum(case when then)(判断男女生的个数)
  • sqlserver数据库恢复挂起状态
  • mysql事务命令
  • sqlserver数据库怎么导出
  • win8的文件夹选项在哪里
  • fedora os
  • solaris syslog
  • 文本文件模式
  • winpatrol.exe - winpatrol是什么进程
  • 怎么激活win7旗舰版系统
  • 找回失窃的书本任务
  • win7系统怎么设置屏幕常亮
  • win10桌面图标排列设置
  • Unity3D游戏开发标准教程
  • Javascript获取元素的父元素
  • Linux数据库备份的命令
  • python import怎么用
  • 国家税务总局2018年61号公告
  • 电梯维护保养费按什么缴纳增值税
  • 国家税务总局商洛市税务局
  • 得之于社会要回馈社会的感想
  • 宝安区西乡税务所长
  • 农村信用社升级为什么
  • 浙江国税网上报税
  • 税控盘在哪领取
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设