1. 开篇导言
- 本节目标：对于上篇需求分析做减法。
- 目标用户：学习过【入门篇】的同学或有一定编程经验的同学。
- 学习目标：如果2048”就是一个页面，那么开始动手吧！
- 案例分析：小游戏2048。
- 传送门：
上一篇：微信小程序教程-入门篇【1】
下一篇：微信小程序教程-入门篇【3】
2. 对需求设计做减法
上一节的流程图相信大家都看了。对于怎么研发自己的2048相信大家也有自己的思路和办法。
笔者也把自己的思路在这里和大家分享一下。做减法，先做Y轴纵向，在X轴横向。
Y轴：业务逻辑的粒度级别的放大/缩小。
X轴：业务逻辑在同一个粒度级别中的逻辑加/减。
那么对【2048】的Y轴简化后，就是一个静态页面。X轴简化后，去除格子。复杂度大大降低了，Let's GO！
3. 2048主页面
实现流程：1. 绿色的导航栏部分。
2. 蓝色的游戏frame部分。
4. 导航栏
- 目录
app.js如下：
- //notShopfang to do
- App({})
复制代码
app.json如下：
- {
- "pages":[
- "pages/2048/2048"
- ],
- "window":{
- "navigationBarBackgroundColor":"#ffffff",
- "navigationBarTextStyle":"#000000",
- "navigationBarTitleText": "Demo:2048",
- "backgroundTextStyle":"light"
- },
- "debug": false
- }
复制代码
【window】导航栏相关设置。
app.wxss为空。
2048.js如下：
- //空page
- Page({})
复制代码
2048.wxml，2048wxss都为空。
5. 游戏frame部分
我们只需修改2048.wxml，2048.wxss
2048.wxml如下：
-
-
-
-
2048 -
-
-
-
-
你能拿到2048吗？ -
新游戏 -
复制代码
我们需要有与之配套的2048.wxss，代码过多不在这里复制出来。请下载源代码查看。
5. 小结
方法论：Y轴，X轴。有时间的同学，请去了解一下涉及到的css样式。虽不纠结于细节，但请在头脑中保留一个认识。
6. 预告
下一节将继续进行2048的拆解和coding。
第二部分：如何开通一个小商店
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***
【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。
