微信小程式入門到實戰（一）

icessun發表於2018-01-31
微信小程式

瞭解小程式

  • 什麼是小程式？ 小程式其實就是一個工具，為人提供便捷服務的；隨時可用，用完即走，減少桌面上面的app數量；

B2C（人與商品） 淘寶 JD P2P（人與人）微信 QQ C2P（人與服務）微信小程式 支付寶小程式

  • 什麼應用適合小程式？ 對於一些效能要求不高，使用頻度不高，業務邏輯簡單的應用適合做成一個小程式的應用；比如購票，繳費，手機充值等

小程式的檔案結構

一個小程式首先有四個應用入口檔案：

  • app.js：設定一些專案的全域性變數
  • app.json：每一個新頁面都必須在這個地方註冊，專案的導航欄和視窗介面設定有關的
  • app.wxss：專案全域性樣式
  • project.config.json：專案配置檔案

一個頁面主要是包含以下四個檔案，這四個檔案的名字應該都是一樣的，最好以頁面所在的資料夾名字為標準：

  • xxx.wxml：頁面的結構
  • xxx.wxss：頁面的樣式
  • xxx.json：頁面的配置檔案
  • xxx.js：頁面的指令碼檔案

頁面可以巢狀頁面，但是建議不要超過5個層級。

移動裝置的解析度與RPX

小程式推薦使用rpx為單位，這樣就可以在任意螢幕下面實現自適應

小程式是移動端的開發，所以要注意畫素的使用。

移動裝置解析度

  • pt：視覺單位（長度單位），與裝置的螢幕物理尺寸有關係，也叫做邏輯解析度（邏輯單位），與移動端的柵格渲染有關
  • px：通常說的畫素點，物理解析度，隨著螢幕的變化不會變化；一般設計師給的設計稿是以物理解析度為單位的，也就是說，iPhone6下的解析度是375，但是設計圖卻是750；因為rpx：px == 2：1，小程式的設計稿就要以iPhone6為參照。

pt與px之間的關係：1個pt下面包含多個px；也就是說一個邏輯解析度包含多個物理畫素點。 ppI(DPI)：計算的是螢幕顯示1個邏輯解析度包含多個物理畫素點，值越大，顯示的影象越細膩，清晰。計算的方法是：320*320+480*480的和開根號再處於螢幕尺寸最後乘以reader值。 reader值：視網膜屏，表示一個邏輯畫素點包含多個（reader值）物理畫素點，一般reader值為2就達到了眼睛的所能觀察到細膩的極限，再大幾乎不怎麼起作用，對於眼睛感覺到的色彩來說。

也就是說，當需要的元素大小適應螢幕尺寸，就選擇rpx作為單位，否者使用px作為單位。

第一個小程式頁面

  • 新建一個專案，選擇無AppID ，儲存
    新建專案
  • 新建一個頁面
    新建頁面

我們可以直接在專案的app.json中的pages屬性下面按照此方式建立頁面，儲存，就可以在左邊看到一個以welcom名字的資料夾，包含了頁面所需要的四種檔案，省略手動在app.js裡面註冊，並且裡面都已經自動配置好了一些設定，防止出現下面的錯誤：

頁面js檔案未呼叫page()方法

解決辦法就是在相對應的頁面js空檔案中呼叫一下page({...})方法，相當於註冊一下，註冊的時候只需要寫頁面的名字，不需要區別是那種頁面型別。所有該頁面的方法都在page({...})方法裡面執行

在app.json中pages這個屬性裡面的陣列元素，誰出現在第一個位置，就是小程式的啟動頁面。 json型別的檔案裡面不能寫註釋，否者會報檔案解析錯誤。

json檔案註釋報錯

小程式裡面使用view標籤作為容器，分割文件的作用，類似於在html中使用的div。

text標籤是一個文字標籤，只有當文字被這個標籤包裹起來的時候，才能在手機上面長按選中，這個標籤支援轉義字元的解析。

編寫wxml程式碼

<view class='container'>
  <image class='user-avatar' src='/images/1.png'></image>
  <text class='user-name'>icessun</text>
  <view class='moto-container' bindtap='tapName'>
    <text class='moto'>開啟小程式大門</text>
  </view>
</view>
複製程式碼

其實在wxml中編寫頁面骨架的時候，注意小程式預設在我們編寫的骨架外面包裹了一個page標籤，可以通過這個標籤來設定整屏的顏色。

最外層page標籤

在小程式裡面呢，一般都使用flex佈局，彈性盒子模型

  display: flex;
  flex-direction: column;
  align-items: center;
複製程式碼

這樣第一個小程式頁面我們就編寫好了，儲存執行一下，就可以看到效果，前提是把這個頁面設定為啟動頁，因為我們還沒有寫頁面跳轉。

第一個小程式頁面效果

頁面周期函式

在上面新建頁面的時候，我們發現在js檔案裡面會自動在page()方法中生成一些方法，如下：

頁面周期函式

一般頁面啟動，會首先呼叫這三個函式：onLoad(頁面載入，一個頁面只會呼叫一次)----->onShow(頁面顯示，頁面每次開啟都會呼叫)----->onReady(頁面完成初次渲染)

page()函式中的data:{ }屬性，通常是儲存頁面需要繫結的資料，一般在裡面設定一個變數，用來接收從伺服器載入來的JSON資料，然後在通過資料繫結的方式繫結到頁面上面。

page周期函式圖

app.js的生命週期

app.js是關於整個小程式專案的方法和屬性，類似頁面Page({...})函式，也需要一個外層函式包裹App({ ...})

App({
  //當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
  onLaunch: function () {

  },
  // 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
  onShow: function (options) {

  },
  //當小程式從前臺進入後臺，會觸發 onHide
  onHide: function () {

  },
  // 當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
  onError: function (msg) {

  }
})
 // 應用程式的全域性變數
  globalData: {
    g_isPlaying: false,
    //  記錄當前頁面是否播放
    g_currentMusicPost: null,
    //  電影api地址
    doubanBase: 'https://api.douban.com'
  }
複製程式碼

當然也可以在裡面設定一些全域性的變數，然後在其他頁面對應的js檔案中通過下面的方式來獲取到裡面定義的全域性變數。

var app = getApp();  
var globalData = app.globalData
複製程式碼

相關文章