Problem 1: After executing the command, it does not move, or uniapp encounters a situation where the compilation is very slow and cannot run normally
Situation 1: After executing the run dev command, it does not move all the time, and the output is as follows
PS C:\XXXXXXXX> npx yarn run dev:h5
yarn run v1.22.19
warning package.json: No license field
$ uni
请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
正在编译中...
uni-app 有新版本发布，请执行 `npx @dcloudio/uvm alpha` 更新，更新日志详见：https://update.dcloud.net.cn/hbuilderx/changelog/3.7.6.20230227-alpha.html
Case 2: The output is as follows
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...
solution:
- Upgrade dependencies by executing npx @dcloudio/uvm alpha
npx @dcloudio/uvm alpha
Check the vite version in your package.json before running. Don’t be upgraded too high by the official. If you have any problems, you can refer to the following - Question 18
Question 2: Use hbuilder to open the project and run it, and the error is as follows:
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)
solution:
- step1: Run yarn install to download dependencies
- step2: Drag src into hbuilder, not the whole project
- step3: Run the test
If the implementation of Solution 1 ends, it prompts that the project lacks index.html, please continue to read down and solve it according to Solution 2:
Running a scaffolding project in HBuilder requires installing dependencies on HBuilder's cli. If the project is to be run on the App side, it is recommended that you run the scaffolding project in HBuilder. The
reason for this is that your dependencies are installed from an external terminal.
- step1: Uninstall remove all dependencies
- step2: The whole project is opened with hbuilder
- step3: Open the command line tool in HBuilder, and use npm install / yarn install to reinstall dependencies
- step4: Run the test
- step5: If the above steps are still not working
- step6: remove dependencies
- step7: Run npx @dcloudio/uvm alpha, check the vite version in your package.json before running, don’t be upgraded too high by the official, if you have any problems, please refer to the following - Question 18
- step8: Use npm install / yarn install to reinstall dependencies
- step9: Run the test
Question 3: uniapp design drafts of different sizes, how to automatically convert the size when writing code?
Solution: The configuration process is as follows
Question 4: The real machine runs an error: plus is not defined
When you encounter this error: uni-app [system]ReferenceError: plus is not defined
The reasons are as follows:
- plus is the internal object of 5+Runtime
- There is no plus environment in the web browser
- The plus api can only be run on a real machine, after packaging, or in a streaming application environment
solution
- step1. Add conditional compilation
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. Use a real machine or emulator to run
Question 5: How does uniapp package the wgt format
build
For the first packaging, you need to configure the AppId
Log in to the dcloud developer center and click directly
create application
Configure the generated AppId into the project manifest.json
start packing
Successfully packaged
Question 6: The uniapp package prompts that the push module is not added when packaging
Solution: Open manifest.json, find sdkConfigs, and delete push.
/* SDK配置 */
"sdkConfigs" : {
"ad" : {},
"push" : {
"unipush" : {}
},
}
Question 7: The uniapp packaging configuration ignores the version number prompt
solution:
"compatible": {
"ignoreVersion": true
},
Question 8: How to prohibit excessive scrolling and stretching animation of uni-app, prohibit finger sliding to zoom normal pages, and turn off the rebound property. In layman's terms, it is not to allow a page that does not seem to be slidable to be slidable
Solution: add configuration in pages.json
- Global configuration:
"globalStyle": {
"app-plus":{
"bounce":"none" // 将回弹属性关掉
}
},
- Single page configuration:
{
"path" : "",
"style" : {
"navigationBarTitleText": "",
"app-plus":{
"bounce":"none" // 将回弹属性关掉
}
}
Question 9: How to get the version number of the app
solution:
// #ifdef APP-PLUS
// 获取当前应用版本号
plus.runtime.getProperty(
plus.runtime.appid, (widgetInfo) => {
this.edition = widgetInfo.version;
});
// #endif复制代码
Question 10: How to hide the scroll bar
solution:
"app-plus": {"scrollIndicator":"none" //当前页面不显示滚动条}
Question 11: Disable the right swipe gesture on the page (when the page slides to the right, return to the previous page)
Solution 1: (only supports ios)
Configure "disableSwipeBack" in the pages.json file: true
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "我是原生title",
"disableSwipeBack": true, // 禁止IOS页面右滑手势
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uQRCode",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
Solution 2: (Need to test whether Android and ios are supported, let’s test this, I’m a little busy today and don’t have time to test haha)
Globally prohibit configuring "popGesture" in manifestjson: "none"
{
"name" : "unidemo",
"appid" : "__UNI__226E1FC",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"popGesture": "none", // 侧滑返回功能
"bounce":"none", //去除回弹熟悉
"safearea" : {
//安全区域配置，仅iOS平台生效
"background" : "#F5F6F9", //安全区域外的背景颜色，默认值为"#FFFFFF"
"bottom" : {
// 底部安全区域配置
"offset" : "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"
}
},
"usingComponents" : true,
"nvueCompiler" : "uni-app",
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"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"
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"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"
}
}
}
single page call
// 单页面调用5+ Api
// #ifdef APP-PLUS
var page = this.$mp.page.$getAppWebview();
page.setStyle({ popGesture: 'none' });
// #endif
A single page can also be configured in the pages.json file like this
{
"path": "pages/xxx/xxx",
"style": {
...
"app-plus": {
"popGesture": "none", // 禁用侧滑
"bounce": "none" // 禁用上下拖动页面
}
}
},
Question 12: Security Zone Configuration
Solution: Security area configuration, the following content is only effective on the iOS platform Solution reference for the entire platform: uniapp series - change the bottom security area - the color style of the mobile phone signal, time, battery bar at the top
{
"name" : "unidemo",
"appid" : "__UNI__226E1FC",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"safearea" : {
//安全区域配置，仅iOS平台生效
"background" : "#F5F6F9", //安全区域外的背景颜色，默认值为"#FFFFFF"
"bottom" : {
// 底部安全区域配置
"offset" : "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"
}
}
}
}
Question 13: Customize the navigationStyle of the header navigation bar and set the title to the image format
solution:
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom",
"titleImage": "https://xxxx/assets/images/title.png" // 图片默认居中摆放
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uQRCode",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
Question 14: Configure page pull-down refresh function
solution:
Add pullToRefresh configuration in pages.json
"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..."
}
}
}
}
},
]
page call
import { onPullDownRefresh } from "@dcloudio/uni-app";
onPullDownRefresh(() => {
getData();
});
Question 15: Obtain the current operating platform, device information, status bar height, etc.
solution:
const systemInfo = function () {
let systemInfomations = uni.getSystemInfoSync(); // 设备系统信息
let scaleFactor = 750 / systemInfomations.windowWidth; // 机型适配比例系数
let windowHeight = systemInfomations.windowHeight * scaleFactor; // 当前机型-屏幕高度
let windowWidth = systemInfomations.windowWidth * scaleFactor; // 当前机型-屏幕宽度
let statusBarHeight = systemInfomations.statusBarHeight * scaleFactor; //状态栏高度
let platform = uni.getSystemInfoSync().platform; // 运行平台
const uniPlatform = uni.getSystemInfoSync().uniPlatform; // 运行环境
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight,
platform,
uniPlatform,
};
};
export { systemInfo };
Question 16: Solve the compatibility problem of displaying at the top of the custom navigation bar Android and ios pages
Solution: (There will be better solutions, friends are welcome to communicate in the comment area, everyone can learn from each other~~)
The premise of this kind of problem: we are using a custom navigation bar, your pages.json must be like this:
pages": [
{
"path": "pages/login/index",
"style": {
"navigationStyle": "custom" // 取消原生导航,使用自定义导航栏
}
}
]
We can solve this problem by introducing the above systemInfo, we add a dynamic style to the page
<template>
<view class="xiaojin-container" :class="platformClass">
页面内容
</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>
Question 17: Uniapp configuration cross-domain
solution:
Configure manifest.json->h5->devServer in uni-app
"h5": {
"devServer": {
"proxy": {
"/xiaojinAPI": {
"target": "https://xiaojin.com",
"changeOrigin": true,
"secure": false
}
}
}
}
Question 18: [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)
solution:
This is usually because your vite version is not compatible with the project version. The main reasons are:
- You run: npx @dcloudio/uvm alpha
- The official command upgrades the vite version to 4.x,
- The alpha version corresponds to the alpha version of HBuilder
. You should: - step1: Use the command npx @dcloudio/uvm
- step2: Reduce the vite version in package.json, and reduce vite to 3.x for debugging
Question 20: uni-app cancels the default loading circle
solution:
"app-plus" : {
/* 5+App特有相关 */
"usingComponents" : true,
//设置 启动界面
"splashscreen" : {
"alwaysShowBeforeRender" : false,
"waiting" : false,
//"autoclose" : true,
"autoclose" : false,
"delay" : 0
},
Question 21: Manually close the startup interface
solution:
onLaunch: function() {
// #ifdef APP-PLUS
//app关闭默认的启动 方法关闭启动图。但是这个时间不能太晚，6s 超时后依旧会主动关闭。
setTimeout(()=>{
plus.navigator.closeSplashscreen();
},100)
// #endif
}
Question 22: To be added
solution:
I will write here today~
- Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~
- Everyone be happy every day
Everyone is welcome to point out where the article needs to be corrected~
Learning is endless, cooperation is win-win
