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

  • 联想蓝牙耳机怎么连接手机(联想蓝牙耳机怎么重新配对)

    联想蓝牙耳机怎么连接手机(联想蓝牙耳机怎么重新配对)

  • 苹果耳机怎么连接华为手机(苹果耳机怎么连接新设备)

    苹果耳机怎么连接华为手机(苹果耳机怎么连接新设备)

  • 闲鱼能看到被谁举报吗(闲鱼能看到谁浏览过自己吗)

    闲鱼能看到被谁举报吗(闲鱼能看到谁浏览过自己吗)

  • 域名已失效正在跳转(域名即将失效请记住)

    域名已失效正在跳转(域名即将失效请记住)

  • 苹果11promax电量百分比怎么设置(苹果11promax电量能用多久)

    苹果11promax电量百分比怎么设置(苹果11promax电量能用多久)

  • 千牛可以两个手机同时登录吗(千牛可以两个手机登一个账号信息可以同步吗)

    千牛可以两个手机同时登录吗(千牛可以两个手机登一个账号信息可以同步吗)

  • 华为大容量电池手机有哪几款(华为大容量电池手机)

    华为大容量电池手机有哪几款(华为大容量电池手机)

  • 快手说说怎么看不到了(怎么看别人的快手说说怎么看)

    快手说说怎么看不到了(怎么看别人的快手说说怎么看)

  • iphone6有深色模式吗(ios6深色模式)

    iphone6有深色模式吗(ios6深色模式)

  • 魅族手机开不了机(魅族手机开不了机怎么办一直黑屏)

    魅族手机开不了机(魅族手机开不了机怎么办一直黑屏)

  • 电话卡可以异地补办吗(电话卡可以异地改套餐吗)

    电话卡可以异地补办吗(电话卡可以异地改套餐吗)

  • 错误代码1901什么意思(错误代码11901是什么)

    错误代码1901什么意思(错误代码11901是什么)

  • 手机内存满了开不开机怎么办(手机内存满了开机白苹果)

    手机内存满了开不开机怎么办(手机内存满了开机白苹果)

  • 小米手表color支持苹果吗(小米手表color wear os)

    小米手表color支持苹果吗(小米手表color wear os)

  • 为什么路由器有两个wifi信号(为什么路由器有三个wifi信号)

    为什么路由器有两个wifi信号(为什么路由器有三个wifi信号)

  • vivox21i和vivox21ia手机壳一样吗(vivox21izol)

    vivox21i和vivox21ia手机壳一样吗(vivox21izol)

  • airpods提示音一直响(airpods 提示音)

    airpods提示音一直响(airpods 提示音)

  • 滴滴企业版和个人版区别(滴滴企业版和个人版)

    滴滴企业版和个人版区别(滴滴企业版和个人版)

  • 计算机技术指标主频指的是(计算机技术指标包括)

    计算机技术指标主频指的是(计算机技术指标包括)

  • 手机画质怎么调(oppoa93手机画质怎么调)

    手机画质怎么调(oppoa93手机画质怎么调)

  • 黑鲨2屏幕分辨率多少(黑鲨2pro屏幕分辨率)

    黑鲨2屏幕分辨率多少(黑鲨2pro屏幕分辨率)

  • 三星手机无法开机的原因(三星手机无法开机 导出数据)

    三星手机无法开机的原因(三星手机无法开机 导出数据)

  • 接口与抽象类的区别(接口与抽象类的异同点)

    接口与抽象类的区别(接口与抽象类的异同点)

  • 美图t9微信视频可以美颜吗

    美图t9微信视频可以美颜吗

  • win10账号同步怎么开启(win10同步账户)

    win10账号同步怎么开启(win10同步账户)

  • win10默认网关自动消失解决方法(win10默认网关自动清空)

    win10默认网关自动消失解决方法(win10默认网关自动清空)

  • chatgpt3接口 国内版免费使用(tepac接口)

    chatgpt3接口 国内版免费使用(tepac接口)

  • 增值税开票软件ukey版
  • 公司购买车辆的好处
  • 关税减免形式主要包括
  • 个体如何申请电子公章流程
  • 转正后个税增加
  • 公司注销公司帐户剩的钱怎么办
  • 借已交税金贷银行存款
  • 土地租金计入哪个会计科目
  • 进项税额转出年末要结转吗
  • 发票已认证部分怎么撤销
  • 促销费属于哪个税目
  • 汇总纳税总机构企业所得税分摊比例备案
  • 印花税减半优惠政策2019
  • 社保基数每个月可以调整一次吗
  • 预交增值税后如何处理
  • 1697506708
  • 第二季度的利润表报错了,怎么重新报
  • 电脑在线测速的软件
  • 期初建账分录
  • 华为手机网络拒绝接入怎么解决
  • 社保是当月计提当月的吗
  • php创建文件夹和文件
  • 企业税收有哪些部分组成
  • 职工福利费会计账务处理
  • 财务费用属不属于生产成本
  • wordpress的文章在数据库里吗?
  • 委托加工物资如何转入生产成本
  • 国有资产无偿划转协议
  • 承接旅游业务
  • php sendmail
  • 企业发生的现金折扣应计入什么费用
  • 医院执行政府会计制度补充规定
  • 前端开发工程师是干嘛的
  • element ui table
  • 一般纳税人和小微企业的区别
  • urlparse安装
  • 视同销售的情况有哪些?
  • 预付款能不能开票入账
  • mysql深入理解
  • MongoDB db.serverStatus()输出内容中文注释
  • 小规模纳税人的税率是多少
  • 收回投资收到的现金减少
  • 国税局网上申报
  • 应交增值税明细账怎么填写样本
  • 一般纳税人之外还有什么
  • 车船税应计入税金及附加吗
  • 应付账款的入账时间为
  • 开具发票后,如发生销售退回,通常有的两种处理方式是?
  • 饭店房屋的租赁合同范本
  • 怎么盘存货
  • 工程机械租赁公司注册
  • 对外担保的效力
  • 权益法下股权投资包括
  • 车辆按揭贷款需要什么
  • 房地产成本核算对象
  • 股东在注册资本金范围内承担责任
  • 税控盘没有反写会罚款吗
  • 发票抬头是个人税号怎么填
  • 企业享受所得税免税政策
  • 房地产企业房屋私售,银行怎么处理
  • mysql重置初始密码
  • windows xp安装win32程序
  • linux系统常用命令怎么记住
  • 苹果电脑截图快捷键
  • oracle linux6.9
  • securecrt教程
  • 桌面上家庭组图标是干嘛
  • mac迅雷不限速
  • win7查看本机信息
  • win7如何升级到win10有什么要求
  • linux tcptraceroute
  • win10大更新2021要多久
  • python输出unicode编码
  • jquery动态生成div
  • jquery鼠标点击事件怎么写
  • shell脚本输出空格
  • jQuery插件下载
  • Android 5.1 API 22 所有sdk文件下载地址
  • 化妆品的消费税率为
  • 分国分项抵免法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设