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.目录结构
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
上一篇: 一文搞懂MYSQL主从复制原理