
实用小程序源码下载开发(附2万套uniapp小程序游戏源代码)
从技术上讲,微信小程序游戏框架在小程序框架中加入了程序游戏库API。因此,小程序游戏只能在小程序环境下运行,既不是原生程序游戏也不是HTML5程序游戏。也就是说,小程序游戏与HTML5程序游戏紧密相关,面向HTML5程序游戏开发者——很大程度上采用了WebGL、JavaScript等HTML5技术,将HTML5程序游戏转为微信小程序游戏的工作量降到最低。
源码:casgams.top/gm
玩家主要通过以下渠道进入小程序游戏:
●好友或微信群邀请
●扫描程序游戏二维码
●最近玩过的程序游戏显示在小程序历史记录中,或者拉下聊天收件箱后
●发现 > 小程序,然后搜索小程序游戏
●发现 > 程序游戏 > 我的小程序游戏,然后搜索“小程序游戏”
搜索“小程序游戏”(小程序游戏)将显示小程序游戏的简短列表。单击“显示完整列表”会将您带到一个隐藏的小程序游戏菜单,该菜单按最热门的程序游戏和朋友正在玩的程序游戏分类。
简而言之,微信小程序游戏:
1、在微信环境下运行
2、使用 HTML5 和相关网络技术
3、提供类似于原生程序游戏的程序游戏体验
●微信小程序游戏相对于其他类型的程序游戏有很多优势。两个最大的优势是*稳定性和可管理性。
●与原生程序游戏相比,微信的应用程序作为一个独立的平台,将用户留在微信生态系统中。
结论
微信小程序游戏结合了强大的获取渠道、社交程序游戏和分享以及庞大的用户群——同时无需下载任何东西即可享受近乎原生的应用体验。
所有这些特性都显示了微信小程序游戏的光明前景。现在就轮到你们这些程序游戏开发者利用这个机会,打造最适合微信用户的程序游戏了!
微信小程序游戏开发基础
上文提到,小程序游戏的开发涉及到HTML5,熟悉HTML5的开发者上手很快——短时间内将HTML5程序游戏变成微信小程序游戏。
具体来说,微信小程序游戏的开发技术可以分为三个部分:
相比HTML5程序游戏,小程序游戏玩家不会被弹窗广告打扰,体验更佳。
微信小程序游戏环境的一大优势是兼容HTML5程序游戏生态。也就是说,HTML5程序游戏可以更方便的转化为微信小程序游戏,不管你用什么程序游戏引擎开发的。这使得微信小程序游戏能够利用现有的大型 HTML5 生态系统的力量。
除了技术优势外,微信小程序游戏还利用了这样一个事实,即它是中国最受欢迎的社交平台,能够让应用病毒式传播。小程序游戏设计的一个关键部分是利用微信的社交特性来获取新用户。
微信小程序游戏主要通过好友推荐或分享链接被发现。这使得小程序游戏与以往的网页程序游戏通过广告或传统渠道获取用户到应用商店或下载链接有很大不同。
第1部分。底层技术
一、编程语言——微信小程序游戏只支持JavaScript(Web的主要编程语言),但也支持可以编译成JavaScript的语言,如TypeScript、CoffeeScript。
其次是微信小程序游戏框架支持的JavaScript API(应用程序接口):Canvas 2D和WebGL 1.0。这些 API 中的任何一个都可用于绘制图形、创建动画或实时渲染。但是您不想同时使用一种以上的技术。另请注意,只有 WebGL 支持 3D 渲染。
第2部分。中间件:程序游戏引擎
直接使用 Canvas 2D 或 WebGL 制作小程序游戏有一个陡峭的学习曲线。由于您可能不想花费超过一年的时间来开发一款程序游戏,因此使用 HTML5 程序游戏引擎是一个非常明智的选择。程序游戏引擎提供的高级功能可以大大降低开发者的入门门槛,缩短开发时间。
国内三大程序游戏引擎厂商Cocos Creator、Egret、Laya已经支持微信小程序游戏。目前国外流行的 HTML5 程序游戏引擎如Phaser.js、Three.js还没有直接支持,但还是可以适配使用(比如这个Phaser port for Mini Games)。
三、微信SDK(软件开发包)
微信小程序游戏为开发者提供了丰富的微信登录、分享、排行榜等社交功能的使用工具。
了解微信小程序游戏底层结构
小程序游戏既不是原生程序游戏,也不等同于 HTML5 程序游戏。但是,它的开发环境与这两种类型的程序游戏有关。小程序游戏使用HTML5相同的渲染接口。
小程序游戏实际上运行在微信App的原生环境中。程序游戏的JavaScript代码不是在浏览器环境中执行的,而是在移动设备的JS VM层上的一个独立的JavaScript引擎。在 Android 平台上,它使用Google 的 V8 引擎,而在 iOS 上,它使用苹果的 JavaScript Core 引擎。
当然,JS(JavaScript)引擎只负责JS逻辑的编译和运行,并没有渲染接口。
小程序游戏开发者如何将他们的程序游戏连接到渲染界面,以及微信框架中提供的许多其他功能?
引入了 JS-Native 脚本绑定。该技术可以桥接原生语言接口(iOS / Android 库)到脚本接口(JavaScript 库),并将 API 调用从脚本层转发到原生层以使用原生平台功能。
微信JavaScript SDK已经在使用绑定技术,让微信公众号和小程序通过JavaScript API实现相册、传感器等原生设备功能。
微信小程序游戏还使用绑定技术将原生平台(iOS / Android)的服务:渲染、用户数据、网络、音频和视频连接到 JavaScript 环境。小程序游戏层模块就是这样访问上图中的原生函数的。
通过支持 JavaScript 环境,微信提供了一个框架,可以将 HTML5 程序游戏转换为微信小程序游戏。但一些 API 兼容性问题可能是由于缺乏真正的浏览器环境和 DOM 而引起的。
为了降低 HTML5 程序游戏转小程序游戏的成本,微信团队还提供了一个“适配”脚本来支持浏览器 API。支持 HTML5 程序游戏所需的大多数浏览器功能 - 从而提高兼容性。
Adapter 脚本提供了 HTML5 程序游戏所依赖的大多数浏览器界面。
上图展示了微信小程序游戏中开发者可用的所有接口
●渲染界面
●浏览器适配器接口
●微信服务的微信API
请注意,Browser Adapter 接口不再由官方维护,因此任何附加功能都由开发人员决定。而且它的大部分依赖DOM的功能在小程序游戏环境下是不起作用的。
使用程序游戏引擎
由于开发栈的复杂性,一种选择是使用程序游戏引擎开发小程序游戏。程序游戏引擎不仅将常用的程序游戏功能封装在一个高阶接口上,还试图解决H5浏览器程序游戏与微信小程序游戏环境不兼容的问题。
开发人员可能需要使用不同层次的库——这取决于程序游戏的复杂性。使用程序游戏引擎时,它会为开发人员提供高级功能,同时调用这些相同的库。然后,开发人员需要学习引擎,并处理引擎未提供所有所需功能的情况。
以下是程序游戏引擎提供的好处摘要:
框架特点:
●对常见程序游戏开发特性的高度封装
●资源加载
●事件处理
●媒体和广播
●屏幕显示与控制
●用户输入
●附加接口,例如用于 TileMap 的 DOM 解析器
编辑:
●优化程序员、设计师和经理之间的协作。
●一个好的程序游戏编辑器可以显着缩短开发周期。
一般的:
●优秀的程序游戏引擎可以提供高设备兼容性和稳定的性能;
●跨平台程序游戏引擎可以让开发者同时发布HTML5程序游戏、微信小程序游戏和原生程序游戏。
高效的程序游戏编辑器可以降低开发成本和维护成本。对于程序游戏开发商而言,这些因素可能是盈利的关键。
4.开始搭建调试小程序游戏!
Step 1. 获取微信开发者工具
微信小程序开发者工具提供了编写、调试和运行小程序游戏的框架。在微信开发者网站这里下载。
首次运行开发者工具时,系统会要求您使用微信帐号登录。然后您将看到用于创建您的第一个项目的表单。
点击:“体验”右侧的“小程序游戏”(尝试:小程序游戏)
并为源代码选择一个位置项目目录,然后将您的项目命名为项目名称。
●页面顶部是工具栏。它可以配置、编译、预览和部署程序游戏。
●左边是模拟器。程序游戏随着代码的变化而运行和更新。
●右上角是代码编辑器。
●编辑器的左侧是文件菜单。它列出了项目文件。
●右下方是调试器。它的功能类似于Chrome开发者工具!
Step 2. 微信小程序游戏配置及文件导入
在微信小程序游戏工程中,添加配置文件project.config.json和game.json。
●project.config.json定义您的程序游戏 AppID、名称、版本、IDE 设置和运行时配置。
●game.json提供应用程序和代码的内部配置,例如设备方向和网络超时。这个类似于微信小程序中的app.json文件!
由于小程序游戏不支持 HTML 文件,入口在game.js中。您可以通过使用 require 函数将程序游戏引擎和程序游戏脚本引入game.js文件来启动程序游戏。注意: require函数的使用遵循Node.js的规范!
步骤 3. 编译、测试和提交
微信开发工具会监控脚本和配置的变化,实时更新程序游戏。您也可以点击页面顶部的编译按钮手动重新编译。当您需要在智能手机上预览程序游戏和测试时,您可以点击预览按钮生成二维码并扫描以玩程序游戏!
生成二维码的过程其实就是压缩一个小包上传到微信CDN,所以需要一定的时间。
如果微信小程序游戏遵循与小程序相同的分发规则,那么微信可能会在小程序游戏提交后对其进行审核——然后才能公开发布。也会有关于如何像小程序一样发现或分享小程序游戏的规则。
从技术上讲,微信小程序游戏框架在小程序框架中加入了程序游戏库API。因此,小程序游戏只能在小程序环境下运行,既不是原生程序游戏也不是HTML5程序游戏。也就是说,小程序游戏与HTML5程序游戏紧密相关,面向HTML5程序游戏开发者——很大程度上采用了WebGL、JavaScript等HTML5技术,将HTML5程序游戏转为微信小程序游戏的工作量降到最低。
源码:casgams.top/gm
玩家主要通过以下渠道进入小程序游戏:
●好友或微信群邀请
●扫描程序游戏二维码
●最近玩过的程序游戏显示在小程序历史记录中,或者拉下聊天收件箱后
●发现 > 小程序,然后搜索小程序游戏
●发现 > 程序游戏 > 我的小程序游戏,然后搜索“小程序游戏”
搜索“小程序游戏”(小程序游戏)将显示小程序游戏的简短列表。单击“显示完整列表”会将您带到一个隐藏的小程序游戏菜单,该菜单按最热门的程序游戏和朋友正在玩的程序游戏分类。
简而言之,微信小程序游戏:
1、在微信环境下运行
2、使用 HTML5 和相关网络技术
3、提供类似于原生程序游戏的程序游戏体验
●微信小程序游戏相对于其他类型的程序游戏有很多优势。两个最大的优势是*稳定性和可管理性。
●与原生程序游戏相比,微信的应用程序作为一个独立的平台,将用户留在微信生态系统中。
结论
微信小程序游戏结合了强大的获取渠道、社交程序游戏和分享以及庞大的用户群——同时无需下载任何东西即可享受近乎原生的应用体验。
所有这些特性都显示了微信小程序游戏的光明前景。现在就轮到你们这些程序游戏开发者利用这个机会,打造最适合微信用户的程序游戏了!
微信小程序游戏开发基础
上文提到,小程序游戏的开发涉及到HTML5,熟悉HTML5的开发者上手很快——短时间内将HTML5程序游戏变成微信小程序游戏。
具体来说,微信小程序游戏的开发技术可以分为三个部分:
相比HTML5程序游戏,小程序游戏玩家不会被弹窗广告打扰,体验更佳。
微信小程序游戏环境的一大优势是兼容HTML5程序游戏生态。也就是说,HTML5程序游戏可以更方便的转化为微信小程序游戏,不管你用什么程序游戏引擎开发的。这使得微信小程序游戏能够利用现有的大型 HTML5 生态系统的力量。
除了技术优势外,微信小程序游戏还利用了这样一个事实,即它是中国最受欢迎的社交平台,能够让应用病毒式传播。小程序游戏设计的一个关键部分是利用微信的社交特性来获取新用户。
微信小程序游戏主要通过好友推荐或分享链接被发现。这使得小程序游戏与以往的网页程序游戏通过广告或传统渠道获取用户到应用商店或下载链接有很大不同。
第1部分。底层技术
一、编程语言——微信小程序游戏只支持JavaScript(Web的主要编程语言),但也支持可以编译成JavaScript的语言,如TypeScript、CoffeeScript。
其次是微信小程序游戏框架支持的JavaScript API(应用程序接口):Canvas 2D和WebGL 1.0。这些 API 中的任何一个都可用于绘制图形、创建动画或实时渲染。但是您不想同时使用一种以上的技术。另请注意,只有 WebGL 支持 3D 渲染。
第2部分。中间件:程序游戏引擎
直接使用 Canvas 2D 或 WebGL 制作小程序游戏有一个陡峭的学习曲线。由于您可能不想花费超过一年的时间来开发一款程序游戏,因此使用 HTML5 程序游戏引擎是一个非常明智的选择。程序游戏引擎提供的高级功能可以大大降低开发者的入门门槛,缩短开发时间。
国内三大程序游戏引擎厂商Cocos Creator、Egret、Laya已经支持微信小程序游戏。目前国外流行的 HTML5 程序游戏引擎如Phaser.js、Three.js还没有直接支持,但还是可以适配使用(比如这个Phaser port for Mini Games)。
三、微信SDK(软件开发包)
微信小程序游戏为开发者提供了丰富的微信登录、分享、排行榜等社交功能的使用工具。
了解微信小程序游戏底层结构
小程序游戏既不是原生程序游戏,也不等同于 HTML5 程序游戏。但是,它的开发环境与这两种类型的程序游戏有关。小程序游戏使用HTML5相同的渲染接口。
小程序游戏实际上运行在微信App的原生环境中。程序游戏的JavaScript代码不是在浏览器环境中执行的,而是在移动设备的JS VM层上的一个独立的JavaScript引擎。在 Android 平台上,它使用Google 的 V8 引擎,而在 iOS 上,它使用苹果的 JavaScript Core 引擎。
当然,JS(JavaScript)引擎只负责JS逻辑的编译和运行,并没有渲染接口。
小程序游戏开发者如何将他们的程序游戏连接到渲染界面,以及微信框架中提供的许多其他功能?
引入了 JS-Native 脚本绑定。该技术可以桥接原生语言接口(iOS / Android 库)到脚本接口(JavaScript 库),并将 API 调用从脚本层转发到原生层以使用原生平台功能。
微信JavaScript SDK已经在使用绑定技术,让微信公众号和小程序通过JavaScript API实现相册、传感器等原生设备功能。
微信小程序游戏还使用绑定技术将原生平台(iOS / Android)的服务:渲染、用户数据、网络、音频和视频连接到 JavaScript 环境。小程序游戏层模块就是这样访问上图中的原生函数的。
通过支持 JavaScript 环境,微信提供了一个框架,可以将 HTML5 程序游戏转换为微信小程序游戏。但一些 API 兼容性问题可能是由于缺乏真正的浏览器环境和 DOM 而引起的。
为了降低 HTML5 程序游戏转小程序游戏的成本,微信团队还提供了一个“适配”脚本来支持浏览器 API。支持 HTML5 程序游戏所需的大多数浏览器功能 - 从而提高兼容性。
Adapter 脚本提供了 HTML5 程序游戏所依赖的大多数浏览器界面。
上图展示了微信小程序游戏中开发者可用的所有接口
●渲染界面
●浏览器适配器接口
●微信服务的微信API
请注意,Browser Adapter 接口不再由官方维护,因此任何附加功能都由开发人员决定。而且它的大部分依赖DOM的功能在小程序游戏环境下是不起作用的。
使用程序游戏引擎
由于开发栈的复杂性,一种选择是使用程序游戏引擎开发小程序游戏。程序游戏引擎不仅将常用的程序游戏功能封装在一个高阶接口上,还试图解决H5浏览器程序游戏与微信小程序游戏环境不兼容的问题。
开发人员可能需要使用不同层次的库——这取决于程序游戏的复杂性。使用程序游戏引擎时,它会为开发人员提供高级功能,同时调用这些相同的库。然后,开发人员需要学习引擎,并处理引擎未提供所有所需功能的情况。
以下是程序游戏引擎提供的好处摘要:
框架特点:
●对常见程序游戏开发特性的高度封装
●资源加载
●事件处理
●媒体和广播
●屏幕显示与控制
●用户输入
●附加接口,例如用于 TileMap 的 DOM 解析器
编辑:
●优化程序员、设计师和经理之间的协作。
●一个好的程序游戏编辑器可以显着缩短开发周期。
一般的:
●优秀的程序游戏引擎可以提供高设备兼容性和稳定的性能;
●跨平台程序游戏引擎可以让开发者同时发布HTML5程序游戏、微信小程序游戏和原生程序游戏。
高效的程序游戏编辑器可以降低开发成本和维护成本。对于程序游戏开发商而言,这些因素可能是盈利的关键。
4.开始搭建调试小程序游戏!
Step 1. 获取微信开发者工具
微信小程序开发者工具提供了编写、调试和运行小程序游戏的框架。在微信开发者网站这里下载。
首次运行开发者工具时,系统会要求您使用微信帐号登录。然后您将看到用于创建您的第一个项目的表单。
点击:“体验”右侧的“小程序游戏”(尝试:小程序游戏)
并为源代码选择一个位置项目目录,然后将您的项目命名为项目名称。
●页面顶部是工具栏。它可以配置、编译、预览和部署程序游戏。
●左边是模拟器。程序游戏随着代码的变化而运行和更新。
●右上角是代码编辑器。
●编辑器的左侧是文件菜单。它列出了项目文件。
●右下方是调试器。它的功能类似于Chrome开发者工具!
Step 2. 微信小程序游戏配置及文件导入
在微信小程序游戏工程中,添加配置文件project.config.json和game.json。
●project.config.json定义您的程序游戏 AppID、名称、版本、IDE 设置和运行时配置。
●game.json提供应用程序和代码的内部配置,例如设备方向和网络超时。这个类似于微信小程序中的app.json文件!
由于小程序游戏不支持 HTML 文件,入口在game.js中。您可以通过使用 require 函数将程序游戏引擎和程序游戏脚本引入game.js文件来启动程序游戏。注意: require函数的使用遵循Node.js的规范!
步骤 3. 编译、测试和提交
微信开发工具会监控脚本和配置的变化,实时更新程序游戏。您也可以点击页面顶部的编译按钮手动重新编译。当您需要在智能手机上预览程序游戏和测试时,您可以点击预览按钮生成二维码并扫描以玩程序游戏!
生成二维码的过程其实就是压缩一个小包上传到微信CDN,所以需要一定的时间。
如果微信小程序游戏遵循与小程序相同的分发规则,那么微信可能会在小程序游戏提交后对其进行审核——然后才能公开发布。也会有关于如何像小程序一样发现或分享小程序游戏的规则。

