|
不知你是不是見到“文件剖析”這4個大字,，才點進(jìn)來看一看的,？如果真是的話，那我可以坦誠,、真心,、負(fù)責(zé)任地告訴你：你上當(dāng)了，你上了賊船啦,，如果你現(xiàn)在想跳的話,，還來得及，反正茫茫大海中,，鯊魚正缺搞程序的人,。說你上當(dāng)了，是因為我根本就剖析不了,。我頂多只能做到分析,。 2.1 配置文件分析 趕快打開微信開發(fā)工具，快速進(jìn)到項目窗口中,。展開pages,，展開index，展開logs,，展開utils,，展開一切可以展開的。唯有如此,，方能見到整個項目的全貌,。 項目中，工程配置文件project.config.json,，可用來配置appid,、項目名稱、調(diào)試基礎(chǔ)庫,，還有云開發(fā)的文件夾路徑,，至于其他的，幾乎不會做任何改動,。 項目中,，頁面索引文件sitemap.json,可配置頁面是否可被索引(搜索), action為allow表示同意,，disallow表示不同意；page為*表示所有頁面,，pages/index /index指定某個頁面,。 小程序項目中，除了配置文件外,，還有應(yīng)用文件和頁面文件,。
2.2 頁面文件分析 一個小程序應(yīng)用，由index,，logs等多個頁面組成,。一個頁面，由負(fù)責(zé)配置的json,，布局的wxml,，樣式的wxss和業(yè)務(wù)邏輯的js組成。 這是一個關(guān)于1+1+1+1=4的故事,，故事從配置文件json開始,。 2.2.1 json文件 json文件可配置窗口頂部導(dǎo)航欄的背景色、標(biāo)題,、標(biāo)題顏色和引入第3方組件,。第3方組件，唯有在json文件中引入,，方可在wxml文件中使用,。 { "usingComponents": { "mp-cells": "../../components/cells/cells", "mp-cell": "../../components/cell/cell" }, "navigationBarTitleText": "關(guān)于", "navigationBarTextStyle": "black" } 2.2.2 wxml文件 wxml文件，對手機(jī)界面進(jìn)行布局,。布局可從左到右,，上到下；可從右到左,，下到上,；可左青龍，右白虎,，上圖片,，下按鈕。 上圖片,，下按鈕是我要實現(xiàn)功能,，而左青龍，右白虎是留給你的作業(yè),，記得按時完成哦,。完成之后，仔細(xì)觀察一下代碼,，你就會發(fā)現(xiàn)有個莫名其妙的container,，莫名其妙地出現(xiàn)在那里,。不要急，存在即是合理,，只是還沒說到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背后，承擔(dān)著化妝師(樣式)的工作,。這就是,，每個成功的wxml，背后都會有一個wxss的來由,。正是有了wxss的支持,，wxml才可以放心、大膽地布局,，大膽地布局天下,。 好看的皮囊千篇一律，有趣的靈魂萬里挑一,，光有布局,，光有一張靚麗的外表，不足以成就大業(yè),。若想成就大業(yè),，得靠js文件來實現(xiàn)，實現(xiàn)業(yè)務(wù)邏輯,。 .container { height: 100%; display: flex; flex-direction: column; align-items: center; } 2.2.4 js文件 js文件,，實現(xiàn)業(yè)務(wù)邏輯并把結(jié)果顯示在wxml中，昭告天下,。如果只是實現(xiàn)一個簡單任務(wù),，像計算1+1=2這種，那單個js應(yīng)該是沒問題的,，只是理想很豐滿,，現(xiàn)實很骨感，一個小程序應(yīng)用,，往往要實現(xiàn)的功能遠(yuǎn)遠(yuǎn)不止于如此,。 為了提高開發(fā)效率，可把一些通用的功能,，放在一個通用的js文件里,，并放置在utils下。等頁面中的js文件要使用時,，用require引入便可,。 既然有js可共用,，那是否有wxss可供共用？有的,，app.wxss文件便是,。 const util = require('../../utils/util.js') Page({ /** * 頁面的初始數(shù)據(jù) */ data: { }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { } }) 2.3 app.wxss文件 app.wxss文件，為整個應(yīng)用的樣式配置文件,。在這里配置的樣式,，可供所有頁面共用，而且不用任何操作,。真好,，微信產(chǎn)品經(jīng)理，總算做了一件讓程序員省心的事了,。 一說到省心,，你就開心，一開心,，便忘乎所以,，忘記還有app.js和app.json未被提及。這兩個家伙,，可是很重要的角色,。 app.js，是一名有著一夫當(dāng)關(guān)萬夫莫開本事的土匪,。若要進(jìn)到頁面,，得先過app.js這一關(guān)，此路是他開此樹是他栽,，要想從此過,，脫下褲子來。 就是說,，全局的內(nèi)容,，全局變量和全局的業(yè)務(wù)邏輯，在這里實現(xiàn),。至于全局的配置,，請移步到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文件,，對整個應(yīng)用進(jìn)行配置的配置文件,。在這，可配置統(tǒng)一風(fēng)格的窗口(window)風(fēng)格,，包括頁面的標(biāo)題欄背景色,，標(biāo)題(這個不太可能)，標(biāo)題顏色,； 可配置且必須配置的頁面路徑(pages),；可配置全局切換標(biāo)簽,，可配置定位等權(quán)限聲明和授權(quán)提示信息，可引入第3方插件,。 可,，可，可,，渴就喝水去,。 { "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "permission": { "scope.userLocation": { "desc": "請授予位置服務(wù)權(quán)限，以便更好的吃飯" } }, "tabBar": { "borderStyle": "black", "backgroundColor": "#ffffff", "color": "#1b1b1b", "selectedColor": "#2b2b2b", "list": [ { "iconPath": "images/about.png", "selectedIconPath": "images/about_p.png", "pagePath": "pages/about/index", "text": "關(guān)于" }, { "iconPath": "images/my.png", "selectedIconPath": "images/my_p.png", "pagePath": "pages/my/index", "text": "我的" } ] }, "sitemapLocation": "sitemap.json" } 等等,，聽我講了大半天,，是不是感覺少了點什么,，沒錯,，少了給我發(fā)紅包了。少了講開發(fā)工具生成的源代碼了,，少了懟微信產(chǎn)品經(jīng)理了,。 好吧，那我就再懟一句,，微信的小程序的產(chǎn)品經(jīng)理,，你們生成的代碼，我看不懂,，也不想看,，下一節(jié)，我就統(tǒng)統(tǒng)把它們刪掉,。 |
|
|
