uniapp開發(fā)微信小程序遇到的問題筆記
前言
最近接手了一個小程序開發(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ā)時并沒有提示這個問題，準(zhǔn)備真機測試時，提示無法上傳。就去找解決方案。
在采用方案之前耗費了好多時間去手動刪除一些不用的文件、刪除不用的代碼。再一看無濟于事，看來代碼并占不了多少。
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)绻朐谛〕绦蛑泄δ苁褂枚ㄎ还δ?，則需要申請高德、騰訊或其他地圖的 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.colortab 上的文字默認顏色tabBar.backgroundColortab 的背景色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)刪除攔截器
總結(jié)
到此這篇關(guān)于uniapp開發(fā)微信小程序遇到的問題的文章就介紹到這了,更多相關(guān)uniapp開發(fā)微信小程序問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了微信小程序動畫效果的實現(xiàn)方法與原理解析。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要為大家詳細介紹了Bootstrap和Java分頁實例第二篇，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了淺談 JS 對象添加 getter與 setter 的5種方法以及如何讓對象屬性不可配置或枚舉,需要的朋友可以參考下2018-06-06
JS中style.display和style.visibility的區(qū)別實例說明
下面的例子說明了這種區(qū)別：在這個例子中，divContent1和divContent2隱藏的時候用的是style.display=none，這時候，后面的div會向上移動，占據(jù)已經(jīng)隱藏的div的空間。divContent3和divContent4用的是style.visibility=hidden來隱藏，但是其隱藏后仍然占據(jù)原來的空間2013-03-03
這篇文章主要給大家介紹了關(guān)于js實現(xiàn)簡單的點名器隨機色的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Javascript刷新頁面實現(xiàn)代碼，需要的朋友可以參考下。2009-11-11
這篇文章主要為大家詳細介紹了ionic2.0雙擊返回鍵退出應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別，有需要的朋友可以參考一下2013-10-10
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)簡單吸頂效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了詳解webpack打包后如何調(diào)試的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11