微信小程序开发中遇到的问题

本文介绍了微信小程序开发中如何通过分包策略降低包大小限制,解决超过2MB问题,并讲解了数据更新视图不更新的解决方案。还涉及图片优化、网络图片加载和Image组件自适应高度的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、在微信小程序中,我们真机调试时,小程序的包大小必须限制在2M以内,超过2MB大小,就算在开发者工具中都不能正常预览。

解决办法:

  •  将图片的大小尽可能的压缩,以保证程序包顺利通过微信设置的大小阈值。(这样会造成图片的失真,而且并不能真正的解决问题)
  •  将图片上传到服务器,代码中加载服务器的网络图片。(这不失为一种可靠的解决方案,这也是微信推荐使用网络图片的一个原因,但是不能保证从服务器拉取的资源能快速加载,不可控的因素很多)
  •  分包加载(将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载。)

分包实现

  • 首先确定小程序的目录结构

上图是一个演示的项目目录结构,新建了两个目录名为packageA和packageB的文件夹,以表示分包。在两个包中可以新建pages页面目录和静态资源文件(这里只新建了images文件夹,可根据项目需求自行创建)

  • 然后就是app.json的配置文件
"pages": [
    "pages/index/index"  //主包的入口
  ],
  "subpackages": [     //分包
    {
      "root": "packageA",
      "pages": [
        "pages/index/index"
      ]
    },
    {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/car/car"
      ]
    }
  ]

上面代码subpackages字段定义了程序的分包情况,接收一个Array数组,数组的每一个元素代表一个包。每个数组中包含了root字段和pages字段,分别代表当前包的根目录和当前包下的页面路径。

注意:

  • 每一个包里的静态资源文件是相对封闭的,不能相互引用。
  • 小程序定义的tabBar必须定义在程序的主包内。
  • 每个包定义的root字段是独立的,A包的根目录不能在B包的子目录中。
  • subpackages字段的写法和subPackages是一样的,没有过分强调。
  • 整个小程序所有分包大小不超过 8M,单个分包/主包大小不能超过 2M


2、微信小程序开发中,数据更新视图不更新的问题
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。

this.setData({
    
})

我们可以使用this.setData方法来更新(同步数据)

3、微信小程序 Image 图片实现宽度100%,高度自适应

微信小程序和html页面不太一样,微信小程序中设置height: auto;不生效,设置图片宽度后,需要添加属性mode="widthFix"。
有时候Image在iso显示不出来,可在外层加个view设置一下宽高。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值