SUI Mobile 開發總結

架構介紹

• 自适應功能

  rem

  ，預設在

  375px

  的寬度上設定了

  font-size: 20px

  ，是以

  1rem=20px

  ；在小于這個寬度時，不會縮放；在大于這個寬度時，設定了媒體查詢寬度，适當的放大了一點。
• 可替換的自适應功能

  rem

  ，通過腳本控制

  font-size

  ，實作動态的縮放，建議縮放的範圍控制在螢幕寬度為

  320px-750px

  之間，因為手機的螢幕最小寬度為

  320px

  ，而設計圖一般以

  750px

  為寬度；為了配合架構的設定，在

  375px

  時設定了

  font-size: 20px

  ，是以

  750px

  時應該為

  font-size: 40px

  ；在寫頁面代碼時，設計圖如果寬度為

  750px

  ，那

  1rem==40px

  ，以下是參考的腳本代碼：

// 寬度限制在 320-750 之間；寬度 750 時，基準像素是 40
!function(n){
    var e=n.document,
        t=e.documentElement,
        i=750,
        d=i/40,
        o="orientationchange"in n?"orientationchange":"resize",
        a=function(){
            var n=t.clientWidth||320;n>750&&(n=750);n<320&&(n=320);
            $('html').css('font-size',n/d+'px!important');
        };
        e.addEventListener&&n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
      
           

• 内置的路由功能有兩種，一種是在目前的檔案裡面查找

  class="page"

  的子產品，這種是作為一個頁面顯示的，類似于單頁應用，不過會造成代碼太多，其實有很多單頁應用的架構可以選擇，比如：

  vue

  全家桶，跨多個平台的架構

  uni-app

  ；另外一種是通過異步調用其它頁面代碼到目前頁面中，這樣很容易造成代碼沖突，這種情況可以改成伺服器控制路由比較友善；是以建議禁用内置的路由功能，否則在寫路由位址時要多寫一些參數控制，禁用路由的配置必須在架構腳本之前寫入，參考代碼如下：

// 禁用内置的 Router 功能
$.config = {
  router: false  
}
      
           

• 架構初始化，必須在架構腳本之後執行，初始化調用後，會初始化頁面的元件，然後觸發架構的自定義事件，如果自定義事件存在的話，以下是參考的代碼：

// 確定在所有的 pageInit 事件綁定之後再調用 $.init() 方法
$.init();
      
           

• 小圖示的引入，架構自帶的小圖示很少，建議引入自家開發的圖示庫

  iconfont

  ，這個和架構一樣都是阿裡開發的，而且可以選擇官方或者第三方提供的小圖示設計，然後加入到自己的圖示項目裡，可以生成線上的檔案引用，樣式檔案或者腳本檔案，還可以配置使用的命名空間，避免和其它的小圖示庫沖突，以下是參考的代碼：

<!-- 圖示項目生成的樣式檔案 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1307985_1vyf818fyei.css">

<!-- 通過類名使用，命名空間是 iconhui ，類名 active 修改了圖示的顔色 -->
<span class="iconhui iconhui-check-square-fill active"></span>
<span class="iconhui iconhui-check-square-fill"></span>