流式数据接口，pc端正常返回；小程序内设置按文档 enableChunked为true, 用RequestTask.onChunkReceived 基本6秒返回一段，且段之间数据会有截断的；急，请问这种的接口pc端正常，小程序段访问数据异常的，要这么做？流式数据RequestTask 后台接口、前端部分要注意哪些？这么定位这个问题呢？

[图片] 只 上传身份证图片，没有涉及人脸识别；也需要开通人脸识别吗？ 1: 你好，小程序存在采集用户隐私信息，且进行人脸核验的功能，因主体或类目未符合微信原生人脸核验接口开放范围，建议更换使用开放范围内主体或类目后申请使用微信原生人脸识别接口，再提交代码审核

又有些不想干了......但又怕拖延太久自己都看不懂最初设计方案了——可真有闲心！ 接着之前的话题扯（就是《古惑仔江湖岁月》小游戏设计思路），由于属于随心设计，我也不清楚先从那里说起，就从开始做时来吧。 [图片][图片] 一直打算做个类似‘大富翁’式投骰子行路的回合制小游戏，但又不想全盘“抄袭”里面的模式，倒是‘富甲天下’给了我启发——即多角色对手间除了占地、建造、收费外，添加战斗对抗内容，于是想到‘古惑仔’这种黑社会间竞争的现代剧情，不过由于涉及到单挑角色的多样化，使得游戏中的NPC人物骤然大增（本作中共有38位，分属于5个帮派及闲散人员）。 [图片][图片] 别小看这38人，光是每个人物的四种基本表情就得凑一百多个贴图，虽然只有4个活动主角具备场景行走动态造型，但这些人各自属性还是要有明显区分的，总的来说：他们要在游戏中表现出明显的差别。 [图片] 这就有些难了...原计划每个角色除了各自头像表情、4属性、归属倾向（对于帮派而言），还应该有各自对话风格的不同。 可惜！限于篇幅（容量）只好忍痛砍掉，只采取一组对话风格模式，包括收过路费、战斗挑衅、使用必杀技、优势奚落对手、劣势‘喷人’、胜利失败方面‘感言’等类型... 不过虽然都是用同一组对话，但每种类型各设5条对话文本随机抽取，尽量使每次事件不那么千篇一律的单调。 [图片][图片] 关于占地、收费...这都是“基操”大家也一清二楚，但是“建造”上却有了明显的不同，同时衍生了对抗模式，下面分别单独描述。 占地 在城市场景地形上由许多分布的“移动格”构成行动路线，移动格分公有地形与私有地形，公有地形分别为“医院”“监狱”“黑市”及“码头”，这些不能被帮派势力占据； 私有地形最初是空地，当角色（帮派势力话事人）走到该处即占据该地盘，同时该处显示本帮派代表颜色、并于每回合后收取少量金钱，若期间别的势力角色停留该处则立刻易主。 建造 再次停留到本帮派占据的空地时，出现建造附属设施的两种选项分支，分别为“酒店类”和“赌场类”，其中酒店类是按固定价格向其他停留帮派收取费用； 赌场类则是按停留对手的资金比例来收取。 每种类型可分别提升5级，效果也随之发生巨变，比如：顶级酒店会收取5000、顶级赌场则收取对手20%~25%的资金，前者会将‘囊中羞涩’的老大逼上‘绝路’、后者则专门‘狠宰’那些‘财大气粗’的神‘壕’。 [图片][图片] 收费就是每个对抗事件的导火索，想要拒绝缴费那就要看拳头大小了——除了使用道具‘空头支票’的逃费欺诈外，可以选择两种战斗模式：单挑 与 混战，而作为地主势力方可选择迎战或避战。 [图片] 单挑——由双方各派出两个帮派成员，一个参战主力、一个助阵副手进行格斗，最终主力逃走或倒下的那方为败者； 混战——（也就是踢场子）依旧由双方各派出两个帮派成员，监督各方的5名帮众小弟混战在一起，最终剩余小弟最多那方为胜者。 关于挑战产生的后果如下： 挑战胜利——单挑时不但不交过路费还要反收地主方同价格的“保护费”；混战则是将当前地盘附属设施砸烂一层（等级下降），如果只是初级建筑则夷为平地（之后再有其他势力停留会造成地盘易主）挑战失败——惩罚性双倍缴纳过路费。挑战平局——单挑时有40秒倒计时间内未分胜负，由挑战方支付一半过路费； 混战时亦如此，但该地附属建筑完好无损。[图片] 这里还有几种衍生的特例事件： 地主势力方避战——不接单挑要付一半收费价格做“保护费”呈给挑战方、不接混战时此地附属建筑照砸不误；单挑KO事件——作为地主方参战主力被KO是要双倍缴纳“保护费”的、而被KO的成员将被医院收治（等于伤亡损失）、其人物若有装备物品则“掉落”为胜方势力的战利品；挑战方失败且无力支付过路费，从本方成员中随机抽取一人“投案自首”关进‘罗湖监狱’，若其持有装备则被警方没收送至“黑市”售卖（过份了！有点），若本方只有话事人老哥一个派不出“替罪羊”时......帮派倒闭领了‘盒饭’！顺便介绍下之前提到的公有地形： 医院 这里初始时有个闲人老头在疗养中，这位智力属性超群，建议停留此处并有闲钱时给“办理出院手续”领走...... 帮派对抗单挑被KO者也可在这里交钱领出来，但是之前提到过“归属倾向”这一说，具体讲就是本帮派的成员可以原本价领走、其他帮派的要双倍才行。监狱 这里初始有个皮糙肉厚的“傻子”在坐牢中，钱太多的话不妨替他缴纳保释金领走，帮派因战败且不够过路费被“抓走”的人亦如此，花费方面与医院规则无二。黑市 这里有若干消耗道具出售，停留时可酌情采购，有时被收监的某势力成员刚好带着永久装备则会出现于此，毋庸置疑——这是机会！ 售罄后的消耗道具会在每半月（15回合后）江湖风云榜后，补充并上架。码头 这是招徕帮众小弟打手的地方，因不限量所以无需“补货”[图片] 除此之外，在某些移动路线会经历乘船渡海情景，此时随机触发“解救”或天气异常而增加或损失帮众小弟的事件。 [图片] 当满足了“当前场景竞争势力只剩自身”或“隐藏恶势力地盘被清空、而自身为活动势利最强者”时，触发终极帮派对决战斗直至结束，该游戏设计思路方才完整。 这些都是随着设计制作过程中，随时想到并补充完善的，很没有全局大纲的理念——典型的闭门造车坏习惯！然而也就这样了......“土气”的不入流！ 下一篇讲一讲城市地形的搭建、移动格路线逻辑与角色行走变向设计（如果还能提起兴致） [图片]

