微信小程序回顾问题

微信小程序常见问题解答

1.异步调用

异步调用可以让网络请求在后台运行，同时不会阻塞主线程的执行,这样应用程序就可以继续响应用户的操作，提升用户体验。当请求完成并返回结果时，会通过回调函数的方式获取接口请求，并将结果传递给回调函数，这样调用者就可以在回调函数中处理请求结果。

2.wx.request的this引用问题

由于接口是异步操作，时间是琢磨不透的，而且异步的this是基于函数被调用的方式而确定，如果被推迟了，当前指向外层。所以是window。
因此可以用箭头函数来获取，建有函数是一开始就决定了，比如以下的箭头函数，由于是依靠page页面对象包裹的，所以当前this指代page对象
wx.request({
  url: 'url',
  success: (res) => {
    // 此处的 this 指向外层作用域中的 this
  }
});

// 将 this 缓存到变量中，相当于在把重新绑定this对象
const that = this;
wx.request({
  url: 'url',
  success: function(res) {
    // 此处的 this 指向 that 变量
  }.bind(that)
});

3.页面生命周期

onLoad:初始化调用，常用于调用请求接口（锁门）和页面跳转时获取的参数传递e.target.x。

onShow 页面显示（开门）、onHide页面隐藏（关门），页面跳转或者底部tab切换时会触发的函数。

onready页面初次渲染之后触发,触发时间在onload之后，一般不用。onPullDownRefresh和onReachBottom下拉与底部刷新，加载数据，onShareAppMessage和onPageScroll用于分享和滚动触发，相当于(监听滚动状态)

4.自定义组件

1.组件.json
{
  //代表是组件
    "component": true,
      //自定义组件要用到的挂靠一下
    "usingComponents": {}
}
2.写wxmlwxss代码
3.自定义的组件，会传一下点击事件暴露
Component({
  //传参 外面传的是tabs的数组，相当于正常页面的data
    properties: {
        tabs: {
          //类型
            type: Array,
          //默认值
            value: [],
        },
    },
    data: {},
    methods: {
      //组件要处理的点击事件
        handClick(e) {
            const { index } = e.currentTarget.dataset;
          //给外面的组件暴露事件，事件名称叫changeCurrent，参数是index
            this.triggerEvent("changeCurrent", { index });
        },
    },
});

//调用过程是 bind:代表绑定
 <当前组件名 tabs="{{tabs}}" bind:changeCurrent="changeCurrent">
   
//slot 相当于child，给你的标签下继续塞东西
   <view><text></text></view>
   相当于view的组件，在定义的时候塞入了 <slot></slot>
   所以外面用view的时候，里面可以塞text包裹在view里面

5.wx.StorageSync与wx.Storage的区别

都是用来存储全局数据的，StorageSync是同步Storage是异步，StorageSync要等你结束了才下一个步骤，Storage是不管你结不结束，直接下一个，所以使用异步,性能会更好;而使用同步,数据会更安全

6.view和button的点击事件

wxml:<view bindtap="handleItemNumEdit" data-id="{{item.goods_id}}" data-operation="{{-1}}"  class="num_edit">-</view>
//view点击事件是bindtap，在js中会有参数传递，handleItemNumEdit（e）=>
{id,operation}=e.currentTarget.dataset,即当前的id是goods_id，op eration是-1

7.常见的路由跳转

wx.switchTab:跳转到 tabBar页面，并关闭其他所有非 tabBar 页面。等于清空页面栈。

wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

wx.redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

8.image的mode

scaleToFill:不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素,打个比方就是，image默认宽高320px * 240px，你图片不是那么宽高，也会拉出来，所以，很丑会失真。

aspectFit 缩放模式 保持纵横比缩放图片 使图片能完全显示出来 但是会有空白缝隙

aspecFill 缩放模式 保持纵横比图片 只保证图片的短边显示出来 也就是说 会有另一个方向将发生截取，有一种全身照然后只截取上半身变大的样子。（其次）

widthFix 缩放模式 宽度不变 高度自动变化 保持原图宽高比不变，（用的较多） heightFix 缩放模式 高度不变 高度自动变化 保持原图宽高比不变

9.一般请求的回调

一般是success，error和complete，代表成功回调，失败回调以及完成后
相当于，promise的success,error和finally