微信小程序教程入门篇【2】,小程序小游戏2048实战讲解

—— 2017 ——

12/20

00:00

来源：

作者：未知

栏目：小程序开发

2017/12/20 0:00:00 来源：不详作者：未知

1. 开篇导言

本节目标：对于上篇需求分析做减法。
目标用户：学习过【入门篇】的同学或有一定编程经验的同学。
学习目标：如果2048”就是一个页面，那么开始动手吧！
案例分析：小游戏2048。
传送门：

上一篇：微信小程序教程-入门篇【1】
下一篇：微信小程序教程-入门篇【3】

2. 对需求设计做减法

上一节的流程图相信大家都看了。对于怎么研发自己的2048相信大家也有自己的思路和办法。
笔者也把自己的思路在这里和大家分享一下。做减法，先做Y轴纵向，在X轴横向。
Y轴：业务逻辑的粒度级别的放大/缩小。
X轴：业务逻辑在同一个粒度级别中的逻辑加/减。
那么对【2048】的Y轴简化后，就是一个静态页面。X轴简化后，去除格子。复杂度大大降低了，Let's GO！

3. 2048主页面

微信小程序教程入门篇【2】,小程序小游戏2048实战讲解

实现流程：1. 绿色的导航栏部分。
2. 蓝色的游戏frame部分。

4. 导航栏

微信小程序教程入门篇【2】,小程序小游戏2048实战讲解

app.js如下：

//nothing 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如下：

<view class="container">
<view class="game-body">
<view class="heading">
<text class="title">2048</text>
<view class="scores-container">
<view class="score-container"></view>
<view class="best-container"></view>
</view>
</view>
<view class="above-game">
<text class="game-intro">你能拿到2048吗？</text>
<text class="restart-button">新游戏</text>
</view>
<view class="game-container">
</view>
</view>

复制代码

我们需要有与之配套的2048.wxss，代码过多不在这里复制出来。请下载源代码查看。

5. 小结

方法论：Y轴，X轴。有时间的同学，请去了解一下涉及到的css样式。虽不纠结于细节，但请在头脑中保留一个认识。

6. 预告

下一节将继续进行2048的拆解和coding。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

微信小程序教程入门篇【3】,MINA框架的目录结构和配置

本帖最后由狂兔科技于 2016-11-1 18:10 编辑 1. 开篇导言本节目标：通过上一节的讲解，相信大家对小程序框架MINA有了初步了解。接下来将会对其进行深入介绍。目标用户：无编程

微信小程序SaaS 2017/12/20 0:00:00
微信小程序教程入门篇【1】,用开发者工具构建运行简单应用实例

本帖最后由狂兔科技于 2016-10-11 12:25 编辑 1. 开篇导言本节目标：旨在演示如何用开发者工具构建并运行简单的 helloworld 应用。目标用户：无编程经验，但对微信小程序

微信小程序SaaS 2017/12/20 0:00:00