我是一個大二的學生，在接觸小程序之前我是一個學計算機運維的，后來入了坑，在入坑以后開發了兩個小程序。

第一個是為學校開發的一個考勤的小程序，樣式是別人設計的，后台是用老師幫忙寫的，用PHP和MySQL寫的，當時我還不懂怎么寫后台接口，我主要是實現了小程序的一些功能，直到現在，我都還是一直在維護這個小程序，在一些功能上的升級什么的，由於學校學生的數量多，數據量大，所以在數據處理上花了不少的功夫，這里就不多說了。

第二個是為了參加全國高校小程序大賽寫的一個小程序，雖然這個我並沒有花多少心思，但是這個全權為我一個人負責寫的，雖然樣式還是請的專業ui設計人員設計的。我花學生價在阿里雲上買了一個雲服務器，自己搭建的Apache，PHP，MySQL，然后自己寫的接口，但時沒有備案的域名，所以這個小程序只能算一個試驗品。

開發了兩個項目之后我回頭看看我當初是怎么入這個坑的，找到了我當時寫的一份豆瓣電影小程序解析的文檔，發現我現在寫代碼的風格完全和豆瓣電影小程序代碼風格一樣。下面我是處入坑解析的文檔，有錯誤的地方歡迎指出了。

 

電影程序解析過程

一、電影的主頁加載過程和下拉刷新和下拉觸底的實現

首先我解析程序是按照程序的執行流程進行解析的，開始程序加載的是pages/popular/popular這個頁面，從popular.wxml開始看起

 

 

該頁面分為3塊，第一塊是搜索框加輪播，第二塊和第三塊是引用的兩個模板文件。首先第一行代碼有一個if判斷，在js中看到該值為true，所以這里取反為false。所以該處的代碼先放着。

看引入的一塊模板

 

 

這里最外面有一個if判斷，該值為true，所以加載里面的內容，這里class=“loading”是全局的，所以再進app.wxss中看，

 

 

 

這里用的固定定位，然后設置居屏幕中間，設置寬高為200rpx，所以圖片整體往右下移動了200rpx，所以又設置margin為-100rpx移動，這樣圖像就是居中的，然后設置文字行高為300rpx，（其實這個300rpx是圖片高度，150rpx）然后設置圓角，然后引入背景圖片等等，最下面的animation：bounceIn .3s這里是css3的動畫效果，執行一次該動畫有時0.3s，關於css3更多動畫http://css3lib.alloyteam.com/uilib/animation/demo1/#cta。

*引入的第二塊模板先不看。*

接下來看popular.js。

 

 

首先看到引用了外部的兩個js模塊，然后page里面data定義了初始值，然后是頁面的渲染，執行onLoad函數，執行第14行代碼，在導航條顯示加載動畫，然后執行app.getCity函數，第三行代碼有引入getApp，在執行該函數的時候把函數作為實參傳遞進去，函數為第15行到第25行，然后看app.js。此時導航條的加載動畫還在執行。

 

 

該函數的形參以cb接收，這里注意var that=this，然后執行微信自帶的API接口wx.getLocation接收用戶的地理位置，返回的類型為gcj02，返回的將會是經緯度，然后當獲取數據成功時，把維度和經度進行拼串處理，（中間加個逗號，經度加1）然后做一個網絡請求，把用戶的經緯度在百度地圖上換算成地址，第33行URL接口是從引入的js中獲取的百度地圖接口，data中傳入了幾行數據，ak是密鑰，location是剛剛獲取的經緯度，output獲取數據格式類型，pois不懂是什么，然后是獲取數據的方法，然后當數據請求成功時，返回res，res.data.result.addressComponent.city是返回的所在的城市地址，城市地址給config.city，然后用slice進行字符串的截取，0為初始位置，-1是倒數一位數，（例如：我所在的地方是武漢市，截取出來就是武漢），然后判斷cb是否為函數，是函數就執行這個函數，並把城市位置作為實參傳遞進去，（這里我認為沒必要這么寫，這里cb已經寫好了為函數，所以我覺得沒必要判斷，並且把地址傳遞進去也沒什么用，這個函數里面用的是config.city。所以可以直接執行cb（）就好了。）如果失敗就重新執行這個函數，這里突顯了var that=this的意義，如果上面不寫這行代碼，這里寫this.getCity()，那么這里的this就不是指代整個app.js了，就達不到我們想要的效果。

