携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第7天，点击查看活动详情

关于标题与我想说的话

由于我目前接触uni-app时间并不久，且仅独立完成过一个工具类项目，因此我再三思索下在标题前加上了 “浅尝” ，目前仍有一个规模对于我来讲比较庞大的问卷项目还未完成，由于这个项目需要两个客户端：web端与微信小程序端，且两端各司其职，并且由于各种原因这些东西只能由我一个人 （好累！） 独自完成，因此踩的坑也算是蛮多的，在此记录

关于uni-app

由于我对于Vue3仅仅停留在学习阶段，没有进行过任何开发，因此uni-app我使用的是Vue2语法。

uni-app中的生命周期

在生命周期钩子中，uni-app添加了一套页面级别的生命周期钩子，区别于Vue的组件生命周期钩子，页面生命周期钩子有着更加便捷的功能，例如相较组件钩子更方便的路由传参、监听用户下拉以进行刷新操作等。

uni-app官方的页面生命周期文档

值得注意的是：uni-app中有两种生命周期分别是：页面生命周期、组件生命周期，对应的生命周期钩子最好分别使用于页面与组件中。虽然混用的话大多情况下并不会报错，但是并不推荐混用它们。下面以onLoad与mounted举例：

onLoad(data) {
	this.getTitle(data.xxx)
}

上面的代码中使用了onLoad页面生命周期钩子监听页面加载，在onLoad钩子函数中有一个参数data，他由uni.navigateTo(object)传入（navigateTo不可跳转至tabBar页面，若仍使用则不报错，但路由也不会发生跳转），有一个必填参数url表示将要跳转到的页面，若要传参则可以在url字符串后面拼接上类似get方法的问号与键值对进行传参，路由跳转成功后onLoad则将会收到一个object对象

若将onLoad改为mounted，由于mounted本身并不接收参数，于是上述组件跳转传参的操作无法完成，读取onLoad中的形参data下的xxx时将会报错

[system]TypeError: Cannot read property 'xxx' of undefined

uni-app中的uni与this

值得强调的是，uni-app虽然大量采用了Vue语法，但仍有些地方与Vue语法不同，例如uni.$emit、uni.$on、uni.$off，我今天反复调试了几次发现组件传参时出现了问题，最后锁定在了this与uni上，最后将全局事件总线的全部改为了uni.xxx，结果就是bug被干掉了。怀揣着好奇我分别输出了一下uni与this，发现他们并不相同

this

uni

我第一眼就看到了第一行我需要的$emit()，并发现许多uni-app的API都存放在uni对象下，最后总结应该是因为Vue中的全局事件总线是自己手动将$bus挂载到Vue实例上的，而uni-app中不再需要挂载到Vue实例中，而是已经提前被放到了uni中。

uni-app中的表单组件：单选、多选

选项文本无法垂直居中问题

明显没有垂直居中

这个也是近期遇到的问题，line-height并没有解决问题，而是布局发生了向下的偏移，使用font-size也是同样的情况。没有摸清楚具体的原因，但是我看到官方推荐用法中使用了flex布局，于是我也尝试着自己敲了一波发现居然成功了。

通过flex垂直居中

html:

<view class="option-list">
    <label>
        <view class="option-item">
            <radio :value="item"></radio>
            <span class="option-text">{{item}}</span>
        </view>
    </label>
</view>

css:

.option-item {
	display: flex;
	flex-direction: row; //设置flex方向，row为默认方向，即从左至右
	width: 100%;
	margin: 10px 0px 10px 20px;
	height: 25px;
}
	
.option-text{
	line-height: 25px;
}

浅尝uni-app问卷小程序开发总结