欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

uni-app项目搭建

程序员文章站 2022-06-23 08:53:33
基础框架搭建1.uniApp介绍1.目录结构2.跳转页面3. 运行环境判断4.条件编译5.尺寸单位及样式布局6.生命周期7.图片引用8.html标签1.uniApp介绍1.目录结构2.跳转页面①uni.navigateTo 跳转到页面②uni.switchTab 跳转tabbar如果页面是在导航栏上,则需要使用②3. 运行环境判断uni-app 可通过 process.env.NODE_ENV判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。在HBuil...

1.目录结构

uni-app项目搭建

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

相关标签: uniapp 小程序