
一个uni-app工程，默认包含如下目录及文件：
 
  ┌─components          uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录;
├─platforms             存放各平台专用页面的目录;
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue           list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录;
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息;
└─pages.json            配置页面路由、导航条、选项卡等页面类信息;

2、开发规范

2.1 uni-app 约定的开发规范

页面文件遵循 Vue 单文件组件规范
组件标签靠近小程序规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

2.2 uni-app 开发的注意事项

html标签
uni-app的tag同小程序的tag，和HTML的tag不一样，比如div要改成view，span要改成text、a要改成navigator。

CSS
推荐使用flex布局模型
单位方面，uni-app 支持的通用 css 单位包括 px、rpx
(早期 uni-app 提供了 upx ，目前已经推荐统一改为 rpx 了)

JS
只有H5端可使用浏览器内置对象，比如document、window、localstorage、cookie等，以及jquery等依赖。

项目文件
显示页面必须放到pages目录下，页面所在目录的目录名需要放入相同名称的.vue文件。

静态资源如图片，固定放到static目录下。这是webpack、mpvue的规则

echats图表
H5端流行的echart报表因为涉及大量dom操作，无法跨端使用，而wx-chart在跨端和更新方面都不足，推荐使用uChart组件。如仍然坚持使用原版echart，可在web-view组件中内嵌html来使用。

3、页面样式与布局

（1）尺寸单位

uni-app支持以下css单位

单位	介绍
px	屏幕像素
upx	uni-app提供根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，屏幕变宽，upx实际显示效果会等比放大
vh	是视窗高度的百分比
单位换算	设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx

注意问题： 动态绑定的 style 不支持使用 upx，因为upx是编译器处理的，在手机端动态修改样式赋值时，无法直接使用 upx。

解决方案： 使用 uni.upx2px(Number) 转换为 px 后再赋值。

this.cWidth = uni.upx2px(750);

（2）样式导入


<style>
    @import "../../common/color.css";
    .colorA {
        box-shadow: none;
    }
</style>

（3）内联样式

支持 style 和 class来控制样式，但建议不要在style中直接使用，影响渲染速度。

（4）所支持的选择器

（5）背景图片和字体图标

支持 base64 格式图片。
支持网络路径图片。
使用本地图片或字体图标需注意：

图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
图片大于等于 40kb，需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
本地引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）。


/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }
/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

（6）条件编译

1、用特殊的代码做标记，不同标记里面的代码可以在不同平台里面执行。

2、支持的文件

.vue
.js
.css
pages.json
各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

3、语法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称


<!-- #ifndef APP-PLUS -->
	<text class="app-text">text</text>
	<!-- #endif -->
	
	<!-- #ifdef MP-WEIXIN -->
	<text class="weixin-text">text</text>
	<!-- #endif -->

五、生命周期

生命周期是必须要知道的，可以对比vue的生命周期

本来想写一个，但是一看官网，发现不能比他写的更详细，所以移步官网，看一下生命周期

应用生命周期 - 整个项目的开始到销毁

页面 - 某一页面的开始到销毁

组件 - 页面中的某一组件的开始到销毁

uni-app官网

六、接口请求及其封装

uni.request(OBJECT) | uni-app官网


uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

接口请求的基本用法也是不介绍了，这里想直接附上一个封装的uni,requrest的方法

新建一个config.js - 配置一个基本地址


class Config {
	constructor() {
		this.instance = null
	}
 
	static getInstance() {
		if (!this.instance) {
			this.instance = new Config()
		}
		return this.instance
	}
 
	getBaseUrl() {
		return 'https://andway.che.ge.chinamobile.com/openApi2'
	}
}
 
export{
	Config
}

在新建一个http.js


import {
	Config
} from './config.js'
 
class HTTP {
	constructor() {
 
	}
 
	request({
		url,
		data = {},
		method = 'GET'
	}) {
		return new Promise((resolve, reject) => {
			this._request(url, resolve, reject, data, method)
		})
	}
 
