uniapp

pages.json

uniapp/pages/list/list.vue

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true
				
				
			}
		},
		{
			"path" : "pages/list/list",
			"style" : 
			{
				"navigationBarTitleText" : "新闻列表",
				// "enablePullDownRefresh" : false,
				"navigationBarTextStyle":"white",
				"navigationBarBackgroundColor":"#1AA034"
			}
		}
		
		
		
	],
	"globalStyle": {//如果首页不设置默认值，则会通过此设置默认参数，但是首页的参数优先级更高
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

APP.vue小程序生命周期

index.vue

使用lang="scss"，可以进行标签或者类的嵌套

<template>
	<view class="box">
		<h1>uniapp开发</h1>
    </view>
</template>
<script>
</script>
<style lang="scss">
.box{
	height:50px;
	background-color: pink;
	h1{
		font-size: 20px;
		color:red;
	}
}
</style>

scroll

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

<template>
<scroll-view class="scroll" scroll-x scroll-y>
			<view class="group">
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
				<view class="item">
					111
				</view>
			</view>
		</scroll-view>
</template>
<style>
.scroll{
	border:1px solid red;
	box-sizing: border-box;
	height: 220rpx;
	height: 100rpx;
	.group{
		white-space: nowrap;
		.item{
			width: 220rpx;//rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。
			height: 220rpx;
			background: royalblue;
			display:inline-block;
			margin-right: 10rpx;
		}
	}
</style>

swiper

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

<swiper circular autoplay interval="3000" duration="200" indicator-dots>
			<swiper-item>111</swiper-item>
			<swiper-item>222</swiper-item>
			<swiper-item>333</swiper-item>
		</swiper>

circular 是否采用衔接滑动，即播放到末尾后重新回到开头

autoplay 是否自动切换

interval 自动切换时间间隔

duration 滑动动画时长

indicator-dots 是否显示面板指示点

indicator-color 设置指示点颜色

image

注：对于swiper的图片也可以通过mode来进行裁剪、缩放

src 图片资源地址

mode 图片裁剪、缩放的模式（默认值'scaleToFill'):

mode 有 14 种模式，其中 5 种是缩放模式，9 种是裁剪模式。

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
缩放	aspectFit	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
缩放	widthFix	宽度不变，高度自动变化，保持原图宽高比不变
缩放	heightFix	高度不变，宽度自动变化，保持原图宽高比不变 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基础库 2.10.3
裁剪	top	不缩放图片，只显示图片的顶部区域
裁剪	bottom	不缩放图片，只显示图片的底部区域
裁剪	center	不缩放图片，只显示图片的中间区域
裁剪	left	不缩放图片，只显示图片的左边区域
裁剪	right	不缩放图片，只显示图片的右边区域
裁剪	top left	不缩放图片，只显示图片的左上边区域
裁剪	top right	不缩放图片，只显示图片的右上边区域
裁剪	bottom left	不缩放图片，只显示图片的左下边区域
裁剪	bottom right	不缩放图片，只显示图片的右下边区域

video

视频播放组件。

属性说明

属性名	类型	默认值	说明	平台差异说明
src	String		要播放视频的资源地址
autoplay	Boolean	false	是否自动播放
loop	Boolean	false	是否循环播放
muted	Boolean	false	是否静音播放	飞书小程序不支持
initial-time	Number		指定视频初始播放位置，单位为秒（s）。	飞书小程序不支持
duration	Number		指定视频时长，单位为秒（s）。	抖音小程序、飞书小程序、快手小程序、京东小程序不支持
controls	Boolean	true	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）	快手小程序不支持

导航与路由

url 跳转地址

open-type 跳转方式

<navigator url="/pages/list/list">跳转至新闻列表</navigator>
<!-- 跳至该页面左上角会有返回上一页面 -->
<navigator url="/pages/me/me" open-type="redirect">跳转</navigator>
<!-- //跳至该页面左上角不会有返回 -->
//也可插入图片，通过图片跳转

open-type 有效值

值	说明	平台差异说明
navigate	对应 uni.navigateTo 的功能
redirect	对应 uni.redirectTo 的功能
switchTab	对应 uni.switchTab 的功能
reLaunch	对应 uni.reLaunch 的功能	抖音小程序与飞书小程序不支持
navigateBack	对应 uni.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效	微信2.1.0+、百度2.5.2+、QQ1.4.7+

tabBar导航菜单

注：使用该导航菜单后，navigate跳转功能会失效；设置open-type="reLaunch"，可继续跳转

//在pages.json中
"tabBar": {
		"color":"#333",//默认底部导航颜色
		"selectedColor": "#015FF9",//选中导航颜色
		"list": [
			{
				"text": "首页",
				"pagePath": "pages/index/index"
				//"iconPath": "默认图标地址",
				//"selectedIconPath": "选中图标地址"
			},{
				"text": "列表",
				"pagePath": "pages/list/list"
				//"iconPath": "默认图标地址",
				//"selectedIconPath": "选中图标地址"
			},{
				"text": "关于",
				"pagePath": "pages/me/me"
				//"iconPath": "默认图标地址",
				//"selectedIconPath": "选中图标地址"
			}
		]	
	}

Vue

基本

<template>
	<view>
		<view class="box">当前标题：{{title}}</view>
		<view>{{num}}</view>
		<view>{{arr}}</view>
		<view>{{arr[0]}}</view>
		<view>{{obj}}</view>
		<view>{{obj.name}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"微信小程序",
				num:123,
				arr:[1,2,5,4],
				obj:{name:"张三",age:"18"}
			};
		}
	}
