uniapp入门

uniapp是在vue和小程序的基础上构建的框架，因此只记录和vue以及小程序 使用不同的地方

1， hbuilder x 使用微信小程序开发工具， 需要开启小程序开发工具的端口号才行；

小程序工具->设置->通用设置->安全-> 开启端口 

2， 如果联动微信小程序失败的话， 需要手动用微信开发工具的小程序开启uniapp项目 /dist/mp-vue项目

3， 设置页面中h5下的下拉刷新样式的代码为如下， （如果要设置一个具体特殊位置的样式会比较深）

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			        "navigationBarTitleText": "首页",//设置页面标题文字
			        "enablePullDownRefresh":true,//开启下拉刷新,
					"backgroundColor": "#007AFF",
					"h5":{
						"pullToRefresh":{
							"color":"red"
						}
					}
			      }
		}
	],

4，样式 

app.vue 是全局样式

其他的页面组件是局部样式 ，局部样式会覆盖全局同名样式

5，下拉刷新 和上拉加载更多

一般分为全局配置和局部配置，一般推荐局部配置

下拉刷新 ：

开启有两种方式：
前提通过pages的style属性点来配置界面开启下拉刷新
1， 手动触发
{
			"path": "pages/message/message",
			"style":{
				"enablePullDownRefresh": true
			}
		},


vue文件 
onPullDownRefresh(){
			this.list = [...this.list, 6,7];
			// 关闭下拉刷新
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},1000)
		}

2，在手动的基础上我们也可以选择事件触发 
 vue文件 


<button @click="pull">button</button>

methods:{
			pull(){
				// uni.startPullDownRefresh({
				// 	success:()=>{this.list = [...this.list, 6,7]; console.log(1)},
				// 	fail(){ console.log(2)},
				// 	complete(){ console.log(3)}
				// })
				uni.startPullDownRefresh()
				
			}
		}


**********************
uni.startPullDownRefresh() 和 uni.stopPullDownRefresh() 是一对api 

上拉加载更多 

1， 通过style的onReachBottomDistance配置触底触发事件的距离
{
			"path": "pages/message/message",
			"style":{
				"enablePullDownRefresh": true,
				"onReachBottomDistance": 500
			}
		},

2， 定义该函数 onReachBottom
onReachBottom() {
			this.list = [...this.list, 6,7,8,9,10];
			console.log('loading')
		},

 上拉加载 2

可以使用view-scroll的触底事件来做

6，缓存 

缓存这里有6个api，对应 h5的localstrorage 以及小程序的storage ， 

注意 这里存储的是一个对象， 并且会自动存储 对象的；类型  

例如  data: 100 存到会h5 的页面里是 {"type":"number","data":100} 

上代码  


        <button @click="getStorage">getStorage</button>
		<button @click="setStorage">setStorage</button>
		<button @click="removeStorage">removeStorage</button>
		<button @click="getStorageAsync">getStorageAsync</button>
		<button @click="setStorageAsync">setStorageAsync</button>
		<button @click="removeStorageAsync">removeStorageAsync</button>



getStorage(){
				uni.getStorage({
					'key':'score',
					success(){
						console.log('获取缓存成功，异步')
					}
				})
			},
			setStorage(){
				uni.setStorage({
					'data':  100,
					'key':'score',
					success(){
						console.log('设置缓存成功，异步')
					}
				})
			},
			removeStorage(){
				uni.removeStorage({
					'key':'score',
					success(){
						console.log('移除缓存成功，异步')
					}
				})
			},
			getStorageAsync(){
				uni.getStorageAsync({
					'key':'score',
					success(){
						console.log('获取缓存成功，同步')
					}
				})
			},
			setStorageAsync(){
				uni.setStorageAsync({
					'key':'score',
					'data':100, 
					success(){
						console.log('设置缓存成功，同步')
					}
				})
				
			},
			removeStorageAsync(){
				uni.removeStorageAsync({
					'key':'score',
					success(){
						console.log('移除缓存成功，同步')
					}
				})
				
			},

7， 上传图片 

