「2.0」一个人开发一个App，小程序从0到1，文件剖析

不知你是不是见到“文件剖析”这4个大字，才点进来看一看的？如果真是的话，那我可以坦诚、真心、负责任地告诉你：你上当了，你上了贼船啦，如果你现在想跳的话，还来得及，反正茫茫大海中，鲨鱼正缺搞程序的人。说你上当了，是因为我根本就剖析不了。我顶多只能做到分析。

2.1 配置文件分析

赶快打开微信开发工具，快速进到项目窗口中。展开pages，展开index，展开logs，展开utils，展开一切可以展开的。唯有如此，方能见到整个项目的全貌。

项目中，工程配置文件project.config.json，可用来配置appid、项目名称、调试基础库，还有云开发的文件夹路径，至于其他的，几乎不会做任何改动。

项目中，页面索引文件sitemap.json,可配置页面是否可被索引(搜索), action为allow表示同意，disallow表示不同意；page为*表示所有页面，pages/index

/index指定某个页面。

小程序项目中，除了配置文件外，还有应用文件和页面文件。

2.2 页面文件分析

一个小程序应用，由index，logs等多个页面组成。一个页面，由负责配置的json，布局的wxml，样式的wxss和业务逻辑的js组成。

这是一个关于1+1+1+1=4的故事，故事从配置文件json开始。

2.2.1 json文件

json文件可配置窗口顶部导航栏的背景色、标题、标题颜色和引入第3方组件。第3方组件，唯有在json文件中引入，方可在wxml文件中使用。

{

"usingComponents": {

"mp-cells": "../../components/cells/cells",

"mp-cell": "../../components/cell/cell"

},

"navigationBarTitleText": "关于",

"navigationBarTextStyle": "black"

}

2.2.2 wxml文件

wxml文件，对手机界面进行布局。布局可从左到右，上到下；可从右到左，下到上；可左青龙，右白虎，上图片，下按钮。

上图片，下按钮是我要实现功能，而左青龙，右白虎是留给你的作业，记得按时完成哦。完成之后，仔细观察一下代码，你就会发现有个莫名其妙的container，莫名其妙地出现在那里。不要急，存在即是合理，只是还没说到wxss文件而已。

<view class="container">

<image src="../../images/long.png" style="width: 750rpx;height: 450rpx"></image>

<button>确定</button>

</view>

2.2.3 wxss文件

wxss文件，是wxml的好基友，一直站在wxml背后，承担着化妆师(样式)的工作。这就是，每个成功的wxml，背后都会有一个wxss的来由。正是有了wxss的支持，wxml才可以放心、大胆地布局，大胆地布局天下。

好看的皮囊千篇一律，有趣的灵魂万里挑一，光有布局，光有一张靓丽的外表，不足以成就大业。若想成就大业，得靠js文件来实现，实现业务逻辑。

.container {

height: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

2.2.4 js文件

js文件，实现业务逻辑并把结果显示在wxml中，昭告天下。如果只是实现一个简单任务，像计算1+1=2这种，那单个js应该是没问题的，只是理想很丰满，现实很骨感，一个小程序应用，往往要实现的功能远远不止于如此。

为了提高开发效率，可把一些通用的功能，放在一个通用的js文件里，并放置在utils下。等页面中的js文件要使用时，用require引入便可。

既然有js可共用，那是否有wxss可供共用？有的，app.wxss文件便是。

const util = require('../../utils/util.js')

Page({

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})

2.3 app.wxss文件

app.wxss文件，为整个应用的样式配置文件。在这里配置的样式，可供所有页面共用，而且不用任何操作。真好，微信产品经理，总算做了一件让程序员省心的事了。

一说到省心，你就开心，一开心，便忘乎所以，忘记还有app.js和app.json未被提及。这两个家伙，可是很重要的角色。

app.js，是一名有着一夫当关万夫莫开本事的土匪。若要进到页面，得先过app.js这一关，此路是他开此树是他栽，要想从此过，脱下裤子来。

就是说，全局的内容，全局变量和全局的业务逻辑，在这里实现。至于全局的配置，请移步到app.json文件中。

//app.js

App({

onLaunch: function () {

// 展示本地存储能力

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

logs.unshift(Date.now())

wx.setStorageSync('logs', logs)

},

globalData: {

userInfo: null

}

})

2.4 app.json文件

app.json文件，对整个应用进行配置的配置文件。在这，可配置统一风格的窗口(window)风格，包括页面的标题栏背景色，标题(这个不太可能)，标题颜色；

可配置且必须配置的页面路径(pages)；可配置全局切换标签，可配置定位等权限声明和授权提示信息，可引入第3方插件。

可，可，可，渴就喝水去。

{

"pages": [

"pages/index/index",

"pages/logs/logs"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

},

"permission": {

"scope.userLocation": {

"desc": "请授予位置服务权限，以便更好的吃饭"

}

},

"tabBar": {

"borderStyle": "black",

"backgroundColor": "#ffffff",

"color": "#1b1b1b",

"selectedColor": "#2b2b2b",

"list": [

{

"iconPath": "images/about.png",

"selectedIconPath": "images/about_p.png",

"pagePath": "pages/about/index",

"text": "关于"

},

{

"iconPath": "images/my.png",

"selectedIconPath": "images/my_p.png",

"pagePath": "pages/my/index",

"text": "我的"

}

]

},

"sitemapLocation": "sitemap.json"

}

等等，听我讲了大半天，是不是感觉少了点什么，没错，少了给我发红包了。少了讲开发工具生成的源代码了，少了怼微信产品经理了。

好吧，那我就再怼一句，微信的小程序的产品经理，你们生成的代码，我看不懂，也不想看，下一节，我就统统把它们删掉。