常用常见的架构文件（二）

uniNavigateTo 函数式路由文件

一般情况下项目文件，分为数据状态管理，网络管理，路由管理，页面管理，组件管理

但是在uniapp项目中是没有路由文件，因此本人写了一套函数式路由文件。

• 抛出Router.ts文件

export  function messagePage(param?:any):string{
	
	// 传参
	const Params="?router="+JSON.stringify(param)
	// uniNavigateTo config
	const indexPage={
		animationType:"none",
		url:"/pages/message/messagePage"+Params
	}
	
	return JSON.stringify(indexPage)
}

• 页面组件

<script setup lang="ts">
    import {messagePage} from "../../router/router"
    
    function NavigationBlank(){
        uni.navigateTo(JSON.parse(messagePage()))
    }
</script>

JSON与Vue组件传值

• 子组件

<template>
    <view>
        <text>{{JSON.parse(Props.PropsJson)}}</text>
        <button @click="childEvent">点击</button>
    </view>
</template>
<script setup lang="ts">
const Props=defineprops({
    PropsJson:String
})

const emits=defineEmits(["blank"])

function childEvent(event){
    event.preventdefault()
    emits("blank")
}
</script>

• 父组件

<tempalte>
    <view>
        <ChildComponets 
        :PropsJson="JSON.Stringify(json)" 
        @childEvent="Navigation"></ChildComponets>
    </view>
</template>
<script setup lang="ts">
import ChildComponets from "../../Componets/ChildComponets"

const json=reactive([
    {
        id:1
        name:"张三"
        img:"../../static/index.png"
    }
])

function Navigation(){
    conslog.log("i am parent")
}
</script>

移动端需要注意事项（严格意义上不算是架构设计而是一种思想）

在uni.getSysteminfo中safeArea是可使用的安全区域，safeAreaInsets是不可使用的禁止区域，statusBarHeight电量条

• 移动端某些概念

电量条(状态栏)：指的是wifi,电量，信号，时间在移动端的区域

金刚区：通常位于首页搜索框和Banner图之下的子版块入口的区域

标签栏：底部导航栏，也称tabbar

导航栏：分为顶部导航和底部导航，也称为底部标签，通常称为顶部导航栏

内容区：表述列表页的区域

底部安全区：在苹果手机，或者其他底部异形区域的手机，即最低的安全位置

顶部安全区：既包括电量条也包括顶部导航以及顶部异性区域的手机，即最高的安全位置

移动端开发者人员选项

• Adb连接问题

一般情况下，手机与USB连接会自动触发Adb连接，但是会出现极特殊情况，adb识别不到，例如荣耀手机。荣耀手机需要在官网下载荣耀手机助手。

荣耀手机助手与HbuiderX自动的Adb会有冲突且不稳定，而且开发RN或者Taro或者Flutter的时候需要安装Android Studio(不赘述环境安装)来配置ADB

• 事件区域与BFC区域

也是荣耀手机，荣耀手机在事件区域这一块做的不太好，目前没有处理办法，但不影响使用可以使用事件冒泡解决。

BFC行内块在荣耀手机中会有溢出，但也不影响使用。只能以常规696rpx去解决内容外边距问题

补充header常规请求头

export default {
    "Content-Type":"application/json"
    "cookie":"timestamp=xxx"
    "set-cookie":"sessionid=xxxx"

}