</script>

<style lang="scss">

</style>

条件渲染

注：v-if和v-else之间不可有 其它标签，v-else-if除外

v-show同v-if的效果，但是如果v-show=false时，其css会隐藏（display:none)

<view v-if="state">工作</view>
<view v-else>休息</view>

state:false//最后渲染出休息


<view v-show="state">工作</view>
<view v-show="!state">休息</view>

for列表渲染

• v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
  • 第一个参数 item 则是被迭代的数组元素的别名。
  • 第二个参数，即当前项的索引 index ，是可选的。

<view v-for="(index,item) in arr">{{index}}-{item}</view>
<view v-for="item in goods"，:key="item.id">信息：{{item.title}},价格:{{item.price}}</view>
		
<view v-for="(value,name,index) in obj">{{name}}-{{value}}-{{index}}</view>
<--value,name,index-->顺序不可变

arr:[1,2,5,4],
goods:[
		{
                id:1,
				title:"商品1",
				price:10
		},
		{
                id:2,
				title:"商品2",
				price:15
		}
	 ]

V-html,V-bind

v-html可以识别标签

<view>{{tools}}</view>
<view v-html="tools"></view>



tools:"<h1>123</h1><span>123</span>"

v-bind

动态地绑定一个或多个属性，或一个组件 prop 到表达式。

可简写为:    指令属性的值预期是单个 JavaScript 表达式（在“ ”里为js，需要用时要用单引号）

v-on

简写@click=" ",引号里为函数名称，注意methods下的this

<view v-on:click="onclick">{{title}}</view>
<view @click="addclick">{{num}}</view>
data():{
            title:"标题";
            num:123;
},
methods:{
			onclick(){
				this.title=666
			},
			addclick(){
				this.num++
			}
		}

style绑定

style后的{}为对象形式

<view class="box" :style="{background:bgcolor}" @click="clickbg"></view>
注意style为动态绑定，为v-bind(:)
data() {
			return {
				bgcolor:"red"
			};
		},
		methods:{
			clickbg(){
				let color="#"+String(Math.random()).substr(3,6);
				this.bgcolor=color
			}
		},


.box{
	width:200rpx;
	height:200rpx;
	background-color: pink;
}

class绑定

也可以使用三目运算符

<view class="block" :class="state?"myactive":""></view>

<view class="block" :class="{myactive:state}"@click="onclick"></view>

data(){
    state:false;
},
methods:{
onclick(){
				this.state=!this.state//两种颜色来回切换
			}
}


.block{
	width:200rpx;
	height:300rpx;
	background-color: red;
}
.myactive{
	width:400rpx;
	height:300rpx;
	background-color: blue;
}

v-model双向绑定

<template>
	<view>
		<view>标题:{{title}}</view>
		<input class="box" v-model="title">
		<!-- 在搜索框输入时，上面也会跟着更新内容 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"加法"
			};
		}
	}
</script>

