前端与小程序 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

课堂重点

今天学习了跨端技术的入门，短短一小时直播满满的信息量，之前也做过hybrid混合开发app，即用uniapp做的，但是其他像是react-native，flutter还没用过，然后关于小程序之前也有过学习，今天还是想回顾一些小程序相关的知识，不过是拿微信小程序举例，抖音小程序和微信小程序的不同主要还是使用环境的不同，其实大部分api和写法都相似，wx改成tt就好了

课堂笔记

小程序的运行

小程序是在微信，支付宝，抖音这样的平台上运行的，自然与普通web端开发有所不同，小程序的渲染需要渲染层和逻辑层两个线程管理，也正因跟渲染层的分开，js是不能调用dom和bom的api的，也正因此如果要对页面中的数据进行修改，需要调用异步方法setData因为直接在逻辑层更改值，是同步的，无法到渲染层去做出改变。

小程序生命周期

应用生命周期函数

页面的生命周期函数

组件的生命周期函数

自定义组件

微信小程序自定义组件

同时也有团队做好的组件库 Vant Weapp

传递数据方式

1.通过页面跳转路径带参数，然后在页面的onLoad中获取，但是该方法不能跳转到tarbar中使用

2.在app.js的globalData中将数据存为全局变量，在页面中通过getApp().globalData获取

3.使用小程序本地存储数据传递 同步缓存：wx.setStorageSync 与 wx.getStorageSync

异步缓存：wx.setStorage 与 wx.getStorage

移除本地缓存：wx.removeStorageSync（同步）、wx.removeStorage（异步）

4.父子组件传递 父组件(页面)向子组件传递数据，通过标签属性的方式来传递，然后子组件用properties中接收父组件传递的数据； 子组件向父组件传递数据：则是在父组件的标签绑定子组件定义的传值方法并用一个方法接收，子组件用this.triggerEvent('event', data)传递事件既可 5.返回上一个页面的数据传递 当前页面

let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2];
          prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
            data: e.detail.value,
            avatarUrl:userInfo.avatarUrl
          })
          wx.navigateBack({
            delta: 1 // 返回上一级页面。
          })

上一个页面

onShow: function () {
    var that = this
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1]; //当前页面
    let data = currPage.data.data;
    that.setData({
      userInfo: data,
      ['userInfo.avatarUrl']: that.data.avatarUrl  //当需要修改的值为对象中的属性时
    })
  }

5.实现类似vuex的全局状态管理---mobx-miniprogram

微信小程序：全局状态管理mobx-miniprogram（类似store）

其他

通过miniprogram-api-promise这个插件，小程序项目安装后可以让api回调变的promise化。

个人总结

其实说是小程序与前端web端开发有很多相似之处，但其实在写的时候还是有很多的不同的。同时也是一个庞大的知识体系。