【报Bug】云对象用url化时,提示:未能获取当前用户信息:当前用户为匿名身份
【报Bug】云对象用url化时,提示:未能获取当前用户信息:当前用户为匿名身份
【报Bug】云对象用url化时,提示:未能获取当前用户信息:当前用户为匿名身份

使用TinyPNG, 在HBuilderX编辑器内压缩图片
TinyPNG 无损压缩
- 仅支持png jpg webp格式的图片
- 项目管理器,支持选择一张、多张图片进行压缩
- 项目管理器,支持压缩目录下所有图片
- 支持压缩网络地址图片,需要提供图片url
- 支持压缩编辑器光标选中的内容
- 支持在HBuilderX 选择本地目录进行压缩
顶部菜单
HBuilderX 顶部菜单【工具 - TinyPNG】,可以查看到TingPNG操作相关的菜单。
项目管理器压缩图片
项目管理器,选中一张或多个png或jpg图片,右键菜单点击【TinyPNG:压缩】
压缩网络地址图片
菜单【工具】【TinyPNG: 压缩】,可以压缩网络地址图片
压缩编辑器光标选中的内容
TinyPNG 插件配置
插件下载成功后,在HBuilderX中,点击菜单【设置】【插件配置】,如下图,填写key等信息
配置快捷键
点击菜单【工具】【自定义快捷键】,输入如下内容, 其中key
可自定义。
{
"key":"ctrl+alt+c",
"command": "extension.tinypngCompress"
}
TinyPNG 无损压缩
- 仅支持png jpg webp格式的图片
- 项目管理器,支持选择一张、多张图片进行压缩
- 项目管理器,支持压缩目录下所有图片
- 支持压缩网络地址图片,需要提供图片url
- 支持压缩编辑器光标选中的内容
- 支持在HBuilderX 选择本地目录进行压缩
顶部菜单
HBuilderX 顶部菜单【工具 - TinyPNG】,可以查看到TingPNG操作相关的菜单。
项目管理器压缩图片
项目管理器,选中一张或多个png或jpg图片,右键菜单点击【TinyPNG:压缩】
压缩网络地址图片
菜单【工具】【TinyPNG: 压缩】,可以压缩网络地址图片
压缩编辑器光标选中的内容
TinyPNG 插件配置
插件下载成功后,在HBuilderX中,点击菜单【设置】【插件配置】,如下图,填写key等信息
配置快捷键
点击菜单【工具】【自定义快捷键】,输入如下内容, 其中key
可自定义。
{
"key":"ctrl+alt+c",
"command": "extension.tinypngCompress"
}
收起阅读 »