<style lang="scss">
.box{
	border: 1px solid red;;
}
</style>

表单绑定

picker

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

普通选择器mode = selector

属性说明

属性名	类型	默认值	说明	平台差异说明
range	Array / Array<Object>	[]	mode为 selector 或 multiSelector 时，range 有效
range-key	String		当 range 是一个 Array＜Object＞ 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value	Number	0	value 的值表示选择了 range 中的第几个（下标从 0 开始）
selector-type	String	auto	大屏时UI类型，支持 picker、select、auto，默认在 iPad 以 picker 样式展示而在 PC 以 select 样式展示	H5 2.9.9+
disabled	Boolean	false	是否禁用	快手小程序不支持

easycom自动导入自定义组件

1.首先创建components目录

2.在该目录下创建组件（例：myview)

3.创建好的组件在其它Vue上的template中直接写入就可以<myview></myview>，或者使用单标签为<myview/>

Props组件交互

在子组件中设置props，在父组件中直接引用

	<template>
		<view>
			<!-- 我是子组件componentA -->
			
		</view>
	</template>
	<script>
		export default {
            name:"ComponentA",
			//props: ['title'],
            props:{//type进行校验，default不传参时设置默认值
                    title:{
                        type:String,
                        default:"默认标题"
                            },
                    list:{
                            type:Array,//数组（或对象）传递时，默认值必须采用函数形式
                            default(){
                                return [1,2,3]
                                    }
                            }
                }
			data() {
				return {
					
				}
			}
		}
	</script>

	<template>
		<view>
			<!-- 我是父组件 -->
			<componentA :title="title"></componentA>
            <componentA title="hello"></componentA>
            第二种写法就不需要在下面初始化，但是第一种是动态绑定
            <componentA :name="[4,5,1]"></componentA>
		</view>
	</template>
	<script>
		export default {
			data() {
				return {
					title:"hello",
                    name:[4,5,1]
				}
			}
		}
	</script>

emit自定义事件组件交互

this.$emit("自定义事件名称"，相应参数）,该参数为自定义事件所传参

另一个组件中<myview @myenv="onmyenv"></myview>,@后为自定义事件，因为<myview>为自定义组件名称。

通过在myview中输入触发自定义事件myenv，到触发函数onmyenv，console.log出数据（this.message)；若在myview中使用原生事件，需要@click.native=""

<template>
	<view>
		<myview @myenv="onmyenv"></myview>
	</view>
</template>

<script>
	export default {
		data() {
			return {

					}
			},
			methods:{
					onmyenv(e){
						console.log(e)
					}
			}
		
	}

<template>
	<view>
		<view class="item"></view>
		<input type="text" placeholder="输入" @input="oninput">
	</view>
</template>

<script>
	export default {
		name:"myview",
		data() {
			return {
				message:"666"
			}
			},
			methods:{
				oninput(e){
					console.log(e)
					this.$emit("myenv",this.message)
				}
			}
		}
	
</script>

