最近接手了一個小程序開發(fā)环肘，從頭開始欲虚。使用了 uniapp 搭建，以前沒有做過小程序開發(fā)悔雹，著手看文檔复哆、查文檔。一步一步完成了任務(wù)的開發(fā)腌零。特此記錄開發(fā)過程中的問題梯找。

開發(fā)建議：

• 使用 HBuilderX 工具進行開發(fā)。通過工具創(chuàng)建項目
• 遇到原來的 vue 寫法怎么不生效益涧，別猶豫去看文檔锈锤，可能就是不支持。
• 有時間熟讀文檔闲询。
• 跨端最大的問題就是兼容性久免。

1. 不能采用全局注冊的方式注冊組件

通常在 components 目錄會存放項目中共用的組件，然后暴露install,全局引用安裝

// components/index.js

// 各種組件
import Page from "./page.vue";

//
const Components = [Page];
export default {
  install: (app) => {
    // 注冊
    Components.forEach((component) => app.component(component.name, component));
  },
};

// 然后在 main.js 引用注冊
import Vue from "vue";
import Component from "@/components";

// 注冊 就可以全局使用了扭弧。
Vue.use(Component);

但是在 uniapp 中不生效妄壶，有兩種方式實現(xiàn)組件注冊：

1.1 導(dǎo)入到 main.js 中進行注冊

所有的組件直接導(dǎo)入到 mian.js 中，通過 Vue 對象注冊即可在其他頁面中引用寄狼。

要注意的是，注冊的組件名必須是字符串氨淌，不能是page.name

import Vue from "vue";
import Page from "@/components/page.vue";

Vue.component("page", page);

1.2 特有的 easycom 模式注冊組件

只要符合components/組件名稱/組件名稱.vue 文件存儲路徑泊愧，則不需要手動注冊，可直接引用組件盛正。

而且這有助于打包時剔除掉沒有使用到的組件删咱。

那現(xiàn)在我們的功能組件存放路徑改為components/page/page.vue ，即可全局使用豪筝。

也可以在pages.json 配置自定義設(shè)置痰滋，定義哪些匹配的組件。

{
  "easycom": {
    "autoscan": true,
    "custom": {
      // uni-ui 規(guī)則如下配置
      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  }
}

新加的組件注意清除緩存续崖，重新運行生效敲街。

2. 小程序真機調(diào)試包太大，無法上傳严望，分包處理

由于開始項目多艇，所有的 UI 設(shè)計圖都放在了前端，導(dǎo)致編譯后整個包大小超過了 4M像吻。開發(fā)時并沒有提示這個問題峻黍，準備真機測試時复隆，提示無法上傳。就去找解決方案姆涩。

在采用方案之前耗費了好多時間去手動刪除一些不用的文件挽拂、刪除不用的代碼。再一看無濟于事骨饿，看來代碼并占不了多少亏栈。

2.1 將所有靜態(tài)資源都存放到遠程服務(wù)器上

2.2 采用分包的方式，將主包的體積降下來

分包的方式样刷，剛開始的時候所有的文件都是放在pages下的仑扑，pages.jon中 也都配置在 pages中。

需要將初始加載無關(guān)的模塊拆出來置鼻，同 pages 同級目錄下镇饮。

|———————————————————————————————————— 項目
|—————————————— integral
|——————— rank
|——————— log
|——————— mall
|—————————————— pages
|——————— index
|——————— login
|——————— user
|—————————————— pages.json

在pages.jong 通過屬性subPackages 配置分包編譯。

root 為分包的主目錄箕母，pages 目錄下的頁面储藐，path為相對路徑。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁"
      }
    },
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登錄"
      }
    }
    // ...
  ],
  "subPackages": [
    {
      "root": "integral",
      "pages": [
        {
          "path": "rank/rank",
          "style": {
            "navigationBarTitleText": "排行榜"
          }
        }
        // ...
      ]
    }
  ]
}

然后重新運行嘶是，再次真機調(diào)試钙勃，沒有此前的包過大的提示。順利打開小程序聂喇。

分包之后辖源，檢查此前已寫好的模塊之間的跳轉(zhuǎn)。頁面路徑已經(jīng)變化希太，

可以通過預(yù)加載的方式幫助我們在進入某個頁面時克饶，由框架自動預(yù)下載可能需要的分包，提高后續(xù)頁面進入的啟動速度誊辉。

以下配置矾湃，幫助我們在進入首頁后，加載全部的分包堕澄。也可以指定加載分包的某個頁面邀跃，具體查看官網(wǎng)preloadrule

{
  "preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": ["__APP__"]
    }
  }
}

