微信小程序初體驗(上)

版權聲明：本文由練小習原創文章，轉載請註明出處: 
文章原文連接：https://www.qcloud.com/community/article/204

來源：騰雲閣 https://www.qcloud.com/community

 

這段時間有幸加入了一個關於微信小程序的項目開發組，從無到有的根據文檔自行學習了小程序的開發過程，前面已經有幾位前輩的文章珠玉在前，我這裏就先從前端界面的開發方面談一談小程序以及我所遇到的問題吧。

在結構和樣式方面，小程序提供了一些經常使用的標籤與控件，好比：

view，小程序主要的佈局元素，相似於html標籤的div，你也徹底能夠像控制div那樣去控制view。

scroll-view，你要滾動內容的話，不必用view去作overflow，scroll-view提供了更爲強大的功能，經過參數的調整，你能夠控制滾動方向，觸發的事件等等

swiper，滑塊視圖容器，對於新手來講，不再用爲選用哪一個滾動插件傷腦筋了

icon，小程序提供了多種圖標供你直接使用

text，文本，惟一能夠經過長按被選中內容的一個組件。

progress，進度條

button 按鈕，儘可能使用小程序提供給你的幾種樣式參數

表單以及經常使用表單組件 ：form，input，checkbox，label，picker，radio，slider，switch

各類操做反饋，消息提示框：action-sheet，modal，toast，loading

以及一些媒體組件，video、audio，image，canvas等等

這些東西在幾位前輩的文章裏，以及微信的開發文檔裏都有更詳細的介紹，我這裏就再也不一一介紹。

那麼咱們就快速的跑通一個小程序的demo先。

在開發以前你要有微信開發者工具，下載地址

這裏我要假設你們有已經拿到了內測或者公測的資格，由於沒有拿到的話下面的步驟是無法進行的。

打開之後你會看到這樣的界面，咱們選擇小程序進入

這時候就能夠建立項目了

填寫你拿到的appid，和本身的項目名稱以及目錄，而後就能夠打開本身的項目了。界面以下：

左側菜單欄就不說了，中間是編譯後的預覽界面，新的開發者工具已經能夠作到實時更新，不須要每次都去點編譯了。

右側是你的項目目錄，其中pages就是你的頁面結構目錄了，每一個頁面下面必需要有 js，wxml，wxss這三個文件，缺乏任何一個的話都沒法上傳預覽。

而後就是那個當前態的app.json文件，app.json 是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋。，咱們簡單的配置一下：

這裏比較好的一點是，navigationbar的背景顏色支持自定義任意顏色了，再也不有隻能黑白透明的限制，仍是很不錯的。

而後咱們在頁面p裏簡單的寫個Hello World

保存之後預覽界面已經當即刷新出來

若是想真機測試（我的建議必定要真機測試，特別是給上下游預覽的時候，pc上的樣式還原程度較差，包括字體等等，畢竟系統不一樣。），只須要選中項目選項

而後在界面上點擊預覽

下面的三個選項都比較實用，能夠根據須要點選。而後就會彈出能夠用註冊過的微信號真機預覽的二維碼，如圖：

這樣一個簡單的小程序demo就徹底跑通了。

上面和配置文件app.json平級的還有一個app.js文件，是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量，在每一個page目錄裏的js作當前頁面的業務操做。可是小程序的頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，因此不能在腳本中使用window，也沒法在腳本中操做組件，因此咱們經常使用的zepto/jquery 等類庫也是沒法使用的。

另外一個app.wxss文件，這個是全局的樣式，全部的頁面都會調用到，每一個項目目錄下面的wxss是局部樣式文件，不會和其餘目錄產生污染，能夠放心使用樣式名。

他提供的WXSS(WeiXin Style Sheets)是一套樣式語言，具備 CSS 大部分特性，能夠看做一套簡化版的css。
同時爲了更適合開發微信小程序，還對 CSS 進行了擴充以及修改，直接幫咱們把適配的一部分工做都作了，好比他的rpx（responsive pixel），能夠根據屏幕寬度進行自適應，規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

這個很贊，很方便。你能夠簡單的理解爲就是你平時按照750設計稿開發的流程，只不過你不須要再去作rem的轉換和適配工做了，因此小程序的視覺稿，最好也是按照750來出。

可是！在不一樣的屏幕上多多少少會有一些差別，只能根據你們的經驗去規避和解決，經過媒體查詢也好，仍是其餘方法也好。

並且，在wxss裏不能引用本地資源，提及來這個坑，滿眼都是淚。那天晚上寫小程序demo的時候，沒有仔細的去查去問，本身悶頭邊寫邊預覽，忽然真機預覽就不行了，毫無預兆，我也徹底不會想到是一個背景圖形成的問題，折騰了大半夜終於知道了問題所在，因而很開心的把圖片都轉換成base64，內心想着這下沒問題了吧？結果預覽上傳又失敗了，繼續折騰了下半夜，才知道小程序對整個包的大小有嚴格要求，不能夠超過1M，最後把全部的靜態資源都放到了騰訊雲的cdn，纔算解決了這個問題。因此若是你要寫背景圖，那麼須要引用一個線上的圖片在這裏極不推薦使用base64！極不推薦使用base64！極不推薦使用base64！

另一個應用同時只能打開5個頁面，當已經打開了5個頁面以後，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式。

在開發的過程當中也不可避免的遇到了一些小坑，舉個例子，好比一個簡單的switch控件，你能夠經過查看元素的方式輕易得知他的自身樣式

那麼我要作一個簡單的和文本垂直劇中對齊，從以往的css經驗，只要vertical-align: middle就能夠輕鬆解決了，在本地預覽的時候也是這樣好好的

