前言

????????從2019年11月開始接觸uni-app，總結(jié)了一些使用體驗與小結(jié)。希望可以幫助到大家，畢竟這個生態(tài)圈還是比較小。如有偏誤，歡迎指出，一起交流與進步。

?????????注：筆者當前使用的HBuilderX的版本為2.5.1.20200103，所以以下內(nèi)容是基于當前版本，且非nvue。

使用

1. 插件

?? 1.1. 使用非插件市場的插件，放在node_modules，直接使用該插件拋出的類名XXX,? 如 import XXX form 'XXX'

? ?1.2.??HBuilderX沒有提供方法/自動更新插件，需要開發(fā)者到插件的github查看有沒有更新版本及手動更新。

? ? 1.3. 生成二維碼插件【tki-code】 使用多一層view的wrap，會導致溢出計算出錯，兩種方法，一是包括wrap都使用px單位，保證多端生成的二維碼都是一樣大??；二是確保所需端的大小，例如android 實體機大小會偏小（rpx）

2. 樣式

? ? 2.1. checkbox，radio，在APP的不居中，改font-size即可

? ? 2.2. 筆者在Andorid8的華為、iphone7plusAPP端，發(fā)現(xiàn)view不支持同級選擇器（+），not選擇器，同類選擇器（:first-of-type），深度選擇器也失效了，對于button又可以 同級選擇器（+）,但線上的網(wǎng)站測評又說支持——（我還沒找到規(guī)律，有人知道請告知）

3. API

? ? 3.1. uni.previewImage, 除了H5外，其他端不支持base64流 （同wx-minprogram）

? ? 3.2. uni.navigateTo跳轉(zhuǎn)的參數(shù)是url且url帶參了，該url要encodeURIComponent，不然在被跳轉(zhuǎn)url頁獲取不到option的參數(shù)

4. VUE

? ?4.1. 屬性slot

? ? ????????4.1.1.?（截至 2020/1/3）雖然識別了<template v-slot:XXX="{ slotProp }"></template>，但不支持 #slotname="{slotProp}"的寫法

? ????? ????4.1.2.?slot的template 不能用v-if進行判斷，看看是uni還是vue的限制，H5正常，APP會出現(xiàn)白屏問題——vue 見https://github.com/vuejs/vue/issues/10784?

? ? ????????4.1.3. 組件使用了slot，如果循環(huán)輸出，要把v-for放在父元素或<block>內(nèi)，在App端，slot才能生效

? ? ? ? ? ? 4.1.4 具名插槽slot的具名，VUE(V2.6.11)不支持大小寫混雜，支持帶有中劃線。uni-app不支持大小寫混雜 和 帶有中劃線

<slot name="headerRight"></slot>? <!--? VUE不支持 -->

<slot name="header-right"><slot>? <!--? VUE支持，但uni-app不支持 -->

????4.2. 除了H5外，不支持 v-自定義命令（截至 2019/12/3）及 自行觸發(fā)事件（e.g. click）而且據(jù)說會過不了微信小程序?qū)徍?，需要用戶授?quán)并主動點擊觸發(fā)。

????4.3. scroll-view 【置頂】方式只能通過事件觸發(fā)，不能通過方法直接調(diào)用修改。

????4.4.【v-model】有坑，父節(jié)點使用了該組件設(shè)置v-model，在APP端傳入該組件的值不被檢測；需要拆分成 :屬性名，@更新方法

? ? 4.5.不允許【props】使用data、id等的保留字

5. 組件

? ? 5.1. tabbar 存在bug, 官方建議在二級頁面需要自行寫。見官網(wǎng)（https://uniapp.dcloud.io/collocation/pages?id=tips-tabbar）

6. 文件目錄

? ? ?6.1. 從插件市場添加的插件，會被直接放入@/components

7. Debug

? ? ?7.1. 如果出現(xiàn)APP端白屏（debug真機模擬下報出white screen cause create instanceContext failed 問題），一般看看是不是自己剛剛寫了一些基于Vue的但可能不被HBuilderX支持的屬性導致的；額外的，網(wǎng)上也有人是因為props中調(diào)用了this導致，此處僅提供相關(guān)思路供讀者去排除。

8. 打包策略

? ? ?8.1. 打包后，多個頁面引用了相同模塊moduleA?。moduleA export多個不同的內(nèi)容。不同業(yè)務頁面根據(jù)各自內(nèi)容import {partXXX} from moduleA ，雖然看起來只引用了一部分partXX，但打包的時候整個moduleA還是會被編譯打包進來，從而整體的代碼包變大?！ㄗh看業(yè)務情況拆分。

生態(tài)圈與體驗

????????1. 作為一個生成多端的項目，對于廣大的創(chuàng)業(yè)小公司的來說，的確是利好消息，畢竟公司請一端開發(fā)人員可以開發(fā)生成多端產(chǎn)品，節(jié)約成本同時提高開發(fā)效率。給一個大大的贊。

????????2.? 相比VUE、微信小程序，官網(wǎng)編寫紊亂。語法混雜vue、wx-minprogram的語法，讓人上手的時候難以區(qū)分。而且教程沒及時更新有些新版本的屬性，例如slot的prop。（VUE的官網(wǎng)就做的挺好的，會區(qū)分版本的教程及教程給出部分示例。通過不同版本的內(nèi)容比較，讀者可以更容易找出自己的問題）

????????3. QQ群，偶有人互助幫忙解答問題，會有一個uniapp小助手（人工+機器人）挑選回答部分問題。=_=有時候機器人答非所問

????????4. 有些存疑性問題，在論壇上提出，也沒有被官網(wǎng)定為是否為真的bug還是提出問題方的問題。

疑問

1.?自定義組件模式與 非自定義組件模式有什么區(qū)別？

2. v3編譯器主要就是優(yōu)化了vue頁面。但我在非NVUE項目下，使用V3編譯器及fast啟動模式進行編譯，會如下報錯，期望官方出一個相應教程說明一下。

3. 文件結(jié)構(gòu)如下：

情況：

? ? ? 1）在page.json注冊路徑只有，pages/hrm/pages/index/index

? ? ? 2）當前項目pages/index.vue是包含了自行定義的tabbar的頁面，其中一個tab點擊后展示了組件tabParent。 tabParent 可以通過 “@/scss/view.scss”

? ? ? 3）組件tabParent使用了子組件?weather

? ? ? 4）子組件?weather引用“@/scss/view.scss”?會報錯，找不到該文件

? ? ? 5）在?子組件?weather 使用相對路徑‘../../scss/view.scc’ 或者? 把view.scss該文件挪入子組件路徑下，即@/pages/components/Child/scss/view.scss? ?是成功的

? ? ?問題： 這是?uniapp哪種策略呢? 為什么第二層組件就無法通過“@/scss/view.scss”獲取到view.scss文件呢？