技术文档（1）uni-app开发指导手册

酒鼎

已于 2024-09-13 10:59:03 修改

阅读量1.1k

点赞数

分类专栏： uni-app 文章标签： web uni-app

于 2023-05-05 18:11:36 首次发布

本文链接：https://blog.csdn.net/dugujiuding/article/details/130511817

版权

uni-app 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

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;
    }

	.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，页面生命周期

官方文档

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样式

rpx，即响应式px，根据屏幕宽度自适应的动态单位，以750px宽的屏幕为基准。详情
支持基本常用的选择器class、id、element等。
page相当于body节点。

3.1，样式隔离

定义在APP.vue中的样式为全局样式，作用于每一个页面。在pages目录下的vue文件定义的样式为局部样式，只作用于局部，并且会覆盖APP.vue中相同的选择器。
H5端默认启用了 scoped，非H5端默认未启用 scoped；如需要隔离组件样式，可以在 style 标签增加 scoped 属性。

3.2，设置字体图片

设置字体图标

uni-app支持使用字体图标，使用方式与普通文本项目相同。

字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb，需开发者自己转换，否则使用将不生效；
字体文件的引用路径推荐使用以~@开头的绝对路径。否则会找不到文件。

设置背景图片

uni-app支持在css里面设置背景图片，使用本地路径背景图片需要注意：图片小于40kb。如果图片大于40kb，需要将图片放到服务器，引用网络地址。本地背景图片引用路径仅支持以 @ 开头的绝对路径。例如：background-image:url(’@/static/logo.png’), 不支持相对路径。

4，注意事项

uni-app支持使用npm安装第三方包。
非H5端不支持*选择器。
为兼容多端运行，建议使用flex布局进行开发。

5，uni-app和PC端开发相同点

uni-app中的数据绑定/事件绑定：与vue一模一样。
v-for，v-if，生命周期等。
状态（数据）管理可以用vue的vuex，以及本地储存和页面状态。

文件就和开发vue组件基本一样了。模板，逻辑，样式，然后点击事件，watch监听，props传值，onLoad接收上一页面传过来的url参数，懂得vue就能够开发。
uni-app内置了vuex，可以直接使用无需下载。新建store文件夹，下面创建一个index.js文件。然后就可以和vue一样了。
组件化开发
1. 自定义的组件无需在pages.json中定义。

<template>
	<view >
      //3,使用
      <!-- 融资信息 -->
      <FinancInfo :applyEc="applyEc" @finanInfoEvent="finanInfoEvent"></FinancInfo>
      <!-- 一年以内发票信息 -->
      <oneYearBillInfo></oneYearBillInfo>
	</view>

</template>

//1，导入组件
import FinancInfo from "./module/finan-info.vue";
import oneYearBillInfo from "./module/one-year-bill-info.vue";
export default {
	//	2，注册到当前页面  
    components: {
        FinancInfo,
        oneYearBillInfo,
    },
}