目录
- 1，页面开发
- 1.1，标签类
- 1.2，资源引用
- 1.3，页面跳转
- 2，开发规范
- 2.1，应用生命周期
- 2.2，页面生命周期：
- 2.3，条件编译
- 3，注意事项
1，页面开发
1.1，标签类
view视图容器。它类似于传统html中的div，用于包裹各种元素内容。
text标签，用于包裹各种文本内容。
在开发中，使用view标签替代div标签，使用text标签替代span标签。
<view class="pagetopbg"></view>
<view class="pagebtmbg"></view>
<view class="login-wrap">
<view class="lg-logo">
<image src="../../../static/images/logo.png" class="logo" mode=""></image>
</view>
</view>
1.2，资源引用
详情
- 引用js
可以使用绝对路径和相对路径引用
// 相对路径
import tabBar from '../../../components/tabbar/tabbar.vue'
//绝对路径，@指向项目根目录，在cli项目中@指向src目录
import md5 from '@/common/md5.js'
- 引用css
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
<style>
@import "../../common/uni.css";
.uni-card {
box-shadow: none;
}
/* rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。
* 屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 * 375px 的屏幕宽度进行计算.
* 详情：
*/
.pagetopbg {
position: fixed;
left: 0;
top: 0;
z-index: 0;
background: url(@/static/jinfeng/assets/bg_left@2x.png) no-repeat;
background-size: 271rpx 383rpx;
width: 271rpx;
height: 383rpx;
}
</style>
为支持跨平台，建议使用 Flex 布局，关于 Flex 布局可以参考外部文档。
1.3，页面跳转
详情
只能跳转本地页面。目标页面必须在pages.json中注册。
uni.navigateTo({
url: './selectRole',
});
页面传参和接受
//传参
uni.navigateTo({
url: `${v.path}?title=${v.title}`
})
//在下个页面的onload中，接收参数
onLoad(v) {
this.form.BID = v.BID;
},
页面打开方式
uni.navigateTo(object)保留当前页面，跳转到应用内的某个页面
uni.redirectTo(object)关闭当前页面，跳转到应用内的某个页面
uni.reLaunch(object)关闭所有页面，打开到应用内的某个页面
uni.switchTab(object)跳转到 tabBar页面，并关闭其他所有非 tabBar页面
uni.navigateBack(object)关闭当前页面，返回上一页面或多级页面
2，开发规范
- 页面文件遵循 Vue 单文件组件 (SFC) 规范 ，即每个页面是一个.vue文件。（同pc端vue开发一样）
- 注意：所有组件与属性名都是小写，单词之间以连字符-连接。
<component-name property1="value" property2="value">
content
</component-name>
- 在uni-app开发中，所有的JS Api都以uni开头。
//发起网络请求
uni.request
uni-app接口规范
4. 抽离出的组件，不需要在page.json中定义。
2.1，应用生命周期
数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期 。
官方文档
2.2，页面生命周期：
官方文档
uni-app 页面除支持 Vue 组件生命周期外还支持下方页面生命周期函数，
2.3，条件编译
官方文档
uni-app可以使用条件编译：指定某部分代码只编译到特定的终端平台。从而将公用和个性化融合在一个项目中。
写法：以 #ifdef 或 #ifndef 加** %PLATFORM%** 开头，以 #endif 结尾。
- #ifdef：if defined 仅在某平台存在
- #ifndef：if not defined 除了某平台均存在
- ** %PLATFORM%**：平台名称
// #ifdef App
console.log("这段代码只有在App平台才会被编译进去。非App平台编译后没有这段代码")
// #endif
项目中使用
3，注意事项
- uni-app支持使用npm安装第三方包；
- 非H5端不支持
*选择器； - 接口能力（JS API）靠近微信小程序规范，详见文档；例如
uni.request(...)； - 为兼容多端运行，建议使用flex布局进行开发；
- 非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5端为了隔离页面间的样式默认启用了 scoped；
- uni-app支持在css里面设置背景图片，使用本地路径背景图片需要注意：图片小于40kb。如果图片大于40kb，需要将图片放到服务器，引用网络地址。本地背景图片引用路径仅支持以 @ 开头的绝对路径。 例如：background-image:url(’@/static/logo.png’), 不支持相对路径；
- 单位使用rpx，方便适配。
