分类 技术 下的文章

微信小游戏开发的基础知识

下图是Laya官方的一张介绍图片,游戏引擎涵盖的东西比较多,掌握游戏开发必须要掌握这些东西,这次讲讲一些游戏中的基本概念。

一、游戏引擎

市面上的H5游戏引擎好多,国内外比较知名的有Egret、Cocos、Laya、Phaser、Three.js等等,各引擎实现上有区别,但游戏里面的一些基本概念都差不多。触类旁通,切换引擎的成本就只在于对引擎API的熟悉。

阅读剩余部分 ->

gulp-protobufjs 踩坑记

protobuf对于后台开发来说应该是在熟悉不过了,google定义的协议。这次我们要拿它在前端干点事,它定义了后台的数据结构,那么如果前后台的数据是一一对应的,protobuf就能为前端所用。尤其是在前后台同时开发的时候。通过gulp-protobufjs来解析protobuf文件,生成对应的JSON文件。

在使用的过程中,刚开始一切都很顺利,直到遇到了这个错误:

Error (gulp-protobufjs): cannot determine import root

这个错误让人一脸懵逼啊,字面意思是import依赖出错。后来检索到关键字出打log,发现依赖google/protobuf/descriptor.proto的时候这个错误就出现了,其他情况相当的正常。

gulp-protobufjs这个gulp插件最终是依赖了protobuf.js这个来处理,核心逻辑全在这里面。在他的issues里面找到一个差不多的错误,依赖没有解决的思路。根据google/protobuf关键字搜索到这个项目的readme。事情终于出现了转机:

Though it’s possible to include them:

  1. You may explicitly reference them by providing a relative or absolute path in your .proto files. E.g. use ./google/protobuf/descriptor.proto and bundle the file with your application.

  2. If you use the proto2js command line utility with the -legacy option and the descriptor namespace is explicitly referenced, it is included in the generated output.

readme 里面说的意思是说,默认是没有把google/protobuf/descriptor.proto解析进来,但提供了两种方式把他加进去。一直是写相对或者绝对路径,而是通过legacy配置。

通过阅读源码:node_modules/protobufjs/cli/pbjs.js,发现处理legacy命令的地方,他的描述也确实如此。那么他实际对应的就是options。

legacy: {
                alias: "l",
                describe: "Includes legacy descriptors from google/protobuf/ if\nexplicitly referenced.",
                default: false
            },

剩下的问题就是在配置项加上这个。有点坑爹的是,gulp-protobufjs插件把这个配置项堵死了,对外的接口压根没有设置这个参数的。无奈之下,只能去修改他的源文件了node_modules/gulp-protobufjs/options.js

options = {
    encoding: encoding,
    input: input,
    target: target,
    path: options.path,
    ext: extension,
    noErrorReporting: noErrorReporting,
    showStack: showStack,
    legacy: true // 这里增加一个参数
};

对应源文件的42行,加上此就能愉快的转换了。后面再介绍整体的pb2json整体的流程。发现这个还是挺有用,除了mock后台返回的数据,在做前端页面适配,xss测试等等都能够有很大的用处,前端可以变得更加自动化,节省人力,提高效率。

字符串反转算法

最近在翻阅《编程珠玑》第二版,真的是字字珠玑。在看到第二章的“啊哈,算法”的一道题目,将字符串反转。将一个具有n个元素的一维向量x向左旋转i个位置。例如,将 abcdefg 向左旋转 3 个位置之后得到 defgabc。要求是花费与n成比例的时间以及尽可能少的空间来完成这个操作。看到此题后的第一想法就是临时数组,下面来看下具体代码:

阅读剩余部分 ->

chrome开发工具系列—— Profiles篇

内存快照工具

profiles的翻译是轮廓的意思,在chrome中可以理解为程序内部剖面的意思。就是可以看到内部到底是怎么运转的。
最新版本的开发工具已经改名为Memory,右侧我们可以看到profiles,这里的意思是内存的一个剖面分析。

阅读剩余部分 ->

微信小程序登录态问题

先看遇到的问题,在PC的微信开发工具上,调试开发我们的小程序。然后用手机扫描在手机上预览,这时候发现后台数据并不能成功返回。

也就是说在PC切换手机的时候,登录态是失效的。

阅读剩余部分 ->

微信小程序性能优化——checkSession

一直发现小程序好慢,尤其是第一次打开的时候。因为第一次会涉及到登录的授权,官方文档是这么说的:

通过 wx.login() 获取到用户登录态之后,需要维护登录态。开发者要注意不应该直接把 session_key、openid 等字段作为用户的标识或者 session 的标识,而应该自己派发一个 session 登录态(请参考登录时序图)。

阅读剩余部分 ->