微信小程序-别踩白块

微信小程序“别踩白块”源码分享

一、项目目录框架及配置

1.文件框架

（1）pages文件夹：

（2）app.js

（3）app.json

（4）app.wxss

（5）app.wxml

（6）project.config.json

（7）sitemap.json

（8）utills文件夹

2.项目配置

二、别踩白块结构分析

1. 模块功能：

2. 文件配置

二、别踩白块各模块代码

1. 全局配置

（1）app.json

（2）app.js

（3）app.wxss

（4）project.config.json

2.首页配置（index）

（1）index.js

（2）index.json

（3）index.wxml

（4）index.wxss

3. 无尽模式配置（endless）

（1）play.js

（2）play.json

（3）play.wxml

（4）play.wxss

4. 计时模式配置（time）

（1）play.js

（2）play.json

（3）play.wxml

（4）play.wxss

5. 急速模式配置（speed）

（1）play.js

（2）play.json

（3）play.wxml

（4）play.wxss

6. 游戏结束配置（end）

（1）end.js

（2）end.json

（3）end.wxml

（4）end.wxss

7. 日志文件配置（logs）

（1）logs.js

（2）logs.json

（3）logs.wxml

（4）logs.wxss

三、别踩白块效果实现

1. 首页效果

2. 模块效果

先看效果图（自己做小程序很简单，下面是具体实现）

在这里插入图片描述

 

首先，要了解微信小程序的开发工具——微信开发者工具

可以在微信公众平台下载软件

 

一、项目目录框架及配置

1.文件框架

（1）pages文件夹：

存放小程序的页面文件，书写各个页面代码以及组件，里面包括各种全局文件。

 

（2）app.js

小程序入口文件，用于定义全局数据和函数的使用，可以指定微信小程序的生命周期函数。

 

（3）app.json

全局文件， 对小程序进行配置，小程序的全局配置，小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等; 包括配置小程序是由哪些页面组成，配置小程序的窗口及背景色，配置导航条样式，配置默认标题等。

 

（4）app.wxss

全局的样式文件。

 

（5）app.wxml

构建页面结构

 

（6）project.config.json

保存开发工具配置项

 

（7）sitemap.json

网站地图，可以对小程序进行seo优化，让搜索排名靠前

 

（8）utills文件夹

存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。

 

以下是结构示图

在这里插入图片描述

在这里插入图片描述

 

2.项目配置

一个小程序最开始要使用app.json文件来对微信小程序进行全局配置，它决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等基础元素。

 

{

  "pages": [

    "pages/index/index",

    "pages/endless/play",

    "pages/time/play",

    "pages/speed/play",

    "pages/end/end",

    "pages/logs/logs"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "别踩白块",

    "navigationBarTextStyle": "black"

  },

  "sitemapLocation": "sitemap.json"

}

二、别踩白块结构分析

1. 模块功能：

无尽模式、计时模式、急速模式、查看日志

 

2. 文件配置

在这里插入图片描述

 

二、别踩白块各模块代码

1. 全局配置

（1）app.json

代码如下：

 

{

  "pages": [

    "pages/index/index",

    "pages/endless/play",

    "pages/time/play",

    "pages/speed/play",

    "pages/end/end",

    "pages/logs/logs"

  ],

  "window": {

    "backgroundTextStyle": "light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "别踩白块",

    "navigationBarTextStyle": "black"

  },

  "sitemapLocation": "sitemap.json"

}

（2）app.js

代码如下：

 

//app.js

App({

  onLaunch: function () {

    //调用API从本地缓存中获取数据

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

  },

  getUserInfo:function(cb){

    var that = this

    if(this.globalData.userInfo){

      typeof cb == "function" && cb(this.globalData.userInfo)

    }else{

      //调用登录接口

      wx.login({

        success: function () {

          wx.getUserInfo({

            success: function (res) {

              that.globalData.userInfo = res.userInfo

              typeof cb == "function" && cb(that.globalData.userInfo)

            }

          })

        }

      })

    }

  },

  getHeighestScore: function(scoreName, cb){

    this.globalData[scoreName] = wx.getStorageSync(scoreName);

    typeof cb == "function" && cb(this.globalData[scoreName])

  },

  globalData:{

    userInfo: null,

    currentScore: 0,

    endlessScore: null,

    timeScore: null,

    speedScore: null

  }

})

 

（3）app.wxss

代码如下：

 

/**app.wxss**/

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-sizing: border-box;

} 

 

1

2

3

4

5

6

7

8

9

（4）project.config.json

代码如下：

 

{

  "description": "项目配置文件",

  "packOptions": {

    "ignore": []

  },

  "setting": {

    "urlCheck": true,

    "es6": true,

    "enhance": false,

    "postcss": true,

    "preloadBackgroundData": false,

    "minified": true,

    "newFeature": false,

    "coverView": true,

    "nodeModules": false,

    "autoAudits": false,

    "showShadowRootInWxmlPanel": true,

    "scopeDataCheck": false,

    "uglifyFileName": false,

    "checkInvalidKey": true,

    "checkSiteMap": true,

    "uploadWithSourceMap": true,

    "compileHotReLoad": false,

    "useMultiFrameRuntime": true,

    "useApiHook": true,

    "useApiHostProcess": false,

    "babelSetting": {

      "ignore": [],

      "disablePlugins": [],

      "outputPath": ""

    },

    "enableEngineNative": false,

    "bundle": false,

    "useIsolateContext": true,

    "useCompilerModule": true,

    "userConfirmedUseCompilerModuleSwitch": false,

    "userConfirmedBundleSwitch": false,

    "packNpmManually": false,

    "packNpmRelationList": [],

    "minifyWXSS": true

  },

  "compileType": "miniprogram",

  "libVersion": "2.16.1",

  "appid": "wxd5512791eaec8564",

  "projectname": "miniprogram-1",

  "debugOptions": {

    "hidedInDevtools": []

  },

  "scripts": {},

  "isGameTourist": false,

  "condition": {

    "search": {

      "list": []

    },

    "conversation": {

      "list": []

    },

    "game": {

      "list": []

    },

    "plugin": {

      "list": []

    },

    "gamePlugin": {

      "list": []

    },

    "miniprogram": {