小程序开发之路uni-app 02

「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

创建hello-uniApp项目

目录结构

┌─uniCloud              云空间目录
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录
├─platforms             存放各平台专用页面的目录
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
└─uni.scss              这里是uni-app内置的常用样式变量 

应用生命周期

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数

页面生命周期

uni-app 支持 onLoad、onShow、onReady 等生命周期函数

路由跳转

navigator
参数 
url        跳转的路径
open-type  跳转的方式

页面跳转

<view class="page-body">
            <view class="btn-area">
                <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳转到新页面</button>
                </navigator>
                <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                    <button type="default">在当前页打开</button>
                </navigator>
                <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                    <button type="default">跳转tab页面</button>
                </navigator>
            </view>
        </view>

开发环境和生产环境

在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境 快捷键 uEnvDev、uEnvProd

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

判断平台

编译判断

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

运行判断 uni.getSystemInfoSync().platform

switch(uni.getSystemInfoSync().platform){
    case 'android':
       console.log('运行Android上')
       break;
    case 'ios':
       console.log('运行iOS上')
       break;
    default:
       console.log('运行在开发者工具上')
       break;
}

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素 rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。 iphone 6s 屏幕标准。

Flex布局

为支持跨平台，框架建议使用Flex布局。

背景图片

• 背景图片小于 40kb 时，uni-app 编译到不支持本地背景图的平台时，会自动将其转化为 base64 格式
• 图片大于等于 40kb，不建议使用
• 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径

.test2 {
     background-image: url('~@/static/logo.png');
 }

uni-app 的整体情况介绍完成。