前提：vue3+uniapp+uviewPlus+js
使用工具：hbx
问题：
1、u-input在小程序中会出现聚焦状态无法点击清除输入框内值的情况
看u-input源码，@input和@change方法都是绑定的valueChange方法，清除方法onClear如下，先赋值为空然后在nextTick中改变已有值，但是在小程序中由于某种机制会在点击清除时优先为失焦状态，此时清除按钮被隐藏，或者有时候先触发清除，但是由于又触发了input和change又把原来的值给赋值上去了导致出现问题，所以解决办法就是如下将清空方法修正，，增加一个settimeout延时清空即可
onClear() {
// #ifdef MP-WEIXIN
setTimeout(() => {
this.innerValue = ''
this.valueChange()
this.$emit('clear')
}, 100)
// #endif
// #ifndef MP-WEIXIN
this.innerValue = ''
this.$nextTick(() => {
this.valueChange()
this.$emit('clear')
})
// #endif
},
2、u-tabs组件在设置itemStyle时切记不要加左右margin，想要改变左右间距请设置paddingLeft和paddingRight，否则会导致滑块定位不对的情况
3、u-swipe-action组件，配合z-paing使用且u-swipe-action-item有多个，要给u-swipe-action-item加marginbottom需要如下代码,原因未知
:deep(.u-swipe-action-item:not(:last-child)) {
margin-bottom: 32rpx;
}
4、u-button 在微信小程序中貌似无法通过deep改变样式 如果ui很花慎用
5、写自定义组件时，如果用到了第三方组件，比如我这在自定义组件中使用到了uviewplus，则在组件代码中应加如下设置
<script>
export default {
options: {
styleIsolation: 'shared', // 解除样式隔离
},
}
</script>
6、自定义组件中加slot，在小程序中调用自定义组件且此插槽内有多个view的时候，有时候会莫名其妙多生成一个view套住所有内容导致设置的class失效，所以建议在使用自定义组件的插槽时在使用页面自行先用一个view宽高设置100%，也就是说尽量保持插槽中尽量只有一个子节点
<template #paging_empty>
<view class="fill">
<view class="list-empty-content" v-if="netWorkType !== 'none'">123 </view>
<view class="list-empty-content" v-else>
<image
style="width: 576rpx; height: 224rpx"
src="xxxxx"></image>
<text class="list-empty-content-text">暂无数据！</text>
</view>
</view>
</template>
// 缺省部分通用样式
.list-empty-content {
width: 100%;
height: calc(100% - 40rpx);
background-color: #fff;
border-radius: 12rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
&-text {
margin-top: 32rpx;
color: #6d809d;
font-size: 28rpx;
line-height: 38rpx;
font-weight: 600;
}
}
7、自定义组件中使用第三方组件时最好在外面套一层view然后在这个view上设置class用来控制宽高定位啥的而不是直接在第三方组件上设置class
8、uniapp在使用getLocation、chooseLocation的时候需要在对应项目的manifext.json的微信小程序中配置位置接口的权限，并且！！！要在源代码视图里加上以下代码
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
当然你也可以直接在源代码视图中加上如下提示代码，微信公众平台也要去配置嗷，具体不说了
"permission" : {
"scope.userLocation" : {
"desc" : "初始化时获取用户的位置信息用于外出打卡定位"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
9、UI框架直接下载到uni_modules包里，根据ui直接修改源码的样式（不限于css、props中的基础值），修改了啥写在readme.md里记录清楚，开发的时候方便很多。毕竟，这个ui框架不就是为了项目服务的么。
10、在一个页面中自定义组件挨在一起，直接给组件style设置margin貌似不生效，可以给组件套一层view
11、项目开始的时候就可以考虑考虑分包，提升性能，tab页面放在主包，然后根据tab或者功能进行分包操作，在进入某个tab的时候就预加载分包，然后本地图片如果只在分包中用到的话，可以在分包目录下建一个static，在static中放图片，uniapp构建的时候会把此图片放到对应分包中。
"pages": [{
"path": "pages/main/index",
"style": {
"navigationStyle": "custom"
}
},
{
"path": "pages/main/login",
"style": {
"navigationBarTitleText": "login"
}
},
{
"path": "pages/main/mine",
"style": {
"navigationBarTitleText": "mine"
}
},
{
"path": "pages/main/device",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
// 分包
"subPackages": [{
"root": "pages/sub_home",
"pages": [{
"path": "test/test",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}]
},
{
"root": "pages/sub_device",
"pages": [{
"path": "add_device_select",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "add_device_form",
"style": {
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}
],
"tabBar": {
"color": "transparent",
"selectedColor": "blue",
"borderStyle": "white",
"backgroundColor": "transparent",
"list": [{
"pagePath": "pages/main/index",
"iconPath": "static/images/tab/home.png",
"selectedIconPath": "static/images/tab/home_active.png",
"text": "首页"
}, {
"pagePath": "pages/main/device",
"iconPath": "static/images/tab/device.png",
"selectedIconPath": "static/images/tab/device_active.png",
"text": "设备管理"
}, {
"pagePath": "pages/main/mine",
"iconPath": "static/images/tab/mine.png",
"selectedIconPath": "static/images/tab/mine_active.png",
"text": "我的"
}]
},
// preloadRule 前面为主页面（进入到哪个页面），对象内为你的分包
"preloadRule": {
"pages/main/index": {
"network": "all",
"packages": ["pages/sub_home"]
}
},
12、如果你的项目要求多端通用，那么一定要注意图片路径和页面路径，本地图片最好使用import导入
13、全局modal弹窗emmmm 我写了一个公用页面，用来放tab、tabbar、modal…留了个slot放内容，每个页面都引入一次即可，有什么全局的功能其实都能放这个组件中。其他挂载全局的方法总有不兼容的情况。。。
14、自定义组件中如果使用到了第三方ui库的某些组件，并且要用到图片，比如u-input的prefixIcon这个属性，图片路径类型是string的，图片不能放在component对应组件的目录下，得放在static静态资源中才能获取，uniapp编译后会把图片放都在assets中，u-input组件内此属性对应的组件是u-icon，会从uviewplus的根目录开始查询图片。
15、写自定义组件的时候记得，小程序不支持v-bind=“$attrs”，所以要调用方法或者传递属性的时候自己暴露方法去传
16、小程序貌似没有持续监听一个盒子高度变化的api或者方法，所以有些组件比如手风琴内容高度发生变化时无法实时改变高度，如果有的话请在评论区指教一下
17、在进行页面跳转后，uni.on和uni.emit无法正常接收数据。解决办法：目前是写在navegateto的success中，如果没用就加个settimeout吧。on要确保在emit创建之后才能接收到数据。还有种方式，假设A->B页面，传值去B，在on中定义另一个emit，在B页面中on和emit一起调用。一定要记得在unload中off掉on的事件！
//A页面
uni.$on('send',()=>{
uni.$emit('sendData', data)
})
uni.navigateTo...
//B页面
onReady(()=>{
uni.$on("sendData",(data)=>{
...
})
uni.$emit('send')
})
onUnload(()=>{
uni.$off('send')
uni.$off('sendData')
})
18、uview-plus的form表单验证默认类型是string，如果只是想判空的话一定要记得把type设置为number/array等！因为有可能你赋的值是number类型导致校验失败，你就会像我一样找半天不知道错误在哪 😦
犯浑了，不能设置为any，any的话在小程序里怎么校验都是通过的，蛋疼。应该改成字典中value的对应类型
xxx: [
{
type: 'number',
required: true,
message: '请选择xxx',
trigger: ['blur', 'change'],
},
],
19、uviewPlus的u-index-list 在小程序中是根据cell离屏幕顶部的距离来计算的scrollView，计算的时候应该还要算上自定义导航栏的高度才对,另外提一嘴，他的prop里得stiky根本没用到，设不设置都会吸顶
// #ifdef MP-WEIXIN
// 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
// ps:在加入自定义高度后需要传入customNavHeight以确保列表跳转正确,
const customNavHeight = this.customNavHeight
this.scrollTop = this.children[currentIndex].top - uni.$u.getPx(customNavHeight)
// #endif
20、z-paging这个组件，好用，但是的话，如果项目里面用到的ui框架是uview-plus，则在小程序中可能会出现返回顶部失效的情况，我看了下源码，大致是因为uviewPlus为了兼容vue2的nexttick，在index.js中写了如下代码，将挂载在vue上的this.$nextTick作为回调调用导致，所以我将这三行注释掉了，返回顶部也正常了。233333
Vue.config.globalProperties.$nextTick = (cb) => {
cb();
}
527
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
