uni-app

1.下拉刷新，上拉刷新，请求

<template>
	<view>
		<view>
			{{accessToken}}
		</view>
		<button type="primary" @click="pullDown">下拉刷新</button>
		<button type="default" @click="getRequest">请求</button>
		<view v-for="item in arr">
			<view class="name">{{item}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				"msg":4,
				"accessToken":"",
				"arr":["张艺兴","王俊凯","王源","靳东","杨幂","刘诗诗"]
			}
		},
		// 下拉刷新
		onPullDownRefresh () {
			console.log("刷新了")
			setTimeout(()=> {
				this.msg = 9
				uni.stopPullDownRefresh()
			},2000)
		},
		// 上拉刷新
		onReachBottom () {
			this.arr = [...this.arr,...["倪妮","汪东城","鹿晗","关晓彤"]]
		},
		methods:{
			pullDown () {
				uni.startPullDownRefresh()
			},
			getRequest () {
				uni.request({
					url:"https://admin-tmpl-mock-test.rencaiyoujia.cn/user/login",
					method:"POST",
					data:{
						"password":111111,
						"username":"admin"
					},
					success:res=> {
						this.accessToken = res.data.data.accessToken
						console.log(this.accessToken)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.name {
		height: 300rpx;
	}
</style>

2.数据存储（推荐使用同步Sync）

<template>
	<view>
		<button type="primary" @click="setStroge">存储数据</button>
		<button type="primary" @click="getStroge">获取数据</button>
		<button type="primary" @click="removeStroge">移除数据</button>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				
			}
		},
		methods: {
			setStroge () {
				// uni.setStorage({
				// 	key:"name",
				// 	data:"肖战",
				// 	success() {
				// 		console.log('存储成功')
				// 	}
				// })
				uni.setStorageSync('name','王一博')
			},
			getStroge () {
				// uni.getStorage({
				// 	key:'name',
				// 	success(res) {
				// 		console.log('获取数据成功',res.data)
				// 	}
				// })
				const name = uni.getStorageSync('name')
				console.log(name)
			},
			removeStroge () {
				// uni.removeStorage({
				// 	key:'name',
				// 	success() {
				// 		console.log('删除数据成功')
				// 	}
				// }) 
				uni.removeStorageSync('name')
			}
		}
		
	}
</script>

3.上传图片，预览图片

<template>
	<view class="content">
		<view>
			<button type="primary" @click="imgChoose">上传图片</button>
		</view>
		<view v-for="item in imgUrl">
			<image :src="item" @click="preview(item)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:[]
			}
		},
		onLoad() {

		},
		methods: {
			imgChoose () {
				uni.chooseImage({
					count:6,
					success:res=> {
						this.imgUrl = res.tempFilePaths
					}
				})
			},
			preview (current) {
				uni.previewImage({
					current,
					urls:this.imgUrl,
					indicator:'number',
					// longPressActions: {   // 长按图片显示操作菜单，如不填默认为保存相册
					// 	itemList: ['发送给朋友', '保存图片', '收藏'],
					// 	success: function(data) {
					// 		// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail: function(err) {
					// 		// console.log(err.errMsg);
					// 	}
					// }
				})
			}
		}
	}
</script>

4.条件注释实现跨端兼容  #ifdef     #endif

<template>
	<view class="content">
		<!-- #ifdef H5 -->
		<text>h5</text>
		<!-- #endif -->

		<!-- #ifdef MP-WEIXIN -->
		<text>微信小程序</text>
		<!-- #endif -->

	</view>
</template>

<script>
	export default {
		onLoad() {
			// #ifdef H5
			console.log('h5')
			// #endif

			// #ifdef MP-WEIXIN
			console.log('微信小程序')
			// #endif
		}
	}
</script>

<style>
	/* #ifdef H5 */
	view {
		color:red
	}
	/* #endif */

	/* #ifdef MP-WEIXIN */
	view {
		color:green
	}
	/* #endif */
</style>

5.导航跳转及路由传值navigateTo   switchTab   redirectTo

（1）声明式导航   open-type="redirect"      "switchTab"

<template>
	<view>
		<navigator url="../detail/detail">跳至详情页1</navigator>
		<!-- open-type="redirect"   没有返回箭头 -->
		<navigator url="../detail/detail" open-type="redirect">跳至详情页2</navigator>
		<!-- open-type="switchTab" 跳到tabBar页面，并关闭当前页面，没有返回箭头 -->
		<navigator url="../index/index" open-type="switchTab">跳至我的</navigator>
	</view>
</template>

（2）编程式导航

list.vue

<template>
	<view>
		<button type="primary" size="mini" @click="toDetail1">跳至详情页1</button>
		<button type="primary" size="mini" @click="toDetail2">跳至详情页2</button>
		<button type="primary" size="mini" @click="toMy">跳至我的2</button>
	</view>
</template>
<script>
	export default {
		methods: {
			toDetail1 () {
				uni.navigateTo({
					url:'/pages/detail/detail?id=1&age=18'
				})
			},
			toDetail2 () {
				uni.redirectTo({
					url:'../detail/detail'
				})
			},
			toMy () {
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
		
	}
</script>

（3）页面接收路由参数   生命周期onload中第一形参（option）

detail.vue

<script>
	export default {
		onLoad(option) {
			console.log(option)  // {id: "1", age: "18"}
		}
	}
</script>

6.创建组件（与vue相同）三步

页面引入import    注册compents   使用组件<test></test>

7.组件间传值

（1）父传子

（2）子传父

（3）兄弟组件

8.ui库

扩展组件（uni-ui）

导入插件

和组件一样：页面中  引入，注册，使用。