taro构建微信小程序问题汇总

第一次使用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 ?
          首页: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()
  }
 //这是需要获取高度的元素
 内容

返回值

5.背景图片的使用

项目里的图片使用跟一般前端项目不同，css引用背景图片就会报错，故图片的引用都使用的Image标签。Image使用的src要么是一个绝对路径，要么是下面这种用法，不然不支持

import wechat from '../../../img/wechat.png' //这里是图片的正确相对地址