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

  • word怎么显示分页符(word怎么显示分栏符)

    word怎么显示分页符(word怎么显示分栏符)

  • 电脑版WPS怎么设置纸型为16开(电脑wps怎么设置翻页方式)

    电脑版WPS怎么设置纸型为16开(电脑wps怎么设置翻页方式)

  • soulmate全部点亮会有什么(soulmate全部点亮有什么用)

    soulmate全部点亮会有什么(soulmate全部点亮有什么用)

  • vpc网络是什么意思(vpc网络原理)

    vpc网络是什么意思(vpc网络原理)

  • 斗鱼直播需要什么设备(斗鱼直播需要什么条件才能开)

    斗鱼直播需要什么设备(斗鱼直播需要什么条件才能开)

  • 笔记本intel可以撕掉吗(intel笔记本怎么样)

    笔记本intel可以撕掉吗(intel笔记本怎么样)

  • 为什么情侣空间开不了(为什么情侣空间解除了还是有标志)

    为什么情侣空间开不了(为什么情侣空间解除了还是有标志)

  • 华为手机联系人头像怎么设置(华为手机联系人怎么导入手机卡)

    华为手机联系人头像怎么设置(华为手机联系人怎么导入手机卡)

  • 哔哩哔哩能投屏吗(哔哩哔哩能投屏直播吗)

    哔哩哔哩能投屏吗(哔哩哔哩能投屏直播吗)

  • al00a华为是什么型号(al00是华为什么型号)

    al00a华为是什么型号(al00是华为什么型号)

  • qq通知显示消息预览什么意思

    qq通知显示消息预览什么意思

  • 手机网络运营商无服务怎么办(手机网络运营商在哪)

    手机网络运营商无服务怎么办(手机网络运营商在哪)

  • 芒果tvhd是什么意思(芒果tvhd和芒果tv会员)

    芒果tvhd是什么意思(芒果tvhd和芒果tv会员)

  • 抖音上的回关是什么意思(抖音回关是什么)

    抖音上的回关是什么意思(抖音回关是什么)

  • 什么叫网络大数据(网络大数据都包含哪些内容)

    什么叫网络大数据(网络大数据都包含哪些内容)

  • 索尼xz2什么时候更新安卓10(索尼xz2现在值得买吗)

    索尼xz2什么时候更新安卓10(索尼xz2现在值得买吗)

  • 互联网是什么行业(互联网是什么行业类别)

    互联网是什么行业(互联网是什么行业类别)

  • 微信怎么弄二维码收款(微信怎么弄二维码建群)

    微信怎么弄二维码收款(微信怎么弄二维码建群)

  • 怎么看苹果手表3的电量(怎么看苹果手表有没有绿屏)

    怎么看苹果手表3的电量(怎么看苹果手表有没有绿屏)

  • 屏幕镜像怎么连接电脑(屏幕镜像怎么连接平板)

    屏幕镜像怎么连接电脑(屏幕镜像怎么连接平板)

  • 交管12123怎么缴费(交管12123怎么缴款)

    交管12123怎么缴费(交管12123怎么缴款)

  • 小米手环3和nfc版区别(小米手环3和4的区别)

    小米手环3和nfc版区别(小米手环3和4的区别)

  • 联通上行路线怎么激活(联通上行链路连接不上)

    联通上行路线怎么激活(联通上行链路连接不上)

  • 小米5x出厂设置在哪里(小米5x重置)

    小米5x出厂设置在哪里(小米5x重置)

  • 主板vga灯亮(主板vga灯亮显示器无信号)

    主板vga灯亮(主板vga灯亮显示器无信号)

  • Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)(vue项目如何配置启动的端口)

    Vue项目如何配置、切换主题颜色(mixin + scss方式,简单高效)(vue项目如何配置启动的端口)

  • 个人出售二手房要交增值税吗
  • 税务免抵调库是什么意思
  • 完税证明能作为理赔依据吗
  • 小规模增值税减免会计账务处理
  • 进项和销项税额需要结转吗
  • 个人开劳务发票怎么开
  • 外商独资投资性公司
  • 固定资产盘亏是营业外支出吗
  • 金税盘的进项发票怎么导出
  • 收到其他银行划回的款项属于什么科目
  • 企业购入投资性房地产时借记什么科目
  • 补发工资是否需要交税
  • 合同和付款单位不一致发票应该开给谁
  • 停车服务费的税率
  • 国家税务总局2011年第25号公告
  • 填报企业所得税资产总额怎么填
  • 董事会费汇算清缴计入什么科目
  • 创新券兑付怎么操作
  • 可以做投标保证金的有银行汇票银行保函
  • 企业如何选择会计师事务所
  • 中小企业的界定标准是什么
  • 转让无形资产的所有权计入什么科目
  • 固定资产折旧的会计凭证
  • 增值税一般纳税人资格登记表
  • windows10护眼色设置
  • 怎样会被税
  • Mtdacq.exe - Mtdacq是什么进程 有什么用
  • PHP:pg_escape_identifier()的用法_PostgreSQL函数
  • 外汇收入情况说明
  • 记账凭证按其用途
  • 项目中的问题
  • Uniapp使用$base方法
  • php框架选择2021
  • 工装费用会计分录
  • 建筑会计和会计的区别
  • 国税系统怎么认证发票
  • 处置资产的账务处理
  • python一点都不简单
  • es6的class类如何实现继承
  • 建筑行业预交增值税怎么结转
  • 图书的税率有免税的吗
  • 用友财务软件怎么下载到电脑
  • 织梦怎么改网站主页
  • 票据粘贴顺序是什么
  • jdbc连接sqlserver2012
  • 无形资产摊销一经确认不得转回
  • 预提费用在资产负债表中如何列示
  • 营业成本和生产费用一样吗
  • 转出进项税额会计分录
  • 差旅费会计科目怎么做
  • 税控盘没有抄税是什么意思
  • 电费应收和实收怎么算
  • 公司广告制作费用申请报告
  • 非营利组织相关论文
  • 小企业会计准则和一般企业会计准则的区别
  • 弥补企业以前年度亏损 顺序
  • 注册资本实缴制改为认缴制
  • 购买工程物资能使现金流量变动吗
  • sqlserver数据库事物日志已满
  • server2012打开sqlserver
  • 怎么彻底卸载visual
  • 电脑如何修改硬盘启动顺序
  • xp系统光盘读不出来
  • windows7文件操作步骤
  • win7电脑没有显示无线网络
  • cocos2dx schedule
  • ajax请求数据放到页面
  • 批处理修改文件后缀名
  • JavaScript 浏览器对象
  • 泛型类泛型接口泛型方法
  • php绘制图形函数
  • 安卓开发日记本
  • 简述javascript
  • 税务局属于什么行业类别
  • 浙江省税务局发短信是真的吗
  • 绩效三级指标体系
  • 没有核定印花税可以按次申报吗
  • 青岛网上申请个体工商户
  • 陕西地税局电话号码
  • 联通前面加什么可以隐藏号码
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设