上一篇记录了在搭建uniapp环境时的过程和遇到的坑，这篇主要记录在开发时遇到的问题。因为我使用uniapp开发的小程序，所以下面环境都是小程序环境的。踩坑主要问题有
- uniapp 上获取不到window对象
- uniapp上没有操作dom的API
- uniapp对部分vue特性不支持
- 获取小程序的环境与平台信息
- onShareAppMessage 生命周期返回的参数信息问题
- 小程序真机调试时不支持canvas2d 和webgl
- uniapp 分包
- 获取dom曝光时机，封装exposure组件
踩坑记录
1. uniapp 上获取不到window对象
这一点其实文档上已经有明确说明了，只是开发的时候没有仔细阅读文档，结果写了半天发现了这个问题。而且引入第三方组件的时候也因为里面存在window对象所以不能使用。
这个uniapp文档里面也说的很清楚非h5端js不运行在webview里，当然没有window。具体文档参考:跨端注意。
2. uniapp上没有操作dom的API
uniapp上面不能操作dom，但是有查询dom的api。uni.createSelectorQuery()
3. uniapp对部分vue特性不支持
- 对vue动态组件写法不支持
// 这种写法是不支持的
<component :is= "xxx" />
- 不支持自定义指令
- 不支持v-bind使用
4. 获取小程序的环境与平台信息
这个需求感觉还是挺常见的，比如不同环境使用不同的接口，不同的ui。所以总结了一下我使用到的获取环境和获取平台信息的方法。
-
获取环境
-
process.env.NODE_ENV 获取，这种方法需要自定义环境变量，默认获取到production和development
-
使用uni.getAccountInfoSync()获取环境信息，其中miniProgram中envVersion返回小程序环境信息 ， 分别是release : 正式版 ， trial: 体验版 develop : 开发版。这种方法比较推荐
-
5. onShareAppMessage 生命周期返回的参数信息问题
我们开发的时候有这样一个需求，就是从·1数据中返回分享信息，而分享的button按钮是写到组件中的，没有办法在页面中确定分享数据，所以这边经过一顿试探发现在button按钮上绑定数据值就好了，这样onShareAppMessage返回的参数中就可以获取到对应值，具体写法如下
// 组件中
<button open-type="share" data-xxx="xxx"></button>
// 页面中onShareAppMessage
onShareAppMessage(data){
// data.xxx 就是上面绑定的值
}
6. 小程序真机调试时不支持canvas2d 和webgl
7. uniapp 分包
因为代码体积的原因我们小程序需要做分包处理，具体的步骤参考subpackages
8. 获取dom曝光时机
因为我们有对应dom的曝光埋点需求，所以需要一个exposure组件，但之前封装的都是基于Window对象的，上面也写过uniapp上面没有Window对象，并且不支持自定义指令，所以我这边封装了一个exposure组件，需要曝光的dom上一层嵌套一个exposure组件，这样可以满足需求。下面是exposure组件的核心代码与使用方法
// 核心代码
// class 或者id需要唯一
<template>
<view :class="id>
<slot />
</view>
</template>
// js
mounted() {
this.observe();
}
observe() {
const that = this;
setTimeout(() => {
const ob = uni.createIntersectionObserver(that).relativeToViewport({
bottom: -100,
});
ob.observe(`.${that.id}`, (res) => {
ob.disconnect();
this.callback(res);
});
}, 500);
}
callback(res: any) {
this.$emit(`expCb`, res);
}
以上就是在开发中我的踩坑记录，希望可以帮助大家少踩一些坑。
