|
@@ -3,37 +3,43 @@
|
|
This template should help get you started developing mobile applications with Vue3 and Typescript and Vant in Vite.
|
|
This template should help get you started developing mobile applications with Vue3 and Typescript and Vant in Vite.
|
|
|
|
|
|
## Project setup
|
|
## Project setup
|
|
|
|
+
|
|
```
|
|
```
|
|
yarn install
|
|
yarn install
|
|
```
|
|
```
|
|
|
|
|
|
### Compiles and hot-reloads for development
|
|
### Compiles and hot-reloads for development
|
|
|
|
+
|
|
```
|
|
```
|
|
yarn start
|
|
yarn start
|
|
```
|
|
```
|
|
|
|
|
|
### Compiles and minifies for production
|
|
### Compiles and minifies for production
|
|
|
|
+
|
|
```
|
|
```
|
|
yarn build
|
|
yarn build
|
|
```
|
|
```
|
|
|
|
|
|
### Lints and fixes files (eslint + prettier)
|
|
### Lints and fixes files (eslint + prettier)
|
|
|
|
+
|
|
```
|
|
```
|
|
yarn lint
|
|
yarn lint
|
|
```
|
|
```
|
|
|
|
|
|
### Generate component(page) templates for development
|
|
### Generate component(page) templates for development
|
|
|
|
+
|
|
```
|
|
```
|
|
yarn generate
|
|
yarn generate
|
|
```
|
|
```
|
|
|
|
|
|
### Customize configuration
|
|
### Customize configuration
|
|
|
|
+
|
|
See [Configuration Reference](https://vitejs.dev/config/).
|
|
See [Configuration Reference](https://vitejs.dev/config/).
|
|
|
|
|
|
## Browser adaptation
|
|
## Browser adaptation
|
|
|
|
|
|
-
|
|
|
|
### 目录结构
|
|
### 目录结构
|
|
|
|
+
|
|
```
|
|
```
|
|
/src/student -- 学生端页面目录
|
|
/src/student -- 学生端页面目录
|
|
/src/teacher -- 老师端页面目录
|
|
/src/teacher -- 老师端页面目录
|
|
@@ -51,59 +57,73 @@ See [Configuration Reference](https://vitejs.dev/config/).
|
|
```
|
|
```
|
|
|
|
|
|
### 公用尺寸
|
|
### 公用尺寸
|
|
|
|
+
|
|
1、所有的图片和视频尺寸统一 3:2
|
|
1、所有的图片和视频尺寸统一 3:2
|
|
-2、所有的金额四舍五入保留两位小数, 所有的金额保留2位小数,有百分符
|
|
|
|
|
|
+2、所有的金额四舍五入保留两位小数, 所有的金额保留 2 位小数,有百分符
|
|
|
|
|
|
### native-message api
|
|
### native-message api
|
|
|
|
+
|
|
<!-- 选择文件 -->
|
|
<!-- 选择文件 -->
|
|
|
|
+
|
|
postMessage({ api: 'chooseFile', content: {
|
|
postMessage({ api: 'chooseFile', content: {
|
|
- type: 'img' | 'video' | 'file' | 'midi' | 'mp3' | 'xml',
|
|
|
|
- max: 1
|
|
|
|
|
|
+type: 'img' | 'video' | 'file' | 'midi' | 'mp3' | 'xml',
|
|
|
|
+max: 1
|
|
}}, (res) => {
|
|
}}, (res) => {
|
|
|
|
+
|
|
<!-- fileUrl。 如果是视频 firstFrameImg -->
|
|
<!-- fileUrl。 如果是视频 firstFrameImg -->
|
|
|
|
+
|
|
})
|
|
})
|
|
|
|
|
|
<!-- 进入直播间 -->
|
|
<!-- 进入直播间 -->
|
|
|
|
+
|
|
postMessage({ api: 'joinLiveRoom', content: {
|
|
postMessage({ api: 'joinLiveRoom', content: {
|
|
- roomId: 'xxx',
|
|
|
|
- teacherId: 'xxx'
|
|
|
|
|
|
+roomId: 'xxx',
|
|
|
|
+teacherId: 'xxx'
|
|
})
|
|
})
|
|
|
|
|
|
<!-- 进入群聊天 -->
|
|
<!-- 进入群聊天 -->
|
|
|
|
+
|
|
postMessage({
|
|
postMessage({
|
|
- api: 'joinChatGroup',
|
|
|
|
- content: {
|
|
|
|
- type: 'multi', // single 单人 multi 多人
|
|
|
|
- id: item.id
|
|
|
|
- }
|
|
|
|
|
|
+api: 'joinChatGroup',
|
|
|
|
+content: {
|
|
|
|
+type: 'multi', // single 单人 multi 多人
|
|
|
|
+id: item.id,
|
|
|
|
+role: 'STUDENT' || 'TEACHER'
|
|
|
|
+}
|
|
})
|
|
})
|
|
|
|
|
|
<!-- 拉起支付 -->
|
|
<!-- 拉起支付 -->
|
|
|
|
+
|
|
postMessage({
|
|
postMessage({
|
|
- api: 'paymentOrder',
|
|
|
|
- content: {
|
|
|
|
- orderNo: this.orderInfo.orderNo,
|
|
|
|
- payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
|
|
|
|
- }
|
|
|
|
|
|
+api: 'paymentOrder',
|
|
|
|
+content: {
|
|
|
|
+orderNo: this.orderInfo.orderNo,
|
|
|
|
+payInfo: `alipays://platformapi/startapp?saId=10000007&qrcode=${res.data.pay_info}`
|
|
|
|
+}
|
|
})
|
|
})
|
|
|
|
|
|
<!-- 原生导航是否显示 -->
|
|
<!-- 原生导航是否显示 -->
|
|
|
|
+
|
|
postMessage({api:'setBarStatus',content:{status:1}});
|
|
postMessage({api:'setBarStatus',content:{status:1}});
|
|
|
|
|
|
<!-- 原生导航返回样式 -->
|
|
<!-- 原生导航返回样式 -->
|
|
|
|
+
|
|
postMessage({api:'backIconChange',content:{iconStyle:'black'}});
|
|
postMessage({api:'backIconChange',content:{iconStyle:'black'}});
|
|
|
|
|
|
<!-- 获取原生导航高度 -->
|
|
<!-- 获取原生导航高度 -->
|
|
|
|
+
|
|
postMessage({ api: 'getNavHeight' })
|
|
postMessage({ api: 'getNavHeight' })
|
|
|
|
|
|
### 获取某个目录下面的图片对象
|
|
### 获取某个目录下面的图片对象
|
|
|
|
+
|
|
export const getAssetsHomeFile = (fileName: string) => {
|
|
export const getAssetsHomeFile = (fileName: string) => {
|
|
- const path = `../images/${fileName}`
|
|
|
|
- const modules = import.meta.globEager('../images/*')
|
|
|
|
- return modules[path].default
|
|
|
|
|
|
+const path = `../images/${fileName}`
|
|
|
|
+const modules = import.meta.globEager('../images/\*')
|
|
|
|
+return modules[path].default
|
|
}
|
|
}
|
|
|
|
+
|
|
- 需要带上图片后辍
|
|
- 需要带上图片后辍
|
|
-getAssetsHomeFile('xxx.png')
|
|
|
|
|
|
+ getAssetsHomeFile('xxx.png')
|
|
|
|
|
|
### Rem Unit (default)
|
|
### Rem Unit (default)
|
|
|
|
|
|
@@ -122,10 +142,10 @@ module.exports = {
|
|
plugins: {
|
|
plugins: {
|
|
'postcss-pxtorem': {
|
|
'postcss-pxtorem': {
|
|
rootValue: 37.5,
|
|
rootValue: 37.5,
|
|
- propList: ['*'],
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ propList: ['*']
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
```
|
|
```
|
|
|
|
|
|
### Viewport Units
|
|
### Viewport Units
|
|
@@ -141,10 +161,10 @@ PostCSS config example:
|
|
module.exports = {
|
|
module.exports = {
|
|
plugins: {
|
|
plugins: {
|
|
'postcss-px-to-viewport': {
|
|
'postcss-px-to-viewport': {
|
|
- viewportWidth: 375,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ viewportWidth: 375
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
```
|
|
```
|
|
|
|
|
|
### Custom rootValue
|
|
### Custom rootValue
|
|
@@ -158,12 +178,12 @@ module.exports = {
|
|
// postcss-pxtorem version >= 5.0.0
|
|
// postcss-pxtorem version >= 5.0.0
|
|
'postcss-pxtorem': {
|
|
'postcss-pxtorem': {
|
|
rootValue({ file }) {
|
|
rootValue({ file }) {
|
|
- return file.indexOf('vant') !== -1 ? 37.5 : 75;
|
|
|
|
|
|
+ return file.indexOf('vant') !== -1 ? 37.5 : 75
|
|
},
|
|
},
|
|
- propList: ['*'],
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ propList: ['*']
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
```
|
|
```
|
|
|
|
|
|
## Recommended IDE Setup
|
|
## Recommended IDE Setup
|