【uni-app】基础

目录

1、新建项目

2、小程序的单位使用

3、uniapp中生命周期

4、隐藏 “返回首页” 按钮

5、弹窗

6、微信授权登录

7、动态修改标题

8、页面背景色

9、折叠面板的高度无法修改（需要手动）

 10、拨打电话

11、v-for中使用v-if，v-if使用函数报错

12、跳转页面传递参数是数组

13、图片高度自适应

14、修改扩展组件（uni-ui）的样式不生效

---

1、新建项目

 打开HBuilder X编辑器、新建项目，选择模板uni-ui、填写项目名称和项目存放地址，选择vue版本之后点击创建，一个新的项目就完成啦。

我在项目中使用的单位是rpx，它能够自适应屏幕大小

2、小程序的单位使用

在小程序中尺寸的大小一般用px或者rpx为单位，其中px就是传统意义上的像素值，不能很好的适应不同分辨率的手机，因此rpx出现了
1、rpx可以自适应手机分辨率，适配当前机型
2、px是绝对大小

rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6上屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px =1物理像素。

设备	rpx换算px (屏慕宽度/750)	px换算rpx(750/屏慕宽度)
iPhone5	1rpx =0.42px	1px = 2.34rpx
iPhone6	1rpx =0.5px	1px = 2rpx
iPhone6 Plus	1rpx =0.552px	1px = 1.81rpx

建议：开发微信小程序时设计师可以用iphone6作为视觉稿的标准

注意：在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况

在这推荐大家一个软件，https://fancynode.com.cn/pxcook，可以使用设计图psd文件，测量出对应的rpx单位或px单位的css

3、uniapp中生命周期

应用生命周期（仅可在App.vue中监听）

1.onLaunch ：当 uni-app 初始化完成时触发（全局只触发一次）App.vue里的onLaunch中option作用：获取用户进入小程序或退出小程序的场景值

2.onShow ：当 uni-app 启动，或从后台进入前台显示 //监听用户进入小程序

3.onHide :当 uni-app 从前台进入后台 //监听用户离开小程序4.onError :当 uni-app 报错时触发

5.onUniNViewMessage :对 nvue 页面发送的数据进行监听

页面生命周期（在页面中添加）

1.onLoad （监听页面加载）

2.onShow （监听页面显示）

3.onReady （监听页面初次渲染完成）

4.onHide （监听页面隐藏）

5.onUnload :监听页面卸载

6.onResize :监听窗口尺寸变化

7.onPullDownRefresh :监听用户下拉动作，一般用于下拉刷新

​      所有页面都可以完成下拉刷新功能 ，打开pages.json，在"globalStyle"里设置"enablePullDownRefresh":true

​     如果想在单个页面中执行刷新功能：在pages.json里单个页面上添加

8.onReachBottom :页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据

9.onTabItemTap :点击 tabBar 时触发

10.onShareAppMessage :用户点击右上角分享，​可以在转发时设置转发标题，路径和图片

11.onPageScroll :监听页面滚动

12.onNavigationBarButtonTap :监听原生标题栏按钮点击事件13.onBackPress :监听页面返回

14.onNavigationBarSearchInputChanged :监听原生标题栏搜索输入框输入内容变化事件

15.onNavigationBarSearchInputConfirmed :监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发16.onNavigationBarSearchInputClicked :监听原生标题栏搜索输入框点击事件

组件生命周期（与vue标准组件的生命周期相同）

1.beforeCreate :在实例初始化之后被调用

2.created :在实例创建完成后被立即调用

3.beforeMount :在挂载开始之前被调用

4.mounted :挂载到实例上去之后调用（该钩子在服务器端渲染期间不被调用）

5.beforeUpdate ：数据更新时调用，发生在虚拟 DOM 打补丁之前（该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行）

6.updated ：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子（该钩子在服务器端渲染期间不被调用）

7.beforeDestroy ：实例销毁之前调用。在这一步，实例仍然完全可用（该钩子在服务器端渲染期间不被调用）

8.destroyed ：Vue 实例销毁后调用（该钩子在服务器端渲染期间不被调用）

4、隐藏 “返回首页” 按钮