uniapp使用request报错
- 使用的是域名,本地配置的
- 运行到内置浏览器没问题
- 使用安卓模拟器(雷电模拟器)报错,各种试错,发现是模拟器无法访问电脑上的服务,准确的说是无法通过本地配置的域名访问。
- 解决办法是:本地服务配置个端口,比如8080,模拟器通过ip+端口访问。我的访问地址是:http://192.168.1.12:8080。
- 使用的是域名,本地配置的
- 运行到内置浏览器没问题
- 使用安卓模拟器(雷电模拟器)报错,各种试错,发现是模拟器无法访问电脑上的服务,准确的说是无法通过本地配置的域名访问。
- 解决办法是:本地服务配置个端口,比如8080,模拟器通过ip+端口访问。我的访问地址是:http://192.168.1.12:8080。

uni.chooseLocation 安卓端 无法显示地址列表?
高德官方申请Android服务平台时,提示填写SHA1值,填写之后发现还是不生效?
这里有个巨坑,如果你真的去填写SHA1值,你会发现地址列表还是不会展示,需要将SHA1换成你证书的 MD5 值。
查看证书信息:
keytool -list -v -keystore 你的证书名称.keystore
高德官方申请Android服务平台时,提示填写SHA1值,填写之后发现还是不生效?
这里有个巨坑,如果你真的去填写SHA1值,你会发现地址列表还是不会展示,需要将SHA1换成你证书的 MD5 值。
查看证书信息:
keytool -list -v -keystore 你的证书名称.keystore

