小程序开发常见问题总结（超实用）

小程序开发常见问题总结（超实用）

1.小程序user agent stylesheet问题。

解决办法找到app.json删除style这句话。

2.this.setData is not function错误

微信小程序中在request success 返回的函数中使用 this.setData 修改data 中的数据时显示this.setData is not function错误，这是因为this作用域指向问题 ，success函数实际是一个闭包 ， 无法通过this.setData 来设置数据，
解决办法，就是 在request 外函数 var that=this

3.flex布局

3.1flex布局原理

通过给父盒子添加flex属性，达到控制子盒子的目的

3.2flex父项属性

flex布局要将父级元素设置成flex属性
一、flex-direction
1.row元素沿着主轴排列
2.cloum元素沿着主轴排列
二、justify-content 设置主轴上子元素的排列方式
1.flex-start 从左到右排列
2.flex-end从右到左排列
3.space-around 平分剩余空间
4.center 水平居中对齐
5.space-betwwen 先两边切边，平分剩余空间（重要）
三、flex-wrap
在flex布局中默认子元素是不换行的，如果装你不开，会缩小子元素的宽度装到父元素
1.flex-wrap默认nowarp
2.换行 flex-wrap：warp
四、align-items （单行）
设置侧轴上元素的排列方式
1.align-items center垂直居中
五、align-content（多行）
设置子项在侧轴上排列方式 ，并且只用于子项出现换行的情况。
1.flex-start 从左到右排列
2.flex-end从右到左排列
3.space-around 平分剩余空间
4.center 水平居中对齐
5.space-betwwen 先两边切边，平分剩余空间（重要）

3.3flex布局子项元素

flex属性定义子项目分配剩余空间，用flex表示站的份数
flex：1

4.自定义组件

1.在componenmts组件中自定义组件

2.在需要的页面引入组件

1.在页面的json中引入

{
  "usingComponents": {
    "searchInput":"../../components/searchInput/searchInput"
  }
}

2.使用组件

<view>
 <searchInput></searchInput>
</view>

5.使用缓存技术

1.用户初次使用应用时判断是否存在缓存中是否过期
2.若缓存中无数据则初次加载时写入数据。
3.数据按照{time，data；}

 const info=wx.getStorageSync('myshibie')
    if(!info){
      this.getshibie()
    }else if(Date.now()-info.time>1000*100){  //检查数据是否过期
      this.getshibie()
    }else{
      wx.showLoading({
        title: '数据加载中',
      })
      if(info.data){
        wx.hideLoading({})
      }
      this.setData({
        list:info.data
      })
    }

写入数据

 wx.setStorageSync('myshibie', {time:Date.now(),data:res.data})