微信7.0.7版本起，当用户打开的小程序最底层页面是非首页时，默认展示“返回首页”按钮，开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

async onShow() {
	uni.hideHomeButton()
},

5、弹窗

（1）uni.showToast()——消息提示框

uni.showToast({
				title: data[0],
				icon:'exception',
				duration:850
			});

（2）uni.showModal()——显示按钮的提示框

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

（3）uni.showActionSheet()——从底部向上弹出操作菜单

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

弹窗来自uni-app官网的交互反馈：https://uniapp.dcloud.net.cn/api/ui/prompt.html

6、微信授权登录

1、uni.getUserProfile获取用户信息 ：每次请求都会弹出授权窗口，用户同意后返回 userInfo。该API仅支持微信小程序端

2、uni-login登录：微信登录在未配置onlyAuthorize的情况下调用此接口，code值不返回，用以换取authResult。配置onlyAuthorize会把未使用过的code值返回。 

参数名	说明	平台差异说明
authResult	登录服务商提供的登录信息，服务商不同返回的结果不完全相同	微信登录配置onlyAuthorize:true则此项为空，App 3.2.6+
code	用户登录凭证。开发者需要在开发者服务器后台，使用 code 换取 openid 和 session_key 等信息	微信登录配置onlyAuthorize:true才会返回，App 3.2.6+、京东小程序
appleInfo	Object	否
errMsg	描述信息

来自uni-app官网的第三方服务登录：https://uniapp.dcloud.net.cn/api/plugins/login.html

3、getPhoneNumber（使用手机号）：此方法必须是在按钮上使用，结合open-type

官网地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

<template>
	<view class="container">
		<image src="/static//denglu.png" mode=""></image>
		<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary">微信授权登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			getPhoneNumber(e) {
				uni.showLoading({
					title: '加载中'
				})
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					// console.log(e)
					this.api.GetPhone({
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						code: e.detail.code
					}).then(res => {
						uni.setStorage({
							key: 'GetPhone_Token',
							data: res.data.Data.Token
						})
						uni.setStorage({
							key: 'GetPhone_Id',
							data: res.data.Data.Id
						})
						uni.reLaunch({
							url: '/pages/home/index'
						})
					})
				} else {
					uni.hideLoading()
					uni.showToast({
						title: '您拒绝了请求',
						icon: 'error',
						duration: 1000
					})
					return
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	image {
		width: 100%;
		height: 680rpx;
	}

	button {
		margin-top: 30%;
		width: 70%;
		border-radius: 50rpx;
		background-color: #0086d6 !important;
	}
</style>

注意：我是在uni-app上写的，所以使用@，如果是直接在微信小程序软件上写的，则是使用

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

7、动态修改标题

 

根据上一页传递搓来的参数，进行动态修改标题

methods: {
			change(item, index) {
				uni.navigateTo({
					url: '/pages/word/details?item=' + item.name
				});
			}
		}

 接收页

onLoad(e) {
			uni.setNavigationBarTitle({
				title: e.item,
				// success: () => {
				// 	// console.log('修改标题成功')
				// },
				// fail: () => {
				// 	// console.log('修改标题失败')
				// },
				// complete: () => {
				// 	// console.log('修改标题结束')
				// },
			})
		}

8、页面背景色

全局背景色

在App.vue中的style设置

<style lang="scss">
	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}
</style>

单页面背景色

在所需页面中的style设置，不要放在scoped中。

<style>
page {
	background-color: #FFFFFF;
}
</style>

9、折叠面板的高度无法修改（需要手动）

在H5/移动端使用动态添加数据高度正常更新，但在小程序端添加数据面板不会动态更新，需点击折叠按钮才会更新

在uni-list-item中添加事件

<uni-collapse ref="collapse" v-for="(item,index) in list" :key='index'>
			<!-- 因为list默认带一条分隔线，所以使用 titleBorder="none" 取消面板的分隔线 -->
			<uni-collapse-item title-border="none" :border="false" :show-arrow="true" :open="open">
				<template v-slot:title>
					<uni-list>
						<uni-list-item :title="item.title" :note="item.note" :show-extra-icon="true"
							@click="handleHeight()">
						</uni-list-item>
					</uni-list>
				</template>
				
			</uni-collapse-item>
		</uni-collapse>

