「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"

}

等等，聽我講了大半天，是否是感受少了點什麼，沒錯，少了給我發紅包了。少了講開發工具生成的源代碼了，少了懟微信產品經理了。

好吧，那我就再懟一句，微信的小程序的產品經理，大家生成的代碼，我看不懂，也不想看，下一節，我就通通把它們刪掉。