uniapp

juejin.cn/post/702068…

页面路由

条件编译

// #ifdef  %PLATFORM%
平台特有的API实现
// #endif


// #ifndef H5
// 表示只有 h5 不使用这个 api
uni.createAnimation(OBJECT)
// #endif 

<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

<!--  #ifdef  MP-WEIXIN -->
<!--  只在小程序中生效 -->
<view>我是微信小程序</view>
<!--  #endif -->

<!--  #ifdef  APP-PLUS -->
<!--  只在 app 中生效 -->
<view>我是 app </view>
<!--  #endif -->

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

/* #ifdef  MP-WEIXIN */
/*  只在小程序中生效  */
.header {
	color:red
}
/*  #endif  */

/*  #ifdef  APP-PLUS  */
/*  只在 app 中生效  */
.header {
	color:blue
}
<!--  #endif  */

请求

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址 
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

uniapp 页面开发使用单位 rpx 设计稿需要时750px , 一比一写rpx就行

引入scss 文件

@import '@/common/scss/aa.scss'

在开发uniapp Vue3版本的时候，不能像vue2的选项式API一样，可以直接使用onLoad、onShow等，在组合式API中需要先从“@dcloudio/uni-app”模块中导入才可以。

<script setup>
import {onLoad,onReady} from "@dcloudio/uni-app"
</script>

• onLoad：页面加载时触发，可以在此生命周期函数中进行页面初始化操作。
• onShow：页面显示时触发，可以在此生命周期函数中进行页面展示相关的操作。
• onReady：页面初次渲染完成时触发，可以在此生命周期函数中进行页面渲染完成后的操作。
• onHide：页面隐藏时触发，可以在此生命周期函数中进行页面隐藏相关的操作。
• onUnload：页面卸载时触发，可以在此生命周期函数中进行页面卸载相关的操作。

onload((e)=>{}) 可以接收页面跳转的参数 onReady 之中操作dom

uniapp中组件生命周期函数和页面生命周期函数的执行顺序

不包含组件的页面

onLoad > onShow > onReady

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted