找回密码
 立即注册

QQ登录

只需一步,快速开始

微信小程序开发资源

关注:1470

所属分类: 微信开发 微信小程序开发资源

本版块为微信小程序资源分享版块,包括微信小程序开发中可能会用到的各类小程序开发工具、小程序demo及开发教程等。

快捷导航www.henkuai.com):微信小程序开发者社区微信小程序开发问答微信小程序开发交流群


[最新文章] 【2048】-微信小程序教程-入门篇-实战【2】-狂兔科技

  [复制链接]
查看: 31918|回复: 95
最佳答案
0 

9

主题

34

帖子

1783

积分

专家路上

积分
1783
 楼主| 发表于 2016-11-5 03:58:46 | 显示全部楼层 |阅读模式
本帖最后由 狂兔科技 于 2016-11-5 03:58 编辑

1. 开篇导言    
  • 本节目标:对于上篇需求分析做减法。
  • 目标用户:学习过【入门篇】的同学或有一定编程经验的同学。
  • 学习目标:如果2048”就是一个页面,那么开始动手吧!
  • 案例分析:小游戏2048。
  • 代码下载
  • 在线试玩(点我啊!!!)
  • 传送门:

目录:微信小程序教程-开篇导言-狂兔科技
上一篇:【2048】-微信小程序教程-入门篇-实战【1】-狂兔科技   
下一篇:暂无。

2. 对需求设计做减法

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

3. 2048主页面



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

4. 导航栏



  • 目录



app.js如下:
  1. //nothing to do
  2. App({})
复制代码

app.json如下:
  1. {
  2.   "pages":[
  3.     "pages/2048/2048"   
  4.   ],
  5.   "window":{   
  6.     "navigationBarBackgroundColor":"#ffffff",
  7.     "navigationBarTextStyle":"#000000",
  8.     "navigationBarTitleText": "Demo:2048",
  9.     "backgroundTextStyle":"light"
  10.   },
  11.   "debug": false
  12. }
复制代码
【window】导航栏相关设置。

app.wxss为空。

2048.js如下:
  1. //空page
  2. Page({})
复制代码

2048.wxml,2048wxss都为空。

5. 游戏frame部分

我们只需修改2048.wxml,2048.wxss

2048.wxml如下:
  1. <view class="container">

  2.   <view class="game-body">
  3.     <view class="heading">
  4.               <text class="title">2048</text>
  5.               <view class="scores-container">
  6.                 <view class="score-container"></view>
  7.                       <view class="best-container"></view>
  8.               </view>
  9.     </view>

  10.     <view class="above-game">
  11.               <text class="game-intro">你能拿到2048吗?</text>
  12.               <text class="restart-button">新游戏</text>
  13.     </view>

  14.     <view class="game-container">      
  15.           </view>

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

5. 小结

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

6. 预告

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




wxapp-2048-main_frame.zip

2.88 KB, 下载次数: 911

回复

使用道具 举报

最佳答案
0 

2

主题

84

帖子

1173

积分

专家路上

积分
1173
发表于 2016-11-5 04:28:35 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

45

帖子

933

积分

专家路上

积分
933
发表于 2016-11-6 09:35:58 | 显示全部楼层
谢谢楼主分享的资源!!!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

16

帖子

188

积分

新人求带

积分
188
发表于 2016-11-6 10:36:42 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

4

帖子

45

积分

新人求带

积分
45
发表于 2016-11-6 22:32:35 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

2

帖子

51

积分

新人求带

积分
51
发表于 2016-11-7 11:44:37 | 显示全部楼层
终于找到个详细教程的了,感谢
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

96

帖子

597

积分

略知一二

积分
597
发表于 2016-11-7 14:54:20 | 显示全部楼层
激动人心,无法言表!
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

2

帖子

47

积分

新人求带

积分
47
发表于 2016-11-8 09:45:31 | 显示全部楼层
真是难得给力的帖子啊。     要是更多点就好了
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

175

帖子

1427

积分

专家路上

积分
1427
发表于 2016-11-8 13:35:19 | 显示全部楼层
我只是路过打酱油的。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

175

帖子

1427

积分

专家路上

积分
1427
发表于 2016-11-8 13:35:26 | 显示全部楼层
:@
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

广告推广
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com