前言

这一篇文章主要介绍的小程序是2048小游戏，该小程序来自Github。在Github上下载后，直接导入到小程序开发工具中即可运行。

小程序的整体思维图

接下来，我们根据该思维图进行学习。

主界面

该小程序的主界面如下

配置

主界面主要包含了三大模块，第一个是状态栏内，第二个是内容区域，第三个是可进行切换的tab。
通过之前的学习我们可知，状态栏和进行导航的tab能够由配置文件完成配置，故我们可以看到app.json。下方给出app.json的代码和相应的注释。

{// 三个页面路由"pages": [// 打开小程序所显示的页面"pages/index/index",// 切换到日志所显示的页面"pages/logs/logs",// 点击2048按钮后跳转的页面"pages/2048/2048"],// 状态栏"window": {// 状态栏颜色"navigationBarBackgroundColor": "#333",// 状态栏的默认文字"navigationBarTitleText": "2048小游戏"},// 底部tab的配置信息"tabBar": {// 颜色"color": "#353535",// 选中时的颜色"selectedColor": "#3cc51f",// 边界样式"borderStyle": "black",// 背景颜色"backgroundColor": "#ffffff",// 配置tab// 几个tab，tab的路由，tab的名称，tab默认时的图片，tab选中时的图片"list": [{"pagePath": "pages/index/index","text": "游戏","iconPath": "./assets/diamond.png","selectedIconPath": "./assets/diamond.png"},{"pagePath": "pages/logs/logs","text": "日志","iconPath": "./assets/star.png","selectedIconPath": "./assets/star.png"}]},// 配置网络超时信息"networkTimeout": {"request": 10000,"downloadFile": 10000},"debug": false,"sitemapLocation": "sitemap.json"
}

通过上述的代码可以完成小程序的整体配置。其中有一个小点，就是默认的状态栏名称为2048小游戏，而初始页面显示的是游戏列表。出现这样的不同是因为在index页面中，index页面单独对状态栏进行了配置，而页面的配置会覆盖掉全局的配置。

页面

该小程序的主界面的结构，样式和逻辑由index这个文件夹内的代码实现。

.wxml

通过遍历index.js文件内的数据来完成按钮的创建。

<!--index.wxml-->
<view class="container">// 遍历gamelist数据<view wx:for-items="{{gameList}}" wx:for-index="idx" wx:key="idx" class="usermotto">// item为gamelist每一项的值// 按钮的响应函数为start{{item}}<button type="primary" disabled="{{disabled}}" bindtap="start{{item}}"> {{item}} </button></view><text class="more">更多内容，敬请期待...</text>
</view>

.wxss

控制页面样式的样式文件

.js

主要实现按钮的点击跳转以及信息的初始化

//获取应用实例
var app = getApp();// 初始化config实例，用于后面的page加载
var config = {// 数据字典data: {disable: false,gameList: ['2048']},// 系统自动调用的加载函数onLoad: function() {var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo) {//更新数据that.setData({userInfo: userInfo})})},onReady: function() {// 页面渲染完毕},onShow: function() {// 页面展示},onHide: function() {// 页面隐藏},onUnload: function() {// 页面关闭}
};// 设置属性名"start{Name}"到相应游戏页面的映射
// 遍历gamelist数组，并取到每个item值来构建一个函数
config.data.gameList.forEach(function(v) {// 在config中创建名为'start' + v的函数config['start' + v] = function() {config.data.disable = true;// 这里需要注意每个游戏文件夹名称需和js名称保持一致// 使用传入的v来进行路由的跳转wx.navigateTo({url: '../' + v + '/' + v})}
});
// 将config实例到该页面
Page(config);

小结

这篇记录主要讨论了2048小程序的主要思维图，以及主界面的实现。下一篇记录将讨论点击2048这个按钮后发生的事。文字略有粗糙，往大佬指正。

微信小程序之2048小游戏（一）相关推荐

微信小程序之2048小游戏（二）
微信小程序之2048小游戏(二) 前言思维图程序界面图页面结构 .wxml .js 游戏组件大纲小结前言在本系列之前的文章中,我们已经对该小程序的主界面和全局配置方面进行了学习.因此,这篇 ...
微信小程序：2048小游戏
实战看了微信小程序的开发文档和熟悉了微信小程序的使用后,拿著名的2048小游戏练练手,做个DEMO玩玩. IDEA 界面抽象如下: [重新开始按钮] [模式选择] [用时(秒级)] [难度级别] 时 ...
微信小程序项目实例——2048小游戏
今日推荐
微信小程序｜使用小程序制作一个2048小游戏
文章目录一.文章前言二.创建小程序三.功能开发一.文章前言此文主要通过小程序实现2048游戏,游戏操作简单,容易上手. 规则:正常打开游戏的界面,会只有两个2,每次移动后都会出现一个2,数字 ...
为什么微信小程序也能做游戏？
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 作者:纪喜才,YY Android 工程师从昨天到现在,微信最重磅的消息 -- 「小程序开 ...
微信世界争霸服务器,微信世界争霸小程序进不去游戏怎么办
微信世界争霸小程序进不去游戏怎么办?微信世界争霸小游戏设置相关问题问答攻略,希望对大家有帮助. Q:世界争霸一共有多少个区服,如何查看自己在哪个服呢? A:情况是这样的: 1.目前游戏共有8个服,后续 ...
小程序源码：游戏助手王者战力查询扫码登录多功能微信小程序
这是一款游戏多功能助手小程序内由王者战力查询(支持微信QQ双端查询,安卓IOS) 游戏扫码登录(内支持多种游戏扫码登录) 短视频去水印功能(支持各大平台) 游戏改名助手(支持空白名生成,符号名生成) ...
小程序源码：游戏助手微信小程序源码王者荣耀战力查询,游戏扫码登录器-多玩法安装简单
这是一款游戏助手小程序源码,UI方面的话还是挺简单,小编个人看着挺舒服的小程序内支持多种热门游戏扫码登录,也就是说是一个游戏登录器比如英雄联盟,王者荣耀,和平精英等等热门游戏都支持另外还有王者战 ...
php 翻牌,微信小程序版翻牌小游戏的实现
这篇文章主要为大家详细介绍了微信小程序版翻牌小游戏,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序翻牌游戏的具体代码,供大家参考,具体内容如下一.新建一个quick ...

微信小程序之2048小游戏（一）

微信小程序之2048小游戏（一）

前言

小程序的整体思维图

主界面

配置

页面

.wxml

.wxss

.js

小结

微信小程序之2048小游戏（一）相关推荐

最新文章

热门文章