<button @click="upload">upload</button>
		<image v-for="(src,index) in imgs"  :key="index" :src="src" @click="preview(src)" />


	upload(){
			uni.chooseImage({
				count:5,
				success:(e)=>{
					this.imgs= e.tempFilePaths  // 此处显示的是一个blob的地址 ，具体怎么传到服务器，还要看约定
				}
			})
		},
		preview(current){  // 预览图片， 但不支持循环图片，apps上可以
			uni.previewImage({ 
				current,
				urls: this.imgs
			})
		}

8，条件注释

条件 分为三种情况 
主要的开闭合标签关键字为  #ifdef 终端标识       #endif    

以h5 和 小程序 为例  
1，template   <!--  -->
h5
<!-- #ifdef H5 -->
		<view class="case" @click="caseClick">条件注释h5</view>
		<!-- #endif -->
小程序 
<!-- #ifdef MP-WEIXIN -->
		<view class="case"  @click="caseClick">条件注释小程序</view>
		<!-- #endif -->
2，js   // 
h5

// #ifdef H5
				console.log('H5')
				// #endif

小程序 
// #ifdef MP-WEIXIN
				console.log("小程序")
				// #endif


3，css  /*  */
h5
/* #ifdef H5 */
	.case{
		color:red
	}
	/*  #endif */
小程序 
/* #ifdef MP-WEIXIN */
	.case{
		color:blue
	}
	/*  #endif */

9，导航方式

声明式导航

1， 直接 到某个地址
<navigator url='/pages/detail/detail'>detail</navigator>

2， 杀死 前面几个页面，  重新打开新的页面（在小程序中有home按钮）

<navigator url='/pages/detail/detail' open-type="redirect">detail-redirect</navigator>
3， 到tab页面 ， 到达tab页面没有返回页面 （tab页面没有返回按钮）
<navigator url='/pages/message/message'  open-type="switchTab" >switchTab</navigator>


命令式导航 
1， 直接 到某个地址
<button type="primary" @click="goDetail">detail</button>
goDetail(){
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			},


2， 杀死 前面几个页面，  重新打开新的页面（在小程序中有home按钮）
<button type="primary" @click="goDetailRedirect">detail-redirect</button>

goDetailRedirect(){
				uni.redirectTo({
						url:'/pages/detail/detail'
				})
			},
3， 到tab页面 ， 到达tab页面没有返回页面 （tab页面没有返回按钮）
<button type="primary" @click="goswitchTab">switchTab</button>

	goswitchTab(){
				uni.switchTab({
					url:'/pages/message/message'
				})
			}

10， 使用 uni-app ui  ，插件机制 

1. 在网页注册账号， 登陆， 选择插件点击 下载到hbx ， 然后在component就可以看到了 

2，在局部引入使用 

  <template>
        <view>
            <e-picker-plus ref="picker"  @confirm="confirm" />
            <view @tap="show">开启</view>
        </view>
    </template>
    
        export default {
            methods: {
                show() {
                    this.$refs.picker.show()
                },
                confirm(e) {
                    console.log(e)
                }
            }
        }

11， 封装请求 

请求的封装 都一样 这里有个选择是挂载到vue实例是下面 ，例如这么做：

import  fetchData from '@/utils/fetchData '

Vue.prototype.$fetch = this.fetchData ；

*******

async await的await 虽然是await promise 但是没有必要.then  ,直接可以取到 promise的实际值 ，此时await 后面不能是函数体直接执行 ，必须是函数执行，否则会返回一个promise 

let request = ()=> new Promise((reslove,reject)=>{
							setTimeout(()=>{
								reslove(2222)
							},1000)
						})


let getResult = async()=>{
	let result = await request()
				
	console.log(result)
	return result;
}

getResult()

 

12 , map , rich-text 组件 

 

map   

注意： 图标要选小点 

<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">

 latitude: 39.909,
            longitude: 116.39742,
            covers: [{
                latitude: 39.909,
                longitude: 116.39742,
                iconPath: '../../../static/location.png'
            }, {
                latitude: 39.90,
                longitude: 116.39,
                iconPath: '../../../static/location.png'
            }]

 




rich-text  富文本显示  v-html 也可以实现 区别在于 ：

v-html 只能接收一个字符串来用 innerHTML 来解析， 但是rich-text 还能接收nodes 属性 ，可以传一个数组json来描述对应节点 ，  richtext 屏蔽所有 节点事件