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()
  }
 //这是需要获取高度的元素
 内容
taro构建微信小程序问题汇总_第1张图片
返回值

5.背景图片的使用

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

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

你可能感兴趣的:(taro构建微信小程序问题汇总)