前段(duan)時間(jian)，手上剛好(hao)接手一(yi)個小(xiao)程(cheng)序的項目(mu)，心想(xiang)之前自學(xue)過一(yi)段(duan)時間(jian)的小(xiao)程(cheng)序，終于有項目(mu)可以(yi)練練手了(le)，可惜，萬萬沒想(xiang)到，加了(le)兩個周末的班(ban)結果卻(que)成(cheng)了(le)飛機稿。好(hao)在(zai)有些收獲，于是趁思路尚且(qie)清晰，先記錄(lu)下(xia)來，以(yi)下(xia)純屬個人見解。

項目大概是這樣(yang)的(de)，通過(guo)攝像(xiang)頭拍攝個人身份證，并上傳資料完成備案。

帳號

首先(xian)，開發小程(cheng)序，我(wo)們需要(yao)個開發者賬號，這(zhe)里具體的步驟就不再贅述了。

開發語言

小程序框架(jia)本身提(ti)(ti)供(gong)了(le)一套(tao)描述語言WXML、WXSS、以及JavaScript的邏輯(ji)層(ceng)框架(jia)，并在視圖層(ceng)和邏輯(ji)層(ceng)提(ti)(ti)供(gong)了(le)數據傳輸和事件系統。

視圖(tu)層(View)：主(zhu)要是用來渲(xuan)染頁面，即(ji)WXML、WXSS；

邏(luo)輯層(ceng)(App Service)：處理頁面(mian)邏(luo)輯、調用接口、數據請求(qiu)。

這里我想重點說一下視圖層，我們都知道HTML+CSS+JS是(shi)Web編程的(de)組合，在小程序里，WXML對應的(de)便是(shi)HTML，WXSS對應的(de)是(shi)CSS。

比如(ru)我們看這樣一個頁面在小(xiao)程序里的表現(xian)：

其中編譯工具(ju)主(zhu)要是將源(yuan)碼目(mu)錄下(xia)的所有HTML文(wen)(wen)(wen)件進行轉譯，并(bing)創(chuang)建一個(ge)xxx.build的文(wen)(wen)(wen)件夾(jia)，將所有編譯好的WXML存(cun)放(fang)(fang)到page文(wen)(wen)(wen)件夾(jia)下(xia)面，當然(ran)app.json的配置(zhi)文(wen)(wen)(wen)件也會自(zi)動創(chuang)建，根據創(chuang)建的目(mu)錄名(ming)(ming)(ming)(ming)，將同(tong)(tong)名(ming)(ming)(ming)(ming)的CSS文(wen)(wen)(wen)件，重(zhong)命名(ming)(ming)(ming)(ming)為WXSS文(wen)(wen)(wen)件，并(bing)存(cun)放(fang)(fang)到同(tong)(tong)名(ming)(ming)(ming)(ming)目(mu)錄中，當CSS與文(wen)(wen)(wen)件名(ming)(ming)(ming)(ming)不(bu)符，則合(he)并(bing)不(bu)符的CSS文(wen)(wen)(wen)件，存(cun)放(fang)(fang)到全局目(mu)錄的 app.wxss中。同(tong)(tong)時，源(yuan)碼目(mu)錄中的JS文(wen)(wen)(wen)件會被(bei)忽(hu)略，頁面級的JS會被(bei)復制到同(tong)(tong)名(ming)(ming)(ming)(ming)目(mu)錄中，這個(ge)JS包括注(zhu)冊(ce)頁面的page函數基礎模板。我們還(huan)是看圖吧！

下面是源(yuan)碼 demo 的目(mu)錄(lu)文件結構：

編譯(yi)后的目錄結構(gou)改(gai)變：

同時頁(ye)面上的html也會發生(sheng)變化(hua)：

<!--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>

屏幕適配

小程(cheng)序自(zi)身有一(yi)(yi)個計(ji)量單位(wei)rpx，1rpx=0.5px=1物理像素(su)，rpx其實是微信對于rem的(de)一(yi)(yi)種應用規(gui)(gui)定，或者說一(yi)(yi)種設(she)計(ji)的(de)方(fang)案，官方(fang)規(gui)(gui)定屏(ping)幕寬度為20rem，規(gui)(gui)定屏(ping)幕寬為750rpx。所以在微信小程(cheng)序中1rem=750/20rpx，同時設(she)計(ji)稿的(de)尺寸(cun)推薦(jian)使(shi)用750作為設(she)計(ji)稿的(de)標(biao)準寬度。

