ai_495 uniapp 01

@hyl_495

望通过这次学习 能了解uniapp hh 加油加油加油加油！！！

---

一、uniapp

1. uniapp介绍

1. uniapp 一套代码 多端使用

2. 组件，api与小程序一致，兼容 weex 原生渲染

3. 通用技术栈，vue是语法，小程序端api 内嵌mpvue

4. 开放生态，组件更丰富
   – 支持通过npm安装第三方包
   –支持微信小程序自定义组件及SDK
   –兼容mpvue组件及项目
   –app端支持原生混合编码
   –DCloud将发布插件市场

5. 原理
   

6. 条件编译
   每个平台能发挥自己平台当特色

<template>
<view class = "content">
<!-- #ifdef MP-WEIXIN -->
<view class = "">
//只会编译到小程序
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class = "">
//只会编译到APP
</view>
<!-- #endif -->
</view>
</template>

---

2. 必备基础知识

• html + css + javascript基础知识
• 小程序知识
• vuejs知识

---

3. 框架下载及环境搭建

直接下载 简单粗暴 反正没啥特别要配的东西，需要插件当话，下载安装好后在工具中可看到。
uniapp官网下载地址
微信公众平台下载开发者工具

---

二、使用步骤

uniapp目录介绍

uniapp默认项目目录介绍

┌─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb，详见uniCloud）
│─components 符合vue组件规范的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 配置页面路由、导航条、选项卡等页面类信息

---

开始第一个测试

ctrl+d快速选择一行
双击标签快速选择这个标签
按下键盘ctrl+n+1创建项目
所有的页面文件都存放在pages中
代码如下：

	<view>
	
		<!-- #ifdef APP-NVUE -->
		<image src="../../static/logo1.png" mode=""></image>		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<image src="../../static/logo.png" mode=""></image>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
	
		methods: 
			
		}
	}
</script>

<style>

</style>

发行即可看到对应等效果

---

总结

学习路径

1. template 模板层

模板内引入静态资源：

官方链接

• 在官网组件中可以查看更多组件。
• 组件是视图层都基本组成单元，一个组件通常包括开始标签和结束标签，内容在两个标签内 。

<template>
    <view>
        <tagname property="value">
            content
        </tagname>
    </view>
</template>

---

2. script 脚本层

JS文件引入：

官方链接

• uniapp首先会以vue.js为基础
• uni-app 完整支持 Vue 模板语法。详见Vue官方文档：模板语法。
• 除了vue.js， 在完成一些项目中使用接口，也是存放在这里的，与微信小程序保持一致。
• 在对应等区域中使用@import语句可以导入外联样式表，组件，模板等

---

3. 样式层

css引入静态资源：

官方链接

• 官网：查看更多CSS介绍

• uniapp 使用upx作为默认尺寸单位，可以根据屏幕等宽度进行自适应，支持的通用 css 单位包括 px、rpx。

• px 即屏幕像素

• rpx 即响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算。

• 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表 的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

• 内联样式
  框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view :style="{color:color}" />

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />

---