.sync修饰符(略）

一个组件需要提供多个双向绑定的属性时使用，只能选用一个属性来提供 v-model 功能，但如果有其他属性也要提供双向绑定，就需要.sync

this.$emit(”update:事件")

生命周期

vue生命周期分为四个阶段
第一阶段（创建阶段）：beforeCreate，created
第二阶段（渲染阶段）：beforeMount（render），mounted
第三阶段（更新阶段）：beforeUpdate，updated
第四阶段（销毁阶段）：beforeDestroy，destroyed//beforeUnmount,unmounted
 

uniapi路由

uni.navigateTo保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.redirectTo关闭当前页面，跳转到应用内的某个页面。

uni.LaunchTo关闭所有页面，打开到应用内的某个页面。可以打开tabBar导航

uni.navigateBack关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

<navigator url="/pages/demo2/demo2">跳转至关于我</navigator>
		<view class="box" @click="tz"></view>


methods:{
					onmyenv(e){
						console.log(e)
					},
					tz(){
						uni.navigateTo({
							url:"/pages/demo2/demo2"
						})
					}
			}



.box{
	width:200rpx;
	height:200rpx;
	background-color: red;
}

<navigator url="/pages/demo2/demo2?wd=uniapp">跳转至关于我</navigator>

？后传参

在demo2中输入以下代码，且与data同级可以拿到所传参数

onLoad(e){
            console.log(e)
        }

交互反馈

uni.showToast(obj)

显示消息提示框。

uni.showToast({
    title: '标题',
});

参数	类型	必填	说明	平台差异说明
title	String	是	提示的内容，长度与 icon 取值有关。
icon	String	否	图标，有效值详见下方说明，默认：success。
image	String	否	自定义图标的本地路径（app端暂不支持gif）	App、H5、微信小程序、百度小程序、抖音小程序（2.62.0+）
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false	App、微信小程序、抖音小程序（2.47.0+）
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数

icon 值说明

值	说明	平台差异说明
success	显示成功图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。	支付宝小程序无长度无限制
error	显示错误图标，此时 title 文本在小程序平台最多显示 7 个汉字长度，App仅支持单行显示。	支付宝小程序、快手小程序、抖音小程序、百度小程序、京东小程序、QQ小程序不支持
loading	显示加载图标，此时 title 文本在小程序平台最多显示 7 个汉字长度。	支付宝小程序不支持
none	不显示图标，此时 title 文本在小程序最多可显示两行。

uni.hideToast()

隐藏消息提示框。

uni.hideToast();

uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

ps:onload是在页面初始化所执行

onLoad(){
				uni.showLoading({
					title: '加载中...',
					mask: false//mask为false时，加载过程中无法执行其他操作
				})
				setTimeout(()=>{
					uni.hideLoading()
				},2000);
}

uni.showModel(obj)

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。

content	String	否	提示的内容
editable	Boolean	否	是否显示输入框

<view class="block" @click="clickbox"></view>


clickbox(){
						uni.showModal({
							title:"是否进行下一步",
							success:res=>{
								console.log(res)
								if(res.confirm){
									uni.navigateTo({
										url:"/pages/demo2/demo2"
									})
								}else{
									uni.showToast({
										title:"取消",
										icon:"none"
									})
								}
							},
							fail:err=>{
								
							}
						})
					}


.block{
	width:250rpx;
	height: 300rpx;
	background-color: pink;
}

uni.showActionSheet(obj)

从底部向上弹出操作菜单

uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

设置导航条

uni.setNavigationBarTitle(OBJECT)

动态设置当前页面的标题

uni.setNavigationBarTitle({
	title: '新的标题'
});

uni.setNavigationBarColor(OBJECT)

设置页面导航条颜色

uni.showNavigationBarLoading(OBJECT)

在当前页面显示导航条加载动画。

navigationbartitle,navigationbarcolor,navigationbarloading均可在pages.json中添加设置

tabBar配置iconfont字体图标

1.iconfont找图标

// pages.json
{
  "tabBar": {
    "iconfontSrc":"static/iconfont.ttf",//资源路径
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "Tab1",
        "iconfont": {
          "text": "\ue102",//text等均改为前缀为\u
          "selectedText": "\ue103",
          "fontSize": "17px",
          "color": "#000000",
          "selectedColor": "#0000ff"
        }
      }
    ]
  }
}

2.uni.setTabBaritem(obj)

动态设置 tabBar 的整体样式

uni.setTabBarStyle({
  color: '#FF0000',
  selectedColor: '#00FF00',
  backgroundColor: '#0000FF',
  borderStyle: 'white'
})

 3.uni.hideTabBar(obj)

隐藏 tabBar

4.uni.showTabBar(obj)

显示 tabBar

5.uni.setTabBarBadge(obj)

为 tabBar 某一项的右上角添加文本。

uni.setTabBarBadge({
  index: 0,
  text: '1'
})

6.uni.showTabBarRedDot(obj)

显示 tabBar 某一项的右上角的红点

request参数

发起网络请求

参数名	类型	必填	默认值	说明	平台差异说明
url	String	是		开发者服务器接口地址
data	Object/String/ArrayBuffer	否		请求的参数	App 3.3.7 以下不支持 ArrayBuffer 类型
header	Object	否		设置请求的 header，header 中不能设置 Referer	App、H5端会自动带上cookie，且H5端不可手动修改
method	String	否	GET	有效值详见下方说明
timeout	Number	否	60000	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序（2.10.0）、支付宝小程序
success	Function	否		收到开发者服务器成功返回的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

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

 data数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。