樣式庫

小(xiao)程(cheng)序(xu)本身提供(gong)了一套帶(dai)交互的(de)(de)樣(yang)(yang)式庫WeUI，官方文檔有比較詳細(xi)的(de)(de)調用(yong)和說(shuo)明，但是并(bing)不(bu)是所有的(de)(de)樣(yang)(yang)式都是我們(men)想要的(de)(de)，有時(shi)候設計師會根據當前的(de)(de)頁面來設計需要的(de)(de)樣(yang)(yang)式，比如我們(men)常用(yong)的(de)(de)image、button都含(han)有默認樣(yang)(yang)式，最直接的(de)(de)辦法，是重置(zhi)默認樣(yang)(yang)式。

圖片的引用

 起初我只嘗試通過網絡的(de)(de)方式加(jia)載(zai)圖(tu)片(pian)(pian)，但是(shi)其實小(xiao)(xiao)程序(xu)加(jia)載(zai)圖(tu)片(pian)(pian)的(de)(de)方式是(shi)有兩種的(de)(de)，分別是(shi)本地圖(tu)片(pian)(pian)和網絡圖(tu)片(pian)(pian)，但是(shi)由(you)于微信小(xiao)(xiao)程序(xu)本身整體的(de)(de)大(da)小(xiao)(xiao)限制在(zai)2M以內，所(suo)以還是(shi)建(jian)議(yi)大(da)家采用網絡圖(tu)片(pian)(pian)的(de)(de)方式來加(jia)載(zai)，以減少程序(xu)包的(de)(de)大(da)小(xiao)(xiao)。

下面我們(men)來看一下具體的實現方(fang)法：

目錄結構如下，只要圖片按正確的方式放入小程序的開發工具的項目中，即可在wxml文件中用內聯樣式或者image標簽都可以引用本地的圖片。

然后(hou)，新建個(ge)image文件夾，然后(hou)把圖片(pian)拷貝到這個(ge)目錄下(xia)。

注意：一定要(yao)用你(ni)從微信(xin)開發工具(ju)打開的項目window窗口完成新建文件夾和(he)把圖片(pian)copy到這個(ge)目錄下的這兩個(ge)步驟：

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

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

注意：在手機模(mo)擬預覽，樣(yang)式的背景圖只能(neng)(neng)用服務器的圖片，不(bu)能(neng)(neng)用本地。

媒體組件 camera

這(zhe)個(ge)項目的(de)主(zhu)要難(nan)點其(qi)實是(shi)如何(he)在拍照的(de)界面(mian)上(shang)添加文字和遮罩層，起初(chu)我(wo)(wo)嘗(chang)試(shi)用很多方(fang)法，都無(wu)法在人體輪廓上(shang)面(mian)顯(xian)示(shi)所需要的(de)內容，如圖，預(yu)覽界面(mian)顯(xian)示(shi)的(de)效果是(shi)我(wo)(wo)想要的(de)，但是(shi)手機(ji)上(shang)卻并沒有顯(xian)示(shi)對(dui)應的(de)內容：

后(hou)來(lai)我(wo)看到報(bao)錯，同時我(wo)查(cha)閱了官方文(wen)檔，原來(lai)小程序直接有提供(gong)給(gei)我(wo)們camera的(de)組件(jian)cover-view和cover-image可以覆(fu)蓋在相機(ji)界(jie)面層上，有一點要(yao)注意的(de)是：原生控件(jian)cover-view作為父容器時，不(bu)能使用其他控件(jian)嵌套作為子元素，只能使用cover類的(de)控件(jian)如(ru)：cover-view、cover-image，切記！

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

以(yi)上都是個人對這次(ci)項目(mu)的小(xiao)結，肯(ken)定也有更好(hao)的方法(fa)，希望不吝指(zhi)教！