mui的PopPicker和DtPickeri组件在IOS16.2 后选项会偏移的问题
在苹果更新ios16.2后,很多用户反馈 picker选择不到对应的选项,经查找,发现是和执行的一段动画代码有关,可以修改 mui.picker.all.js 把这段css动画的代码去掉
修改前的mui.picker.all.js 代码
if (isIos) {
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
修改后的mui.picker.all.js 代码 根据评论区的提示 又加了判断
if (isIos) {
if (mui.os.ios && mui.os.plus && plus.os.version >= "16.2") {
return;
}
var maches = userAgent.match(/iphone os ([\d_]+) /i);
if (maches && maches.length >= 2 && maches[1] >= "16_2"){
return;
}
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
mui.picker.all.js 修改后 使用 uglifyjs 压缩为 mui.picker.min.js 然后在项目中使用可以解决
1.安装 uglifyjs
npm install uglify-js -g
2.压缩修改后的 mui.picker,all.js
uglifyjs mui.picker.all.js -m -c -o mui.picker.min.js
附件为修改后的 mui.picker.all.js 和 mui.picker.min.js
在苹果更新ios16.2后,很多用户反馈 picker选择不到对应的选项,经查找,发现是和执行的一段动画代码有关,可以修改 mui.picker.all.js 把这段css动画的代码去掉
修改前的mui.picker.all.js 代码
if (isIos) {
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
修改后的mui.picker.all.js 代码 根据评论区的提示 又加了判断
if (isIos) {
if (mui.os.ios && mui.os.plus && plus.os.version >= "16.2") {
return;
}
var maches = userAgent.match(/iphone os ([\d_]+) /i);
if (maches && maches.length >= 2 && maches[1] >= "16_2"){
return;
}
self.list.style.webkitTransformOrigin = "center center " + self.r + "px";
}
mui.picker.all.js 修改后 使用 uglifyjs 压缩为 mui.picker.min.js 然后在项目中使用可以解决
1.安装 uglifyjs
npm install uglify-js -g
2.压缩修改后的 mui.picker,all.js
uglifyjs mui.picker.all.js -m -c -o mui.picker.min.js
附件为修改后的 mui.picker.all.js 和 mui.picker.min.js
收起阅读 »
uniCloud阿里云云存储响应头调整
由于部分服务空间云存储存在违规内容,阿里云接到整改需求需要对云存储默认域名增加"Content-Dispotion":"Attachment"响应头。后续会支持配置自定义云存储域名,使用自定义云存储域名访问云存储文件时无此响应头,自定义域名上线时间会另行通知。
此调整不影响页面内使用云存储的image、video、pdf等文件的内容,使用标签加载文件、使用request或downloadFile下载文件均不受影响。仅影响浏览器直接打开云存储文件链接,此时不会直接在页面展示而是会触发文件下载。
可以在浏览器打开如下两个链接体验差异
- 无content-disposition响应头:http://httpbin.org/response-headers
- 响应头content-disposition为attachment:http://httpbin.org/response-headers?content-disposition=attachment
此调整自2023年3月21日起对新创建的服务空间生效,云存储自定义域名上线后会对所有存量服务空间生效。
由于部分服务空间云存储存在违规内容,阿里云接到整改需求需要对云存储默认域名增加"Content-Dispotion":"Attachment"响应头。后续会支持配置自定义云存储域名,使用自定义云存储域名访问云存储文件时无此响应头,自定义域名上线时间会另行通知。
此调整不影响页面内使用云存储的image、video、pdf等文件的内容,使用标签加载文件、使用request或downloadFile下载文件均不受影响。仅影响浏览器直接打开云存储文件链接,此时不会直接在页面展示而是会触发文件下载。
可以在浏览器打开如下两个链接体验差异
- 无content-disposition响应头:http://httpbin.org/response-headers
- 响应头content-disposition为attachment:http://httpbin.org/response-headers?content-disposition=attachment
此调整自2023年3月21日起对新创建的服务空间生效,云存储自定义域名上线后会对所有存量服务空间生效。
收起阅读 »
Uniapp 5+app 安卓端导入excel数据
导入excel数据为json数据
/**
* Read/Write data to a file using Plus.io API
* @param {string} filename Name of the file
* @param {string} data Data to be written (only applicable for write operation)
* @param {string} type Operation type (1: read, 2: write)
* @returns {Promise} Promise that resolves with file data (only applicable for read operation) or empty string (for write operation)
*/
function fileOperation(filename, data, type) {
return new Promise((resolve, reject) => {
plus.io.requestFileSystem(
plus.io.PUBLIC_DOCUMENTS,
(fs) => {
fs.root.getFile(
filename, {
create: type === '2'
},
(fileEntry) => {
if (type === '1') {
fileEntry.file(
(file) => {
const reader = new plus.io.FileReader()
reader.onloadend = (evt) => {
resolve(evt.target.result)
}
reader.readAsText(file)
},
(error) => reject(error)
)
} else {
fileEntry.createWriter(
(writer) => {
writer.onwrite = () => {
resolve('')
}
writer.write(data)
},
(error) => reject(error)
)
}
},
(error) => reject(error)
)
},
(error) => reject(error)
)
})
}
importData() {
let resArr = [];
fileOperation('data.xlsx', '', '1').then(data => {
console.log(data);
tab = data.substring(data.indexOf('<table>') + 7, data.indexOf(
'</table></body>'))
tab = tab.replaceAll(
'<tr><td>地址</td><td>项目名称</td><td>其他</td><td>费用</td><td>电话号码 </td><td>录入时间</td><td>编号</td></tr>',
'')
console.log(tab)
let doc = document.createElement('table')
doc.innerHTML = tab
console.log(doc);
// 获取所有tr
let trArr = doc.querySelectorAll('tr');
for (let i = 0; i < trArr.length; i++) {
let tdArr = trArr[i].querySelectorAll('td');
resArr.push({
"address": tdArr[0].innerHTML,
"project": tdArr[1].innerHTML,
"other": tdArr[2].innerHTML,
"money": tdArr[3].innerHTML,
"phone": tdArr[4].innerHTML,
"created_at": tdArr[5].innerHTML,
"id": tdArr[6].innerHTML,
"index": i
});
}
console.log(JSON.stringify(resArr));
}).catch(error => console.log(error))
},
导入excel数据为json数据
/**
* Read/Write data to a file using Plus.io API
* @param {string} filename Name of the file
* @param {string} data Data to be written (only applicable for write operation)
* @param {string} type Operation type (1: read, 2: write)
* @returns {Promise} Promise that resolves with file data (only applicable for read operation) or empty string (for write operation)
*/
function fileOperation(filename, data, type) {
return new Promise((resolve, reject) => {
plus.io.requestFileSystem(
plus.io.PUBLIC_DOCUMENTS,
(fs) => {
fs.root.getFile(
filename, {
create: type === '2'
},
(fileEntry) => {
if (type === '1') {
fileEntry.file(
(file) => {
const reader = new plus.io.FileReader()
reader.onloadend = (evt) => {
resolve(evt.target.result)
}
reader.readAsText(file)
},
(error) => reject(error)
)
} else {
fileEntry.createWriter(
(writer) => {
writer.onwrite = () => {
resolve('')
}
writer.write(data)
},
(error) => reject(error)
)
}
},
(error) => reject(error)
)
},
(error) => reject(error)
)
})
}
importData() {
let resArr = [];
fileOperation('data.xlsx', '', '1').then(data => {
console.log(data);
tab = data.substring(data.indexOf('<table>') + 7, data.indexOf(
'</table></body>'))
tab = tab.replaceAll(
'<tr><td>地址</td><td>项目名称</td><td>其他</td><td>费用</td><td>电话号码 </td><td>录入时间</td><td>编号</td></tr>',
'')
console.log(tab)
let doc = document.createElement('table')
doc.innerHTML = tab
console.log(doc);
// 获取所有tr
let trArr = doc.querySelectorAll('tr');
for (let i = 0; i < trArr.length; i++) {
let tdArr = trArr[i].querySelectorAll('td');
resArr.push({
"address": tdArr[0].innerHTML,
"project": tdArr[1].innerHTML,
"other": tdArr[2].innerHTML,
"money": tdArr[3].innerHTML,
"phone": tdArr[4].innerHTML,
"created_at": tdArr[5].innerHTML,
"id": tdArr[6].innerHTML,
"index": i
});
}
console.log(JSON.stringify(resArr));
}).catch(error => console.log(error))
},
收起阅读 »