3. 內(nèi)置組件不能綁定 class 的問題

在使用擴展的 UI 組件，比如 uni-ui蛙紫、uView 等給這些組件綁定 class 時拍屑，渲染并不能渲染成功。

只能在給他們包一層view 自定義 calss 坑傅。避免全局的樣式污染丽涩。

4. 定位 API 調(diào)用，需要增加授權(quán)配置manifest.json

增加配置,允許小程序調(diào)用位置的權(quán)限接口。然后通過requiredPrivateInfos定義你需要哪些方法矢渊。

{
  /* 小程序特有相關(guān) */
  "mp-weixin": {
    // ...
    "permission": {
      "scope.userLocation": {
        "desc": "請求獲取地理信息"
      }
    },
    "requiredPrivateInfos": [
      "getLocation",
      "chooseAddress",
      "choosePoi",
      "chooseLocation"
    ]
  }
}

如果我們?nèi)绻朐谛〕绦蛑泄δ苁褂枚ㄎ还δ芗套迹瑒t需要申請高德、騰訊或其他地圖的 SDK 矮男，通過拿到的經(jīng)緯度查詢詳細地址信息移必。

uni.getLocation(options)獲取當(dāng)前地理位置。

不能獲取到地址中文描述毡鉴，只能拿到經(jīng)緯度等其他參數(shù)崔泵，可以在通過第三方地圖服務(wù)，獲取詳細的位置信息猪瞬。

address 地址信息僅 APP 端支持憎瘸。

uni.chooseLocation(options) 提供給用戶選擇位置信息

可以拿到經(jīng)緯度、位置名稱以及詳細的 address 中文描述陈瘦。

5. 主包不能引用分包的組件

通過分包后幌甘，降低了主包的大小。但也出現(xiàn)了一個問題就是主包不能復(fù)用分包的組件痊项，很容易理解就是訪問主包的頁面時锅风，分包還不一定加載。

6. 小程序不支持 $attrs \ $listeners

通過對組件進行二次封裝鞍泉、三次封裝皱埠。底層組件定義的屬性、事件如果每層都定義接收咖驮，就很麻煩边器，

在 vue 中，通過屬性inheritAttrs: false 不然根元素承載這些屬性托修、時間忘巧，然后通過$attrs \ $listeners 綁定到目標(biāo)元素上。

<template>
  <view class="dictionary-picker">
    <data-picker v-bind="$attrs" v-on="$listeners"></data-picker>
  </view>
</template>

<script>
export default {
  inheritAttrs: false,
};
</script>

在 uniapp 中诀黍，則是不可以的。他沒有 $attrs \ $listeners 這兩個屬性仗处。

7. 不支持自定義雙向綁定model

在 vue 中定義一個組件的輸入眯勾、輸出通過綁定值、然后監(jiān)聽拋出事件處理邏輯婆誓，

<script>
export default {
  name:'data-picker',
  model:{
    prop:'value',
    event:'change',
  },
  methods:{
    handleChange(val){

      this.$emit('change',val)
    }
  }
}

這樣在調(diào)用組件時可通過v-model綁定吃环。<data-picker v-model='value' />

在 uniapp 中，則是不可以的洋幻。 小程序不支持

8. 不能綁定給 style郁轻、class 對象

小程序端不支持綁定對象給 class、style

<template>
  <view class="dictionary-picker">
    <view :class="boxStyle"></view>
  </view>
</template>

<script>
export default {
  computed: {
    boxStyle() {
      return {
        active: this.activeTab ? true : false,
      };
    },
  },
};
</script>

這樣是不行的，渲染后的元素節(jié)點顯示 object 好唯。 不通過計算屬性竭沫，直接在屬性上綁定邏輯。

<template>
  <view class="dictionary-picker">
    <view :class="[activeTab ? 'active' : '']"></view>
  </view>
</template>

9. 適配 iphone 底部劉海

在需要適配的頁面骑篙，元素增加樣式蜕提。特有的變量safe-area-inset-bottom \ safe-area-inset-bottom

建議這種通用性設(shè)置，提供一個基礎(chǔ)公共組件page. 通過定義插槽 nav \ header \ main \ footer 插入內(nèi)容靶端。這是一些公共的樣式就不用每個頁面去設(shè)置谎势。

.footer {
  padding-bottom: 0;
  // IOS <11.2
  padding-bottom: constant(safe-area-inset-bottom);
  // iso >11.2
  padding-bottom: env(safe-area-inset-bottom);
  // 安全距離設(shè)置后，一定要設(shè)置背景杨名，不然滾動的內(nèi)容在下方可以看到
  background-color: #fff;
}

