mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,78 @@
|
||||
# App Platform | App 平台
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates App platform-specific considerations when using uView Pro in UniAppX.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- App manifest configuration
|
||||
- Native capabilities
|
||||
- Performance optimization
|
||||
- Platform-specific features
|
||||
|
||||
### Example: App Configuration
|
||||
|
||||
```json
|
||||
// manifest.json
|
||||
{
|
||||
"app-plus": {
|
||||
"usingComponents": true,
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3,
|
||||
"splashscreen": {
|
||||
"alwaysShowBeforeRender": true,
|
||||
"waiting": true,
|
||||
"autoclose": true,
|
||||
"delay": 0
|
||||
},
|
||||
"modules": {},
|
||||
"distribute": {
|
||||
"android": {
|
||||
"permissions": [
|
||||
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
|
||||
]
|
||||
},
|
||||
"ios": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: App Component Usage
|
||||
|
||||
```vue
|
||||
<!-- pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-button type="primary" @click="handleClick">按钮</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const handleClick = () => {
|
||||
// #ifdef APP-PLUS
|
||||
// App specific code
|
||||
plus.navigator.setStatusBarStyle('dark')
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Configure `usingComponents: true` in manifest.json
|
||||
- Use App-specific APIs when needed
|
||||
- Optimize for native performance
|
||||
- Handle status bar and navigation bar
|
||||
- Test on actual device for best results
|
||||
- Use conditional compilation for App-specific code
|
||||
@@ -0,0 +1,95 @@
|
||||
# H5 Platform | H5 平台
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- H5 responsive design
|
||||
- Browser compatibility
|
||||
- Performance optimization
|
||||
- CSS and SCSS support
|
||||
|
||||
### Example: H5 Responsive Components
|
||||
|
||||
```vue
|
||||
<!-- pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-grid :col="gridCol">
|
||||
<u-grid-item v-for="item in gridData" :key="item.id">
|
||||
{{ item.name }}
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const gridCol = ref(3)
|
||||
const gridData = ref([])
|
||||
|
||||
onMounted(() => {
|
||||
// #ifdef H5
|
||||
// H5: Adjust based on window width
|
||||
const updateGridCol = () => {
|
||||
if (window.innerWidth > 1200) {
|
||||
gridCol.value = 4
|
||||
} else if (window.innerWidth > 768) {
|
||||
gridCol.value = 3
|
||||
} else {
|
||||
gridCol.value = 2
|
||||
}
|
||||
}
|
||||
updateGridCol()
|
||||
window.addEventListener('resize', updateGridCol)
|
||||
// #endif
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
/* H5: Use viewport units for responsive sizing */
|
||||
padding: 20rpx;
|
||||
|
||||
// #ifdef H5
|
||||
@media (min-width: 768px) {
|
||||
padding: 40rpx;
|
||||
}
|
||||
// #endif
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example: H5 Browser Compatibility
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
// #ifdef H5
|
||||
// Check browser compatibility
|
||||
if (!window.CSS || !CSS.supports('display', 'flex')) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您的浏览器版本过低，部分功能可能无法正常使用',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- H5 supports full CSS and SCSS features
|
||||
- Use viewport units (vw, vh) for responsive sizing
|
||||
- Handle window resize events for responsive components
|
||||
- Check browser compatibility for modern CSS features
|
||||
- Use conditional compilation (`#ifdef H5`) for H5-specific code
|
||||
- Use media queries for responsive design
|
||||
@@ -0,0 +1,118 @@
|
||||
# Mini-Program Platform | 小程序平台
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates mini-program platform-specific considerations when using uView Pro in UniAppX.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- Mini-program manifest configuration
|
||||
- Component performance
|
||||
- Code size limits
|
||||
- Platform-specific APIs
|
||||
|
||||
### Example: Mini-Program Configuration
|
||||
|
||||
```json
|
||||
// manifest.json
|
||||
{
|
||||
"mp-weixin": {
|
||||
"appid": "your-appid",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"enhance": true,
|
||||
"postcss": true,
|
||||
"minified": true
|
||||
},
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: Mini-Program Component Usage
|
||||
|
||||
```vue
|
||||
<!-- pages/index/index.vue -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-button type="primary" @click="handleClick">按钮</u-button>
|
||||
<u-form :model="formData">
|
||||
<u-form-item label="姓名">
|
||||
<u-input v-model="formData.name" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const formData = ref({
|
||||
name: ''
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
// WeChat mini-program specific code
|
||||
wx.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
})
|
||||
// #endif
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Example: Performance Optimization
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<u-list>
|
||||
<u-list-item
|
||||
v-for="item in dataList"
|
||||
:key="item.id"
|
||||
:lazy-load="true"
|
||||
>
|
||||
{{ item.name }}
|
||||
</u-list-item>
|
||||
</u-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const dataList = ref([])
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// Mini-program: Optimize for performance
|
||||
const loadData = () => {
|
||||
// Load data in chunks
|
||||
uni.request({
|
||||
url: 'https://api.example.com/data',
|
||||
success: (res) => {
|
||||
dataList.value = res.data.slice(0, 20) // Limit initial load
|
||||
}
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
</script>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- Configure `usingComponents: true` in manifest.json
|
||||
- Use lazy loading for large lists
|
||||
- Optimize component usage for code size limits
|
||||
- Use conditional compilation for platform-specific code
|
||||
- Test on actual mini-program platform
|
||||
- Be aware of code package size limits
|
||||
@@ -0,0 +1,58 @@
|
||||
# nvue Platform | nvue 平台
|
||||
|
||||
## Instructions
|
||||
|
||||
This example demonstrates nvue platform-specific considerations when using uView Pro in UniAppX.
|
||||
|
||||
### Key Concepts
|
||||
|
||||
- nvue rendering engine
|
||||
- Weex syntax
|
||||
- Performance considerations
|
||||
- Style limitations
|
||||
|
||||
### Example: nvue Configuration
|
||||
|
||||
```json
|
||||
// manifest.json
|
||||
{
|
||||
"app-plus": {
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: nvue Component Usage
|
||||
|
||||
```vue
|
||||
<!-- pages/index/index.nvue -->
|
||||
<template>
|
||||
<view class="container">
|
||||
<u-button type="primary">按钮</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// nvue uses same script setup syntax
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/* nvue: Limited CSS support */
|
||||
.container {
|
||||
width: 750rpx;
|
||||
padding: 20rpx;
|
||||
/* Use flexbox for layout */
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Key Points
|
||||
|
||||
- nvue has limited CSS support
|
||||
- Use flexbox for layout
|
||||
- Avoid complex CSS selectors
|
||||
- Test on actual device
|
||||
- Use conditional compilation for nvue-specific code
|
||||
- Consider performance implications
|
||||
Reference in New Issue
Block a user