DIG DEEPER, DO DIFFERENT

为了和官方测试链对接，选择的是dawn-2.x分支。官方推荐的是在Ubuntu 16.10上面编译，但是我只有16.04，想来应该是差不多的。

参考官方文档，直接开干。

第一个坑

第一个坑其实是关于git的，具体一点就是关于git的子模块的。如果在命令行checkout dawn-2.x分支，一定不要忘了在子模块不会自动切换分支。而且，手动切换后，也会留下一堆Untracked files，我是直接没管。

第二个坑

一开始自然是使用自动编译脚本./build.sh ubuntu。前面的下载和配置都没有报错，直到编译的时候，提示找不到clang，而且是opt/wasm/bin/下找不到。这好办，找到/usr/bin/clang-4.0，在opt/wasm/bin/下创建个链接就好

第三个坑

然后make -j4，还是提示错误，仔细一看，是binaryen没有。处理第一个坑的时候，明明看到binaryen明晃晃的躺在opt/目录下，怎么没有了？进去一看，居然是空的！！

把官方文档翻到手动编译部分，找到binaryen的github地址，开始clone，只是速度非常慢。过了一段时间，一看已经失败了。提示错误信息：

error: RPC failed; curl 18 transfer closed with outstanding read data remaining
fatal: The remote end hung up unexpectedly
fatal: early EOF

Google之后，网友们会告诉你，这是缓存不够的原因。设置下git的配置 git config --global http.postBuffer 524288000，把缓存加大。而我修改了这个设置之后，又设置了http代理，几秒钟就把代码拉下来了。

大概也就遇到了这两个问题，应该说还算是比较顺利的。文档上说要下载secp256k1-zkp，然后我找了下，自动化脚本应该没有下载，而我也没有手动去下，并没有影响到编译和运行。

如何创建一个 eui 的控件，在 egret 的文档中是比较零散的，而且有些东西也没有讲到。这里提供一个比较完整的范例。

1. 创建一个 exml 文件，用来定义控件的显示元素，这里要注意的classname 的设置，比如设置成 game.CustomButton。game 为模块名（文档上也称呼为命名空间），后面需要用到。

2. 创建一个 ts 文件，用来处理控件的逻辑。这个 ts 文件里面需要有模块，比如：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   module game { export class CustomButton extends eui.Button { public rtQuality: eui.Rect; constructor() { super(); this.skinName = "resource/skins/custom/EquipButtonSkin.exml"; } public set quality(color: number) { if (this.rtQuality) { this.rtQuality.strokeColor = color; } let label = this.labelDisplay as eui.Label; label.textColor = color; } public get quality(): number { if (this.rtQuality) { return this.rtQuality.strokeColor; } return 0x444444; } } }

3. 在其他皮肤中使用的时候，可以从组件列表（COMPONENT/Custom)中直接拖动控件来使用，在 wing 4.03 版本中需要修改一下Category Properties中的 Skin，这应该是 wing 的一个 bug。

4. 看一下 exml 的 Source，会发现添加了两个东西。一个是根节点的 <e:Skin ......... xmlns:game="game.*" >；另一个是添加的控件的 tag 是 <game:CustomButton .....>
   关于这一点，可以参考文档。
5. 在 ts 文件中使用的时候和普通的按钮一样，只是类型需要设置成 game.CustomButton。

MX5上的乐动力 App 很早以前就不能登录了，各种途径都是提示“网络不给力”，等了大半年看他们是否会修正这个问题，但是每次版本更新后都试了，问题依旧存在。而且，无论是官网还是 App或是微博客服，都没有提供相关的说明该如何操作。
为了不丢失数据，只好自己动手了。

进入 Flyme 5 的访客系统，安装微信和乐动力 App，测试登录正常，之前的数据也能正常同步下来。

第一步，祭出 Charles 看看都干了啥

启动 Charles，然后在手机上设置代理，进行登录，发现一个正常的登录主要做了几个操作：

1. adduser，发送一个 pc 串，返回一个临时的 id
2. authbywechat，登录请求，url参数 uid 为之前请求的临时 id，返回用户 id
3. getinfo，获得用户相关信息，包括头像 url
4. updatewechatinfo，更新数据
5. updateinfo，更新数据

第二步，进入正常的系统，看看无法登录的版本都做了些什么

1. authbywechat，url参数 uid 为残留的用户 id，返回 {“errorCode”: -10001, “ret”: “auth fail”}

返回错误后就没有后续请求了。

现在看来就是验证的时候的 uid 的问题。查看反编译后的代码的时候发现，登录成功后这个 uid 是会被覆盖的。这样的话，给 App 一些正常的数据，让他先登录成功一次，以后理论上就不会有问题了。

如果是 root 的设备，直接把 SharedPreferences 中的 uid 的值改为0，App 就会进入 adduser 的流程，这样会比较简单。我不想 root 这个设备，所以写了些代码来模拟登录的流程。

第三部，拦截请求，修改数据

把正常登录的数据保存下来，在拦截到请求后把这些数据返回给 App。可能这部分也可以在 Charles 中完成，不过我修改了 hosts 文件，然后直接写了些 php 代码：
hosts 文件：

1

127.0.0.1 walk.ledongli.cn

路由部分：

1
2
3
4

