微信小程序开发中问题总结1、import、require的路径不支持绝对路径，只能一层一层的引入 2、wx.naviga

1、import、require的路径不支持绝对路径，只能一层一层的引入

    import util from '../../../../utils/util.js'
    
    const util = require('../../../../utils/util.js'); 
    
    解决方案：
    
    App({ 
      require: ($uri) => require($uri), 
    })
    const app = getApp() 
    const util = app.require('./utils/util.js');

2、wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

wx.navigateTo/wx.redirectTo只能用在非tabBar页面的跳转，要跳转到tabBar页面，需要使用wx.switchTab

3、模板 `{{}}`

模板 {{}} 中连方法都不能执行，只能处理简单的运算如 + - * /，如果遇到数据需要 filter 的场景，需要在 .js 文件中预先格式化好再一个个 setData。

4、Date对象

IOS 上 Date 对象获取任意时间参数比如 getDay、getTime 都为 NaN，是因为 IOS 的 Date 构造函数不支持 2018-04-26 这种格式的日期，必须转换为 2018/04/26 这种格式才会显示正常

5、Component组件无法修改Vant 样式

原因是Component组件样式隔离无法修改全局样式组件样式隔离

需要在Component 方法中增加options styleIsolation
  Component({
      options: {
        styleIsolation: 'shared'
      },
  })

6、background图片url不能为本地图片

比如background：URL（../imgs/xxx.png），这样图片并不能显示。
解决的办法
1：将图片上传到服务器，填写服务器上的图片的路径地址。
2：将图片转为base64编码。

7、image 高度自适应需要设置 mode

image标签

<image src="{{ietmImg}}" mode="widthFix" />

8、循环嵌套

// 普通的单次循环
<text wx:for="{{list}}" wx:key="id">{{item}}</text>

//循环嵌套 wx:for-item="XXX" 
<text wx:for="{{list}}" wx:key="id">
    <text wx:for="{{item.arr}}" wx:for-item="tag" wx:key="*this">{{tag}}</text>
</text>

9、改动上一个页面的data

const pages = getCurrentPages(); // 当前页面
const prevPage = pages[pages.length - 2]; // 上一页
prevPage.setData({ // 直接给上一页面赋值
  selectCity: info,
});

10、调试时多行省略（-webkit-line-clamp）正常，发布时多行省略无效。

11、合理利用局部更新

setData 是支持使用数据路径的方式对对象的局部字段进行更新

有个别字段需要更新时，我们可以这么写来避免整个字段更新:

data:{
    info:{
        name: '姓名',
        age: '33',
    }
}

this.setData({
    'info.age': '44'
})

12、父子组件之间调用方法


// 父组件

<Children id=""componentId bind:childFun="fun" />

fun(res){
    console.log('子组件调用', res)
}

compoentFun(){
    // 父组件组件调用子组件
    this.selectComponent("#componentId").subComponent();
}

// 子组件

clickFun(){
    // 子组件组件调用父组件
    this.triggerEvent('childFun', {})
},

subComponent(){
    console.log('父组件调用')
}

13、Component 监听数据方法


 observers: {
    'userId': function (userId) {
      console.log(userId)
    }
  },

微信小程序开发中问题总结