js

methods: {
			// 高度在小程序中是无法改变的，需要手动更新高度
			handleHeight() {
				this.$nextTick(() => {
					this.$refs.collapse.resize();
				});
			},
		}

 10、拨打电话

<button @click="pages()">联系我们</button>


<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="同意" title="确定拨打电话吗？" @confirm="dialogConfirm"
				@close="dialogClose">
				<text class="text">400-123-1234</text>
			</uni-popup-dialog>
</uni-popup>

 js

pages() {
		this.$refs.alertDialog.open()
},
// 联系我们——拨打电话
dialogConfirm() {
	let phone = this.list[1].rightText
	uni.makePhoneCall({
			phoneNumber: phone,
	})
},

11、v-for中使用v-if，v-if使用函数报错

原因：v-if不能使用函数返回值作为判断条件

原先我的函数是写在methods中的，然后再template中使用v-if="text(item.url)"，结果报错。后来我看了说v-if中不能使用函数，可以使用计算属性或子组件替代。

<template>  
    <view v-for="(item,index) in list" :key='index'>
       <view v-if="test(item.url)">内容</view>  
    </view>
</template>  
<script>  
    export default {  
        data() {  
            return {    
            }  
        },  
        computed: {  
            test: {  
               get(){  
                return function(val) {
                    //判断是不是视频  
                    if (url.indexOf('.') != -1) {
			           var ext = url.substring(url.lastIndexOf('.') + 1);
			 		   return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
				    }
                  }  
                },
                set(){}//防止报错，set放在这里
            }  
        },  
        methods: {  }  
    };  
</script>

12、跳转页面传递参数是数组

A页面的写法：A跳转到B

uni.navigateTo({
	url: '/pages/word/new?list=' + items,
})

B页面的写法：

 onLoad(e) {
	 console.log(e)
	 let obj = e.list.replace("\"([^\"]*)\"", "$1");
	 this.list = JSON.parse(obj)
	 console.log(this.list)
 },

还有一种方法使用encodeURIComponent，可以是数组或对象或解决中文乱码的时候使用

A页面

// encodeURIComponent是uniapp提供的api，直接使用，不需要注册
const item = res.data.Data
//跳转页面
uni.navigateTo({
     url: `../list/list?item=${encodeURIComponent(JSON.stringify(item))}`,
})

 B页面

onLoad(option) {
      // decodeURIComponent是uniapp提供的api，直接使用，不需要注册
      const item = JSON.parse(decodeURIComponent(option.item));
      this.getreport = item
    },

13、图片高度自适应

微信小程序图片宽度width可以使用100%进行自适应，但是高度不行，所以这里需要使用mode属性，添加mode='widthFix' 即可

<image class="CompangImg" :src="banner.CompangImg" mode="widthFix">

14、修改扩展组件（uni-ui）的样式不生效

无论是在页面中修改样式还是使用深度选择器都无效。

然后查询微信平台官方开发文档得知，微信中的组件存在组件样式隔离，即自定义组件的样式只受到自定义组件 wxss 的影响。
此时如果想在其它页面影响到该组件的样式，需要在施加影响的组件中加入选项：

 options: {
    styleIsolation: 'shared', // 解除样式隔离
  }

shared表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

根据以上设定，样式就正常被修改了。

还有一种方法就是写在app.vue中：

页面

<template>
	<view class="detailsContainer"> 
         <view class="example-body">
			<view v-for="(item,index) in tags" :key="index"
				:class="whichSelected===index?'stateBtnSelected':'stateBtnNoselect'" :circle="true"
				@click="selectState(index)">{{item}}</view>
		</view>
	</view>
</template>

app.vue

<style lang="scss">
	// 资源包样式
	.detailsContainer {
		.uni-list {
			border-top: 1px solid #7fc2ea;
			border-bottom: 1px solid #7fc2ea;
		}

		.uni-list-item__content-title {
			font-size: 15px !important;
		}

		.uni-list-item__container {
			line-height: 20px;
		}
	}
</style>