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

  • 小米9机身是多少厘米(小米9机身多厚)

    小米9机身是多少厘米(小米9机身多厚)

  • 使用AirPods接电话没声音(连接airpods接电话)

    使用AirPods接电话没声音(连接airpods接电话)

  • 支付宝忘了手机号怎么注销(支付宝忘手机号申诉)

    支付宝忘了手机号怎么注销(支付宝忘手机号申诉)

  • 怎么关闭小米手机下面的搜索栏(怎么关闭小米手机按键震动)

    怎么关闭小米手机下面的搜索栏(怎么关闭小米手机按键震动)

  • 手机插上耳机滋滋老响(手机插上耳机滋滋老响怎么解决)

    手机插上耳机滋滋老响(手机插上耳机滋滋老响怎么解决)

  • 耳机进洗衣机还能用吗(耳机进洗衣机了还有救么)

    耳机进洗衣机还能用吗(耳机进洗衣机了还有救么)

  • 小天才电话手表adb是什么(小天才电话手表丢了关机怎么找回)

    小天才电话手表adb是什么(小天才电话手表丢了关机怎么找回)

  • 苹果11功能介绍(苹果11功能介绍与玩法)

    苹果11功能介绍(苹果11功能介绍与玩法)

  • word粘贴快捷键(word粘贴快捷键是什么)

    word粘贴快捷键(word粘贴快捷键是什么)

  • 淘宝商家号怎么变成买家号(淘宝商家号怎么改成买家号)

    淘宝商家号怎么变成买家号(淘宝商家号怎么改成买家号)

  • 华为mate30前摄像头有红点(华为mate30前摄像头进灰怎么办)

    华为mate30前摄像头有红点(华为mate30前摄像头进灰怎么办)

  • 小米8一碰指纹就亮屏(小米8指纹失灵重启好了是咋回事)

    小米8一碰指纹就亮屏(小米8指纹失灵重启好了是咋回事)

  • 信息感叹号怎么解决(信息感叹号怎么关)

    信息感叹号怎么解决(信息感叹号怎么关)

  • pr怎么把竖屏变成横屏(pr怎么把竖屏变成伪横屏)

    pr怎么把竖屏变成横屏(pr怎么把竖屏变成伪横屏)

  • 苹果手机骚扰电话怎么拦截怎么查看(苹果手机骚扰电话怎么设置打不进来)

    苹果手机骚扰电话怎么拦截怎么查看(苹果手机骚扰电话怎么设置打不进来)

  • 手机qq版怎么一键删好友(在手机qq)

    手机qq版怎么一键删好友(在手机qq)

  • cad怎么打平方(cad怎么打平方米)

    cad怎么打平方(cad怎么打平方米)

  • 苹果11呼吸灯怎么设置(苹果呼吸灯怎么开启)

    苹果11呼吸灯怎么设置(苹果呼吸灯怎么开启)

  • 美版11支持双卡吗(美版11能插两张卡吗)

    美版11支持双卡吗(美版11能插两张卡吗)

  • 拼多多营销活动页是什么(拼多多营销活动有哪些)

    拼多多营销活动页是什么(拼多多营销活动有哪些)

  • 手机直通车找宝贝步骤(手机版直通车)

    手机直通车找宝贝步骤(手机版直通车)

  • 无线网密码怎么设置(无线网密码怎么破解啊)

    无线网密码怎么设置(无线网密码怎么破解啊)

  • 关机后还收得到微信吗(关机后还收得到短信吗)

    关机后还收得到微信吗(关机后还收得到短信吗)

  • 拼多多店名可以改吗(拼多多店名可以一样吗)

    拼多多店名可以改吗(拼多多店名可以一样吗)

  • 资源税的计税依据含增值税吗
  • 税前弥补以前年度亏损例
  • 小规模纳税人申请一般纳税人条件
  • 出口货物退税的基本原则
  • 上年多做收入今年可以直接冲减吗
  • 客户发票弄丢了应该如何补救
  • 什么时候过路费是半价
  • 广告公司开票能开劳务费吗
  • 出纳个人账户转公户
  • 金税维护费申报表
  • 一般纳税人外地预缴增值税税率
  • 成本少结转了怎么调回
  • 可抵扣农产品进项税额吗
  • 事业单位之间调动需要多久
  • 资金账号和交易账号一样吗
  • 成品油购进数据未同步怎么办
  • 劳动保护费在企业怎么交
  • 社会组织接受捐赠的资金的使用原则
  • 普通发票跨年作废有影响吗
  • 给工会开发票企业需要报税吗?
  • 企业申请增值税专用发票
  • 技术服务开什么大类
  • 维修费增值税
  • 免抵退税应退税额
  • 发票申领需要什么资料
  • 哪些业务不需要进行平行记账
  • 工程税票怎么开需要交多少
  • 企业注销后资金处理
  • 利润的三个计算口径
  • 50万股份分红
  • 印花税可以计入在建工程吗
  • ntfs磁盘压缩
  • 商品流通会计科目
  • 带息应收票据的核算
  • 施工机械保险费属于什么费用
  • vue编写网页
  • 股份支付费用是股权激励成本吗?
  • 农产品来料加工设备
  • 房产前期开发
  • yii框架安装
  • php函数的定义和调用
  • 子公司注销母子关系流程
  • sklearn average precision
  • 缺陷修饰
  • js框架jquery
  • 收到商业承兑汇票怎么兑现
  • div不规则排版
  • 开业前需要支出什么费用
  • 记账凭证的总账科目和明细科目
  • 独资企业的税收政策
  • 投资性房地产出售收入属于什么收入
  • 存货跌价准备的账务处理
  • 一般哪些收据可以抵扣
  • 新政府会计下专业学什么
  • 本年利润在明细里怎么填
  • 赠品当商品卖
  • 2010年漏记的费用,11年该如何记账?
  • 短期借款明细账采用什么格式
  • 租办公楼有什么讲究
  • 发票打印格式调整方法
  • mysql57安装过程怎样选安装目录
  • 怎么彻底卸载visual
  • vmware虚拟机关机快捷键
  • linux 网站备份
  • win7第三方更新
  • win102021年1月大更新
  • centos怎么安装yum源
  • windows 8 开发者预览版
  • Cocos2d-JS中JavaScript继承
  • opengl帧缓冲
  • 微信小程序基于spingboot
  • 在dos下删除文件
  • 浏览器app测试要点
  • javascript简明教程
  • 用简单的方法做好玩的手工视频教程
  • javascript获取数据类型
  • 酒店会场出租如何收费
  • 河北电子税务局开票流程
  • 江苏国家电子税务局新版本怎么申领发票
  • 税务人员少征税款
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设