但是在真機測試的時候，各類設備就開始出現誤差了

而後簡單的審查元素以後發現問題在於

這個控件是存在空白區域的，根據設備，屏幕大小的不一，空白區域大小也不一致。

受於時間緊迫，可翻閱文檔有限，感受是由於默認的行高緣由，因而我只好發揮老司機的狡猾本質，能夠經過行高或者overflow的控制，幹掉多餘的部分，最終真機界面顯示還算統一

若是你要按照像素級別設計稿來作小程序開發的話，控件的小差別仍是須要本身來作一些控制（也有可能從根本上就是我我的用錯了方法或者理解錯了，鑑於文檔太少，之後開發者多了你們會有更清晰的認識。）

還有另外一個遇到的問題，就是小程序對 image 的默認渲染，這是經過工具查看默認圖像的樣式

通過多方打聽發現小程序的image是按照background-image來實現的，因此全部圖像會獲得一個初始寬高320 240，並且沒法經過auto重置，只能夠經過具體的值來重寫。

好在微信提供了3種縮放模式，9種裁剪模式，在大多數場景能夠知足咱們對圖片的控制：

例如原圖：

scaleToFill 模式
不保持縱橫比縮放圖片，使圖片徹底適應

aspectFit
保持縱橫比縮放圖片，使圖片的長邊能徹底顯示出來

aspectFill
保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來

top
不縮放圖片，只顯示圖片的頂部區域

bottom
不縮放圖片，只顯示圖片的底部區域

center
不縮放圖片，只顯示圖片的中間區域

left
不縮放圖片，只顯示圖片的左邊區域

right
不縮放圖片，只顯示圖片的右邊邊區域

top left
不縮放圖片，只顯示圖片的左上邊區域

top right
不縮放圖片，只顯示圖片的右上邊區域

bottom left
不縮放圖片，只顯示圖片的左下邊區域

bottom right
不縮放圖片，只顯示圖片的右下邊區域

若是你有更嚴格的圖片設計展現方式，那麼能夠嘗試用一些特殊的方式去控制圖像的寬高吧。

還有小程序的button控件，

他的初始樣式裏並無border，因此我費盡心思也沒能把他重寫爲一個無邊無背景的設計形式，最終爲了知足設計稿，個別語義化爲按鈕的元素，我是用其餘更可控的元素來實現的，好比這個界面的發送圖片按鈕

可是到後來才知道button是經過after來寫的樣式，開發者工具的調試裏徹底看不到這個after(┬＿┬).....

除了這些UI開發上的體會，你們也都知道，小程序誕生就不是爲了展現，他不適合作純展現型的東西，主要是作一些功能型的應用。

而微信所提供的小程序現有的SDK和DEMO,缺少對服務端的支持，依賴開發者逐個模塊搭建服務；並且必須經過HTTPS完成與服務端通訊，依賴開發者自行完成證書申請部署；鑑權流程安全性要求高，開發者高效安全的完成會話管理難度會比較大；提供了WebSocket長鏈接通訊的客戶端API，但缺少服務端配套支持，開發者自行實現難度仍是較大的。而且具有快速傳播，流量突增的特色，要求架構具有彈性伸縮能力。

這些都是微信方面所沒有提供的，須要本身來處理，這裏能夠推薦一下這套解決方案（避免廣告嫌疑，發github鏈接 )，很完善的解決了以上問題。固然你也能夠根據本身的需求去用不一樣的方案。

除了一站式的解決方案，還針對不一樣的場景作了更細緻的demo

1.會話管理demo

微信小程序框架提供了wxml/wxss/js api便於開發者快速建立小程序。但微信小程序本質上與web開發模式存在區別，尤爲是微信小程序採用程序包上傳的方式提交，微信加載程序包到本地，使用時微信直接從本地啓動小程序，運行模式與web模式大不相同，小程序使用框架提供的wx.request接口發送https請求不會攜帶cookie信息，傳統webserver的會話管理能力(session)在微信小程序沒法直接使用，在這點上微信小程序更像CS架構的開發模式，開發者須要本身實現會話管理功能。

查看教程
下載源碼

2.上傳下載demo

微信小程序框架提供了文件上傳下載的接口，用於將本地資源上傳到指定的服務器，或者將指定Url的資源下載到本地。但微信小程序框架只提供了客戶端的解決方案，缺乏服務端的對應實現，這裏經過一個小相冊來實現這個demo

查看教程
下載源碼

3.WebSocket長鏈接

微信小程序框架提供了WebSocket請求創建、數據通訊、鏈接關閉等一系列客戶端接口，用於與遠程支持WebSocket協議的服務器通訊，以便小程序能實現服務器主動push等更接近native的體驗。但微信只提供了客戶端的解決方案，缺乏服務端的對應實現。這裏經過一個剪刀石頭布小遊戲的demo來實現

查看教程
下載源碼

4.視頻應用 Demo

微信小程序框架具有豐富的wxml/wxss/js api以及配套的文檔幫助開發者快速地搭建時下熱門的視頻類應用。但微信只提供了客戶端的解決方案，缺乏服務端的對應實現，尤爲是流媒體轉碼集羣和流媒體播放服務集羣。這個實例裏有具體的實現

查看教程
下載源碼

礙於篇幅和時間，就先對小程序作一些簡單的認識以及一些粗略的開發體驗，有些點可能不必定對，畢竟也是剛開始接觸學習，只是有的分享就儘可能分享吧，這是我一向的想法，但願和你們一塊兒學習進步！

下一篇會從咱們的demo來詳細的講解一下小程序的開發過程。