到這里為止我們獲取到了城市信息，上導航條加載完成。然后接着回popular.js看正在執行的函數，當該函數開始執行，第16條代碼隱藏導航條加載動畫，17行代碼設置當前標題，然后執行20條代碼。

第20行代碼是執行douban.fetchFilms,在this中執行，這是call的用法。（

//call方法的意思是把douban.fetchFilms方法放到that上執行

//douban.fetchFilms中的this指向的是that，也就是這個頁面的函數，

//call傳遞的參數是以字符串形式，apply是以數組形式傳遞，僅此區別

//這一段代碼的作用是讓douban.fetchFilms方法在that中執行。

）傳遞進去兩個參數，一個為豆瓣的接口，一個為剛剛賦的初始值，也就是電影數量start，然后接着看douban.fetchFilms。

 

 

首先依然是引入了兩個js模板，在第7行代碼時候調用了message.hide，同樣是用的call方法，在當前頁面調用，然后找到message.hide

 

 

這里的hide實現的功能是把visiable設為false，這里回到看剛剛主頁沒有看的第二塊模板。

 

 

這里的hidden是隱藏元素的用法，這里message.visiable剛剛得到是false，所以這里是true，所以這里的元素被隱藏了，其實這里隱藏的元素是沒有網絡下的樣式，然后返回看douban.fetchFilms，下面是if判斷that.data.hasMore，初始值hasMore為true，然后調用的是網絡請求，URL是豆瓣接口，然后data傳入的當前城市，當前電影數量，和總數（config.count），然后下面是傳輸類型，和編碼樣式，當網絡請求成功時，里面做了一個if判斷，判斷獲得的電影數是否為0，如果為0的話，說明該地區沒有電影，就設置hasMore為false，否則就把電影詳情給films，that.data.films.concat(res.data.subjects)，這里的concat是連接兩個或多個數組用的，例如，films中原本就有一些電影詳情，就會把獲取的電影和原本的電影拼成一個數組。然后是電影數量start，也是原來的電影數量加新加的電影數量，並且showLoading設置為false，然后回頭看引入的第一塊模板，正在加載動畫就沒了，主頁的搜索框和輪播圖會出來，下面的電影頁面也會會加載出來，下面有頁面下拉刷新和網絡請求失敗的函數，因為之前有提過，這里就不細講了，搜索框有一個box-shadow: 0 10rpx 60rpx rgba(0, 0, 0, .3);css樣式，這個是陰影，第一個值是陰影右移的距離，第二個值是陰影下移的距離，可以為負值，后面是顏色和透明度。

然后回到popular.js。下面有一個下拉刷新的函數和一個上拉觸底函數，下拉刷新就是把變量初始化，然后重新執行一遍onLoad函數，上導航條的城市地址也會重新加載，但是下拉觸底只是執行了douban.fetchFilms.call(that, config.apiList.popular, that.data.start)然后再獲取電影信息，在上傳的三個變量，城市，當前電影數，和每次獲取電影的總數，第一次上傳的當前電影數（start）為0，第二次上傳的為第一次獲取電影總數，所以傳過來的電影數為0，（經過測試，如果當前地區的電影為15，如果上傳的電影數為10，就會返回最新的5部電影，這也就是為什么第二次獲取的電影為0），然后設置hasMore為false，然后主頁最下面的“拼命加載中...”會變成“沒有更多內容了”，到這里為止主頁的加載、下拉刷新和上拉觸底全部分析完了。

二、電影詳情頁面和電影的類型頁面