嗨！大家好，我是小蚂蚁。 继三消和点消之后，我们来继续了解下一种连线消除游戏的原理和实现。连线消除和之前的两种有着很大的不同，因为它不需要自动的查找算法，连线的整个过程都是由玩家自主手动完成的。 [图片] 如图，连线消除游戏的规则是这样的：从玩家按住第一个图标开始，可以沿着水平，竖直，斜方向划线，如果划到的另一个图标跟之前的图标是一样的，就连起来，可以一直连直到再没有相同的图标为止。此时玩家松手，如果连成线的图标数量大于等于三个，则这些图标就能够被消除。 在连线消除游戏中，重点有两个，一个是判断下一个划到的图标跟之前的图标是否相同，是否应纳入匹配队列，另一个是如何将这些相同的图标用线连起来。 先理论老规矩，我们还是先看理论部分，先来解决第一个问题，如何判断下一个划到的图标跟之前的图标是否相同。 [图片] 如图，中间的 6 个绿色的三角形图标是相同的，可以用一条线把它连起来。但是我们怎么才能让计算机知道它们 6 个是一样的呢？如果之前有好好学习的话，那你应该立即反应过来，数据抽象呀！ [图片] 如图，每个图标都对应一个数字，我们就可以把当前的整个游戏抽象成一个包含数字的表格，判断两个图标是否一样，其实就变成了判断两个数字是否相等。 至于如何能知道玩家当前按住了哪个图标呢？网格布局呀！至于如何知道玩家手指当前划到了哪个图标呢？还是网格布局呀！不清楚的话赶紧去【这里】补补课。 再来解决第二个问题，如何将相同的图标用一条线连接起来。 [图片] 把所有相同的图标连成一条长线，其实就是在每两个相邻的图标之间连一条短线，如图，一共是 6 个相同的图标，那么共需要 5 条短线来把它们全部连接起来。 在玩家操作的过程中，我们可以将相同图标的位置存储到一个匹配列表中，连线的时候，只需要从匹配列表中依次的取出两个相邻图标的位置，然后在这两个位置之间创建一条直线即可。 至于如何消除，消除后上方的图标如何下落，系列课里之前都有讲过，不会的同学可以去前面补课，这里就不再重复讲了。 以上就是理论部分了，相比三消和点消，连线消除真的简单很多。 再实践接下来，我们就来看一下连线消除游戏在微信小游戏制作工具中的实现吧！ 首先，来看一下对于玩家操作处理的积木逻辑。 玩家手指按下： [图片] 玩家手指滑动： [图片] 玩家手指抬起： [图片] 其中有一个地方可能有的同学不太理解，就是为什么要把行列号换算成索引，有的时候又要把索引换算成行列号呢？因为换算成索引可以让我们只需要使用一个列表就可以存储一个图标位置。我们都知道行列号是一个图标的唯一标识，如果我们存储行列号的话，一个行号一个列号就得使用表格的形式，或者使用两个列表。现在我们把它换算成索引，只需要使用一个列表就够了。之前的课程中我们讲过，行列号和索引是等价的，是可以互推的，所以为了存储方便，我们就转换成索引，为了计算方便，我们就转换成行列号。 接着再来看一下图标上的匹配判断。 [图片] 匹配判断很简单，整个过程是这样的：每当玩家的手指滑动到一个相邻的图标上时，就给所有的图标发送一次匹配通知，每个图标都会判断当前是否划到了自己身上，并且判断自己是否跟之前连接的图标类型相同，当同时满足这两个条件时，就把这个图标加入到匹配列表中。 以上的这些是如何找到相同的图标，并且把它们的索引记录到一个匹配元素列表中。有了这个列表，就相当于我们有了每个图标的行列位置，接下来就是依次的取出两个图标，然后用一条线将它们连接起来了。 [图片] 如图，是连接线的积木逻辑，注释已经写的很清楚了。这里我们重点来看一下其中的获取两个点位置的函数，这个函数的作用是利用两个图标的索引，计算出这两个图标在屏幕上的坐标位置（x,y）。 [图片] 这个函数的积木逻辑主要进行计算处理，先利用图标的索引计算出图标的行号和列号，然后再根据行列号计算出图标在屏幕上的位置坐标 (x,y），并存储在返回列表中，这里我们利用了一个局部的列表变量来存储函数计算的值，用于在后续创建连线的时候使用。 最后，我们再来看一下如何根据两个点的坐标位置，设置一条连接线。 [图片] 都是一些简单的数学计算，这里就不再赘述了。 连线消除的教程到此就结束了，至此，我已经写完了三消，点消，连线消的所有教程，这个坑总算是填完了，终于可以长长的舒一口气了。 消除游戏至今仍然是一个很大的品类，受众很广泛，对于个人游戏开发者来讲依然是个不错的选择。希望这些系列教程能够帮助你了解各种各样的消除游戏，如果觉得教程不错，不要忘了点赞转发，也算是对我辛勤创作的一点儿鼓励了，哈哈！ --- 自己学习没氛围学不下去？遇到问题无人解答？缺少经验不知该如何前行？......欢迎加入小蚂蚁的游戏开发课，不只是一门课，而是围绕着新手学习做游戏有关的一整套服务。从入门到进阶一套服务全部搞定，欢迎来跟一百多位同学一起学习做游戏。【点击这里】可了解课程服务详情。 欢迎关注我的微信公众号【小蚂蚁教你做游戏】，学习更多游戏开发原创教程。 [图片] 也欢迎加小蚂蚁微信(xiaomayi6669)，交个朋友，不闲聊，只接受付费咨询，望见谅。 [图片] 这里是小蚂蚁的小游戏系列，闲暇之余希望能给你带来片刻的放松和愉悦。无需下载安装，微信扫码可以直接玩啦！ [图片] [图片] [图片] [图片] [图片] [图片] [图片]

我们来看一个非常简单的游戏，FlappyBird。 [图片] 一个当年非常火的游戏，光凭Banner广告就赚了几百万美元。 玩法很简单，这里有一个复刻版 [图片] 就是一个小鸟用手指点屏幕控制，穿过一些柱子。 [图片] 我们整理下游戏逻辑： 1. 整个场景仅有，背景，小鸟，柱子，分数。其中背景是循环滚动。 2. 小鸟通过点击屏幕可以向上飞，不点击会自由落体。 3. 柱子的间隔和开口都是随机的，以恒定速度向左运动。 4. 每当小鸟通过柱子，会增加分数，且会播放声音。 5. 小鸟飞出屏幕或者撞到柱子则游戏结束。 相当简单，我们来看看如何用小游戏开发工具来实现。完整的项目在这里，已经开源。地址为 https://gamemaker.weixin.qq.com/#/game?game_id=lbODIzZGRjYjAtYjcxNC00MzQwLWE4MzktYmVhM2YyNzAzM2M5 [图片] 背景 素材大家可以去直接搜索，也有专门的素材网站，我这里的背景是直接百度搜索的。大家也可以换成自己喜欢的背景，注意最好是可以循环的。 [图片] 然后需要让这个背景动起来。在层级管理面板直接选中背景 [图片] 在右边的图层面板里面，点 编辑背景-》从素材库添加，上传这张背景图，背景就换过来了。再点下管理行为，添加 循环滚动 插件。通过自动移动可以让背景滚动，但为了有更好的可控制性，我们用代码来实现。 [图片] 选中背景，添加事件，当场景启动时。 [图片] 180度就是向左移动。 通知是一种可以在不同的精灵之间通讯的一种机制，一般游戏都会有 开始，结束，这是一个全局事件，比如很多游戏都会有一个Start按钮，当用户点击这个按钮的时候，很多逻辑才会开始工作。这里先不做Start的逻辑，但还是先发一个事件。 然后是不停的执行移动。效果就是这样的 [图片] 小鸟 接下来我们需要找到一只合适的鸟。我在这里找到了一只鸟。一些游戏素材，一个动画并不是一个GIF，而是一堆序列帧，按一定规律命名的一堆文件。现在我们的工具还不能支持直接上传GIF，但支持序列帧，上传以后会生成一个动图。 [图片] 小鸟需要有两个逻辑，一个是点击屏幕需要向上飞，一个是不操作的时候会往下掉。这里用物理引擎做最简单，看代码。 [图片] 就这么简单，当然你需要在小鸟的属性面板里面先添加“物理”的行为。 点击的这句话，意思是当手指点击屏幕的时候，给这个小鸟一个向上的力。 下面这个逻辑的意思是设置一个默认的重力，大家可以随意修改这里的数值，会有不一样的效果。 柱子 接下来到另一个关键逻辑，柱子。 这种横版的游戏一般就两种方式，一种是场景有长度的，每个地方都是手动摆放的，比如超级玛丽。另一种就是角色没有动，其实是柱子在动。在这个游戏里面，其实就是柱子在动的，因为柱子的速度和背景一样，看起来是鸟在动。 我在这里找到了柱子，导入以后，实际上的场景是这样的： [图片] 其中有点小技巧。这个柱子不是绿色的，我使用了颜色叠加的效果，让柱子变成了绿色，上下两个柱子是因为其中一个使用了镜像。 [图片] 柱子还有一个逻辑，就是两个柱子的开口位置是不确定的，随机的。但两个柱子的开口大小是固定的，所以这里又有一个小技巧。我把两个柱子变成了一个Group，这里称为容器，选中两个柱子，点右键，就可以组成一个容器。我只需要调整这个容器的Y 坐标就可以了。看代码 [图片] 我们先看最后一个事件，当收到一个 start 的通知的时候。就把这两个管子不断向左运动。而且这个速度比背景大一倍，看起来就会有一个视差的效果。 中间的逻辑是，如果发现自己 X 坐标小于-500，也就是跑出了屏幕的左边，则发一个reset_pip的通知。这里完整的逻辑是，屏幕里面仅会出现一对柱子，每次从右往左移动，离开屏幕以后重新设置自己的Y坐标，这样看起来就是无限且随机高度的柱子了。当收到 reset_pip 通知的时候，这里使用了一个函数。函数在积木面板里面可以新建，创建好以后在资源管理器里面。 [图片] 我们看以下函数的具体内容 [图片] 首先把自己的X坐标放到500，也就是放屏幕的右边。然后把Y坐标设置到 [-350, 350] 之间。就可以实现随机高度的柱子了。 我们现在来运行下，看看效果。 [图片] 分数 游戏肯定需要分数，我们在素材库里面的数字分类下，可以找到一些可用的数字类型。 [图片] 数字的逻辑比较简单，就是当小鸟越过柱子的时候，分数加1。我们来看看逻辑 [图片] 先看下面，当小鸟的X坐标，大于了容器（柱子）的X坐标，即小鸟飞过了柱子。则把score增加1。注意这里新增了两个变量一个是小鸟自己的私有变量fly_over，一个是全局变量score。 全局变量比较好理解，就是用来计数的，然后设置给文字。这个私有变量fly_over其实是限制这个逻辑仅执行一次的。因为这种判断条件型的事件，是每次都执行的，当小鸟飞过柱子的以后，小鸟的 X 就会一直大于柱子的 X，这个事件会一直触发，但我们只需要这个逻辑执行一次，所以使用一个变量，防止重复执行。然后看第一个事件，当收到 reset_pip 的通知的时候，需要把fly_over重新设置为0，否则第二个柱子就不会继续执行这个逻辑了。我们来看下效果 [图片] 到这里，Flappy Bird的基本逻辑就已经完成了。如果要更好的手感，可能需要更细致的逻辑和参数调整。欢迎大家在此基础上进行改编和再创作。 小程序可视化工具地址：https://gamemaker.weixin.qq.com/

嗨！大家好，我是小蚂蚁。从今天开始，我将连续使用几篇文章分享一下如何制作一个微信答题小程序。使用的工具是微信小游戏制作工具，听起来这是一个做微信小游戏的工具，但是除了做游戏之外，我们还可以用它来做小程序。 这个将要制作的答题小程序包含如下的功能： 可编辑的题库，包含单选题库和多选题库。答题开始前可进行自定义设置，例如单选题数量，多选题数量以及答题时间。每次答题的题目会从不同的题库中随机的抽取，由这些随机抽取的题目组成一次答题过程。所有题目回答完毕后，可提交查看统计结果。可回看此次答题过程中的所有题目以及答题情况。今天我们就从题库表格的设计开始，分享一下如何设计一个答题小程序的表格，以及如何从题库中随机的抽取指定数量的题目。 单选题库表格设计 对于一个答题小程序来讲，最合适当作题库的数据形式当然要属表格了。表格适合用于数据的组织和管理，对于单选题库来讲，我们使用如下的数据表格。 [图片] 第 1 列是题目，第 2～5 列是题目的 4 个选项，第 6 列是当前题目的答案。在这样的一个表格中，我们只需要获取任意的一行数据，就能够获取到一道题目的完整信息，包括题目，选项和答案。 在微信小游戏制作工具中，我们可以点击数据区中的“新建表格”按钮，创建一个这样包含 6 列的表格。 [图片] 这里有一点儿需要注意了，就是表格的第 1 行，我们这里是把它当作表头了，这样方便我们在编辑题库时，知道哪一列对应的是什么。所以，真正的题目是从表格的第 2 行开始的。 多选题库表格设计 跟单选题库的表格设计类似，多选题库表格多了 2 列，也就是多了 2 个题目选项。 [图片] 这里我们为多选的题目预制了 6 个题目选项，在真实的题目中可能会出现这样的情况，例如一道多选题，只有 ABCD 四个选项，那么多余的这两个选项如何处理呢？ 这里我们可以设置一个约定：如果当前列没有选项的话，就在当前的位置填写一个 0。这样在我们读取题目信息进行展示时，如果遇到一个选项是 0，就不显示该选项。 再次点击数据区的新建表格按钮，创建一个包含 8 列的多选题库表格。 [图片] 对于一个答题小程序或者小游戏来讲，表格设计好了，基本上就完成了一半了。我们回看一下上方的这两个简单的表格，利用表格的行和列，非常方便的就能够将每一道题（一行）和每一道题目中的所有信息（一列）区分出来。我们根据行来获取题目，然后根据列来获取题目中的具体信息（题目，选项，答案）。 从题库中随机抽取指定数量的题目 题库表格设计好了之后，接下来要做的就是将表格中的数据取出，然后在小程序中以合适的方式展现出来。一个题库中通常会包含很多道题目，我们通常不会在一次答题过程中将题库中的所有题目都做一遍，而是从中取出一些题目进行作答。随机抽取题目是一种非常好的方式，每次都从题库中随机抽取出一定数量的题目，这样每次答题过程中既能遇到一些旧的题目作为巩固，也能够遇到一些新的题目作为新知。 在进行题目抽取之前，需要先了解一个概念，叫做题目编号。这个题目编号就相当于为每一道题目设置一个标志，这个标志是唯一的，也就是说题目编号和题目是一一对应的，只要有了题目编号，就能够找到那道唯一的题目。 那么题目编号在哪里呢？ [图片] 题目编号其实就是题库表格中对应的题目的行号，看一下，这个行号跟题目是不是一一对应的关系呢？比如说当前获取了题目编号 7，根据这个行号，我就能拿到对应“谁会教你做游戏呀？”的题目了。 有了题目编号这个概念了，我们再来看一下随机从题库表格中抽取题目这个操作，有必要直接将题目的整行信息都抽取出来吗？没有必要，我们只需要随机抽取到指定数量的题目编号就好了，然后在答题时根据当前的题目编号读取到题目的具体信息来显示。 接下来这个问题就变的简单了，随机抽取指定数量的题目，其实就是在指定的数值区间内抽取指定数量的不重复的数字。例如，我们当前的题库中有 100 道题，编号从 2～101，随机抽取 10 道题，其实要做的就是从 2～101 这 100 个整数中随机的取出 10 个不重复的整数。 接下来，我们就实现一下这个在指定区间内随机抽取不重复的整数的功能，实现这个功能，需要借助列表。 首先，创建一个“随机选题列表”，这个列表用于存放随机抽取的题目编号。之后答题的时候，我们从这个列表中挨个取出题目编号，显示对应的题目即可。 [图片] 然后，创建一个“随机数”的局部变量，用于记录当前的随机数。 [图片] 最后，看一下具体的积木逻辑。 [图片] 这里需要注意的一个地方是在题库表格中，题目是从第 2 行开始的，所以这里随机数的范围也是从 2 开始的。我们利用一个“随机选题列表”来对当前的随机数进行过滤，如果已经在列表中了，就重新进行随机，只有不在列表中的随机数才能够插入到列表中，这样就实现了获取不重复的随机数的功能了。 总结一下，这一节我们设计并创建了两种不同的题库表格，并且实现了从题库中抽取指定数量的不重复的题目编号的功能。下一节我们将利用这些随机抽取到的题目编号，获取题目的信息，然后以合适的方式展示出来。 这个周，我会在视频号直播制作这个答题小程序的全过程，欢迎关注下方的视频号来看直播。 [图片] --- 我是会做游戏也会教你做游戏的小蚂蚁，想学习做游戏的话，关注我的公众号【小蚂蚁教你做游戏】就对啦！ [图片] 也欢迎加小蚂蚁微信(XMY-XiaoMaYi)，交个朋友。 [图片] 这是我做的精致系列的2个小游戏，欢迎试玩。 [图片]

今天是 6.1 儿童节，在此祝大小朋友们节日快乐！！！并献上社区十多位开发者的知识大礼包！ 还记得我们在今年4月时推出的 《Creator H5全平台游戏开发教程 PDF 免费下载（800+页）》吗？ [图片] image 当时晓衡就计划好了，每隔一段时间，会将公众号的上的干货精华进行整理，方便大家搜索查阅。2020 年上半年的 PDF 也逐渐有了雏形，感谢：Jare、白玉无冰、异名、李逍遥、陈皮皮、KUOKUO、肖尧、大大大火球、IT老兵哥、13yd、zilone，也感谢我自己！ 0. 开发者自己的故事见证开发者的成长历程，向他们致敬Jare | 讲述开发者自己的故事— 引擎大神白玉无冰| 讲述开发者自己的故事—转攻难点异名 | 讲述开发者自己的故事—原创沉淀肖尧 | 讲述开发者自己的故事—物理专攻李逍遥 | 讲述开发者自己的故事—武士青年陈皮皮 | 讲述开发者自己的故事—骨瘦如柴1. Creator零基础视频教程序：Creator零基础视频教程，为抗疫尽一份力量！1-1 游戏引擎编辑器-介绍1-2 游戏引擎编辑器-核心面板2-1 内置组件介绍-组件分类与创建2-2 内置组件介绍-精灵Sprite2-3 内置组件介绍-文字标签Label2-4 内置组件介绍-按钮Button3-1 节点与组件-节点的能力3-2 节点与组件-组件为节点赋予能4-1 游戏场景的创建与编辑4-2 编写通用场景切换组件2. Cocos Shader游戏开发者心中的梦中情人渴望学习 Shader的伙伴有福了！高斯模糊详解！毫无PS的图片，依然这么炫酷！Shader 滤镜来了！详解圆形头像Shader颜色可变的剪影效果 Shader详解 Creator 追光效果，Shader 实现！！！Shader入门实战，拳皇被击闪白特效！给你看看用Shader做的菊花！漂不漂亮新版 ShaderHelper 使用教程翻书、戳牌、波纹、高光 Shader 组件工具超动感音乐可视化：WebAudio与Shader的震撼结合！研究了3天，终于将 Shader 移植到 Cocos Creator 2.2.0 上了ShaderHelper2正式回归，并全面使用TypeScript语言！Shader挖洞，不要太惊讶！3. 实战案例（源码）只讲理论不讲实战都是在耍流氓手写遥控杆实现（附源码）刷爆技术圈的贪吃蛇大作战，教程讲解，附Github源码大家要的瞄准线教程找到了，附github源码！Creator3D 图文教程【打砖块】终于撸出来了，附送最新源码！小工新作《动物同化》提供完整源码！Creator 国旗头像生成器，源码奉上！口罩头像定制，一起为抗击疫情尽一份力量！附源码！用一次函数来实现瞄准线的反射小游戏激励视频组件，免费开源！开源的自动代码混淆插件消消乐类游戏！链式消除与自动补齐！Cocos Creator不规则拼图游戏！使用精灵网格Mesh渲染模式 ！新手入门太难了，好友排行榜！手把手教你！月亮围绕着地球旋转，在Creator中如何实现？放大镜效果背景无限滚动！皮皮的多分辨率适配方案金币落袋动画的实现异名程序员的刮刮卡教程使用 Cocos 进行 2D 和 3D 混合开发异名的超全面 Cocos Creator 入门教程！物体随机飞溅运动4. 物理专题价值千万的技术揭秘物理挖洞、鳄鱼洗澡、百战天虫！白玉无冰专业物理挖坑！优化篇！生命不歇，挖坑不止！另一种挖洞算法的实现！挖下的坑，刨出来的是金砖 ！物理刚体挖洞新方案Cocos Creator 物理流体！惊呆了...Cocos Creator之物理切割5. 视频教程不仅会写，也要学会演【捕鱼来了】1. 浏览器实战演示【捕鱼来了】2. 字体打包工具【捕鱼来了】3. 皮肤预览【捕鱼来了】4. 鱼字群制作【捕鱼来了】5. 更换渔场背景【捕鱼来了】6. 鱼的命名与换皮【捕鱼来了】7. 图集整合与鱼的图集分配【球球要回家】1-1 工程资源结构【球球要回家】1-2 小球曲线运动【球球要回家】3-1 棋盘布局与路径求解【球球要回家】3-2 一个变量名字引发的卡死BUG【球球要回家】3-3 小球路曲线运动实现细节【球球要回家】4-1 微信登录组件【球球要回家】4-2 初始化微信云【球球要回家】4-3 使用微信云获取openid【球球要回家】4-4 微信授权获取用户信息【源码精讲】零编程激励视频组件【源码精讲】图集与纹理压缩【源码精讲】实战原生 JSB 启动闪退的调试技巧【源码精讲】版 ShaderHelper 使用教程6. 语言&IDE全方位精进，提升工作效率为什么Creator 3.0将仅选择使用 TypeScript ？为什么要选择使用TypeScript，看了就知道原因！开源新手引导框架，全面支持TypeScriptTypeScript贪吃蛇大作战，教程讲解链表的应用—贪吃蛇游戏（附项目TypeScript）按我说的来，让 VS Code 更好用10倍 | VS Code 新手指南VS Code 1.40 发布！可自行搭建 Web 版 VS Code！重磅！微软发布 Web 版 VS Code + 云开发环境VScode 的 JS 智能提示弱爆了？但是我有办法！10个很实用的 JavaScript 技巧JavaScript 中的三位一体JavaScript ES6—Map的妙用了不起的 Deno 入门教程！五分钟了解浏览器工作原理盘点游戏中那些“欺骗玩家眼睛的开发技巧”游戏开发中用到的MVVM设计模式大火球的设计模式-启蒙篇妞太多，如何管理？大话设计模式！用一个变量切换不同渠道，SDK接入整合Creator 引擎资源引用查找插件，这个问题终于有救了！7. Cocos Creator 3D3D 是未来，未来！虚拟才是现实怎么获取3D素材，进行 Cocos Creator 3D 游戏开发体验！Creator 3D v1.0.1 测试版发布，提供最新案例在线体验！Creator 3D 新教程，你能射中靶心么？Creator 3D 入门实战，蚂蚁庄园运动会星星球！Cocos Creator 3D 物理模块介绍Creator 3D 实现小姐姐高光发丝，这帮引擎大佬真的是服了！手把手教你起步Creator 3D横版酷跑游戏你还在观望吗？Creator3D小鲜肉《小鸭快跑》新鲜出炉！在Creator 3D中使用Protobuf的快速解决方法！使用Creator 3D 制作的打砖块，附源代码！Creator 3D打砖块DEMO升级，终于可在手机上玩了！Creator 3D 图文教程【打砖块】终于撸出来了，附送最新源码！Creator3D案例新作，守护你的球球Creator 3D 官方惊艳的DEMO，附在线体验！如何在 Creator 3D 中切换模型贴图，超级简单Creator3D 打砖块子弹发射，以及摄像机平滑移动控制！8. 副业&职涯一起探索游戏开发挣钱之道试玩、源码、教程，助力游戏开发者副业之路！副业挣钱之小游戏开发最新模式揭秘不老程序员修练指南(1)—常见问题&分享大纲不老程序员修练指南(2)—揭秘程序员青春饭的机理不老程序员修练指南(3)—发现属于自己的神山哪种岗位更有前（钱）途？唉！痴迷于奶头乐，为什么我才坚持几分钟就...？程序员装逼指南（精华）质量装B大会，噢，说错了，是质量回溯会！软件Bug太多是咋会事？听大火球给你讲清楚其中原因！怎样开发每天赚100万的微信小游戏？怎么用开发技术赚外快？不写情书，程序员还要学写作吗？如何跨越自我推销的难关？两年半，「副业增收」终于不再是一句口号了！（真实案例）9. 晓衡的冒险成长工程师经纪人的修练日志一个玩游戏的失足青年，转行做软件开发的挣扎过程（1）一个玩游戏的失足青年，转行做软件开发的挣扎过程（2）一个玩游戏的失足青年，转行做游戏开发的挣扎过程（3）有个事正在悄然发生，估计谁都无法逆转！只能积极拥抱漫画，如何给一年级小学生讲游戏开发的！（真实案例）程序员，如何才能越老越吃香？落地指南见自己，见天地，见众生！登山做个灯泡！小游戏开发运营模型之—游戏调优篇（1）香港马市、田忌赛马？这款游戏 IP 碉堡了软著有什么用呢，游戏开发需要注意哪些法律问题？香港马市、田忌赛马？这款游戏 IP 碉堡了成语小状元被吐槽了，但又被我们神逆转！免费升级！何为民间IP，小游戏竟然还可以这样做？脑洞大开Creator星球最新黑科技，游戏开发不用拖拉！一起学习，来当个流量主吧！小游戏运营思路解析人类，未来真的会成为 AI 圈养的宠物吗？我的奋斗目标，不写代码，照样可以做游戏大龄个人开发者，我是如何活下来的，又将怎样活下去24小时极限开发，加速助力开发者副业变现这位程序猿做了全世界程序猿都想做但又害怕做的事情！这么大的一份礼包，感觉一天的假期不够，将6.1儿童儿改为6月儿童改有多好呀！愿我们一起成长，每年都能一起过儿童节！ 童心、同心、同行！

【不停歇的球】已上线许久，这里稍做整理，把开发中的一些点提炼出来，供大家学习。 [图片] 不停歇的球 是在2019年年初完成的，在过年的时候放在 facebook 小游戏上线，应该是叫 firing balls 。后来在19年8月中申请了软著，10月份拿到软著后就放在微信小游戏上线了。接着在19年11月初，在头条系小游戏上线（可以在 微信/抖音/头条 搜【不停歇的球】）。 [图片] 在微信上是成长版，可以通过获取星星升级提升炮台威力。 头条/抖音上是单局版，通过获取星星提升当局炮台威力。 [图片] 整个游戏主要使用的是物理引擎。除了小球的分组是 ball ，刚体类型为动态。墙和砖块的分组都是 default , 刚体类型为静态。只有小球和其它类型才会产生碰撞。 [图片] 砖块的生成的规则是根据下落层数和炮台数值随机生成的，砖块的下落是每桢控制的，当位置到底线时，游戏结束。 小球的发射是根据炮台旋转角度，设置线性速度。当小球触碰底部时，回收小球。 砖块、小球、碎片、星星特效都采用对象池管理。 // 获取 let star_item = this._star_pool.shift(); if (!star_item) { star_item = cc.instantiate(this.star_ins); this.node_top.addChild(star_item); } star_item.active = true; // 回收 star_item.active = false; this._star_pool.push(star_item); 对于刚体碰撞反馈的缩放，最好采取显示节点缩放，而不是对有刚体的节点直接缩放。因为直接对刚体节点缩放时，会重新构建这个刚体依赖的全部碰撞体。 if (this.icon_hp_reduce.getNumberOfRunningActions() <= 0) { this.icon_hp_reduce.active = true; this.icon_hp_reduce.opacity = 255; this.icon_hp_reduce.runAction(cc.sequence(cc.blink(0.2, 1), cc.callFunc(() => { if (this.icon_hp_reduce) this.icon_hp_reduce.active = false; }))); } 其中有些动画用到了 Tween ，而当时的版本还没有引入 Tween 动画库。我就把白鹭中的 Tween 移植到 creator 中使用。 有需要可以参考以下文章: 三行代码搞定！在 2.0.9 之前版本使用 tween！cocos creator ! 附源代码！ 界面、资源等管理框架采用的是 github 上一位大佬分享的，现在的版本可能和我用的有所不同，地址如下： https://github.com/caochao/cocos_creator_proj_base 在 facebook 上线的过程中，曾经因为开始的载入进度条审核失败，最终通过修改载入顺序得以解决。facebook 分享的图片是用 base64 ，有需要的话可以参考以下文章。 为何cocos creator发布的facebook小游戏的载入进度条从0%飞向100%  cocos creator 实现截屏，截图，切割，转成 base64  微信小游戏的总排行榜和用户数据的存储，采用的是微信云开发中的云函数和数据库，有需要的可以参考以下文章。 微信云开发之排行榜的实现 用微信云开发存取用户的数据 [图片] 微信好友排行榜，用的是论坛大佬给的原生方案，使用简单性能好，链接地址如下： https://forum.cocos.org/t/topic/76743 [图片] 关于微信流量主广告接入，也爬了一些小坑，有需要的话可以参考以下文章。 微信小游戏正式发布！什么！审核失败！流量主广告接入指南！ 头条系的接入和微信差不多，直接打包发布微信渠道，再接入一个视频分享，具体可以参考张哥写的这篇文章，写的很详细。 抖音、头条一个都不放过，字节小游戏上线攻略！ 以上为白玉无冰使用 Cocos Creator v2.0.8 开发"不停歇的球"项目的技术分享。单局版的代码关注【白玉无冰】公众号可以获取！ 2019往期精选！附送 github 地址！ [图片]

1.素材很多来自互联网修修改改，自己没有美术天分 2.玩法借鉴了2个游戏，2种玩法结合在一起，玩起来还是非常爽快的 3.如果大家喜欢，我接下来会分享制作的过程 玩法操作：当主角跳起来时，会触发瞄准线，当瞄准线经过敌人身体时，点击屏幕进行射击 [图片] 下面是简单的截图 [图片][图片][图片][图片][图片]

效果演示 这是游戏里面很常用的一个功能模块，它就像你的生活，有着走不完的路程。它的实现也很简单，要么做一个很长的背景图，然后移动相机；要么就是实现一个跑马灯，像那些轮播图什么的，大家应该都有写过。 [图片] 实现思路 背景无缝切换实现 这个demo的实现思路是跑马灯。背景是两张一样的背景图，第一张图在前，第二张图在后，两张图同时移动，当第一张图正好移动到出屏幕的时候，第二张图正好移进屏幕，这个时候复原两张图的初始位置。这个过程不停循环就有走不完的路程了。 [图片] 代码如下 [代码]speed: number = 500; update(dt) { const temp = dt * this.speed; if (this.bg2.x - temp <= 0) { this.bg1.x = this.bg2.x; this.bg2.x = this.bg1.x + this.bg1.width; } this.bg1.x -= temp; this.bg2.x -= temp; } [代码] 全屏适配 因为是整个背景都在跑动，所以两个背景节点都是需要做[代码]widget[代码]拉伸的，第一张背景上下左右都设置为0就可以了，第二种背景往右再偏移一个屏幕。但是这样是不够的，因为不是所有用户的屏幕都是按我们的设计分辨率来的，所以跑着跑着可能你的背景就露馅了 [图片] 所以我们在onload的时候还是得手动去对齐一下bg2的位置，因为它在布局编辑器里面只是往右移动了我们的设计分辨率一样宽的距离。(bg1肯定是对的，因为使用了widget对齐了当前屏幕) [代码]onLoad() { const viewSize = cc.view.getVisibleSize(); this.bg2.getComponent(cc.Widget).left = viewSize.width this.bg2.getComponent(cc.Widget).right = -viewSize.width } [代码] 效果预览 源码获取请点击查看原文，长按二维码查看效果👇 [图片] 我是异名，你的阅读是我的动力 关于这系列的其他功能，请关注下面的公众号： [图片] 源码地址：https://github.com/ifengzp/cocos-awesome

一款考验脑力益智的物理弹球，《火爆弹球》这款游戏和其他的物理弹球不一样，整体很简洁（不信你去试试）！希望大家能够喜欢。就是新人不懂怎么运营获取流量，有没有大佬给个指示！为了软著过审也是煞费苦心啊，不想让这个小游戏这么容易挂掉。 [图片]

《全民小镇》H5游戏是由光子工作室与北京华夏乐游科技股份有限公司合作研发，曾荣获2018金翎奖"玩家最喜欢的H5游戏"。该项目于2018年8月11日正式不删档公测。为了符合当下主流审美及微信小游戏小而美的产品特性，华夏乐游与腾讯小伙伴们在美术风格改版方面做了较为大胆的尝试。本文主要就项目美术设计的改版思路进行分享。     《全民小镇》微信小游戏版本与APP版本上线时间相隔近五年，玩法也有较大差别。项目研发初期本着展现IP继承性的目的，UI及游戏内美术资源均大量使用了APP版本的原版资源。但上线后从玩家反馈及市场数据显示，初期版本的美术市场接纳度较低。本着提升用户新进及留存的目的，项目组决定对游戏整体美术进行全面优化，并制定了一套流程方案： 问题评估——竞品分析——执行方向——用户调研——方案落地 问题评估 我们从识别性、统一性、易用性和乐趣性出发，针对以下几个维度对最初版本进行了评估——交互、颜色、造型、质感。总结出以下问题：  主界面 icon 过多，冗余杂乱，层次感差；  颜色偏暗沉，缺乏轻薄感；  部分后期新增界面在排版、颜色、造型等方面与主体风格脱节；  部分界面操作体验较差、缺乏引导 [图片] [图片] 安卓端由于提供了较多活动，即使是新手阶段主界面的 icon 数量也严重过载；ios 端相对情况稍好 [图片] [图片] [图片] UI 界面的主色调偏暗沉，棕黑色描边加深了色彩的沉重感，不符合当前轻薄化的主流趋势 [图片] [图片] [图片] 竞品分析 同品类游戏中《海盗来了》近期同样进行了美术的优化改版，优化方向总结为一下几点：  增强 沉浸感。为轮盘按钮和修理按钮围绕海盗主题绘制了轮船底板；  调整色彩 层次。降低了背景区域、岛屿等非功能区的色彩饱和度，提升了轮盘、icon、金钱等区域的色彩醒目度。增强了视觉引导力；  调整 UI 质感。整体风格扁平化，简化了按钮及 icon 造型，使游戏质感更加轻薄。 重新 安排 icon 布局。活动、每日、分享整合收纳入单独图标，减少了一级界面的icon 数量并统一显示在轮盘界面。分类添加了蓝色底框，增强条理性。 [图片] [图片] 《海盗来了》UI 改版前后对比（左为改版前，右为改版后） [图片]  [图片] 《麦兜环游世界》也做了简单的 UI 调整（左为改版前，右为改版后）——重新绘制了投骰按钮，简化了建造按钮，适当缩小了 icon 大小 执行方向 Icon 布局及设计调整重新梳理 icon 布局及数量，将平级 icon 规范入统一 icon 下（需和策划进行功能探讨）。主界面 icon 数量尽量压缩至 10 个以下； 缩小 icon 大小，注意留白空间； 重新设计 icon 外观， 描边淡化，图案 扁平化、 简化。 底板不透明化 [图片]  [图片]  [图片] （布局参考游戏——损友圈，麦兜环游世界；大小及外观参考——海盗来了，欢乐麻将） 颜色提取     为在原版色调的基础上做轻量化、年轻化调整。参考色彩效应与风格定位的这张坐标图（图片引用自umili同学的跨团队协作之——我叫MT4的变革之路），往更休闲、温和的方向走，重新定位我们的主视觉色调。 [图片] [图片] 其他要点 ：删除黑描边； 降低整体饱和度，提高明度； 用色规范化，在主色调范围内取色。 增加 UI 框体边角弧度，增加圆润感。 基于以上几点分析及执行建议，我们制作了三套UI方案： [图片] [图片] [图片] [图片] [图片] [图片] 用户调研     我们基于以上三款 UI 风格方案，和当前 UI 画面比对设计了用户调查问卷，在玩家群内及微信公众号发放了调研，最终根据得到选票数据及反馈建议敲定了第三版美术风格，并以此作为参照坐标对接下来的改版工作进行铺量。并在每周对后续设计方案进行针对性评估反馈。 改版前后部分画面对比： [图片] [图片] [图片] [图片] 总结     本次美术的整体性改版，由合作研发商与腾讯光子小伙伴共同协作执行。该版本实装后，此方案解决了项目初期的一系列问题，使画面更加轻薄，信息模块层级清晰化，信息可读性增强，整体配色明快舒适。同时减少了美术资源，缓解了性能压力，使整体更加符合微信小游戏的调性。个人也对小游戏的风格把控有了更进一步的认识。   最后感谢项目组和开发商小伙伴的信任与支持，希望小镇的数据在今后越来越好。 本文仅代表个人的设计心得总结，如有不当之处，欢迎共同探讨！

《人生一串》出来之后，弹幕里都在刷：没有深夜烧烤过，不足以谈论人生。而对于北京中关村的庞庞和他的队友们来说—— “没有什么事情，是一顿火锅解决不了的, 如果有那就，两顿。” “我们是3+0.5+0.5的小团队。” “但幸运的是，都是吃货。” 游戏是庞庞他们最熟悉的表达方式。不是唯一。但是游戏的和火锅的快乐是他们对童年式简单幸福的共同记忆。 想要做一个能让人回到童年，体会那种咕嘟咕嘟满足感的美食游戏，是这个团队最开始走到一起的原因。 【“拜托，吃什么、怎么吃、和谁吃都很重要啊！”】 吃，是一个内涵丰厚的命题。吃什么，怎么吃，和谁吃，都可能产生N种组合的选择结果。 比如火锅，火锅的生命在于连通口腹之欲的视觉冲击和几个钟头都挥散不去的气味记忆。对庞庞他们来说，如果火锅第一眼不能让人流口水，那它就是失败的。食材在火锅里的游动、翻滚，滚烫时有轻烟飘出，食材之间相互搭配带来的丰盛，是牵动人们七荤八素的口腹之欲的秘密。 “游戏，就是和视频、图像一样的表达形式。形式不重要，表达出‘吃’给人的幸福感才是最重要的。”视觉够“接地气”，够馋人，才能够让不玩游戏的普通人，也能够通过游戏一下子进入到熟悉的火锅世界中，产生一种叫做美食的共鸣。 选择火锅作为题材，还因为虽然它食材简单，煮法简单，却能因为吃的人不同获得不一样的生命。比如一个广东人和一个重庆人一起，才能吃出火锅放诸四海皆准的包容。 和朋友吃，才能吃出火锅那种热气腾腾的拥挤和肌肤相亲的亲密。一开始，游戏只设计了一个“食客”的角色。“看起来孤零零的，挺可怜。”火锅是一群人的食物。所以，他们又设计了沙发，有好几个客人围着吃。 [图片]有一锅热腾腾翻滚着的勾人的食物，有围桌而坐、兼容并包的分享，才是火锅社交的核心。 【“人少了烟火气，会无趣”】 和生活无关的人物，总显得冷冰冰。 没有烟火气的美食游戏，也不会打动人。为了让他们的火锅“看起来”好吃，他们还在“食客”的角色上下功夫。就像吃播一样，食客们吃得开心，玩这个游戏的人才能通过他们的快乐感受到火锅的美味。 “我经常看一个非常‘有味道’的吃播，他每次吃，都要配一口大蒜。”“他吃的东西都很普通，但是吃的时候能让你由衷地感受到他的幸福。”他们甚至在想，能不能把这个主播的形象放到他们的游戏中。 除了研究吃播，他们还互相研究。“可能一起吃个饭，一不小心，你就成了我游戏里的食客。” [图片]团队里的大飞哥，就被他们用进了游戏里（本人抗议表示不符合他减肥后匀称的身材）。另外一个韩国的妹子jiyeon，也一直想创造一个韩国客人的角色。 生活中遇到的人和事，都成了他们游戏的取经之地。朋友的小宝宝一时兴起将玩具丢进了火锅里，他就是后来游戏里嚷嚷着“想捞起小鸭子”的小朋友食客。而那个喜欢自己丢调料的人物设定，灵感是来自热衷自创香料锅底的巴基斯坦同学。 要让吃这回事儿，彻头彻尾地变成快乐的，有趣的。“我们从一开始就定下了基调：不会有一个客人出现任何不开心的情绪，哪怕他们暂时吃不上了，也只会表现出很馋的样子。” 一旦吃上了，就是“像猫被挠了下巴”，眯着眼的餍足样子。这才是热爱美食的人该有的模样。 【“做游戏如烹小鲜”】 在团队里的后端小哥黄清看来，像《风味人间》、《人生一串》这样的美食片才真牛逼，“是真的能让人爱上美食，和它们背后的人与地方”。 他们希望自己的作品是可以让人感受到一大口食物被消灭的爽感，能感受到口腔里被塞得满满的、充盈着食物香气的幸福和治愈。“爱一个地方，总是先爱上它的饮食和文化。” 然而，现在这口“火锅”还不能达到他们设想的样子。庞庞说，我总感觉它是未完成的，还有很大的提升空间。 有许多人都在告诉他们如何快速运用套路把流量、热度做起来，赚大钱，他们想了想，还是决定专注在品质的优化上：先按自己的想法把游戏的品质做上去，再考虑商业。 “做游戏像是在做饭，有人喜欢按菜谱来，因为那是被验证过的‘好吃’，可以节省你很多时间。但我就喜欢自己探索，也许最后出来一个黑暗料理，但也可能出来一个超水平的惊喜。” “照着流程做，它也许更容易是一个好吃的菜，但终究不是你的菜。” “我，想要属于自己的菜。” [图片] （扫码体验游戏）

《极速大乱斗》开始立项的时候，开发团队还看不到MOBA小游戏的未来。在这片土地上，仿佛没有人愿意相信，小如小游戏，可以承载MOBA游戏的重量。 [图片] 35M，就足够“MOBA”了 在此之前，还没有成功的MOBA小游戏产品出现过。 一开始他们就抱着啃硬骨头的心态。没有人看好，还有劝退的。 “但我们不信，我们想自己趟出一条路。”一个端游手游开发为主，零H5产品经验的团队，决定从最熟悉的MOBA赛道进入小游戏。 尽管有多年经验，主创孟繁星还是坦言，“困难要比预想多得多”。 包体限制、CPU限制、传输协议限制、商业模式限制、用户属性和习惯变化、内容差异性要求……等等等等，都是“小游戏化”之路上的难题。 代码包体和本地缓存文件限制是他们遇到的第一个困难。MOBA要求的帧数、能耗本来就高，如何在有限的资源内表达出MOBA游戏的丰富内涵，需要凭经验的判断和有策略的取舍。 孟繁星他们认为，流畅的体验，是首要的。 小游戏的碎片化决定了，一旦体验上出现卡壳，用户就容易流失。所以他们优先选择保证帧率这个指标。 删繁就简。除了按以往的经验，就对称场景中可复用的美术元素进行复用，在玩家能接受的范围内对画面效果进行减缩。他们还在“挑战传统”的边缘进行疯狂试探：能不能减少英雄的数量？兵线能不能只留中路？核心战斗模式能不能不要装备？ 最终，经过艰难的取舍，本地缓存文件完美地控制在了35M以内。 但，取舍不意味着降低标准，MOBA小游戏化也不意味着“阉割版”的MOBA游戏。通过玩法的融合创新和改造，他们成功地在现行千篇一律的MOBA游戏中脱颖而出。 2倍留存、3倍付费活跃，3个字留住用户 重新审视、认识小游戏用户群体，是他们摸索到MOBA小游戏化奥秘的开始。 对局时间太长，用户就流失了；对局时间短了，节奏太慢，用户也流失了。到底该如何让用户在3-5分钟的对局内，能够看到MOBA有多好玩？如何才能满足他们对爽感，目标感“马上就要、想要就要”的要求？ 短，快，新，3个字的用户心法。孟繁星如此总结。 传统的MOBA游戏中，“跑”到战斗现场就需要数十秒时间。但对于对局时间不到5分钟的小游戏场景来说，这就是一个流失时间。于是，他们加入了快捷跳板，让玩家可以一键到达敌军现场，立刻、马上加入战斗。 [图片]死亡等待是另一个流失点。想象一下，对方正在你的地盘攻城略地，而你还在泉水等待复活，这种死亡惩罚带来的焦虑感，有可能成为劝退玩家的主要原因。让玩家能快速复活，专注战斗的快感——这一设定成功留住了玩家。 经过3个大版本的改造之后，广告付费活跃提高了3倍，留存提高了2倍。微信上的小白玩家们也开始接受这种新鲜的品类，享受快速开战的乐趣。 玩游戏如挖宝藏，要制造意外的惊喜 出门就开团，见面就是怼。这样的短和快留住了用户，但这还不能达到孟繁星他们想要的新。在快速变化市场里，不够新，你就容易被厌弃。 英雄+武器多样化带来的战斗策略多样化是《极速大乱斗》中一个重要的创新思路。 不同于传统MOBA中固定的英雄技能，小游戏中英雄技能是多样且随机的，玩家每一场能玩到的同一个英雄的技能会发生变化，在战斗中还可以随机拾取技能。 像这种天上掉馅饼的事情，来多几次都是惊喜。 [图片]除了技能的随机掉落，武器、饰品等周边玩法的加入，也让游戏玩法变得更有深度。 [图片]即使你和敌人同时抽中了同一个英雄，你也可以通过技能、武器和饰品的搭配，从策略上击败对方。即使你的英雄原本是个吊车尾的，也可能因为运气概率爆出让你一秒碾压敌军的武器。 [图片]这些游戏内容的补充和丰富，延长了玩家对于游戏内容探索的动力，从而实现更多次的游戏体验和尝试，也提高了游戏的留存。 有时候，没人敢去的地方风景独好 孤独，并没有劝退他们。当所有人都在质疑的时候，他们选择了全速前进，“追逐别人的脚步，我们总会是追随者，那不如坚持做自己，开创自己的赛道。” 一块无人愿意垦荒的处女地，反而成了《极速大乱斗》们的机会。 小游戏里虽然小白用户居多，但用户也在成长。只要坚持短、快、新，通过降低上手难度，让用户快速获得上手的乐趣，就有可能抓住不被重视的细分市场，转变为独有的机遇。而如何能教育好用户，让重叠的非重叠的竞技兴趣玩家也能爱上MOBA类游戏，是争夺这片市场的关键。 没有什么市场是不值得探索的。《极速大乱斗》就是一个很好的例子。 为此，小游戏用户也迎来了他们的第一个3D MOBA小游戏。 [图片] （扫码体验游戏）

我个人的第二款游戏上线啦！年前开始做的，今天审核通过了，历时2-3个月吧，记录一下上线日期：2019年2月27日，不管未来数据会如何，总归是会让人开心的。 接下来我以一个过来人的身份给广大开发者提供些帮助，大神看着玩玩儿。因为是第二款游戏，经过了第一款的摸索，流程已经摸得很透了，我把会大家可能会遇到的坑提一提。 首先是游戏开发方面： 1、引擎选择：因为自身也是游戏行业从业者，玩过unity3d和cocos2dx，所以选择cocoscreator没得说，再说不管cocoscreator有什么毛病，毕竟团队也是在摸索中前进的，多提提建议，少说点牢骚，共同进步。 2、美术UI：因为本身是搞程序的，美术的话给不了多少建议，我的做法就是参考参考别的上线游戏的UI，能拿出来的就拿出来利用Ps修一修，我做游戏的不少时间就是在和ps打交道，贼tm累。 3、小游戏api的接入：这方面实际上没多少要说的，多调试调试总能出来，tips：要接排行榜的话最好还是升级到2.0以上的版本，坑少。 再来说说提交审核方面： 1、软著的申请：淘宝买的，大几百块钱，大概不到2个月到手。由于我原来自身没有好好考虑软著这块儿，所以都是淘宝买的，现在我第三个游戏打算自己摸索着提交审核，毕竟对于个人开发者来说，这个几百块钱也不是小事儿。我已经把资料提交了，到时如果成功了的话我再来跟大家说。 2、自审报告：这个很简单，拿微信提交审核里面的示意图来改改就好，有需要的话我可以把我的给他。 3、审核时间：这个真不太懂，我第一个游戏提交了5天才审核，关键还没过，修改了2次才过的。而这款游戏昨天晚上8点申请，今早上9点左右就过了，也可能是现在审核人员变多了吧。 最后来说一说小游戏的选择： 1、因为作为一个个人开发者，肯定所有的事儿都得你包，选材根据自身能力来，我的局限性在美术，所以显然我就选择这种几何图形、方块类的游戏。 2、那选择啥游戏呢？我一般都是玩玩桌游找找灵感，像这一款游戏就是从桌游《方格游戏》来的灵感，自我感觉良好，难度深度还是有的，哈哈，自我陶醉。 最后打一波广告，希望大家可以进来看看，有问题可以交流，有建议可以提给我，谢谢大家啦！ps：前几关是引导关，玩几关后就要动脑啦。         [图片]

前方预警：请不要对你的数学水平抱有不切实际的幻想。虽然你可能读过985、211，但是也不一定能通关《1020》。 [图片] 《1020》看起来玩法很简单：玩家拖拽数字组至7×7棋盘中，当相邻三个数字可以合并为10或20时即可消除数字并得分。作为一款益智解谜产品，它甚至引入了“连击”“暴击”奖励分设计，用动作游戏的激励反馈机制，削弱玩家重复解谜过程中的体验疲劳。   但是，关键时候，你还是不得不求助你的小学数学老师。游戏很善良地为大家提供了闭合的求助机制：在常见的求助功能基础上增加了回放分享系统，实现真正意义上的社交链好友互助通关。   用20以内的简单加法融合受众面较广的“三消”玩法，《1020》改变了数字解谜游戏一贯的高冷属性。在下文中，肩挑《1020》全部研发工作的开发者铁书为我们解读了这款小游戏诞生的心路历程。   玩法原型设计   Q：是如何想到做一款数字解谜游戏的？ A：有一段时间《2048》特别火，它这种简单的玩法也能受到玩家喜爱，我就想着数字类的玩法还有很多可以开发的空间。最早我也做过一款同类型的“数独”游戏用来练手，所以就试着做了一款数字解谜游戏。   Q：合成10、20的玩法灵感来自哪里？目前的整套玩法是怎么打磨出来的？ A：灵感来自小时候的一种扑克牌“三消”游戏，一个人无聊的时候经常用来打发时间。它的玩法就是往桌子上放置扑克牌，当场上三张牌能够合成10就可以消除掉，继续放置。   起初数字只要可以合成10或20，就可以一直放置下去，场地没有限制会很无趣。后来就想到用一个固定格数的棋盘来提升难度，最开始用了9×9棋盘做实验，发现太简单，怎么玩都死不了，直到棋盘缩小到7×7才比较理想。   Q：为什么最大只能合成20？ A：一开始为了让合成具有连击效果，有尝试10和20再合成30、40的方案，但是发现对于玩家来说这种玩法要求太高，出现的场景也很少。   分支系统创意   Q：大多数小游戏的微信求助都是单向的，为何《1020》做了可以反馈过关步骤的闭合求助系统？ A：《1020》虽然看着简单，但是要玩到高分还是需要弄懂很多合成的机制细节，所以我就做了一个带有教程性质的关卡模式。在闯关过程中卡关的话，可以通过微信分享来求助。   收到好友求助的玩家不一定接触过这个游戏，如果是新手就需要从头开始玩，等到他通过好友求助的这一关，可能已经过去几天了。这时我们会给他弹提示，提醒他哪位好友在这一关向他求助过，可以把刚刚的过关步骤分享给这位朋友，就这样形成一种互助氛围，拉动游戏在微信社交链上的分享率。   Q：为何APP版设置了可以直接跳转启动微信小游戏版的入口？ A：现在游戏整体的用户量还是太少了，想把用户引导到微信这边来，重点发展小游戏这块，因为微信有一个“好友在玩”的展示场景，加上创意鼓励计划，能给创意产品带来更多的展示机会。   Q：游戏内有哪些彩蛋？加入彩蛋的意图是？ A：电影《头号玩家》里，游戏的创始人在离开时对男主角说了一句“谢谢你玩我的游戏”，这个场景对我们游戏开发者还是比较有所触动的，所以我把这句话做成了《1020》的一个彩蛋，触发机关就在进入游戏后页面顶部的logo那里。 另外还有一个彩蛋。游戏里是没有成就系统的，但玩家们只要超过5179分就会触发隐藏的“超越开发者”成就并获得祝福，将技能次数补满。5179分是我完成《1020》的开发之后认真玩的第一局得分。   单挑研发心路   Q：为什么取“铁书”这个网名？ A：高中的时候比较喜欢武侠小说，正好需要起一个QQ名，就效仿金庸、古龙两位大师，取了个比较有古典韵味的网名。   Q：之前做过什么游戏作品？如果有，其为《1020》的研发提供了哪些经验指导？ A：除了用来试身手而开发的“数独”，还做过一款叫《爆走星星》，这些游戏都有点像，都是益智类，都有个棋盘，所以《1020》的开发会比较快，很多基础设定都能迅速执行、迅速验证。   Q：比起团队行动，独立完成游戏开发有哪些利弊？ A：主要是自由，想开发什么类型就自己去做。但是单枪匹马的开发效率很低，感觉项目像没有截止日期一样，因为除了策划、程序、美术音效等等，一些边边角角的事情都得自己去弄。而一个人无法专业地深入了解所有专业领域，别人花一点时间就可以完成的事，你得花费更多时间去解决。   Q：丰富的生活阅历能激发创意灵感，作为开发者，平时如何权衡忙碌的游戏开发工作与自己的业余生活？ A：一般想到一个好点子我就会花几周时间去把它实现，然后切换到一两周的空闲状态，在这段时间里会出去找亲戚朋友玩，也会让他们对我的新作品提提意见。 像《爆走星星》我妈妈就很喜欢玩，她反映说游戏玩到最后经常会找不到哪里可以点击，所以我就优化了一下，剩下最后一两种星星的时候，可以点击的星星就会动一下提示玩家。   小游戏创意观   Q：用户的审美与日俱进，你认为能契合小游戏市场前景的好创意是应该“大而全”还是“小而美”？ A：目前看还是“小而美”的比较适合，用户市场是不断细分的，小游戏如果以后开启大数据匹配推送的机制，这种“小而美”的就会有更多人玩，前景大有可为。 “大而全”的话目前手机的性能限制还是蛮多的，过几年性能越来越好，小游戏市场的大产品可能会越来越多。   Q：平时最喜欢玩哪类游戏？有哪些游戏创意让你印象深刻？ A：多人竞技类的游戏也玩，单机类的文字冒险类的游戏我个人很喜欢，就是那种可以选择剧情走向的，像《王权》《地下城堡》等，我对这些文字类游戏的分支剧情创意很感兴趣。 以后小游戏平台可能会有很多这类产品面世，因为这类游戏跟解谜游戏有挺多结合点，我自己也有尝试做过这种游戏，挑战主要来自剧情方面，如果剧情能搞定就会先做一个试试看。   Q：开发小游戏，需不需要有高智商或者深厚的开发专业知识作为支撑？ A：现在的游戏引擎已经越来越人性化了，它的使用门槛越来越低了，所以开发者并不一定要很高的智商，只是需要不断去学习，然后花时间去磨合、优化产品。 我是带着做游戏的愿望报读了计算机专业，后来发现专业跟游戏开发的出入还是很大的，工作两年后我就离职自己做游戏，后来《爆走星星》取得了不错的商业盈利，就支撑我一直走到现在。   Q：对于未尝试过的玩家，益智解谜类游戏有一种高冷的感觉，有没有思考过如何包装这类游戏，提高大众玩家尝试的欲望？ A：确实留存比较低，许多用户还没见识到游戏的精髓就离开了。这方面可能还需要引入一些升级打怪的要素吧，与类似《1020》的连击系统做结合，用消除数字的得分去打怪，这个也有想过。总的思路就是多做一些轻松简单的模式，关卡之间的难度梯度调整得再平缓一点。   Q：灵感总是纵即逝，平时如何积累创意点子？ A：我会立刻把随时冒出来的点子记下来，用备忘录或者什么工具记录，常常会积累一大堆。灵感刚刚闪现的时候有主观的激情加成，如果马上去做可能会跳进坑里，所以我会先把它们记录起来放一边，过段时间再回来看看它们可行不可行。 各种类型游戏的灵感我都会记，等到游戏需要更新的时候我就会翻出来，把那些简单的、能完善的先执行。目前特想完成一个点子，比如说主角走到一个山洞里，需要破解一个小谜题才能过关，这种做出来就是偏剧情向的文字游戏，也能够结合我比较擅长的解谜玩法。 [图片] （扫码体验游戏）

纵是你棋无对手，你也肯定没见过这么自我放飞的棋局。 [图片] （看完说不定就有解了？） 先别急着投子认怂！封面图里的大塞“车”阵容在象棋规则看来必然无解，但在《兵者H5》（虽然它叫H5，其实是个小游戏）里面，这吓人的阵势其实并不难破解。 继《蛇它虫》之后，文艺复兴工作室的又一款小游戏——《兵者H5》也于近日获得了微信平台认证的创意标识。《兵者H5》是一款让“棋渣”也能无障碍驾驭的象棋题材益智小游戏。游戏中玩家扮演最弱小的棋子“兵”，运用象棋规则逆袭敌方的强大阵容，在闯关过程中领悟《孙子兵法》中“利而诱之”“乱而取之”的智慧，下出《三十六计》中“瞒天过海”“声东击西”的妙手。  [图片] 此外，《兵者H5》加入了让玩家在服务器上隔空博弈的系统——“空城计”，一方面扩展了整体耐玩度，满足了核心玩家的玩法进阶诉求，另一方面也为小游戏产品如何借力微信社交链带来了玩家挑战自定义战局的新思路。 以下是我们与《兵者H5》主策划吴斌星的对话，《蛇它虫》《兵者H5》先后获得微信平台的创意标识，文艺复兴工作室到底有什么心法诀窍？ 产品研发过程   Q：题材和玩法原型是如何敲定的？除了从《劳拉快跑》的灵感之外，对于象棋残局是否有一些特殊的回忆？   A：2016年11月成立团队，花了3周时间脑暴第一款产品，想做一款解谜游戏。当时觉得《劳拉快跑》很好玩，想做一款类似的产品，但是美术人手不太够。 有一天发现象棋里面兵的移动方式跟劳拉快跑的走法很像，就联想到能不能利用象棋的规则套用到《劳拉》的玩法里面。 小时候下过一段时间象棋，水平不是很高。其实象棋就是突然想到的，因为成立初期思考立项主要想的是如何解决美术的问题，象棋需要的美术我还是能PS做出的，如果是需要小人、动作甚至建模的我们完全不会。     Q：DEMO期筛掉了哪些方案？为何筛掉？   A：原型是一步到位就确定了。第一个原型大家玩了下觉得还OK，之后再定一些细则。 一开始没有结合三十六计，只有四章（现在五章），内部试玩的时候觉得重复度有点高，章与章之间的差异比较小，玩家体会不到递进感。 后来用三十六计来包装的点子，来自一位玩过DEMO的朋友的建议。一开始的关卡名都是一些成语，我们没意识到其中三分之一的成语就是来自三十六计，这位朋友一语点醒，为什么不全部做成三十六计？ 于是我们把关卡删掉了一半，去掉了重复度高、解题手法不够精彩的关卡，（再增加了贴合三十六计主题的关卡）。     Q：为何选择让玩家扮演官阶最低的兵卒？   A：首先兵的移动规则最像劳拉快跑；其次，扮演最小的角色去逆袭对面强大阵容，会给玩家带来爽快感。     Q：将《三十六计》的兵法还原到棋盘上时，是否有棋谱可以参照？团队一般采用怎样的步骤来设计这些计谋关卡？   A：关卡都是先设计好的，后来才用《三十六计》主题来对应包装关卡。 关卡设计主要考虑难度、出场棋子，要用什么技巧这三种要素。初期主要考虑难度和出场棋子，不希望玩家连续好过关碰到同样的棋子产生无聊、重复感；后期的难关会先想一些解谜游戏技巧，从玩家的策略盲点入手去设计。  [图片] 如何借力社交链   Q：游戏中“空城计”和其它小游戏的社交玩法最大的不同之处在哪？现在对如何运用微信社交链是否有新的想法可以分享？   A：有点像任天堂《马里奥制造》，自定义关卡最大的作用是提升对核心玩家的吸引；作为游戏开发者，像把创造游戏的快乐分享给玩家，是一种很棒的感觉；也能让玩家的游戏体验不局限于三十几关的关卡，可以延伸到更深层次。 [图片] 虽没有统计，但个人感觉会去设计关卡的一般也是通关玩家，当然自定义关卡展示区也有一些随意创造的低质量关卡，这种会在点赞机制中下沉。 如果做下一款微信小游戏，我们会考虑以社交玩法为主，不再是纯单机，会做成像《五子大作战》那样既有多人模式，不会像“io类”一样给服务器造成过大压力的游戏。 毕竟“与人斗其乐无穷”，游戏是唯一一个既有体育性（竞技性）又有艺术性的独特载体，在微信社交链上发扬游戏的体育性应该能获得最大的用户量，当然我们的新项目还在酝酿，不一定是小游戏。     对创意的理解   Q：自己觉得《兵者H5》算创意吗？内部有什么保持创意稳定输出的诀窍/模式/套路吗?   A：对《兵者H5》的创意还是很满意的。毕竟没有《兵者》就没有工作室两年的发展，给我们后面很多作品提供“走方格”玩法的思路。 我们游戏创意的诀窍很简单，就是热爱游戏、多去玩，而且不能仅仅因为某款游戏大热就跟风玩，再火只要我觉得不好玩我就该卸载卸载。保持自己是一个纯粹的玩家，不要因为工作目的就去玩一款游戏很久或者不玩某一款游戏。     Q：随着创意作品陆续出炉，从APP到小游戏，在创意这件事情上，团队有哪些一直恪守的原则？又有哪些不断进化的理念？   A：其实做创意就是得“忘记市场”，市场是做商业化需要考虑的，做创意的时候需要暂时忘记市场，做回玩家，喜欢玩什么就去做什么，然后当很多人去做创意的时候就会有商业成功的，市场就会找到属于这种玩法创意的商业化模式。但是在创意的孵化阶段其实不需要考虑商业啊市场啊。 当然这也是在没有经济压力的情况下做出的决定，我这个建议并不适用于所有团队。做游戏的动力还是因为热爱吧，创造的快乐是非常强烈的，是吸引我继续做下去的原因。 在创意的纯度上，世界上其实没有一款游戏是完全新创立的玩法，他一定是在前人的基础上，不断发扬、进步、融合。     Q：做游戏的创意难在哪？是最初的找灵感，还是往后不断延伸的创意打磨过程？   A：难在最初找灵感，如何将你最喜欢的玩法和你的想法相融合起来，不限于两款游戏玩法的融合，可以是与另外一种艺术形式的融合，比如说结合电影，像《绝地求生》。 世界上可以融合的东西实在太多了，你要做的就是广泛涉猎它们，然后去做选择。灵感找到以后就会比较顺利，因为你在找灵感的过程中已经将团队自身情况、商业化等因素考虑进去了。 找灵感是非常复杂的，像《蛇它虫》结束后找下一款游戏的灵感找了三个多月。     Q：经常参加Game Jam这类极限赛事，对创意产品开发工作有何助益？   A：参加过三次，新项目上线后没空参加了。   对创意工作帮助还是很大的，人在没有压力和目标时当然思路更开阔，但是会漫无目的没有方向，所以有时候给你一定的压力和目标（题目），可能会更好地激起你的灵感。 Game Jam的精神还是非常好的，我鼓励所有的开发者尽量去参加这类赛事，每次可能你没有想出好点子，但是大家一起来总会有一些人想出，而每一个好点子最后可能会诞生很好地作品，这对中国游戏行业的发展是有很大意义。 而且在中国很多游戏开发者是没有机会参与到立项阶段去大展身手的，往往都是接到了已经定好的项目框架，去小范围发挥，所以Game Jam是一种难得的机会，体验下将自己的创意从无到有实现的过程。     关于创意鼓励计划   Q：两次获得创意标识，如何看待小游戏的创意鼓励计划?   A：小游戏市场需要一个合理的、健康的、长期的激励机制，微信的创意鼓励计划是一个开端，往后发展可能是steam那样的社区机制，当然是非常庞杂的一个过程。 但是我对微信有信心，我们可以看到如今的微信公众号的文章整个机制都非常优秀，好文章是不断涌现的，现在很多平台的文章水分都挺大，看高质量文章还是会看微信的。 所以我对微信团队的信心是非常足的，如何在去中心化的前提下把优秀的创意游戏筛选出来，这是他们很大的挑战。   其它   Q：《兵者H5》的美术也是主策担当的吗？相对于APP手游团队每人专精一项技能的“大研发”，成员“一专多能”的小规模团队在开发小游戏时有什么优势？   A：我是计算机专业出身，毕业以后做了游戏策划，自然就有（PS和策划）两项技能，后来策划工作中也逼着自己学了一些程序。 小团队的策划、美术、程序三大类岗位不会进一步细分，所以成员需要在一大类里全能，最好是能跨类别兼一下，这样小团队无论在开发还是迭代版本的时候会非常高效。 人数少大家相互比较熟，哪些改动需要哪些人去执行都非常清晰，安排工作口头交流就可以不需要繁复地提交审批需求。（高效率开发、迭代更适合小游戏的“小”体型和“快”节奏）   [图片] （扫码体验游戏）

一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花 一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花 一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花 一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花 一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花 一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花 一款休闲益智类小游戏，想办法灌溉小花，让小花恢复生机！微信搜索：浇灌小花[图片][图片][图片]欢迎扫码体验

[图片] 设计师+程序员，两人耗时半年研发的小游戏。 玩家通过操作球拍，控制球，和机器⼈对打，累计进球数则过关。 过程中可能碰到麻烦的地图砖块产生意想不到的反应，此时可以使用丰富的道具辅助玩家过关。 [图片] [图片] 第一次做游戏，耗时6个月挺久的了，但是也是我们迈向游戏圈的第一步，所以很值得，欢迎大家来体验，请大家多指教，感谢！

edit at 11/12 代码传到了：https://github.com/eclipseglory/zasi-components , DEMO演示在文章结尾 小程序没有提供color-picker类似的组件，只能自己做。 可传统的RGB颜色选择器，真的腻了，而且在手机上也不是很操作，就跑网上搜了一圈，发现有一种圆环形的(基于HSV)我很喜欢： [图片] 我自诩对canvas2d和webgl很熟悉，做个这玩意儿很轻松，开始做！没想到痛苦开始了。 从上周5开始，一共做了三个版本： 1.纯canvas版本 2.canvas+组件版本 3.纯组件版本 纯canvas版本这个版本做了整整一天！ [图片] 由于canvas绘制性能问题，特别是因为没有requestAnimationFrame可以调用，别说在真机上测试特别不流畅，就是在模拟器上也小卡小卡的。而且，在纯的canvas进行触摸定位等事件响应处理，计算起来太麻烦，bug不断，只能放弃了。 混合版本因为wxs模块是提供requestAnimationFrame接口的，所以我就想，使用canvas作为底部颜色环，上面就直接用view作为指针，这样，事件触发和处理比起纯canvas要简单得多，而且还能利用rAF回调页面接口去绘制其他canvas。 的确，我的想法得到了证实，这个混合版本比起第一个要流畅得多！ 可就要完工的时候，我却发现，在真机上，cover-view的鼠标事件有很大问题，坐标值飘忽不定，也就是说拖动指针会发生鬼畜般的抖动！加上我不知道怎么debug到wxs模块中，于是跟个sb一样fix，找了半天也没找到问题在哪儿，直到我搜索时，返现有人也遇到和我一样的问题，我才安心了：这是小程序的问题。 动手改！既然cover-view有不行，那就不用它。 实际上canvas在该组件中的作用无非就是绘制一个圆环而已，如果我利用离屏canvas事先画好，然后保存成图片，再用image加载它，这样就可以避免使用canvas来显示圆环了，也就可以不用cover-view放到其顶部！ 想法是好的，可是到了真机上，绘制保存出来的图片时好时坏： [图片] 只能放弃，又耽误我一天。 无canvas版本刚才说了，canvas在该组件中的作用，仅仅是绘制一个颜色环而已，除此之外真没什么用。 那我就用css模拟一个类似圆环就好了，精确到每一度一个颜色一点意义没有。 所以就利用css的background-image属性，做了4个四分之一圆弧，然后拼在一起，得到了一个彩色原版，再用一个小的view遮挡，让它们只露出一部分，圆环就做好了。 之前的代码都不用改，直接用新作的圆环views替换canvas的标签即可。主体框架和功能，不到一天就完成了，不得不说，比起纯的canvas绘制，要方便太多太多。 这是截图： [图片] 代码片段这里是 演示DEMO，要使用的话，复制里面的组件出来用就好。 有些代码我混淆过，但不耽误使用。 有问题找我

已经使用uni-app开发并发布了一个跨端小程序啦，嘻嘻嘻！ 🧐 须知 这是一份详细的小程序各特性各端真机调研对比报告 测试机：iPhone7 plus IOS 12.4.1 客户端：微信7.0.5，支付宝10.1.72，今日头条7.4.0，抖音8.1.0，QQ8.1.5.461 🚫️ 百度小程序只有商户才能注册，个人开发者无法注册，没有appid功能受限（如百度开发者工具无法使用预览功能导致无法真机测试），所以暂时不测百度小程序 用户信息授权 授权方式： 【头条】用户信息授权方式还停留在微信小程序第一版，即直接调用 getUserInfo 弹出授权弹窗，如果用户选择允许，则后续调用不再出弹窗，而是直接走 success 回调。如果用户选择取消，则后续调用也不再出弹窗，而是直接走 fail 回调 【微信】【QQ】【支付宝】则采用 button + 回调事件的方式调起授权弹窗，如果用户选择允许，则后续点击不再出弹窗，直接走回调。如果用户选择取消，则后续点击继续弹窗询问授权 授权信息清除方式： 【微信】删除小程序即可清除授权信息 【支付宝】我的-设置-安全设置-账号授权 【今日头条】我的-系统设置-清除缓存。【抖音】未找到清除方法 【QQ】未找到清除方法（据说开放小程序的QQ版本尚未灰度发布） 小程序登录 【微信】wx.login 【QQ】qq.login 基本同微信 【支付宝】my.getAuthCode 【头条】大致同微信，未找到模型文档 分享 行为： 【微信】直接调起聊天对话列表进行选择 【QQ】调起分享渠道列表： QQ好友 QQ空间 点右上角三个点调起的列表还有微信好友和朋友圈两个项，在微信中打开qq小程序是走中间页 【支付宝】调起分享渠道列表： 支付宝朋友圈 支付宝联系人 微信好友|QQ好友(保存支付宝生成的分享图片后打开支付宝扫码) 钉钉好友(中间页自动打开支付宝小程序，中间页不自动关闭) 新浪微博(中间页自动打开支付宝小程序，和钉钉一个中间页) 【头条】调起分享渠道列列表： 转发到头条 微信好友|微信朋友圈(生成口令，复制口令后打开今日头条弹出识别弹窗) QQ|QQ空间(打开中间页，点击打开(QQ空间点了没反应)，出现另一个中间页，自动打开AppStore，再点打开调起今日头条，最后居然没打开那个小程序🥴!!!) 【抖音】调起分享渠道列列表： 多闪好友 微信好友|微信朋友圈|QQ好友|QQ空间(生成抖音码图片，打开抖音扫码识别) 【头条】webview的转发暂未支持： 【今日头条】能转发，但转发的链接点击后总是提示加载失败！也可能是小程序未发布的原因，扫uni-app官方demo进行 webview转发是能正常打开的 【抖音】不支持转发，右上角胶囊只有一个关闭按钮 跳转到其他小程序 【微信】支持(navigateToMiniProgramAppIdList + navigateToMiniProgram) 【QQ】支持 【头条】支持(navigateToMiniProgramAppIdList + navigateToMiniProgram) 【支付宝】支持(后台配置 + navigateToMiniProgram) 🚫️ ️QQ，支付宝和头条未真机验证，因为须要一个其他小程序的appId 客服会话 【微信】支持(button open-type=“contact”) 【QQ】支持，须用户加一个客服机器人为好友 【支付宝】支持(contact-button) 【头条】不支持。 支付 【微信】支持(调起微信支付) 【QQ】支持(调起QQ支付) 【支付宝】支持(调起支付宝支付) 【头条】支持(调起支付宝App进行支付) 🚫 ️QQ，支付宝和头条未真机验证，因为支付接口只有商户才有权限 地理位置 【微信】支持(须在app.json中配置permission字端)，用户拒绝授权后再次调用不再出询问弹窗，而是直接走fail回调 【QQ】支持。真机行为同微信。QQ开发者工具上拒绝授权再次调用仍会出询问弹窗 【头条】支持，同微信 【支付宝】支持，用户拒绝授权后再次调用继续出询问弹窗 视频播放 【微信】支持 【QQ】支持 【头条】支持 【支付宝】支持？(uni-app里说支付宝不支持，支付宝文档也没找到video组件，但放在页面里video能正常渲染和播放，难道是昨天刚支持🤔) 复制文字 行为： 【微信】【QQ】复制成功后有一个默认的复制成功toast且无法控制 【支付宝】【头条】复制成功后没有toast 权限： 【支付宝】my.setClipboard 此功能仅支持企业支付宝账号。实际情况是：在IDE上个人账号是可以复制的，但在真机上调用就会报 [代码]ERROR 4: 无权调用该接口[代码] 错误 【微信】【QQ】【头条】无限制 打电话 【微信】【QQ】【支付宝】【头条】都支持 收货地址 【微信】支持 【QQ】不支持 【头条】支持（实测【今日头条】支持，【抖音】不支持） 【支付宝】支持。但仅商户才有使用权限。且目前 my.getAddress 接口暂不支持在开发者工具调试和真机调试，仅支持真机预览 相机/图片相关 拍照/相册选图片 【微信】【QQ】支持 【支付宝】支持。IDE上会弹一个相册授权询问弹窗，真机上并没有弹窗 【头条】支持。但会弹出两个询问弹窗（相机权限，相册权限） 拍摄/相册选视频 【微信】【QQ】支持 【支付宝】支持。IDE上会弹一个相册授权询问弹窗，真机上并没有弹窗。须调用 my.chooseVideo(文档未找到)，uni.chooseVideo会报错 【头条】支持。但会弹出两个询问弹窗（相机权限，相册权限） ⚠️chooseVideo的maxDuration选项在【微信】和【支付宝】是只限制拍摄时长，在【头条】是同时限制相册选择视频时长和拍摄时长 图片预览 【微信】【QQ】【支付宝】【头条】都支持 保存图片到相册 【微信】【QQ】【头条】支持，弹窗仅询问一次 【支付宝】tt.saveImageToPhotosAlbum 在IDE上报错 [代码]tt.saveImageToPhotosAlbum is not a function[代码]，在真机上报错 [代码]无权调用该接口[代码]，文档未提及，猜测是仅商户可用，且不支持在开发者工具调试和真机调试，仅支持真机预览 接口返回值差异 getUserInfo【微信】【QQ】【支付宝 】【头条】 [代码]// 支付宝 { 'nickName': 'test', 'gender': 'm', 'city': '北京市', 'province': '北京' 'countryCode': 'CN', 'avatar': 'https:\/\/tfs.alipayobjects.com\/images\/partner\/T1_38eXnRiXXXXXXXX', 'code': '10000', 'msg': 'Success', } // 微信 { 'nickName': 'test', 'gender': 1, 'city': 'Xinxiang', 'province': 'Henan', 'country': 'China', 'avatarUrl': 'https://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJCzUl7llykqrMLicpULvVfkbbL2bVDua4tI8ibjxq5E9ib1oPW3F4QazLIUdS2GsFMAGnrWSYjN05Ew/132' 'language': 'zh_CN', } // QQ { 'nickName': 'test', 'gender': 1, 'city': '新乡', 'province': '河南' 'country': '中国', 'avatarUrl': 'https://thirdqq.qlogo.cn/qqapp/1108100302/D64611B2AE700324589177922EEBA5F4/100', 'language': 'zh_CN', } // 头条系（今日头条，抖音，皮皮虾，西瓜视频分别取各自用户信息） { 'nickName': 'test', 'gender': 1, 'city': '新乡市', 'province': '河南省' 'country': '中国', 'avatarUrl': 'http://wx.qlogo.cn/mmhead/Q3auHgzwzM5uibSytRCXFs0Y3xSpdy12thibjWIoMrBIsf7FiaPp2ibnFg/0', 'language': '', } [代码] getSetting【微信】【支付宝 】【头条】【QQ】 [代码]// 微信 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html [ 'scope.userInfo', // 用户信息 'scope.userLocation', // 地理位置 'scope.address', // 通讯地址 'scope.record', // 录音功能 'scope.camera', // 摄像头 'scope.writePhotosAlbum', // 保存到相册 'scope.userLocationBackground', // 后台定位 'scope.invoiceTitle', // 发票抬头 'scope.invoice', // 获取发票 'scope.werun', // 微信运动步数 ] // 头条 https://developer.toutiao.com/dev/miniapp/uQjMy4CNyIjL0IjM [ 'scope.userInfo', // 用户信息 'scope.userLocation', // 地理位置 'scope.address', // 通讯地址 'scope.record', // 录音功能 'scope.camera', // 摄像头 'scope.album', // *保存到相册* ] // 支付宝 https://docs.alipay.com/mini/api/xmk3ml#-1 [ 'userInfo', // 用户信息 'location', // 地理位置 'audioRecord', // 录音功能 'camera', // 摄像头 'album', // 保存到相册 ] // QQ https://q.qq.com/wiki/develop/game/frame/open-ability/authorize.html [ 'scope.userInfo', // 用户信息 'scope.userLocation', // 地理位置 'scope.qqrun', // QQ运动步数 'scope.writePhotosAlbum', // 保存到相册 'scope.appMsgSubscribed', // 订阅消息 ] [代码] 主要入口 【微信】 首屏对话列表下拉 扫一扫 发现->小程序 搜索 【支付宝】 扫一扫 搜索 首页我的小程序 【今日头条】 我的->扫一扫 搜索 【抖音】 搜索->扫一扫 【QQ】 扫一扫 💣 头条小程序陷阱 目前仅在头条Android版本7.2.9及以上版本支持真机调试功能。iOS暂时不支持真机调试 抖音App的小程序上没有打开调试器选项，右上角胶囊只有一个关闭按钮 💣 支付宝小程序陷阱 my.getOpenUserInfo用于获取支付宝会员基础信息，只能在真机上调试，无法在 IDE 中调试，也就是只要有用户授权的页面都需要推送到真机上开发调试！ 支付宝授权平台只返回tocken和uid，由开发者自己维护session有效期，[代码]checkSession[代码] 方法不可用 打开调试的调试器面板在调起用户授权弹窗时会消失，此时须使用真机调试 💣 uni-app 陷阱 uni.getSetting，文档上说【支付宝】支持，调用却报错 [代码]支付宝小程序，暂不支持getSetting[代码]，而直接调支付宝的api my.getSetting 确是支持的 uni.chooseVideo，文档上说【支付宝】支持，调用却报错 [代码]支付宝小程序，暂不支持chooseVideo[代码]，而直接调支付宝的api my.chooseVideo(文档未找到) 确是支持的 uni.chooseAddress，文档上说【支付宝】不支持，实际上是支持的，只是需要调用 my.getAddress，且仅商户才能使用 uni.getImageInfo，文档上说【头条】支持，调用却报错 [代码]头条小程序，暂不支持getImageInfo[代码]，而直接调头条的api tt.getImageInfo 确是支持的 📌 TODO 模版消息 第三方插件 uni-app 跨端小程序风险点 后端接口。不同端的后端接口不一样，需要后端评估一下。举例：模版消息(微信|支付宝|头条)；设计用户系统时需注意微信和QQ都有各自的openID和unionID，支付宝只有uid，头条只有openID；接入微信，QQ，支付宝支付时各种传参不一样 分享转发。支付宝，头条小程序分享至微信和QQ的主要方式是生成口令或者生成小程序码图片或者走中间页，导致传播路径较长 某些端重要功能缺失。举例：【头条】不支持客服会话。【抖音】不支持webview转发。【QQ】不支持收货地址 某些端api缺失，可能导致某些功能无法实现 第三方插件支持度

[图片][图片][图片][图片][图片] 小哇觉得UI很漂亮的智能控制鱼缸小程序，喜欢的亲们艾特小哇把源码拿去玩哈~（源码已打包好，不知道怎么传RAR压缩包…嘤嘤嘤）控制台提示有一个错误，查了查原因，大神说取消”自动运行体验评分“。

概述 以下方案均需要有全景照片后方可实现（自己拍的 or 网上下载）。 一、方案一：自建网页 自建网页，自己有服务器，可以用全景图转换器（如pano2vr）直接生成html代码，然后通过 webview 嵌入到小程序访问。 建议：图片可以放在七牛云或其他地方，CDN 能有效优化网页中全景图的打开速度（一般全景图片体积都是较大的）。 体验效果： [图片] 二、方案二：720yun 使用 720云，这也是大部分全景摄影社或爱好者最习惯用的平台了。他们也提供了小程序打开全景图的方案。但核心还是使用 webview，并且需要开通会员，具体参考： 建议：经费足的可以考虑一下这个方案，毕竟720云的操作和体验是真的是十分优秀的！ 参考：小程序校验指南 | 720yun https://bbs2.720yun.com/article?id=687 [图片] 三、方案三：小程序插件 以上两种方案都是借助webview来实现，也就是说必须要企业或其他单位的主体才能使用。个人的小程序如果要实现全景，建议使用这位大佬写的小程序插件——wxPano。项目一直在不断更新中，而且还免费，很值得期待！ 建议：①该插件限制全景图片分辨率需在2048*1024及以下，因此无法打开画质很高清的全景图片。②插件代码包超过1MB，对小程序打开速度有微小的影响。 链接：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx386c038238531f87 [图片] 结语 以上来自我自己开发时的一些经验，欢迎前辈老师们补充。 也欢迎社区三连——点赞收藏关注！！

[图片] 为什么要做这个？ 主要是在项目中，智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后，没有直接可以点击去首页的，需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题，在最近的微信版本更新中已经优化了，通过 小程序模板消息 过来的，系统会自动加上home按钮，但对于其他的访问方式则没有支持~ 一个不大不小的问题：两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法，发现有一个问题，就是现在手机屏幕太多种多样，有 传统头部、宽/窄刘海屏、水滴屏等等，无法八门，很多解决方案都无法解决特殊头部，系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题（强迫症的噩梦）。 下面分享下一个相对比较完善的解决方案： [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段，方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部，需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能，具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮，true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height （胶囊实际bottom 为距离导航栏底部的长度） right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度，PC端打开小程序会有BUG，要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时，并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持，通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性，这样无论是水滴屏、刘海屏、异形屏，都能完美对齐右边系统默认的胶囊bar，完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中，可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结： 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中，一次计算全局使用，爽YY~ ​ 往期回顾： [填坑手册]小程序PC版来了，如何做PC端的兼容？！ [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

之前做过很多公众号的项目，项目写完后给客户看项目，客户一而再再而三的修改元素向左挪1px，向右挪2px。改好之后让客户看，客户说我特泽发克，你啥都没有修改，你竟然骗我！！！ 这其实就是微信内置浏览器的缓存在作祟啦，那么如何清理微信内置浏览器的缓存呢？ 你们是否知道 ios版微信 和 android版微信 的内置浏览器的内核是不一样的呢？ android版微信内置浏览器（X5内核）         在安卓版微信内打开链接   http://debugx5.qq.com 拉到调试页面的最底端，勾选上所有的缓存项目，点击清除。 [图片] 点击确定之后即可完成清除微信浏览器缓存的操作。 ios版微信内置浏览器（WKWebView）         ios版微信内置浏览器内核并不是 X5内核，而是使用的ios的浏览器内核WKWebView，所以安卓手机的那种方案对ios手机用户不生效，因为那个链接压根打不开 只要微信用户退出登录，然后重新登录，ios版微信内置浏览器内核即可清除，不行的话，你们回来打我 有人说了：“IOS中  设置—通用----存储空间  就会看到“正在计算空间”计算完了会清理一点清理即可”，这种办法当然也可以，但是这种办法不光是清理微信内置浏览器的缓存，同时也清理其他的一些数据，比如朋友圈的视频图片和聊天记录等等缓存，而且容易误删某些想留下的数据，对于开发而言，我认为退出重新登录是最好的解决办法。