10. 一些全局的配置色彩脏榆，字號 注意單位、格式台谍。

在配置pages.json的一些設(shè)置须喂，顏色都是必須是十六進制顏色，不能是 rgb 或 rgba

• globalStyle.navigationBarBackgroundColor 導(dǎo)航欄背景顏色

• globalStyle.backgroundColor 下拉顯示出來的窗口的背景色

• tabBar.color tab 上的文字默認顏色

• tabBar.backgroundColor tab 的背景色

• tabBar.fontSize 文字默認大小

• tabBar.iconWidth 圖標(biāo)默認寬度（高度等比例縮放）

• ...

11. 自定義手機頂部的導(dǎo)航欄典唇。

通常手機頂部信號镊折、電量等一些狀態(tài)占據(jù)手機的部分位子。想讓這部分區(qū)域也融入到我們的程序中介衔。

配置pages.jons

{
  "globalStyle": {
    "navigationStyle": "custom"
  }
}

設(shè)置自定義導(dǎo)航樣式恨胚，這樣你的頁面會以手機屏幕的最頂端開始。頂部標(biāo)題炎咖、返回都需要自己去定義了赃泡。

12. 在視圖中不能直接使用綁定在Vue.prototype上的全局變量

直接在視圖使用Vue.prototype上的變量是訪問不到的。向下面這樣：

<template>
  <view>
    <img :src="$baseUrl + data.imgUrl" />
  </view>
</template>

可以通過計算屬性乘盼，或者提供一個變量值.

<template>
  <view>
    <img :src="avatarUrl" />
  </view>
</template>
<script>

export default {
    data() {
    return {
      //
      data:{}
    }
  },
  computed: {
        avatarUrl() {
            return this.$baseUrl + '/upload' + this.data.imgUrl;
        }
    },

13. 二次封裝 uni-ui 組件升熊，更改的組件樣式未生效。

微信小程序里的組件之間的樣式隔離绸栅，只需要增加選項配置级野，

<script>
export default {
    name: 'confirmDialog',
    options: {
        styleIsolation: 'shared' // 解除樣式隔離
    },
}

微信官方文檔說明 - 樣式隔離

14. 使用微信小程序插件 plugin

主要是小程序插件 plugin 的開發(fā)文檔，在manifest.json 中配置

{
  "mp-weixin": {
    "appid": "",
    "usingComponents": true,
    "plugins": {
      "myPlugin": {
        "version": "版本號",
        "provider": "wx8**********75"
      }
    }
  }
}

14.1 在這邊引入的插件可全局引用粹胯，在需要引入的頁面中配置蓖柔，pages.json

{
  "pages": [
    {
      "path": "pages/login/login",
      "style": {
        "navigationBarTitleText": "登錄",
        "enablePullDownRefresh": false,
        // 定義微信插件
        "mp-weixin": {
          "usingComponents": {
            "login": "plugin://myPlugin/login"
          }
        }
      }
    }
  ]
}

然后在頁面 login.vue 中使用組件

<template>
    <view class="login-box">
        <login
            :config="loginConfig"
        ></login>
</template>

14.2 分包引入插件，只能在分包中使用

在pages.json配置风纠，同一個插件不能被多個分包引入况鸣，直接放入主包中配置。

{
  "subPackages": [
    {
      "root": "integral",
      "pages": [
        {
          "path": "integralMall/list"
        }
      ],
      "plugins": {
        "pluginName": {
          "version": "版本號",
          "provider": "wx8**********75"
        }
      }
    }
  ]
}

15. 攔截器uni.addInterceptor(API,Options)

對于 uni 可調(diào)用的全局 API竹观，可通過攔截器來批量處理邏輯镐捧，常用就是攔截請求潜索，控制權(quán)限。

在App.vue 中調(diào)用攔截懂酱，定義攔截器在未注冊時控制某些頁面不可訪問竹习。

import { Not_register_access_page } from "@/utils/config.js";

export default {
  onLaunch: function () {
    // 跳轉(zhuǎn)攔截
    uni.addInterceptor("navigateTo", {
      invoke(config) {
        if (
          !$this.isRegister &&
          !Not_register_access_page.includes(config.url)
        ) {
          // 不允許訪問，則將前置訪問的page地址置空
          config.url = "";
        }
      },
    });
  },
};

攔截器options參數(shù)

• invoke 攔截前觸發(fā)
• success 成功回調(diào)觸發(fā)
• fail 失敗回調(diào)觸發(fā)
• complete 完成回調(diào)后觸發(fā)

uni.removeInterceptor(API)刪除攔截器