前端开发面试宝典-uniApp部分

uniApp

通信方式

全局变量

• getApp().globalData.msg = "我是uniapp全局变量";
• Bus 事件总线this.$emit this.$on
• Vuex 缓存状态管理

页面间通信

• uni.$emit
• uni.$on
• uni.$off
• uni.$once

路由跳转传参

//方式1

//A页面:
navigateTo({
  url: "/pages/pageB/pageB?name=tom&age=22"
})
//B页面:
onLoad(option) {
  const {name, age} = option;
}

//方式2 EventChannel

uni.navigateTo({
  url: 'pages/test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'data from starter page' })
  }
})

// 在test.vue页面，向起始页通过事件传递数据
onLoad: function(option) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
  eventChannel.emit('someEvent', {data: 'data from test page for someEvent'});
  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
  eventChannel.on('acceptDataFromOpenerPage', function(data) {
    console.log(data)
  })
}

数据缓存

• 指定异步缓存 uni.setStorage uni.getStorage uni.removeStorage
• 指定同步缓存 uni.setStorageSync uni.getStorageSync uni.removeStorageSync
• 异步获取当前的storage uni.getStorageInfo uni.clearStorage
• 同步获取当前的storage uni.getStorageInfoSync uni.clearStorageSync

发包注意事项

• 主包和分包大小不能超过2M，总体积不能超过4M
• 分包配置 需在pages.json中配置subPackages字段，在subPackage里面声明项目的分包结构：

{
    pages:[
        "pages/index",
        "pages/logs"
    ],
    subPackages:[
        {
            root: "packageA",
            pages:[
                "pages/dog",
                "pages/cat"
            ]
        },
        {
            root: "packageB",
            pages:[
                "pages/apple",
                "pages/banana"
            ]
        }
    ],
}