Route::post('/v2/rest/users/authbywechat', 'MsgController@handleAuthWeChat');
Route::post('/v2/rest/users/getinfo', 'MsgController@handleGetInfo');
Route::post('/v2/rest/users/updatewechatinfo', 'MsgController@handleUpdateWeChatInfo');
Route::post('/v2/rest/users/updateinfo', 'MsgController@handleUpdateInfo');

响应部分(uid 和部分返回值删除了）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public function handleUpdateWeChatInfo(Request $request) {
    return response()->json(["errorCode" => 0, "ret" => null]);
}
public function handleUpdateInfo(Request $request) {
    return response()->json(["errorCode" => 0, "ret" => null]);
}
public function handleAuthWeChat(Request $request) {
    return response()->json(["errorCode" => 0, "ret" => ["uid" => xxxxxxxxxx]]);
}
public function handleGetInfo(Request $request) {
    return response()->json(["errorCode" => 0, "ret" => ["target" => , "weight" => "", "gender" => "m", "checkined" => , "checkin_mcount" => , "birthdate" => "", "height" => "", "is_wechat" => true, "avatar" => "", "is_qq" => false, "is_sina" => false, "nickname" => "", "email" => "", "is_email" => false]]);
}

登录进入 App 之后，把 hosts 文件还原，去掉手机上 wifi 的代理，再在 App 中点击立即备份数据，可以看到开始正常备份了。

最后

• 之所以出现这个问题，是因为残留的 uid 去请求登录的时候会导致失败。可能的原因大概是某一个版本的登录逻辑改变了，但是没有处理好老版本的兼容性。其实哪怕多加一个按钮能重置一下用于登录的临时 id 也好啊。
• 同步的时候也出现了问题，同步一两条数据后就会卡住不动，不会自动重新开始，需要用户反复的进行操作才能把所有的数据同步完。
• 退出登录的时候，居然真的把用户的数据删除了。

综合来看，乐动力这个 App 在这部分上设计得是比较烂的，可能只是一个临时的外包产品的品质。

软件环境：

Node.js 是通过 nvm 安装的最新版本。国内的网络环境，想通过 WebStorm 直接创建工程是做不到的，只能通过命令行，使用淘宝的镜像。

安装 express

1
2
3
4
5

cd reactStudy
npm install --registry=https://registry.npm.taobao.org -g express-generator
express -e -css sass reactStudy
cd reactStudy
npm install --registry=https://registry.npm.taobao.org

安装 react

安装 react、react-dom、babel、browserify、watchify 等模块。package.json 文件的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

{
  "name": "taskmgr",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "babel-cli": "^6.11.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babelify": "^7.3.0",
    "body-parser": "~1.15.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "ejs": "~2.4.1",
    "express": "~4.13.4",
    "express-session": "^1.14.0",
    "morgan": "~1.7.0",
    "mysql": "^2.11.1",
    "node-sass-middleware": "0.8.0",
    "passport": "^0.3.2",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "serve-favicon": "~2.3.0"
  },
  "devDependencies": {
    "browserify": "^13.1.0",
    "watchify": "^3.7.0"
  }
}

创建文件

在 views 目录下创建一个文件作为主文件：main.js。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var React = require('react');
var ReactDOM = require('react-dom');
var Main = React.createClass({
    render: function () {
        return <div>Hello william</div>
    }
});
ReactDOM.render(
    <Main />,
    document.getElementById('content')
);

也可以使用 ES2015的方式来写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import React from "react"
import ReactDOM from "react-dom"
class App extends React.Component{
    constructor(props) {
        super(props)
    }
    render() {
        return <div>Hello World!</div>
    }
}
ReactDOM.render(<App/>, document.getElementById('content'));

配置babel

在WebStorm->Preferences…->Tools->File Watchers下添加Babel。以下字段需要注意修改：

在index.ejs文件的下方添加

1

<script type="text/javascript" src="/javascripts/index.bundle.js"></script>

最后的效果：

1
2
3
4
5
6

<body>
<div id="content"></div>
<script type="text/javascript" src="/javascripts/index.bundle.js"></script>
</body>

因为对 Babel 和 browserify 不熟悉，所以这一段是花时间最多的地方。开始的时候因为用了 jsx 扩展名，在文件头的注释中有@jsx，render 函数翻译出来的代码会带上 file 函数而不是React.createElement，导致错误。后来重启 WebStorm 就好了。

结束.

使用 webstorm，从创建一个空白的工程开始构建一个 Node.js 的websocket服务器。

1. 创建空白工程
2. 添加一个 js 文件，比如 main.js
3. 添加一个 package.json 文件
4. 在控制台中进入工程的根目录，使用命令npm install --save ws添加websocket模块。使用--save参数会把模块的依赖直接添加到 package.json 文件中。
5. 编辑webstorm 的 Run/Debug配置，新建一个 Node.js 的配置，在 JavaScript file:这一栏里面写上main.js。
6. 在 main.js 中填入如下代码：

1
2
3
4
5
6
7
8
9
10

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8280});
wss.on('connection', function connection(ws) {
   ws.on('message', function incoming(message) {
       console.log('received: %s', message);
   });
    ws.send('something');
});

至此，一个服务器就搭建好了。

注意点：
在 webstorm 中，可能会提示Unresolved function or method require()，这是因为没有开启Node.js Core library。在 webstorm 的Preferences->Languages & Frameworks->Node.js and NPM下开启就可以了。