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

  • 200kw玉柴发电机识别铭牌参数

    200kw玉柴发电机识别铭牌参数

  • 平凡的世界读后记(平凡的世界读后感2000字大学生)

    平凡的世界读后记(平凡的世界读后感2000字大学生)

  • 微信转错账怎么追回(微信转错账怎么联系对方)

    微信转错账怎么追回(微信转错账怎么联系对方)

  • 华为荣耀8x手机多大尺寸(华为荣耀8x手机u盘在哪里打开)

    华为荣耀8x手机多大尺寸(华为荣耀8x手机u盘在哪里打开)

  • 苹果禁迅雷的原因(ios迅雷被苹果下架了 知乎)

    苹果禁迅雷的原因(ios迅雷被苹果下架了 知乎)

  • iphone贴纸怎么用(苹果贴纸的用法)

    iphone贴纸怎么用(苹果贴纸的用法)

  • 抖音复制口令打不开(抖音复制口令打不开是什么原因)

    抖音复制口令打不开(抖音复制口令打不开是什么原因)

  • 华为p30和p30pro怎么选(华为p30与p30 pro的区别)

    华为p30和p30pro怎么选(华为p30与p30 pro的区别)

  • 陌陌极速版签到多少可以提现(陌陌极速版签到在哪里签)

    陌陌极速版签到多少可以提现(陌陌极速版签到在哪里签)

  • ios设备管理信任不见了(ios设备管理信任会有什么影响?)

    ios设备管理信任不见了(ios设备管理信任会有什么影响?)

  • 华为鲲鹏产业是什么(华为鲲鹏公司)

    华为鲲鹏产业是什么(华为鲲鹏公司)

  • 华为遥控空调的软件叫什么(华为空调遥控器怎么开空调)

    华为遥控空调的软件叫什么(华为空调遥控器怎么开空调)

  • 钉钉为什么会出现呼叫受限(钉钉为什么会出现别人的名字)

    钉钉为什么会出现呼叫受限(钉钉为什么会出现别人的名字)

  • 天翼网关是路由器吗(天翼网关路由器密码怎么改)

    天翼网关是路由器吗(天翼网关路由器密码怎么改)

  • 联通设置呼叫转移方法(联通设置呼叫转移网络响应异常)

    联通设置呼叫转移方法(联通设置呼叫转移网络响应异常)

  • 快手上每日打卡是什么(快手上每日打卡能间断吗)

    快手上每日打卡是什么(快手上每日打卡能间断吗)

  • 视频会议静音后能听到声音吗(视频会议静音后还能说话吗)

    视频会议静音后能听到声音吗(视频会议静音后还能说话吗)

  • oppoa9手机支持5g网络么 (oppoa9手机支持OTG吗)

    oppoa9手机支持5g网络么 (oppoa9手机支持OTG吗)

  • 苹果7系统能分屏吗(苹果7能分身吗)

    苹果7系统能分屏吗(苹果7能分身吗)

  • ipad mini2屏幕怎么拆(ipad mini6屏幕)

    ipad mini2屏幕怎么拆(ipad mini6屏幕)

  • 华为nova5ipro防水吗(华为nova5i pro防水不)

    华为nova5ipro防水吗(华为nova5i pro防水不)

  • 苹果x和苹果11pro尺寸(苹果x和苹果11pro电池一样吗)

    苹果x和苹果11pro尺寸(苹果x和苹果11pro电池一样吗)

  • 苹果11听筒声音小(苹果11听筒声音小必须按免提)

    苹果11听筒声音小(苹果11听筒声音小必须按免提)

  • 淘宝店铺怎么加特别关注(淘宝店铺怎么加入黑名单,再不买他家东西)

    淘宝店铺怎么加特别关注(淘宝店铺怎么加入黑名单,再不买他家东西)

  • xr打电话怎么切换主卡副卡(xr怎么打电话随意切换)

    xr打电话怎么切换主卡副卡(xr怎么打电话随意切换)

  • 微云怎么取消自动续费(怎么关掉微云自动续费)

    微云怎么取消自动续费(怎么关掉微云自动续费)

  • 转转如何退款(转转如何退款成功?)

    转转如何退款(转转如何退款成功?)

  • 小红书我的订单在哪里(小红书我的订单怎么申请退款)

    小红书我的订单在哪里(小红书我的订单怎么申请退款)

  • scrfs.exe - scrfs是什么进程 有什么用

    scrfs.exe - scrfs是什么进程 有什么用

  • 0x0000001e蓝屏代码意思(0x0000001e蓝屏代码的含义)

    0x0000001e蓝屏代码意思(0x0000001e蓝屏代码的含义)

  • 尿急、尿频、尿痛怎么办(图文)(尿急尿频尿不尽吃什么药效果好)

    尿急、尿频、尿痛怎么办(图文)(尿急尿频尿不尽吃什么药效果好)

  • 发生无偿赠与行为怎么办
  • 销项税是什么意思进项税是什么意思
  • 应收账款余额不对怎么调账
  • 小规模普通发票要交税吗
  • 外地预缴税款预缴多了怎么办
  • 发票没有写纳税人识别号可以吗
  • 可供出售金融资产会计处理
  • 超范围经营是不是就等于无证经营
  • 一个公司控股另一个公司
  • 无形资产的加计扣除为什么不影响应纳税所得额
  • 进项票不足
  • 滴滴客运服务费发票税率
  • 建安企业劳务成本怎么入账
  • 海关缴款书抵扣怎么做账
  • 现金折扣若缴纳增值税,怎么进行会计处理?
  • 专用发票百万元版申请要求
  • 利润表里的营业税金及附加如何计算
  • 置换补贴款
  • 公园门票可以报销吗
  • 车辆购置税退税条件
  • 事业单位固定资产
  • 公司购买办公用品300元,以现金支付,购入后即被领用
  • 应收账款周转率怎么分析
  • 申请双软企业会查员工学历吗
  • 去年的成本今年入账会计分录
  • 房产契税怎样交费
  • 王者荣耀体验皮肤什么时候结束
  • 未办理装修手续
  • 工业企业汽车发生费用处理
  • geeklink 极联科技
  • latex双栏图片
  • 无形资产的账务处理候文江视频
  • 国家规定免税饲料具体哪些产品
  • 自然保护绘画
  • 小规模纳税人结转税金分录
  • 中科院院士2023增选
  • thinkphp,onethink和thinkox中验证码不显示的解决方法分析
  • 没有开发票的收入
  • 多交增值税计入什么科目
  • 个人所得税申报方式选哪个比较好
  • 坏账准备备案申请资料
  • 怎样申请土地增值税补贴
  • 小规模企业一定是小微企业吗
  • 现金流量表第四个期初现金余额怎么填
  • 借调人员怎么入账
  • 计提持有至到期债券投资的利息
  • 施工企业增值税账务处理
  • 小规模增值税申报未开票收入怎么填
  • 税率变更对企业的影响
  • 跨年发票能不能用
  • 公司股东分红要交税吗?
  • 当月的进项税可以不认证吗?
  • 固定资产盘亏如何做账务处理
  • 股权变更的股东个税缴纳
  • 为什么借贷平台借不到钱了
  • 企业增值税额
  • 备用金如何管理制度
  • 固定资产标准提高是政策变更吗
  • 年终建账于年初建账,在录入期初余额时有什么不一样?
  • 使用权资产
  • sql基础问题
  • mysql2003错误如何解决10061
  • 关于读书的名言名句
  • Windows Server 2008如何设置自动获取ip?设置自动获取ip教程
  • Windows 9 Storage Sense储存功能更多图像
  • Fedora Core 5(FC-5)正式版下载
  • win8.1安全模式怎么进入
  • win7 64位旗舰版设置插上耳机就能播放声音拔下耳机就自动禁音方法
  • WIN10更新失败
  • cocos开发android游戏
  • cocos2d::DrawPrimitives和DrawNode分别实现画板功能
  • c#中延时
  • unity向量的规范化
  • 深入理解javascript特性.pdf
  • fragment中嵌套fragment
  • Python中使用Queue和Condition进行线程同步的方法
  • 手游开发流程具体
  • jQuery基本选择器
  • jquery 遍历
  • 企业购车需要交消费税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设