鵝廠優文|：小程序入坑指南

前段時間，手上恰好接手一個小程序的項目，心想以前自學過一段時間的小程序，終於有項目能夠練練手了，惋惜，萬萬沒想到，加了兩個週末的班結果卻成了飛機稿。好在有些收穫，因而趁思路尚且清晰，先記錄下來，如下純屬我的看法。

項目大概是這樣的，經過攝像頭拍攝我的身份證，並上傳資料完成備案。

賬號

首先，開發小程序，咱們須要個開發者帳號，這裏具體的步驟就再也不贅述了。

開發語言

小程序框架自己提供了一套描述語言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，切記！

下面的嵌套方式就能在手機上正常顯示所需的提示內容了：

以上都是我的對此次項目的小結，確定也有更好的方法，但願不吝指教！