6、 数据缓存
uni.setStorage
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
代码演示
<template> <view> <button type="primary" @click="setStor">存储数据</button> </view> </template> <script> export default { methods: { setStor () { uni.setStorage({ key: 'id', data: 100, success () { console.log('存储成功') } }) } } } </script> <style> </style>
uni.setStorageSync
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
代码演示
<template> <view> <button type="primary" @click="setStor">存储数据</button> </view> </template> <script> export default { methods: { setStor () { uni.setStorageSync('id',100) } } } </script> <style> </style>
uni.getStorage
从本地缓存中异步获取指定 key 对应的内容。
代码演示
<template> <view> <button type="primary" @click="getStorage">获取数据</button> </view> </template> <script> export default { data () { return { id: '' } }, methods: { getStorage () { uni.getStorage({ key: 'id', success: res=>{ this.id = res.data } }) } } } </script>
uni.getStorageSync
从本地缓存中同步获取指定 key 对应的内容。
代码演示
<template> <view> <button type="primary" @click="getStorage">获取数据</button> </view> </template> <script> export default { methods: { getStorage () { const id = uni.getStorageSync('id') console.log(id) } } } </script>
uni.removeStorage
从本地缓存中异步移除指定 key。
代码演示
<template> <view> <button type="primary" @click="removeStorage">删除数据</button> </view> </template> <script> export default { methods: { removeStorage () { uni.removeStorage({ key: 'id', success: function () { console.log('删除成功') } }) } } } </script>
uni.removeStorageSync
从本地缓存中同步移除指定 key。
代码演示
<template> <view> <button type="primary" @click="removeStorage">删除数据</button> </view> </template> <script> export default { methods: { removeStorage () { uni.removeStorageSync('id') } } } </script>
7、上传图片、预览图片
上传图片(uni.chooseImage)
uni.chooseImage方法从本地相册选择图片或使用相机拍照。
案例代码
<template> <view> <button @click="chooseImg" type="primary">上传图片</button> <view> <image v-for="item in imgArr" :src="item" :key="index"></image> </view> </view> </template> <script> export default { data () { return { imgArr: [] } }, methods: { chooseImg () { uni.chooseImage({ count: 9, success: res=>{ this.imgArr = res.tempFilePaths } }) } } } </script>
预览图片(uni.previewImage)
结构
<view> <image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image> </view>
预览图片的方法
previewImg (current) { uni.previewImage({ current, urls: this.imgArr }) }
8、条件注释实现跨端兼容
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
**写法：**以 #ifdef 加平台标识 开头，以 #endif 结尾。
平台标识
组件的条件注释
代码演示
<!-- #ifdef H5 --> <view> h5页面会显示 </view> <!-- #endif --> <!-- #ifdef MP-WEIXIN --> <view> 微信小程序会显示 </view> <!-- #endif --> <!-- #ifdef APP-PLUS --> <view> app会显示 </view> <!-- #endif -->
api的条件注释
代码演示
onLoad () { //#ifdef MP-WEIXIN console.log('这是微信小程序') //#endif //#ifdef H5 console.log('这是h5页面') //#endif }
样式的条件注释
代码演示
/* #ifdef H5 */ view{ height: 100px; line-height: 100px; background: red; } /* #endif */ /* #ifdef MP-WEIXIN */ view{ height: 100px; line-height: 100px; background: green; } /* #endif */
9、uniapp中的导航跳转
利用声明式导航（navigator）进行跳转
navigator详细文档：文档地址
跳转到普通页面
<navigator url="/pages/about/about" hover-class="navigator-hover"> <button type="default">跳转到关于页面</button> </navigator>
跳转到底部导航栏tabbar处页面
<navigator url="/pages/message/message" open-type="switchTab"> <button type="default">跳转到message页面</button> </navigator>
利用编程式导航进行跳转
利用uni.navigateTo进行导航跳转
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
<button type="primary" @click="goAbout">跳转到about页面</button>
通过navigateTo方法进行跳转到普通页面
goAbout () { uni.navigateTo({ url: '/pages/about/about', }) }
利用uni.switchTab进行导航跳转
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
<button type="primary" @click="goMessage">跳转到message页面</button>
通过switchTab方法进行跳转
goMessage () { uni.switchTab({ url: '/pages/message/message' }) }
利用uni.redirectTo进行导航跳转
关闭当前页面，跳转到应用内的某个页面。
<!-- template --> <button type="primary" @click="goMessage">跳转到message页面</button> <!-- js --> goMessage () { uni.redirectTo({ url: '/pages/message/messag' }) }
利用导航跳转传递参数
在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收
传递参数的页面
goAbout () { uni.navigateTo({ url: '/pages/about/about?id=80', }); }
接收参数的页面
<script> export default { onLoad (options) { console.log(options) } } </script
四、uni-app 组件使用
1、组件的创建
在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可
- 创建test组件，在component中新建test.vue文件
<template> <view> 这是一个自定义组件 </view> </template> <script> </script> <style> </style>
