微信小游戏资源加载页与云存储

------------恢复内容开始------------

  • 微信小游戏为什么要有开始资源加载页?

    当小游戏包过大的时候,我们如何优化包的大小,最直接的先把图片或者声音等资源放到云端,等小游戏初始化后再从云端下载到本地,而小游戏包里只放代码和几张简单的加载图。

  • 为什么微信加载资源的页面和初始化的页面是两个页面?

    微信小游戏自带初始化页面是,微信从云端下载小游戏代码到本地(这个是自带的,不需要处理,更没有必要再自定义)。资源加载页是,当小游戏初始化完成后再下载资源图片和其他媒体素材,如果没有下载进度页面会停住用户体验不好,所以需要一个素材下载的进度条页面,下载完成,进度条走完,就可以进入游戏。

  • 云存储哪家好,做小游戏当然微信自带云存储!

    我们将媒体资源放到远端文

件服务器,CDN等等,但是相对于现在流行的比如阿里云,AWS,腾讯云等等,甚至什么云盘啥的都不如微信自带的云存储。因为免费5  个  G!!!!!足够了。而且上传文件后会生成一个id,通过微信下载函数传入此Id,就可以下载了!

  


  自己动手丰衣足食
  1. 首先,我们需要将游戏的媒体资源放到云端,这里我们用微信官方的云存储

  • 在开发平台界面打开云开发平台,

    

  •   会初始化些步骤,很简单
  • 打开存储,这几我们可以新建文件夹,以及文件
  • 编写下载文件

  •   将所有要下载的文件id,用数组记录下来

  

export const booms = [{
    name: ‘boom1‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/1.png‘,
  },
  {
    name: ‘boom2‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/2.png‘,
  },
  {
    name: ‘boom3‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/3.png‘,
  },
  {
    name: ‘boom4‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/4.png‘,
  },
  {
    name: ‘boom5‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/5.png‘,
  }
]
  • 批量下载
  • for (let obb of booms) {
        wx.cloud.downloadFile({
          fileID: obb.fileId, // 文件 ID
          success: res => {
            index++
            // 返回临时文件路径
            let obj = obb
            obj.url = res.tempFilePath
            list.push(obj)
            if (netResourse.length == list.length) {
              databus.allImages = list
              loadingImage()
              new Main(ctx)
            }
            initRender(ctx, index / netResourse.length * 100)
          },
          fail: console.error
        })
      }

    下载之后会返回一个本地缓存tempFilePath,在new image()直接赋值给.src属性   这个路劲就是在本机内存里,可以理解是游戏包里的相对路劲

   并且记录返回数,这样就知道和总下载数的比例,实现进度条的百分比了 

------------恢复内容结束------------

  • 微信小游戏为什么要有开始资源加载页?

    当小游戏包过大的时候,我们如何优化包的大小,最直接的先把图片或者声音等资源放到云端,等小游戏初始化后再从云端下载到本地,而小游戏包里只放代码和几张简单的加载图。

  • 为什么微信加载资源的页面和初始化的页面是两个页面?

    微信小游戏自带初始化页面是,微信从云端下载小游戏代码到本地(这个是自带的,不需要处理,更没有必要再自定义)。资源加载页是,当小游戏初始化完成后再下载资源图片和其他媒体素材,如果没有下载进度页面会停住用户体验不好,所以需要一个素材下载的进度条页面,下载完成,进度条走完,就可以进入游戏。

  • 云存储哪家好,做小游戏当然微信自带云存储!

    我们将媒体资源放到远端文

件服务器,CDN等等,但是相对于现在流行的比如阿里云,AWS,腾讯云等等,甚至什么云盘啥的都不如微信自带的云存储。因为免费5  个  G!!!!!足够了。而且上传文件后会生成一个id,通过微信下载函数传入此Id,就可以下载了!

  


  自己动手丰衣足食
  1. 首先,我们需要将游戏的媒体资源放到云端,这里我们用微信官方的云存储

  • 在开发平台界面打开云开发平台,

    

  •   会初始化些步骤,很简单
  • 打开存储,这几我们可以新建文件夹,以及文件
  • 编写下载文件

  •   将所有要下载的文件id,用数组记录下来

  

