問題一：執(zhí)行完命令，就不動了，或者是uniapp 遇到編譯很慢，無法正常運行的情況

情況1：執(zhí)行run dev命令后，一直就不動了，輸出如下

PS C:\XXXXXXXX> npx yarn run dev:h5
yarn run v1.22.19
warning package.json: No license field
$ uni
請注意運行模式下，因日志輸出、sourcemap 以及未壓縮源碼等原因，性能和包體積，均不及發(fā)行模式。
正在編譯中...

uni-app 有新版本發(fā)布，請執(zhí)行 `npx @dcloudio/uvm alpha` 更新，更新日志詳見：https://update.dcloud.net.cn/hbuilderx/changelog/3.7.6.20230227-alpha.html

情況2：輸出如下

PS C:\app> npx yarn run dev:h5
yarn run v1.22.19
warning package.json: No license field
$ uni
Please note that in running mode, due to log output, sourcemap, and uncompressed source code, the performance and package size are not as good as release mode.
Compiling...

解決方案：

• 通過執(zhí)行npx @dcloudio/uvm alpha升級依賴

npx @dcloudio/uvm alpha

運行之前先檢查一下你的package.json 里vite版本，不要被官方給你升級太高了哦，如果有問題，可以參考下文 - 問題十八

問題二：使用hbuilder打開項目運行，報錯如下：

