uni-app项目搭建

基础框架搭建

1.目录结构

2.跳转页面

①uni.navigateTo 跳转到页面
②uni.switchTab 跳转tabbar
如果页面是在导航栏上,则需要使用②

3. 运行环境判断

uni-app 可通过 process.env.NODE_ENV判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。
在HBuilderX中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境 cli模式下，是通行的编译环境处理方式。

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

4.条件编译

 -- #ifdef：if defined 仅在某平台存在
 - #ifndef：if not defined 除了某平台均存在

App应用:    APP-PLUS   
微信小程序:  MP-WEIXIN

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

5.尺寸单位及样式布局

一般使用rpx作为尺寸单位；
尽可能使用flex布局,减少相对布局与绝对布局的使用；

6.生命周期

页面中使用onLoad onReady
组件中使用created() mouted() (指引用的组件)

7.图片引用

App端在v3模式以前和小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。
为避免引用问题,图片.css.组件都用绝对路径使用
引用路径推荐使用以 ~@ 开头的绝对路径
注意: 微信小程序不支持相对路径（真机不支持，开发工具支持）

8.html标签

• body 改用 page div,ul,li 改用 view
• a 改用 navigator
• span 改用 text
• img 改用 image
• input 还用，但type属性改成了confirmtype
• select 改用 picker
• iframe 改用 web-view

本文地址：https://blog.csdn.net/weixin_44698285/article/details/111030534