export const booms = [{
    name: ‘boom1‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/1.png‘,
  },
  {
    name: ‘boom2‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/2.png‘,
  },
  {
    name: ‘boom3‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/3.png‘,
  },
  {
    name: ‘boom4‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/4.png‘,
  },
  {
    name: ‘boom5‘,
    fileId: ‘cloud://imge8-5z6gt.696d-imge8-5z6gt-1300789023/booms/5.png‘,
  }
]
  • 批量下载
  • for (let obb of booms) {
        wx.cloud.downloadFile({
          fileID: obb.fileId, // 文件 ID
          success: res => {
            index++
            // 返回临时文件路径
            let obj = obb
            obj.url = res.tempFilePath
            list.push(obj)
            if (netResourse.length == list.length) {
              databus.allImages = list
              loadingImage()
              new Main(ctx)
            }
            initRender(ctx, index / netResourse.length * 100)
          },
          fail: console.error
        })
      }

    下载之后会返回一个本地缓存tempFilePath,在new image()直接赋值给.src属性   这个路劲就是在本机内存里,可以理解是游戏包里的相对路劲

   并且记录返回数,这样就知道和总下载数的比例,实现进度条的百分比了,并且当进度条100%时 开始游戏

送上我的小游戏 一开始界面就是下载资源页 可以看看效果

原文地址:https://www.cnblogs.com/zhangzhaowei/p/12343966.html

时间: 2024-11-29 10:27:24

微信小游戏资源加载页与云存储的相关文章

微信小程序分包加载

分包加载 某些情况下,开发者需要将小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个功能的分包,其中每个分包小程序必定含有一个主包,所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本,而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,如果用户需要打开分包内某个页面,客户端会把对应分包下载下来,下载完成后再进行展示. 目前小程序分包大小有以下限制

微信小程序之加载更多(分页加载)实例

业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数: (1)pageindex: 1 //第几次加载 (2)callbackcount: 15 //需要返回数据的个数 其他参数: 根据接口的所需参数 实现原理: 当第一次访问接口时,传递2个必备参数(第1次加载,需要返回数据的个数为15个),和其他参数(需要搜索的字符串)给后台,后台返回第一次数据过来.在请求成功的的回调函数中,判断返回的数据是否>0,是,则取出数据,渲染视图层,并把"上拉加载"显示在列表底部:否,则

微信小程序之----加载中提示框loading

loading loading只有一个属性hidden .wxml <view> <loading hidden="{{hidden}}"> 加载中... </loading> <button bindtap="changeHidden">show/hidden</button> </view> .js Page({ data:{ hidden:true }, changeHidden: fun

微信小程序预加载图片以及占位图片

wxml页面 利用三目运算:代码如下: 1 <image src="{{ima?ima:'../../images/4.jpg'}}" /> (../../images/4.jpg)这里意思是预加载图片大概是一张黑白色的类似于 js代码如下: Page({ /** * 页面的初始数据 */ data: { ima: "", }, /** * 生命周期函数--监听页面加载 */ internet:function(){ setTimeout(functio

微信小程序 动态加载class

<view class=' {{topid==1?"top": "untop"}}' > 原文地址:https://www.cnblogs.com/zsczsc/p/10177441.html

微信小程序分包加载代码实现方式

直接在 “app.json” 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc", ]

微信小游戏入门与实战 引爆朋友圈

第1章 准备工作(需要ES5,ES6基础)学员作品演示:https://pan.baidu.com/s/1gEMWzujg72soj0cEUOtJ2A 密码:uy2n,本章首先介绍课程目标,学习收获等,然后通过与APP.小程序的对比,让大家知道什么是微信小游戏以及微信小游戏前景如何,有哪些特点,然后带大家搭建微信小游戏的开发环境和调试环境,之后会对微信小游戏开发前注意事项与准备工作进行讲解,目...1-1 课程导学1-2 小游戏官方开发工具快速体验1-3 小游戏开发测试环境搭建和工具链使用1-4

[小游戏] 微信小游戏开发源码_教程_工具_资源最新集合

[小游戏资源] 微信小游戏开发资源目录 一.微信官方游戏教程 小游戏简易教程 小游戏API大全 小游戏开发工具 二.微信小游戏图标资源 Game-icons.net 三.微信小游戏图片资源 Super Game Asset GameDev Market envato market Game Art Partners KENNEY 四.微信小游戏音频资源 工具类 Audacity 9 款音频压缩软件推荐 7 款混音软件推荐 7 款降噪软件推荐 资源类 爱给音效库 freesound Soundim

刚入前端整合的一个手机端页面适配+预加载+获取资源加载进度等的一个小模板

刚入前端不久,之前主要学的是pc端的布局,到公司之后负责的主要是移动段页面,刚开始时为了使页面适应移动端不同的屏幕大小采用的是百分比加媒体查询的方式,做完一个项目之后,感觉非常不好,虽然最后也基本使页面做到了适配.所以做完这个项目之后,我就在网上查找各种屏幕适配的方案,最终找到了一个通过js控制使页面整体缩放的方案,还有一个就是通过js实时检测屏幕大改变html根字体大小的rem布局方案.目前我在使用的是缩放的方案.整体代码基本上是整合的是大牛们分享的一些实用代码,如有什么bug欢迎提出,共同进