第一次使用taro做项目，在开发微信小程序过程中，遇到不少问题，在此做下汇总。
技术栈是，taro+taro ui+mobx
1.分享好友功能
在Button上加上属性open-type="share",点击Button按钮，即可给好友分享。不加onShareAppMessage函数，分享的地址，连接都是默认生成的。如是要自定义分享给好友的地址，连接等就要自己写onShareAppMessage函数。
我在项目中是子组件中需要用到分享功能，刚开始我将分享的自定义函数写在子组件中，一直不生效，折腾好久，一直以为是自己的api使用不对。后来，把onShareAppMessage函数移到父组件中，带有分享属性的Button还是放在子组件，就能走自定义的分享函数了。
//分享给好友的函数
onShareAppMessage(e) {
//这个分享的函数必须写在入口中，写在子组件中不生效
。。。。
}
2.分享好友后，好友进入页面返回首页问题解决
将a页面分享好友，好友进入小程序页面时候是没法退回首页的。这时候需要加个首页的悬浮按钮在分享的页面中。而正常从入口进入小程序的用户看到a页面时候，是不需要看到首页的悬浮按钮的，这时候在分享的逻辑中就需要加个参数，让页面判断进入的方式是正常进入，还是分享进入。具体逻辑如下：
onShareAppMessage(e) {
//这个分享的函数必须写在入口中，写在子组件中不生效
return {
title: '自定义转发标题',
path: `自定义转发的路径`+ &share= true,
imageUrl: '自定义转发的图片',
success: function (res) {
console.log(res);
console.log("转发成功:" + JSON.stringify(res));
},
fail: function (res) {
// 转发失败
console.log("转发失败:" + JSON.stringify(res));
}
}
}
分享路径中带有一个参数share(参数名字随便取)，给这个悬浮按钮加个显示的条件即可。
let share = this.$router.params.share;//获取分享进来的参数share
{ share ?
<Text className='fixIndex' onClick={this.toIndex.bind(this)}>首页</Text>:null
}
3.接口调用正确，页面会取上一次接口返回的数据
在一个获取活动详情页面中，接口每次都有返回最新的数据，但是我页面中却总会部分数据总会是取的上一次接口返回的数据。刚开始以为是接口的问题，排查后发现，接口没有缓存数据，是页面上的问题。
请教同事才晓得，若是接口返回数据里层中还有数组的时候，mobx也会给里层的数据封装下，变成mobx的数组，在调用接口拿到数据时候必须将数组都转换成真正的数组，才能有效的避免数据缓存的问题。
4.获取元素宽高
项目中有个地方需要获取元素的宽高，最初我是想按react的思路，给元素加一个ref，结果发现这样并不能获取到当前元素。查找微信小程序api，发现有个api wx.createSelectorQuery可以获取元素节点的宽高。使用时候遇到两个坑，一个是异步跟新导致获取不到元素的问题，这个解决方案很简单，加个setTimeout延迟几百毫秒即可。另一个坑是我在子组件中获取元素，不管我怎么延迟，获取元素的值总是null。吸取第一个问题的教训，我尝试将获取元素的代码放到父组件中，结果发现就能正常获取了。
async componentDidMount() {
Taro.showLoading({ title: "加载中",mask: true })
const query = wx.createSelectorQuery()
setTimeout(()=>{
query.select('.hiddenView').boundingClientRect()
query.selectViewport().scrollOffset()
query.exec(function (res) {
console.log('res',res)
if(res[0].height>100){//当高度大于100时候才让向下箭头展示
。。。。
}
})
},200) //200毫秒延迟，获取元素高度
Taro.hideLoading()
}
//这是需要获取高度的元素
<View className='hiddenView'>内容</View>
返回值
5.背景图片的使用
项目里的图片使用跟一般前端项目不同，css引用背景图片就会报错，故图片的引用都使用的Image标签。Image使用的src要么是一个绝对路径，要么是下面这种用法，不然不支持
import wechat from '../../../img/wechat.png' //这里是图片的正确相对地址
<Image src={wechat} className='shareImg'/>
网友评论