1. 小程序特殊标签&API
1.1. scroll-view
1.1.1. 基础设置
小程序内无法获取或改变一个普通 view 的 scrollTop,只能用scroll-view。
这个标签需要设置 scroll-y 纵向滚动或者 scroll-x 横向滚动,默认都是false。
enable-flex="true" 是开始flex布局,默认为false。
1.1.2. 动态scrollTo
设置enhanced="true"后,可以通过下面代码动态改变其scrollTop。
function mpBackUp() {
this.createSelectorQuery()
.select('#scheduleTreeId')
.node()
.exec((res) => {
const scrollView = res[0]?.node;
if (!scrollView) return;
scrollView.scrollTo({
top: 0,
});
});
}微信小程序 canvas 的 DOM 元素,必须声明 type="2d",才能通过 createSelectorQuery 获取到 node 节点。
uni.createSelectorQuery()
.in(this)
.select(`#${this.canvasId}`)
// .fields({ node: true })
.node()
.exec((res) => {})小程序中的 canvas 绘图最后必须 ctx.draw(),第一个参数是 reserve,表示本次绘制是否接着上一次绘制,默认 false。
1.1.3. 动态scrollIntoView
这个API的参数必须是 scrollView 的子元素,不能是子子元素。
this.createSelectorQuery()
.select('#scheduleTreeId')
.node()
.exec((res) => {
const scrollView = res[0]?.node;
if (!scrollView) return;
scrollView.scrollIntoView('.my-team-id-sche');
});1.1.4. 嵌套slot
scroll-view中嵌套slot后,scroll-into-view不生效,参考:
- https://developers.weixin.qq.com/community/develop/doc/0006ca373801c8a733d816af256800
- https://developers.weixin.qq.com/community/develop/doc/00080caa80c200d35d0ffe0bb51c00
1.2. 获取小程序运行环境
const { envVersion = '', version = '', appId = '' } = wx?.getAccountInfoSync?.()?.miniProgram || {};
const { SDKVersion = '', platform = '' } = __wxConfig as any;envVersion 取值有:develop,trial,release
类似的参数还有version、platform等,可以看上面代码。
1.3. 跳转腾讯文档小程序
注意是pages/detail/detail,不可以是pages/detail/detail.html,否则第一次跳成功,后面跳会失败。
if (url.startsWith('https://docs.qq.com')) {
uni.navigateToMiniProgram({
appId: 'wxd45c635d754dbf59',
path: `pages/detail/detail?url=${url}`,
success() {
},
fail() {
},
});
return;
}参考:https://developers.weixin.qq.com/community/develop/doc/0008281ac88f503bacaef712a51000
1.4. wx.relaunch
wx.relaunch({url: url}),关闭所有页面,重新打开当前页面,不会执行 App.vue 的 beforeDestory、mounted 方法。
1.5. 小程序props
小程序中props是对象的话,如果其有个属性值是function,只有初次赋值有效,后面替换的话,不会生效。就是不会替换成功,一直是初始的那个值。
1.6. undefined
uni-app的小程序中如果对象为undefined时,渲染结果就是undefined,但是h5就会为空字符串,比如:
<div> {{ item.awardStatusDesc || '' }} </div>这里后面最好加 ||''
1.7. key
:key="section-${index}"这样的key没生效,编译后的wxml没有wx:key。
下面这样的可以才生效:
:key="getUniqueKey('nav', idx)"getUniqueKey(a, b) {
return `${a}-${b}`;
},1.8. 选择子组件元素
this.createSelectorQuery().select(`.wrap >>> #${id}`);1.9. qs版本过高时,微信小程序报错
报错内容:
Reflect.apply requires the first argument be a function
解决:qs从6.11.2降级到6.5.2时,亲测正常。
参考:
1.10. click.native
click.native可以监听组件根元素的原生事件,但是需要注意子组件的根元素,不要已经用click.stop监听了,否则click事件不生效。
下面是错误使用示例。
父组件:
<press-cell
@click.native="onOptionTap(item)"
>
xxx
</press-cell>子组件:
<template>
<div
@click.stop="onClick"
>
xxx
</div>
</template>参考:
1.11. 不要滥用原生标签
uni-app 项目自定义组件标签不能使用原生标签,比如不能用 ListView,否则透传的参数,会变成 $event。
onFilterClicked(event) {
// #ifndef H5
event = event?.detail?.__args__?.[0] || event;
// #endif
this.$emit('onFilterClicked', event);
},上面这种兼容是丑陋的,容易遗忘,应该避免。
2. 同时开发
1、h5和小程序同时开发一个需求时,推荐先做h5,因为h5编译快,api规范,相对来讲开发者更熟悉。
2、发现h5事件正常但是小程序不正常,检查v-for的key是否有重复
3、发现h5样式正常,但是小程序不正常,检查是否使用了()=>import('')
3. qq小程序
3.1. 不支持 virtualHost
qq小程序不支持 virtualHost,类似 press-tabs press-tab,press-tabbar press-tabbar-item,有些写在子元素根标签的样式不生效,比如width: 100%, flex: 1,flex-shrink: 0等。
这类css属性的特点是必须和特定的父元素在一起才行,所以需要额外设置下。可以用这种方式:
// press-tabbar.vue
.press-tabbar {
::v-deep press-tabbar-item {
flex: 1;
}
}3.2. 不支持console.table
需要自己polyfill下。
3.3. 动态设置style时,该有的空格不能缺
比如下面这个:
computed: {
transformStyle() {
let res = `transform: translate3d(0rpx, ${this.currentScroll * 2}rpx, 0rpx);`;
// #ifdef H5
res = `transform: translate3d(0px, ${this.currentScroll * 2 / 100}rem, 0px);`;
// #endif
return res;
},
},如果 translate3d 中没有空格的话,会设置不生效。
3.4. scroll-view
qq小程序 scroll-view 不支持 enable-flex,手动写display: flex也不行。
.tip-match-pk-schedule-item {
transition: all .45s;
// qq小程序scroll-view不支持enable-flex,子元素需要如下设置,否则无法横向布局。
display: inline-block;
}