（一）uniapp基础组件输出

uniapp开发

创建项目

• 软件使用HBilderX,官网直接安装
• 新建项目选择模板

运行项目

• 创建后点击运行
• 可选择H5,APP,小程序
• 在网上找的网易api接口数据不是很全，
• 网易云音乐NodeJS
• api,可直接请求

pages.json配置全局文件

{
	"pages": [ //pages数组中第一项表示应用启动页
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "网易云音乐"
			}
		}
    ],
	"globalStyle": {//全局页面头部样式设置
		"navigationBarTextStyle": "black",//标题颜色
		"navigationBarTitleText": "网易云音乐",//内容标题
		"navigationBarBackgroundColor": "#ffffff",//导航栏背景
		"backgroundColor": "#ffffff"//窗口背景
	},
	"tabBar":{//底部tab设置
	"color":"",//默认颜色
	"selectedColor":"",//选中后的颜色
	"backgroundColor"::"",
	"list":[{//底部导航栏，最多5个，最少两个
	"pagePath":"pages/index/index",
     }，
     {
	"pagePath":"pages/index/index",
     }]
	}
	"uniIdRouter": {}
}

基本一个项目需要这些就够了，特殊时在官网查找，
创建页面时移动到pages文件夹，点击右键新建页面，
按图就行，创建后会自动在pages.json里面配置

接下来就可以开发页面了

uniapp组件

视图容器组件

view

uniapp官网view属性描述
视图容器。
类似于html中的div，
属性值

hover-class指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-start-time按住后多久出现点击态，单位毫秒
hover-stay-time手指松开后点击态保留时间，单位毫秒

<view hover-class=“none”  >A</view>
<view hover-start-time="40" >B</view>
<view hover-stay-time="50" >C</view>

scroll-view 区域滚动

uniapp官网scroll-view属性描述

可滚动视图区域

使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给添加white-space: nowrap;样式。

<scroll-view scroll-x=“true” scroll-y="true"></scroll-view>

swiper 轮播图

详情 uniapp官网swiper属性描述

autoplay 自动切换 true
interval 自动切换间隔 500
indicator-dots 是否显示面板指示点 true
circular 首尾衔接滑动 true

<swiper circular :indicator-dots="indicatorDots" autoplay="true" :interval="interval"
				:duration="duration">
		<swiper-item>
			<view class="swiper-item uni-bg-red">A</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-green">B</view>
		</swiper-item>
	
</swiper>

movable-area movable-view

详情 uniapp官网movable-view的属性描述

movable-area //可拖动区域

movable-view//可拖动区域内的盒子配合使用

<movable-area>
	<movable-view class="max" direction="all">text</movable-view>
</movable-area>

cover-view

覆盖在原生组件上的文本视图,使不生效的原生组件可在其他端使用

<cover-view ></cover-view>

cover-image

覆盖在原生组件上的图片视图。

src//图片路径
@load// 图片加载成功时触发
@error// 图片加载失败时触发

<cover-image src="/static/play.png"></cover-image>

基础组件

icon

图标
由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。

<icon type="success" size="26" color=“#000000”/>

text

文本组件
selectable 文本是否可选

<text selectable=true>text</text>

progress

进度条
percent 百分比0~100 number
show-info 在进度条右侧显示百分比 Boolean
stroke-width 进度条线的宽度，单位px number

详情 uniapp官网movable-view的属性描述

<progress  stroke-width="3" />

表单组件

官网链接 表单组件属性

button    //按钮
checkbox  //多选
editor    //富文本编辑器
form      //表单
input     //输入框
label     //绑定输入  包裹input等替他组件 for绑定
picker    //选择器  mode选择器类型 省市区、时间日期等
picker-view //嵌入页面的滚动选择器 
radio     //单选
slider    //进度条
switch    //开关
textarea  //多行文本

<form @submit="formSubmit" @reset="formReset">
    <button form-type="submit">Submit</button>
    <button type="default" form-type="reset">Reset</button>
</form>

路由与页面跳转

navigator
页面跳转
类似HTML中的组件，只能跳转本地页面，只能跳转本地页面才能跳转。
跳转链接不能添加.vue后缀

<navigator url="navigate/navigate?title=navigate">
   <button type="default">跳转到新页面</button>
</navigator>

媒体组件

animation-view

Lottie动画组件
path 路径
loop 循环播放
autoplay 自动播放
action 动画操作
hidden 隐藏动画
@bindended 动画播放完的回调

<animation-view path="" loop autoplay hidden @bindended="lottieEnd">
</animation-view>

audio

音频

loop      //循环播放
controls  //显示控件
<audio src="" loop controls></audio>

camera 相机组件

页面内嵌的区域相机组件，块级
点击进入uniapp官网

<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px;"></camera>

image

图片

 <image mode="aspectFit" src=""></image>

video

视频播放组件
点击进入uniapp官网

<video></video>

live-player live-pusher

录制音频、视频组件

<live-player></live-player>
<live-pusher></live-pusher>

地图

map

uniapp地图组件属性入口

<map></map>

媒体组件

<audio src=''></audio>                    //音频组件
<video  src=""></video>                   //视频组件
<image src="" mode=""></image>            //图片
<live-player></live-player>               //视频录制组件
<live-pusher></live-pusher>               //音频录制组件

<map :latitude="" :longitude=""></map>    //地图

<canvas></canvas>                         //画布

<web-view></web-view>                     //web浏览器组件，自动全屏

一般开发会使用插件，uniapp官网里的也有类似插件的扩展组件 uniui