微信小程序常见问题

1,357 阅读2分钟

这是我参与更文挑战的第8天,活动详情查看: 更文挑战

  1. 长数据列表优化

    微信小程序官方提示页面中最多允许有1000个标签,所以想要让十万条数据顺畅显示,就必须减少不必要的标签嵌套
    尽量避免频繁使用setData,多个setData可以合并使用
    封装成自定义组件

  2. async/await解决回调地狱

    async写在function的前面
    await后的代码执行完之后,可以执行后续代码

  3. 生命周期

    全局生命周期:onLaunch()[初始化,只会调用一次]、onShow()[页面显示或切入前台,请求数据]、onHide()[页面切入后台]、onError()[报错]、onPageNotFound()[页面不存在]
    页面生命周期:onLoad()[页面加载,只调用一次]、onShow()[显示或切入前台]、onReady()[渲染完成,只调用一次]、onHide()[切入后台]、onUnload()[页面卸载]
    组件生命周期:created()[实例刚创建好]、attached()[初始化完毕,组件进入页面节点树]、ready()[组件在视图层布局完成]、moved()[组件实例被移动]、detached()[组件离开页面节点数]
    组件所在页面生命周期: show()[页面显示]、hide()[页面隐藏]、resize()[页面大小改变]

  4. bindTap与catchTap的区别

    bindtap允许事件冒泡(点击当前元素可以触发到父元素)
    catchtap阻止事件冒泡

  5. 路由的区别

    wx.navigateTo() 保留当前页面,跳转到某页面,最多同时可以叠加五个页面,超出会跳转失败
    wx.redirectTo() 关闭当前页面,跳转到某页面
    wx.switchTab() 跳转到tabBar页面
    wx.navigateBack() 关闭当前页面,返回上一个或多级页面
    wx.relaunch() 关闭所有页面,打开某个页面

  6. 登录流程

    前端使用wx.login()获取code,使用wx.request()将code发送到开发者服务器,后台调用微信接口获取session_key、openid等,并返回登录状态给前端,前端存储登录状态,可在之后的业务接口中使用登录状态

  7. 本地存储有哪些api

    wx.setStorage 将数据存储到本地环境中
    wx.setStorageSync 上一个方法的同步版本
    wx.getStorage 获取key对应的内容
    wx.getStorageSync 上一个方法的同步版本
    wx.getStorageInfo 获取当前存储的相关信息
    wx.getStorageInfoSync 上一个方法的同步版本
    wx.clearStorage 清除本地缓存
    wx.clearStorageSync 上一个方法的同步版本

  8. 传递数据的方法

    • 使用globalData()全局变量

      首先在app.js中的globalData中写入需要传递的变量
      在接受的页面定义var app = getApp(),使用app.globalData.key来获取或修改值

    • 使用路由传参

      使用wx.nagivateTo()、wx.redirectTo()在地址后拼接参数
      在接收页面的onLoad()中接收传递的参数

    • 使用本地缓存

  9. 小程序的双向绑定

    必须使用this.setData({ key: value})才能实现双向绑定,使用this.data.key = value无法双向绑定

文章只写了部分知识点,详细的后续再补充