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

  • 烤箱排行榜前十名(烤箱排行榜)(烤箱的排行榜)

    烤箱排行榜前十名(烤箱排行榜)(烤箱的排行榜)

  • qq如何切换青少年模式(怎么更改qq青少年模式密码)

    qq如何切换青少年模式(怎么更改qq青少年模式密码)

  • qq离开状态能收到消息吗(qq离开状态能收到特别关心吗)

    qq离开状态能收到消息吗(qq离开状态能收到特别关心吗)

  • 关闭微博点赞可见(取消微博点赞功能)

    关闭微博点赞可见(取消微博点赞功能)

  • 淘宝黑号多久能白回来(淘宝黑号后果)

    淘宝黑号多久能白回来(淘宝黑号后果)

  • 京东凑单可以退一件吗(京东凑单可以退一部分吗)

    京东凑单可以退一件吗(京东凑单可以退一部分吗)

  • 电脑软件打开立马闪退(电脑软件打开应用程序没反应)

    电脑软件打开立马闪退(电脑软件打开应用程序没反应)

  • wps文档不能修改内容(wps文档不能修改怎么处理)

    wps文档不能修改内容(wps文档不能修改怎么处理)

  • 小米10烧屏保修吗(小米烧屏保修几次)

    小米10烧屏保修吗(小米烧屏保修几次)

  • 滴滴提现多久到账(滴滴提现多长时间)

    滴滴提现多久到账(滴滴提现多长时间)

  • 微信字体怎么设置大小(微信字体怎么设置好看的字体)

    微信字体怎么设置大小(微信字体怎么设置好看的字体)

  • 付费音乐包可以听vip歌曲吗(付费音乐包可以赠送吗)

    付费音乐包可以听vip歌曲吗(付费音乐包可以赠送吗)

  • 平板突然充不进电了是为什么(平板ipad充不进电怎么回事)

    平板突然充不进电了是为什么(平板ipad充不进电怎么回事)

  • oppo怎么恢复之前版本(oppo怎么恢复之前的字体)

    oppo怎么恢复之前版本(oppo怎么恢复之前的字体)

  • 2g独立显卡是什么意思(2g独立显卡是什么型号)

    2g独立显卡是什么意思(2g独立显卡是什么型号)

  • 苹果11拍照怎么开闪光灯(苹果11拍照怎么设置水印时间地点)

    苹果11拍照怎么开闪光灯(苹果11拍照怎么设置水印时间地点)

  • 抖音不进直播间主播能看到吗(抖音不进直播间怎么撤管理)

    抖音不进直播间主播能看到吗(抖音不进直播间怎么撤管理)

  • 微博能找到微信好友吗(微博能找到微信好友的微博吗)

    微博能找到微信好友吗(微博能找到微信好友的微博吗)

  • 淘气值满多少可以极速退款(淘气值满多少可以参加喵糖游戏)

    淘气值满多少可以极速退款(淘气值满多少可以参加喵糖游戏)

  • 应用分身只能微信吗(为什么应用分身没有微信)

    应用分身只能微信吗(为什么应用分身没有微信)

  • 手机照片怎么加字幕(手机照片怎么加字)

    手机照片怎么加字幕(手机照片怎么加字)

  • vivox20有nfc功能吗(vivox20有没有nfc)

    vivox20有nfc功能吗(vivox20有没有nfc)

  • 苹果xsmax声音小怎么调大(苹果xsmax是双扬声器吗)

    苹果xsmax声音小怎么调大(苹果xsmax是双扬声器吗)

  • 剪映怎么慢动作部分视频(剪映怎么慢动作播放一部分)

    剪映怎么慢动作部分视频(剪映怎么慢动作播放一部分)

  • 荣耀手环5如何接听电话(荣耀手环5如何配对手机)

    荣耀手环5如何接听电话(荣耀手环5如何配对手机)

  • 华为畅享9plus双摄头咋开(华为畅享9plus双清模式画面)

    华为畅享9plus双摄头咋开(华为畅享9plus双清模式画面)

  • qq音乐取消续费(怎么确认qq音乐取消续费)

    qq音乐取消续费(怎么确认qq音乐取消续费)

  • 进出口公司怎么做
  • 采矿权承包出去资源税
  • 个税手续费返还政策最新规定2023
  • 税控技术服务费280每年都可以抵
  • 年初存货跌价准备余额是上年末结转的吗
  • 红冲去年暂估的费用怎么做账
  • 资本公积只能转现金吗
  • 生产经营年度汇缴申报时间
  • 公司承担社保能放到生产成本里吗
  • 长期投资算资产负债表吗
  • 公司净资产减少
  • 软件企业收到先征后返的增值税税款是否要缴纳企业所得税
  • 增值税期末留抵退税政策实施力度
  • 购销印花税会计分录
  • 工资做账原始凭证是什么
  • ca浏览器组件如何下载?
  • 公司将自产产品奖励员工
  • 餐饮行业采购流程图
  • 特殊性税务处理弥补亏损限额
  • 外购商誉是资产吗
  • 坏账准备的计提应当关注
  • 坏账收回的会计处理方法
  • 公司个人股份转让需要缴税吗
  • 公司聚餐计入什么会计科目
  • 非公开发行股票是利好还是利空
  • 包装物租金怎么计算增值税
  • 推迟月经小窍门有民间土方法吗?
  • 商品房缴纳维修基金的规定
  • php创建文件夹和文件
  • php多维数组合并相同key
  • 股东投资款验资后可以转出吗
  • ctl.start
  • 烟草企业亏损
  • 房产自用改出租房产税如何申报
  • 为什么增值税最后有余额附加税没有
  • grad_cam
  • tls版本过低怎么办
  • vue 插槽详解
  • 前端实战开发
  • php框架基础教程
  • stat命令的作用
  • c语言中有哪些循环结构
  • 什么情况下需要异地预缴增值税
  • phpcms默认密码
  • 安装mysql5.1的步骤和方法
  • 长期待摊费用的摊销期限应该是
  • 暂估入库按含税价吗
  • 团体意外险投保
  • 收到法人的借款怎样写摘要
  • 培训费发票属于哪个税目
  • 以前年度长期股权投资漏记调整
  • 结存材料实际成本计算公式
  • 开公司如何选择行业
  • 普通发票和增值发票的区别在哪里
  • 预缴税款的会计处理
  • 企业建帐的基本要求
  • mysql 5.7.9 winx64在windows上安装遇到的问题
  • 安装sql2008时出现以下错误
  • ubuntu 14.10
  • mac磁盘空间不足怎么办
  • Win10 Mobile Build 10572 其它未记录更新内容汇总
  • Linux开机启动文件
  • cocos3d-x
  • qt渲染机制
  • Android游戏开发实训总结
  • perl package
  • shell的实现
  • 批处理命令在哪个菜单中
  • 自动生成批量执行命令
  • div+css布局是什么
  • Node.js中child_process实现多进程
  • Android异常重启保护机制
  • shutil模块 python安装
  • jquery中有哪些dom操作?
  • javascript开关
  • jquery原理和实现步骤
  • jquery加载中
  • no android facet found
  • 四川国税局发票查询
  • 国税局和税务局哪个级别高
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设