failed to load config from /xxxxxx/vite.config.ts
 09:37:26.975 error when starting dev server:
 09:37:26.975 Error:
 09:37:26.982 You installed esbuild for another platform than the one you're currently using.
 09:37:26.983 This won't work because esbuild is written with native code and needs to
 09:37:26.995 install a platform-specific binary executable.
 09:37:26.996 Specifically the "esbuild-darwin-arm64" package is present but this platform
 09:37:27.004 needs the "esbuild-darwin-64" package instead. People often get into this
 09:37:27.004 situation by installing esbuild with npm running inside of Rosetta 2 and then
 09:37:27.012 trying to use it with node running outside of Rosetta 2, or vice versa (Rosetta
 09:37:27.013 2 is Apple's on-the-fly x86_64-to-arm64 translation service).
 09:37:27.021 If you are installing with npm, you can try ensuring that both npm and node are
 09:37:27.022 not running under Rosetta 2 and then reinstalling esbuild. This likely involves
 09:37:27.030 changing how you installed npm and/or node. For example, installing node with
 09:37:27.031 the universal installer here should work: https://nodejs.org/en/download/. Or
 09:37:27.042 you could consider using yarn instead of npm which has built-in support for
 09:37:27.043 installing a package on multiple platforms simultaneously.
 09:37:27.051 If you are installing with yarn, you can try listing both "arm64" and "x64"
 09:37:27.051 in your ".yarnrc.yml" file using the "supportedArchitectures" feature:
 09:37:27.061 https://yarnpkg.com/configuration/yarnrc/#supportedArchitectures
 09:37:27.062 Keep in mind that this means multiple copies of esbuild will be present.
 09:37:27.071 Another alternative is to use the "esbuild-wasm" package instead, which works
 09:37:27.071 the same way on all platforms. But it comes with a heavy performance cost and
 09:37:27.080 can sometimes be 10x slower than the "esbuild" package, so you may also not
 09:37:27.090 want to do that.
09:37:27.090     at generateBinPath (/xxxxxx/node_modules/esbuild/lib/main.js:1799:17)
09:37:27.099     at esbuildCommandAndArgs (/xxxxxx/node_modules/esbuild/lib/main.js:1875:33)
09:37:27.100     at ensureServiceIsRunning (/xxxxxx/node_modules/esbuild/lib/main.js:2040:25)
09:37:27.110     at build (/xxxxxx/node_modules/esbuild/lib/main.js:1931:26)
09:37:27.111     at bundleConfigFile (file:///xxxxxx/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62735:26)
09:37:27.122     at loadConfigFromFile (file:///xxxxxx/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62711:31)
09:37:27.133     at resolveConfig (file:///xxxxxx/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:62336:34)
09:37:27.144     at Module.createServer (file:///xxxxxx/node_modules/vite/dist/node/chunks/dep-51c4f80a.js:61636:26)
09:37:27.156     at /xxxxxx/node_modules/vite/index.cjs:22:55
09:37:27.167     at async createServer (/xxxxxx/node_modules/@dcloudio/vite-plugin-uni/dist/cli/server.js:16:20)

解決方案：

• step1: 運行 yarn install下載依賴
• step2: 把src拖進hbuilder，而不是整個項目
• step3: 運行測試
  

如果方案一執(zhí)行結(jié)束，提示 項目缺少index.html,請繼續(xù)往下看，按方案二解決：

在HBuilder中運行腳手架項目需要在HBuilder的cli安裝依賴。如果項目要運行到App端，那么建議你在HBuilder中運行腳手架項目,
造成這種原因是因為你的依賴是從外部的終端安裝的

• step1: 卸載刪除所有依賴
• step2: 整個項目都用hbuilder打開
• step3: 在HBuilder中打開命令行工具，使用npm install / yarn install重新安裝依賴
• step4: 運行測試
• step5: 如果以上步驟執(zhí)行完畢還是不行
• step6: 刪除依賴
• step7: 運行 npx @dcloudio/uvm alpha ，運行之前先檢查一下你的package.json 里vite版本，不要被官方給你升級太高了哦，如果有問題，可以參考下文-問題十八
• step8: 使用npm install / yarn install重新安裝依賴
• step9: 運行測試

問題三：uniapp不同尺寸設(shè)計稿，寫代碼的時候如何進行尺寸自動轉(zhuǎn)換？

解決方案：配置流程如下

問題四：真機運行報錯：plus is not defined

當(dāng)你遇到這個報錯：uni-app [system]ReferenceError: plus is not defined

原因如下：

• plus是5+Runtime的內(nèi)部對象
• web瀏覽器里沒有plus環(huán)境
• 真機運行、打包后、或流應(yīng)用環(huán)境下才能運行plus api

解決方案

• step1. 添加條件編譯

import { onLoad, onShow, onReady} from '@dcloudio/uni-app';
onReady(() => { 
/* #ifdef APP-PLUS */ 
plus.navigator.setStatusBarStyle('dark'); 
/* #endif */
});

onShow(() => { 
/* #ifdef APP-PLUS */ 
plus.navigator.setStatusBarStyle('dark'); 
/* #endif */
});

• step2. 使用真機或者模擬器運行

問題五：uniapp如何打包wgt格式

build

首次打包，需要配置AppId

登錄dcloud開發(fā)者中心 點擊直達

創(chuàng)建應(yīng)用

將生成的AppId配置到項目manifest.json中

開始打包

打包成功

問題六：uniapp打包提示打包時未添加push模塊

解決方案：打開manifest.json，找到sdkConfigs，把push刪掉即可。

/* SDK配置 */
            "sdkConfigs" : {
                "ad" : {},
                "push" : {
                    "unipush" : {}
                },
　　}

問題七：uniapp打包配置忽略版本號提示

解決方案：

 "compatible": {
      "ignoreVersion": true
    },

問題八：如何禁止uni-app過度滾動拉伸動畫,禁止手指滑動縮放正常頁面,將回彈屬性關(guān)掉，通俗得講，就是不要讓一個看起來無法滑動的頁面，可以滑動

解決方案：在pages.json中添加配置

• 全局配置：

"globalStyle": {
  "app-plus":{
  "bounce":"none" // 將回彈屬性關(guān)掉
  }
},

• 單頁面配置：

{
  "path" : "",
  "style" : {
    "navigationBarTitleText": "",
    "app-plus":{
      "bounce":"none" // 將回彈屬性關(guān)掉
    }
}

問題九：如何獲取app的版本號

解決方案：

// #ifdef APP-PLUS 
// 獲取當(dāng)前應(yīng)用版本號 
plus.runtime.getProperty(
plus.runtime.appid, (widgetInfo) => { 
this.edition = widgetInfo.version; 
}); 
// #endif復(fù)制代碼

問題十：如何隱藏滾動條

解決方案：

"app-plus": {"scrollIndicator":"none" //當(dāng)前頁面不顯示滾動條}

問題十一：禁用頁面右滑手勢（頁面向右滑動的時候，返回上一個頁面）

解決方案一：（僅支持ios）

pages.json文件中配置"disableSwipeBack": true

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "我是原生title",
				"disableSwipeBack": true, // 禁止IOS頁面右滑手勢
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uQRCode",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

解決方案二：(需要測試是否安卓 ios均支持，這個大家測試一下吧，我今天有點忙沒時間測試?yán)补?/h5>

全局禁止在manifestjson中配置 “popGesture”: “none”

{
    "name" : "unidemo",
    "appid" : "__UNI__226E1FC",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    /* 5+App特有相關(guān) */
    "app-plus" : {
        "popGesture": "none", // 側(cè)滑返回功能
        "bounce":"none", //去除回彈熟悉
        "safearea" : {
            //安全區(qū)域配置，僅iOS平臺生效    
            "background" : "#F5F6F9", //安全區(qū)域外的背景顏色，默認值為"#FFFFFF"    
            "bottom" : {
                // 底部安全區(qū)域配置    
                "offset" : "none|auto" // 底部安全區(qū)域偏移，"none"表示不空出安全區(qū)域，"auto"自動計算空出安全區(qū)域，默認值為"none"    
            }
        },
        "usingComponents" : true,
        "nvueCompiler" : "uni-app",
        "splashscreen" : {
            "alwaysShowBeforeRender" : true,
            "waiting" : true,
            "autoclose" : true,
            "delay" : 0
        },
        /* 模塊配置 */
        "modules" : {},
        /* 應(yīng)用發(fā)布信息 */
        "distribute" : {
            /* android打包配置 */
            "android" : {
                "permissions" : [
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios" : {
                "dSYMs" : false
            },
            /* SDK配置 */
            "sdkConfigs" : {
                "ad" : {}
            },
            "icons" : {
                "android" : {
                    "hdpi" : "unpackage/res/icons/72x72.png",
                    "xhdpi" : "unpackage/res/icons/96x96.png",
                    "xxhdpi" : "unpackage/res/icons/144x144.png",
                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
                },
                "ios" : {
                    "appstore" : "unpackage/res/icons/1024x1024.png",
                    "ipad" : {
                        "app" : "unpackage/res/icons/76x76.png",
                        "app@2x" : "unpackage/res/icons/152x152.png",
                        "notification" : "unpackage/res/icons/20x20.png",
                        "notification@2x" : "unpackage/res/icons/40x40.png",
                        "proapp@2x" : "unpackage/res/icons/167x167.png",
                        "settings" : "unpackage/res/icons/29x29.png",
                        "settings@2x" : "unpackage/res/icons/58x58.png",
                        "spotlight" : "unpackage/res/icons/40x40.png",
                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
                    },
                    "iphone" : {
                        "app@2x" : "unpackage/res/icons/120x120.png",
                        "app@3x" : "unpackage/res/icons/180x180.png",
                        "notification@2x" : "unpackage/res/icons/40x40.png",
                        "notification@3x" : "unpackage/res/icons/60x60.png",
                        "settings@2x" : "unpackage/res/icons/58x58.png",
                        "settings@3x" : "unpackage/res/icons/87x87.png",
                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
                    }
                }
            },
            "splashscreen" : {
                "androidStyle" : "common",
                "android" : {
                    "hdpi" : "C:/Users/xxx/Desktop/uniapp/LaunchImage/LaunchImage/640x 960.png",
                    "xhdpi" : "C:/Users/xxx/Desktop/uniapp/LaunchImage/LaunchImage/750x1334.png",
                    "xxhdpi" : "C:/Users/xxx/Desktop/uniapp/LaunchImage/LaunchImage/1125x2436.png"
                },
                "iosStyle" : "common"
            }
        }
    },
    /* 快應(yīng)用特有相關(guān) */
    "quickapp" : {},
    /* 小程序特有相關(guān) */
    "mp-weixin" : {
        "appid" : "",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },
    "mp-alipay" : {
        "usingComponents" : true
    },
    "mp-baidu" : {
        "usingComponents" : true
    },
    "mp-toutiao" : {
        "usingComponents" : true
    },
    "h5" : {
        "title" : "uQRCode二維碼生成插件示例",
        "domain" : "www",
        "router" : {
            "base" : "./",
            "mode" : "history"
        }
    }
}

單頁面調(diào)用

// 單頁面調(diào)用5+ Api

// #ifdef APP-PLUS

var page = this.$mp.page.$getAppWebview();

page.setStyle({ popGesture: 'none' });

// #endif

單頁面還可以在pages.json文件這么配置

{
    "path": "pages/xxx/xxx",
    "style": {
        ...
        "app-plus": {
            "popGesture": "none", // 禁用側(cè)滑
            "bounce": "none" // 禁用上下拖動頁面
        }
    }
},

問題十二：安全區(qū)域配置

解決方案：安全區(qū)域配置，下面內(nèi)容僅iOS平臺生效 全平臺生效解決方案參考：uniapp系列-改變底部安全區(qū)-頂部的手機信號、時間、電池欄顏色樣式

{
  "name" : "unidemo",
  "appid" : "__UNI__226E1FC",
  "description" : "",
  "versionName" : "1.0.0",
  "versionCode" : "100",
  "transformPx" : false,
  /* 5+App特有相關(guān) */
  "app-plus" : {
      "safearea" : {
          //安全區(qū)域配置，僅iOS平臺生效    
          "background" : "#F5F6F9", //安全區(qū)域外的背景顏色，默認值為"#FFFFFF"    
          "bottom" : {
              // 底部安全區(qū)域配置    
              "offset" : "none|auto" // 底部安全區(qū)域偏移，"none"表示不空出安全區(qū)域，"auto"自動計算空出安全區(qū)域，默認值為"none"    
          }
      }
    
  }
 
}

問題十三：自定義頭部導(dǎo)航欄navigationStyle并設(shè)置title為圖片格式

解決方案：

{
	"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
                            "navigationStyle": "custom",
                            "titleImage": "https://xxxx/assets/images/title.png" // 圖片默認居中擺放
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uQRCode",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

問題十四：配置頁面下拉刷新功能

解決方案：

pages.json中添加pullToRefresh配置

"pages": [
    {
      "path": "pages/home/index",
      "style": {
        "navigationBarTitleText": "AAAAAAA",
        "app-plus": {
          "pullToRefresh": {
            "support": true,
            "color": "#ff3333",
            "style": "default",
            "contentdown": {
              "caption": "pull to refresh..."
            },
            "contentover": {
              "caption": "Loading..."
            },
            "contentrefresh": {
              "caption": "Loading..."
            }
          }
        }
      }
    },
  ]

頁面調(diào)用

import { onPullDownRefresh } from "@dcloudio/uni-app";
onPullDownRefresh(() => {
  getData();
});

問題十五：獲取當(dāng)前運行平臺，設(shè)備信息，狀態(tài)欄高度等

解決方案：

const systemInfo = function () {
  let systemInfomations = uni.getSystemInfoSync(); // 設(shè)備系統(tǒng)信息
  let scaleFactor = 750 / systemInfomations.windowWidth; // 機型適配比例系數(shù)
  let windowHeight = systemInfomations.windowHeight * scaleFactor; // 當(dāng)前機型-屏幕高度
  let windowWidth = systemInfomations.windowWidth * scaleFactor; // 當(dāng)前機型-屏幕寬度
  let statusBarHeight = systemInfomations.statusBarHeight * scaleFactor; //狀態(tài)欄高度
  let platform = uni.getSystemInfoSync().platform; // 運行平臺
  const uniPlatform = uni.getSystemInfoSync().uniPlatform; // 運行環(huán)境
  return {
    scaleFactor,
    windowHeight,
    windowWidth,
    statusBarHeight,
    platform,
    uniPlatform,
  };
};



export { systemInfo };

問題十六：解決自定義導(dǎo)航欄安卓和ios頁面頂部顯示兼容性問題

解決方案：（會有更好的方案，歡迎小伙伴們在評論區(qū)交流，大家互相學(xué)習(xí)哇~~）

此種問題發(fā)生前提：我們使用的是自定義導(dǎo)航欄，你的pages.json一定是這樣：

pages": [
    {
      "path": "pages/login/index",
      "style": {
        "navigationStyle": "custom" // 取消原生導(dǎo)航,使用自定義導(dǎo)航欄
      }
    }
]

我們可以通過引入上面的systemInfo，我們給頁面添加一個動態(tài)樣式，就解決了這個問題

<template>
  <view class="xiaojin-container" :class="platformClass">
    頁面內(nèi)容
  </view>
</template>

<script setup lang="ts">
import { systemInfo } from '../../utils/system';
console.log('systemInfo', systemInfo());
const platformClass = `${systemInfo().uniPlatform}-${systemInfo().platform}`;

</script>

<style lang="scss" scoped>
.app-ios{
  padding-top: calc(env(safe-area-inset-top));
}
.app-android{
  padding-top: calc(44px + env(safe-area-inset-top));
}
</style>

問題十七：Uniapp 配置跨域

解決方案：

配置uni-app 中 manifest.json->h5->devServer

"h5": {
    "devServer": {
      "proxy": {
        "/xiaojinAPI": {
          "target": "https://xiaojin.com",
          "changeOrigin": true,
          "secure": false
        }
      }
    }
  }

問題十八：[ERROR] Cannot start service: Host version “0.16.17” does not match binary version “0.15.18”

17:57:38.395 正在編譯中...
17:57:38.688 ? [ERROR] Cannot start service: Host version "0.16.17" does not match binary version "0.15.18"
17:57:38.689 1 error
17:57:38.697 failed to load config from /Users/xxxxxx/vite.config.ts
17:57:38.697 error when starting dev server:
17:57:38.708 Error: The service was stopped
17:57:38.720     at /Users/xxxxxx/node_modules/esbuild/lib/main.js:1145:25
17:57:38.721     at Object.responseCallbacks.<computed> (/Users/xxxxxx/node_modules/esbuild/lib/main.js:701:9)
17:57:38.728     at Socket.afterClose (/Users/xxxxxx/node_modules/esbuild/lib/main.js:691:28)
17:57:38.728     at Socket.emit (node:events:525:35)
17:57:38.734     at endReadableNT (node:internal/streams/readable:1358:12)
17:57:38.741     at processTicksAndRejections (node:internal/process/task_queues:83:21)

解決方案：

這種通常是因為你的vite版本和項目的版本不兼容，很大原因在于：

• 你執(zhí)行了: npx @dcloudio/uvm alpha
• 官方的命令把vite版本升到4.x，
• alpha版本是對應(yīng)HBuilder的alpha版本
  你應(yīng)該：
• step1：使用命令npx @dcloudio/uvm
• step2：降低package.json內(nèi)vite版本，把vite降為3.x來進行調(diào)試

問題二十：uni-app 取消默認的loading 轉(zhuǎn)圈

解決方案：

"app-plus" : {
        /* 5+App特有相關(guān) */
        "usingComponents" : true,
        //設(shè)置 啟動界面
        "splashscreen" : {
            "alwaysShowBeforeRender" : false,
            "waiting" : false,
            //"autoclose" : true,
            "autoclose" : false,
            "delay" : 0
        },

問題二十一：手動關(guān)閉啟動界面

解決方案：

onLaunch: function() {
            
            // #ifdef APP-PLUS
            //app關(guān)閉默認的啟動 方法關(guān)閉啟動圖。但是這個時間不能太晚，6s 超時后依舊會主動關(guān)閉。
            setTimeout(()=>{
                plus.navigator.closeSplashscreen();
            },100)
            // #endif
          }

問題二十二：待補充

解決方案：

今天就寫到這里啦~

• 小伙伴們，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我們明天再見啦~~
• 大家要天天開心哦

歡迎大家指出文章需要改正之處~
學(xué)無止境，合作共贏

文章來源地址http://www.zghlxwxcb.cn/news/detail-415569.html

歡迎路過的小哥哥小姐姐們提出更好的意見哇~~

到了這里，關(guān)于uniapp系列-報錯或常見問題處理集錦的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！