在filmList.wxml頁面中有為每個頁面綁定一個id，從獲取到的電影詳情里面的id進行賦值，還綁定了一個catchtap，同時在電影頁面也為電影的類型做了一個for循環，（因為不確定一部電影有幾種類型），同時給每個類型綁定了一個tag屬性和catchtap單擊響應事件。

 

 

點擊單個電影后跳轉到filmDetail頁面並傳入其id，然后看filmDetail.wxml會執行一個正在加載的動畫，因為filmDetail.js中的showLoading為true。

 

 

 

看這個js。首先聲明一個id用來接收傳過來的id，然后在當前位置執行douban.fetchFilmDetail，傳入電影詳情接口和id和一個函數，獲取過程和獲取電影信息是一樣，這里不細講，然后執行后面異步獲取數據的api，（關於異步獲取數據和同步獲取數據的區別不太了解），從key=film_favorite中獲取數據，並用遍歷判斷這個電影數據是否和當前瀏覽的電影數據是否相同。如果相同就設置isFilmFavorite為true，也就是已經收藏過。

 

 

首先聲明三個變量，一個當前日期，一個當前時間，一個空數組，然后異步獲取數據，當獲取數據成功時，把該數據存到那個空數組中，然后獲取當前時間和當前瀏覽的電影數據存入到now_data對象中，獲取當前日期和一個空數組存入到sub_data對象中，然后將這個now_data對象存入sub_data的films數組中，（push方法可以向數組末尾添加一個或多個元素，並返回新的長度），然后判斷這里的film_history是否為空，（也就是查看之前是否有過瀏覽記錄），如果為空，這里直接將sub_data插入，如果不為空，這里再判斷最新的一條數據是否是今天瀏覽的，（上面掉了一個=），如果為今天瀏覽的，就遍歷film_history[0].films這個數組，判斷里面的data.id是否等於當前數據data.id，（也就是判斷今天是否有瀏覽過這個數據，），如果有，就刪除掉這一條數據，然后把當前數據插入進去，（也就是完成了更新數據），如果里面有數據並且最新一條不是今天的就直接把當前數據插入。

 

 

然后后面執行的是wx.setStorage上傳film_history。

然后看這個頁面的渲染。

 

 

 

電影詳情頁面的背景圖片有兩張，一張.fd-hd-bg開啟絕對定位，脫離文檔流，層級設為-2，然后給了一個filter屬性，該屬性是濾色器，值為blur模糊，然后給了一個transform屬性，（但是沒有看出這個屬性的用處），然后是在.fd-hb上追加的內容，同樣設置絕對定位，然后設置層級為-1，也就是這層在.fd-hd-bg的上面，在.fd-hd的下面，然后給他黑色背景和60%的透明。

三、上傳照片、分享功能和地理位置的實現

 

 

這是上傳照片代碼完成后的圖。

首先用wx.chooseImage從本地相冊或相機拍照獲取圖片，路徑為tempFilePath,然后我打印這個路徑獲取不到這個圖片，所以我認為這個只是臨時路徑，該路徑如果直接儲存在本地緩存中，可能下次重啟程序路徑將不可用，所以使用wx.saveFile，將臨時路徑保存在本地，並且返回一非臨時路徑savedFilePath，然后再將該路徑異步保存在本地緩存中。

由於這個原因，在我上傳數據服務器的時候，我怕上傳上去的只是臨時路徑，所以我將wx.uploadFile寫在wx.saveFile中，然后上傳非臨時路徑，並且在上傳服務器成功后再將數據異步保存在本地緩存中，以免發生上傳服務器不成功，而本地緩存中卻存在。

問題是wx.setStorage異步緩存的數據在程序重啟后，開發者工具找不到數據。

 

 

這是分享功能的代碼。

 

 

這個地方原先是獲取到的用戶信息的地址，從userinfo中獲取的，但是獲取的不是用戶的當前地址，根據前面看到的程序，獲取用戶地址在加載主頁獲取過了，所以可以在前面獲取用戶詳細地址。

 

 

首先在這里添加一個變量。

 

 

然后在這里獲取數據。