	_request(url, resolve, reject, data = {}, method = 'GET') {
		const finalUrl = Config.getInstance().getBaseUrl() + url;
		const token = uni.getStorageSync('access_token') || ''
		uni.request({
			url: finalUrl,
			method: method,
			timeout: 15000,
			data: data,
			header: {
				'Authorization': token,
				'content-type': 'application/json',
				'requestSource': '2',
			},
			success: (res) => {
				console.log(res.data)
				const data = res.data
				if (data.resultCode == "000000") {
					resolve(data)
				} else if (data.resultCode == "999999") {
					console.log("网络结果 999999", data)
					reject(data)
					uni.showToast({
						title: data.resultDesc,
						icon:'none',
						duration: 2000
					})
				}
			},
			fail: (err) => {
				console.error(err)
				const errorMes = err.errMsg
				reject(errorMes)
				uni.showToast({
					title: errorMes,
					icon:'none',
					duration: 2000
				})
			}
 
		})
	}
 
}
 
export{
	HTTP
}

新建api文件


import {
	HTTP
} from '../utils/http.js'
 
class TestApi extends HTTP{
	qryTest(data){
		return this.request({
			url: '/mobile/queryAdvertising',
			method: 'GET',
			data
		});
	}
}
 
export{
	TestApi
}

定义好的接口，之后就可以直接使用


import {TestApi} from 'xxx'
 
const testApi = new TestApi()
 
//请求接口
testApi.qryTest(data).then(res => {})
 
//或者用,注意await必须和async一起使用哦
let res = await testApi.qryTest(data)

七、存储

uni.setStorage(OBJECT) @setstorage | uni-app官网

有时候需要进行临时存储，注意的就是同步和异步，选择合适的方式进行存储

同步：


try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

异步：


uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

八、条件编译

https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91

条件编译是不同终端，显示不同样式或者js或pages的配置，条件编译让代码可以一端多用，并且满足需求，只是不同的语法不一致

九、页面跳转

页面跳转有两种，利用标签跳转(声明式跳转)，直接ap(编程式)i跳转

1.1声明式跳转 - navigator

在web前端的标签中，a标签是链接标签，用来跳转，在uniapp中有自己的组件 - navigator

注意 - 跳转的页面必须要在pages中配置好

跳转到非TabBar页面

<navigator url="/pages/detail/index"></navigator>

跳转到TabBar页面 - open-type属性

<navigator url="/pages/home/index" open-type="switchTab"></navigator>

1.2 编程式跳转

uni.navigateTo(OBJECT) | uni-app官网

利用js的api进行跳转

跳转到非TabBar页面

uni.navigateTo({url: '/page/detail/detail'})

跳转到TabBar页面

uni.switchTab({url: '/page/home/index'})

要注意每一个api的区别

uni.navigateTo和uni,redirectTo最大的区别就是，redirect是将其他页面关闭在跳转

1.3 传值与接收

传值

声明式导航

<navigator url="/pages/detail/index?id=1&name=a"></navigator>

编程式导航

uni.navigateTo({url: '/page/detail/detail?id=1&name=a'})

接收

在生命周期onLoad中进行接收


onLoad(option) {
    this.id= option.id;
	this.name= option.name;
}

十、组件间传值

组件间传值，其实就是和vue的传值是一样的

对于父子之间的传值，就不仔细说，参考

http://t.csdn.cn/zF1N5

大致 - 父传子传值，子组件用props接收

- 子传父，用$emit触发

兄弟间传值

在vue中，兄弟之间传值，可以是利用bus进行传值，但是在uniapp中有自己的api,

$on，监听全局的自定义事件，也就是，某一页面只要触发了事件就会执行

兄弟组件一传值

传值的兄弟组件只需要定义触发事件


<template>
    <P @click="toAdd"></P>
</template>
 
<script>
    export default {
        methods: {
            toAdd() {
                uni.$emit('addNum', 10)
            }
        }
    }
</script>

接收值的兄弟组件，需要进行监听事件


<script>
    created(){
        uni.$on('addNum', (num) => {
            this.num += num
        })
    }
</script>

写完啦，基本这些知识点了解完就可以直接上手开发项目了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/445083

uni-app心得体会_uniapp心得

一、uni-app简单介绍

什么是uni-app？

uni-app的优点

二、功能框架浏览图

三、创建项目

四、学习框架