小程式入坑指南 | 鵝廠優文

騰訊雲加社群發表於2018-04-28

歡迎大家前往騰訊雲+社群,獲取更多騰訊海量技術實踐乾貨哦~

作者:盧文喆 | 騰訊雲UI工程師

前段時間,手上剛好接手一個小程式的專案,心想之前自學過一段時間的小程式,終於有專案可以練練手了,可惜,萬萬沒想到,加了兩個週末的班結果卻成了飛機稿。好在有些收穫,於是趁思路尚且清晰,先記錄下來,以下純屬個人見解。

專案大概是這樣的,通過攝像頭拍攝個人身份證,並上傳資料完成備案。

帳號

首先,開發小程式,我們需要個開發者賬號,這裡具體的步驟就不再贅述了。

開發語言

小程式框架本身提供了一套描述語言WXML、WXSS、以及JavaScript的邏輯層框架,並在檢視層和邏輯層提供了資料傳輸和事件系統。

檢視層(View):主要是用來渲染頁面,即WXML、WXSS;

邏輯層(App Service):處理頁面邏輯、呼叫介面、資料請求。

這裡我想重點說一下檢視層,我們都知道HTML+CSS+JS是Web程式設計的組合,在小程式裡,WXML對應的便是HTML,WXSS對應的是CSS。


比如我們看這樣一個頁面在小程式裡的表現:

可能有些人不太喜歡這樣的方式去寫HTML,又或者原先寫好的頁面,沒辦法直接沿用到小程式,這裡推薦使用工具轉譯,可以像往常編寫web一樣編寫小程式,並且支援專案的匯入和匯出。

其中編譯工具主要是將原始碼目錄下的所有HTML檔案進行轉譯,並建立一個xxx.build的資料夾,將所有編譯好的WXML存放到page資料夾下面,當然app.json的配置檔案也會自動建立,根據建立的目錄名,將同名的CSS檔案,重新命名為WXSS檔案,並存放到同名目錄中,當CSS與檔名不符,則合併不符的CSS檔案,存放到全域性目錄的 app.wxss中。同時,原始碼目錄中的JS檔案會被忽略,頁面級的JS會被複制到同名目錄中,這個JS包括註冊頁面的page函式基礎模板。我們還是看圖吧!

下面是原始碼 demo 的目錄檔案結構:

編譯後的目錄結構改變:

同時頁面上的html也會發生變化:

<!--html-->
<div class="container">
  <div class="group tip-success">
      <i class="tip-success"></i>
  </div>
  <span class='tip-success-text'>人臉認證完成</span>
  <span class='text-mod'>您的人臉認證已經完成</span>
  <span class='text-go'>返回首頁</span>
</div>複製程式碼

編譯後:

<!--wxml-->
<view class="container">
  <view class="group tip-success">
      <icon type="success" size="60"/>
  </view>
  <text class='tip-success-text'>人臉認證完成</text>
  <text class='text-mod'>您的人臉認證已經完成</text>
  <text class='text-go'>返回首頁</text>
</view>複製程式碼

螢幕適配

小程式自身有一個計量單位rpx,1rpx=0.5px=1物理畫素,rpx其實是微信對於rem的一種應用規定,或者說一種設計的方案,官方規定螢幕寬度為20rem,規定螢幕寬為750rpx。所以在微信小程式中1rem=750/20rpx,同時設計稿的尺寸推薦使用750作為設計稿的標準寬度。

樣式庫

小程式本身提供了一套帶互動的樣式庫WeUI,官方文件有比較詳細的呼叫和說明,但是並不是所有的樣式都是我們想要的,有時候設計師會根據當前的頁面來設計需要的樣式,比如我們常用的image、button都含有預設樣式,最直接的辦法,是重置預設樣式。

圖片的引用

起初我只嘗試通過網路的方式載入圖片,但是其實小程式載入圖片的方式是有兩種的,分別是本地圖片和網路圖片,但是由於微信小程式本身整體的大小限制在2M以內,所以還是建議大家採用網路圖片的方式來載入,以減少程式包的大小。

下面我們來看一下具體的實現方法:

目錄結構如下,只要圖片按正確的方式放入小程式的開發工具的專案中,即可在wxml檔案中用內聯樣式或者image標籤都可以引用本地的圖片。

然後,新建個image資料夾,然後把圖片拷貝到這個目錄下。

注意:一定要用你從微信開發工具開啟的專案window視窗完成新建資料夾和把圖片copy到這個目錄下的這兩個步驟:

相對路徑去訪問圖片,可以用style樣式的方式或者image標籤。

不能使用wxml樣式去引用本地的圖片,雖然不會報錯,但其實是沒有效果的。

注意:在手機模擬預覽,樣式的背景圖只能用伺服器的圖片,不能用本地。

媒體元件 camera

這個專案的主要難點其實是如何在拍照的介面上新增文字和遮罩層,起初我嘗試用很多方法,都無法在人體輪廓上面顯示所需要的內容,如圖,預覽介面顯示的效果是我想要的,但是手機上卻並沒有顯示對應的內容:

後來我看到報錯,同時我查閱了官方文件,原來小程式直接有提供給我們camera的元件cover-view和cover-image可以覆蓋在相機介面層上,有一點要注意的是:原生控制元件cover-view作為父容器時,不能使用其他控制元件巢狀作為子元素,只能使用cover類的控制元件如:cover-view、cover-image,切記!

下面的巢狀方式就能在手機上正常顯示所需的提示內容了:

以上都是個人對這次專案的小結,肯定也有更好的方法,希望不吝指教!


問答

短視訊可以通過什麼技術接入小程式?

相關閱讀

微信小程式,開發大起底

劉翌:如何利用小程式技術解決企業銷售難題

李明:微信小遊戲技術分享


此文已由作者授權騰訊雲+社群釋出,原文連結:https://cloud.tencent.com/developer/article/1109113?fromSource=waitui


相關文章