Uniapp 开发记录

Posted on

Uniapp 开发记录

使用 Vue3 的 setup 语法糖

配置跨域代理

vue2

使用 HBuilderX 创建的项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 文件 mainifest.json

"h5": {
		"devServer": {
			"disableHostCheck": true,
			"proxy": {
				"remote": {
					"target": "http://www.xxx.com:8091/",
					"changeOrigin": true,
					"secure": false,
					"pathRewrite": {
						"/remote": ""
					}
				}
			}
		}
	}
20230214174116

使用

1
2
3
4
5
const url = '/remote/xxx/xxx'
uni.request({
    url: url,
    ...
})

vue3 (无ts)

使用 HBuilderX 创建的项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 在项目根目录创建 vite.config.js

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

export default defineConfig({
	plugins: [uni()],
	server: {
		proxy: {
			'/remote': {
				target: "http://www.xxx.com:8091/",
				changeOrigin: true,
				rewrite: (path) => {
					return path.replace(/^\/remote/, '')
				}
			}
		}
	}
});

App 端无跨域问题，可以直接发送请求

应用生命周期

App.vue是 uni-app 的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。
但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

应用生命周期仅可在App.vue中监听，在页面监听无效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script setup>
	import { upgrade } from './util/upgrade.js'
	import { onShow, onReady, onLaunch } from '@dcloudio/uni-app';

	// 只能在App.vue里监听应用的生命周期
	onLaunch(() => {
		console.log('App Launch')
		upgrade()
	})
	onShow(() => {
		console.log('App Show')
	})
	onReady(() => {
		console.log('App Ready')
	})
</script>


条件编译

20230214174116

版本升级（整包更新）

函数 upgrade 需要放在 onLaunch 生命周期中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
import { useAppInfoStore } from '@/store/appInfo'

export const upgrade = async () => {
  // #ifdef APP-PLUS  
  const remoteInfo = await uni.$get(`http://www.xxx.com:8084/appInfo`)
  const {version: remoteVersion, apkName, desc} = remoteInfo
  // console.log(remoteInfo, remoteInfo.title, remoteInfo.desc)
  const appInfo = useAppInfoStore() // 获取appInfo
  appInfo.upgradeState.version = remoteVersion
  appInfo.upgradeState.desc = desc
  appInfo.newestVersion = remoteVersion // 更新appInfo中的最新版本号

  plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
    appInfo.currentVersion = wgtinfo.version // 更新appInfo中的当前版本号
    const remoteApkUrl = `http://www.safereborn.com:8084/${apkName}.apk`
    if( remoteVersion > wgtinfo.version ) {
      uni.showModal({
        title: '版本更新',
        content: '有新版本，是否更新？',
        confirmText: '下载更新',
        cancelText: '取消',
        success(res) {
          if (res.confirm) {
            console.log('用户点击确定');
            appInfo.upgradeState.isLoading = true
            const downloadTask = uni.downloadFile({
              url: remoteApkUrl,
              success: (downloadResult) => {
                console.log('下载成功, success', downloadResult)
                if (downloadResult.statusCode === 200) {
                  plus.runtime.install(downloadResult.tempFilePath, {
                      force: false
                    },
                    function() {
                      console.log('install success...');
                      plus.runtime.restart();
                    },
                    function(e) {
                      console.error('install fail...');
                    }
                  );
                }
              },
              fail: (err) => {
                console.log('downloadFile fail', err);
              },
              complete(){
                console.log('完成！')
              }
            });
            downloadTask.onProgressUpdate((res) => {
              console.log('下载进度' + res.progress);
              if(res.progress >= 100) {
                appInfo.upgradeState.isLoading = false
              } else {
                appInfo.upgradeState.percent = res.progress
              }
            });
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      })
    }
  })
  // #endif
}


相关 api :

1
2
3
4
5
6
7
8
9
10
plus.runtime.install(downloadResult.tempFilePath, {
    force: false
},
function() {
    console.log('install success...');
    plus.runtime.restart();
},
function(e) {
    console.error('install fail...');
});

配置底部导航 tabbar

效果：

20230214174116

配置代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
   "tabBar":{
      "color":"#707070",
      "selectedColor":"#4243e8",
      "fontSize":"16px",
      "backgroundColor":"#ffffff",
      "height":"64px",
      "iconWidth":"28px",
      "list":[
         {
            "text":"主页",
            "pagePath":"pages/mainPage/mainPage",
            "iconPath":"static/icon/home.png",
            "selectedIconPath":"static/icon/home-fill.png"
         },
         {
            "text":"分类",
            "pagePath":"pages/category/category",
            "iconPath":"static/icon/category.png",
            "selectedIconPath":"static/icon/category-fill.png"
         },
         {
            "text":"图表",
            "pagePath":"pages/charts/charts",
            "iconPath":"static/icon/chart.png",
            "selectedIconPath":"static/icon/chart-fill.png"
         },
         {
            "text":"我的",
            "pagePath":"pages/person/person",
            "iconPath":"static/icon/person.png",
            "selectedIconPath":"static/icon/person-fill.png"
         }
      ]
   }
}

==pages 中需要有对应的页面==

App 端不支持 svg

20230214174116

自定义顶部 top-bar

需要在 pages.json 中配置 "navigationStyle": "custom"

20230214181046

==手机端状态栏高度==

1
2
3
4
5
6
7
8
<view class="status_bar"> <!-- 这是手机端最顶部的状态栏 --> </view>
<style>
    .status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: rgba(248, 248, 248, 1);
	}
</style>