| 微信小程序之2048小游戏（一） | 您所在的位置：网站首页 › 小程序2048卡 › 微信小程序之2048小游戏（一） |
微信小程序之2048小游戏（一）
|
微信小程序之2048小游戏（一）
前言小程序的整体思维图主界面配置页面.wxml.wxss.js
小结
前言
这一篇文章主要介绍的小程序是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文件内的数据来完成按钮的创建。 // 遍历gamelist数据 |
接下来，我们根据该思维图进行学习。
【本文地址】
公司简介
联系我们