扫雷是一个喜闻乐见的小游戏，今天在看 Weex 文档的过程中，无意中发现用 Weex 完全可以开发一个扫雷出来。当然这个扫雷和 Windows 那个有一点差距，不过麻雀虽小五脏俱全，随机布雷、自动挖雷、标雷那是必须有的。
最后的效果是这个样子的：
界面是简陋了一点，好歹是可以用的，要啥自行车。其实这个 demo 主要是为了实践几件事情：
1. 界面指示器
2. 动态数据绑定
3. 更复杂的事件
扫雷的布局里面只需要用上 repeat 指示器，表示元素的重复出现，比如说一个 9*9 的雷区，布局文件非常的简单：
这样的话我们用 script 里面的 data binding 就能把重复的元素布局好。例如：
但是如果真的这么写的话，一个 9*9 的布局不知道要搞到什么时候，幸亏 data-binding 也是支持动态化的。所以在游戏开始后生成这个布局就好了。
初始化的时候生成每个节点的值，是否是一个雷，计算周围雷的总数，state 表示当前的状态（正常、挖开、标记），同时用 tid 来标记一个块（tile identifier）。
随机的在雷区布雷，直到满足个数：
然后做一次计算，把每个块周围的雷总数计算得到，这里有一个点可以优化，就是当点击第一次之后才去做布雷的操作，这样可以防止用户第一次就挂了。（如果你对扫雷有点了解的话，会知道在 Windows 扫雷里面，是出现过第一次点可能会挂和第一次点一定不会挂这两种的，区别就在这里）
这个计算做完之后，通过 Weex 的 data-binding 就彻底反映到了 View 上面，每个块都有了数据。这里面有个 map 函数，是定义在 script 里面的一个用于枚举位于 (x, y) 的块周围八个点的一个函数：
通过枚举把块 callback 回来，这个函数有多次用到。
然后绑定 onclick 和 onlongpress 函数，实现单击挖雷，长按标雷的功能。这里面的 tile 函数是通过事件发生的 event 对象取到元素的一个方法，值得一提的是这里面我试过官网说的 e.target.id 方法，拿到的是 undefined，所以我才在这里用了 tid 来标记一个元素。
玩过扫雷的都知道，当你挖开一个点，发现这个点周围一个雷都没有，那么程序会自动挖开这个点周围的八个点，同时这个行为会递归下去，直到一整片全部被挖开，在程序里面就是上面的 dfs 函数。
发现某个点为空之后进入 dfs，递归或者展示某个点。接下来就是对雷区局面的判定动作，分为 onfail 和 judge 两个部分。
当点开雷的时候直接进入 onfail，否则进入 judge，如果满足胜利条件则游戏也结束。Weex 的 data 模块里面可以定义一个 JSON 数据，除了做数据绑定，也可以方便的储存其他的数据。
最后
Weex 提供的指示器和数据绑定是不错的东西，用它们可以完成更灵活的界面布局和数据展现。
尤其是数据绑定，他让数值的变化可以直接反馈到界面上，省去了一些繁杂的界面更新逻辑。
这也许是一个不太实用的 demo，但我觉得很有趣。下面是源码：
阿里百川（baichuan.taobao.com）是阿里巴巴集团的无线开放平台，通过“技术、商业及大数据”的开放，提供移动场景下的高内聚、开放式、行业领先的技术产品矩阵、成熟的商业组件和完善的服务体系，帮助移动开发者快速搭建APP、加速APP商业化进程，全方位赋能移动开发者及移动创业者。
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
重庆分公司
重庆分公司
