某外包面试官：你还不会uniapp？😲😲

uniapp主要文件夹

pages.json

配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等

main.js

入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，注意uniapp无法使用vue-router，路由须在pages.json中进行配置。如果开发者坚持使用vue-router，可以在插件市场找到转换插件。

App.vue

是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。

pages

页面管理部分用于存放页面或者组件

manifest.json

文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

package.json

配置扩展，详情内容请见官网描述package.json概述

uni-app属性的绑定

vue和uni-app动态绑定一个变量的值为元素的某个属性的时候，会在属性前面加上冒号":";

uni-app中的本地数据存储和接收

// 存储：

uni.setStorage({key:“属性名”，data:“值”}) //异步 

ni.setStorageSync(KEY,DATA) //同步
//接收：

ni.getStorage({key:“属性名”,success(res){res.data}}) //异步

uni.getStorageSync(KEY) //同步
//移除：

uni.removeStorage(OBJECT) //从本地缓存中异步移除指定 key。

uni.removeStorageSync(KEY) //从本地缓存中同步移除指定 key。
//清除：

uni.clearStorage() //清理本地数据缓存。

ni.clearStorageSync() //同步清理本地数据缓存。

页面调用接口

• 
  
• getApp() 函数 用于获取当前应用实例，一般用于获取globalData
  
• getCurrentPages() 函数 用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
  
• uni.emit(eventName,OBJECT) 和 uni.emit(eventName,OBJECT)和uni.emit(eventName,OBJECT) 和 uni.on(eventName,callback) ：触发和监听全局的自定义事件
  
• uni.once(eventName,callback)：监听全局的自定义事件。uni.once(eventName,callback)：监听全局的自定义事件。
  
• 事件可以由 uni.once(eventName,callback)：监听全局的自定义事件。
  
• 事件可以由uni.emit 触发，但是只触发一次，在第一次触发之后移除监听器。
  
• uni.$off([eventName, callback])：移除全局自定义事件监听器。
  

uni-app的生命周期

  beforeCreate（创建前）
	created（创建后）

	beforeMount(载入前，挂载）

	mounted（载入后）

	beforeUpdate（更新前）

	updated（更新后）

	beforeDestroy（销毁前）

	destroyed（销毁后）

路由与页面跳转

1. 
   
2. uni.navigateTo 不关闭当前页的情况下跳转其他页面
   
3. uni.redirectTo 关闭当前页的情况下跳转其他页面
   
4. uni.switchTab 跳转去tabBar，关闭其他非tabBar页面
   
5. uni.reLaunch 关闭所有页面，跳转到其他页面
   
6. uni.navigateBack 返回
   
7. edxit 退出app
   

跨端适配—条件编译

1. #ifdef APP-PLUS

   需条件编译的代码 //app
#endif
2. #ifndef H5

   需条件编译的代码 //H5

   endif
3. #ifdef H5 || MP-WEIXIN

   需条件编译的代码 //小程序
#endif

uniapp上传文件时使用的api

uni.uploadFile({
url: '要上传的地址',
fileType:'image',
filePath:'图片路径',
name:'文件对应的key',
success: function(res){

   console.log(res)

        },})

uniapp选择文件、图片上传

选择文件

uni.chooseFile({
count: 6, //默认100
extension:['.zip','.doc'],
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));

    }

});

选择图片文件

uni.chooseFile({

  count: 10,

  type: 'image',

  success (res) {

    // tempFilePath可以作为img标签的src属性显示图片

    const tempFilePaths = res.tempFiles

  }

})

uni-app的页面传参方式

第一种：
直接在跳转页面的URL路径后面拼接，如果是数组或者json格式记得转成字符串格式哦。然后再目的页面onload里面接受即可

//现页面

 uni.navigateTo({
url:'/pages/notice/notice?id=1'

 })
//目的页面接收
//这里用onshow()也可以
onLoad(options) {
var data = options.id;
console.log(data)

}

第二种:
直接在main.js注册全局变量

• 
  
• 例如我用的是vue框架，先在main.js文件注册变量myName
  
• Vue.prototype.myName= '玛卡巴卡';
  
• 在目标文件读取全局变量，注意全局变量不要与我们在当前页声明的变量名重复
  
• let name = this.myName; // 玛卡巴卡
  

第三种:设置本地存储也比较方便

• 
  
• 这里建议使用uni.setStorageSync这个是同步，不会出现去了目标页面取值取不到的问题
  
• uni.setStorage是异步存值，获取值也是一样建议使用uni.getStorageSync
  

uniapp实现下拉刷新

实现下拉刷新需要用到uni.onPullDownRefresh和uni.stopPullDownRefresh这个两个函数，函数与生命周期同等级可以监听页面下拉动作

uniapp实现上拉加载

uniapp中的上拉加载是通过onReachBottom()这个生命周期函数实现，当下拉触底时就会触发。我们可以在此函数内调用分页接口请求数据，用以获取更多的数据

scroll-view吸顶问题

• 
  
• 问题：
  scroll-view 是常会用到的一个标签，我们可以使用 position:sticky 加一个边界条件例如top:0
  属性实现一个粘性布局，在容器滚动的时候，如果我们的顶部标签栏触碰到了顶部就不会再滚动了，而是固定在顶部。但是在小程序中如果你在scroll-view元素中直接为子元素使用sticky属性，你给予sticky的元素在到达父元素的底部时会失效。
  
• 解决：
  在scroll-view元素中，再增加一层view元素，然后在再将使用了sticky属性的子元素放入view中，就可以实现粘贴在某个位置的效果了
  

ios输入框字体移动bug

• 
  
• 问题：在IOS端有时，当输入框在输入后没有点击其他位置使输入框失焦的话，如果滚动窗口内部的字体也会跟着滚动
  
• 解决:
  

1. 
   
2. 尝试了下，发现textarea不会和input一样出现字体随着页面滚动的情况，这是一个兼容方案
   
3. 还有个不优雅的方案是输入完成后使用其他事件让其失焦或者disable，例如弹窗或者弹出层出来的时候可以暂时让input禁止，然后弹窗交互完成后再放开
   

rpx、px、em、rem、%、vh、vw的区别是什么？

• 
  
• rpx 相当于把屏幕宽度分为750份，1份就是1rpx
  
• px 绝对单位，页面按精确像素展示
  
• em 相对单位，相对于它的父节点字体进行计算
  
• rem 相对单位，相对根节点html的字体大小来计算
  
• % 一般来说就是相对于父元素
  
• vh 视窗高度，1vh等于视窗高度的1%
  
• vw 视窗宽度，1vw等于视窗宽度的1%
  

uni-app的优缺点

• 
  
• 优点:
  

1. 
   
2. 一套代码可以生成多端
   
3. 学习成本低,语法是vue的,组件是小程序的
   
4. 拓展能力强
   
5. 使用HBuilderX开发,支持vue语法
   
6. 突破了系统对H5条用原生能力的限制
   

• 
  
• 缺点:
  

1. 
   
2. 问世时间短,很多地方不完善
   
3. 社区不大
   
4. 官方对问题的反馈不及时
   
5. 在Android平台上比微信小程序和iOS差
   
6. 文件命
   
   作者：margin_100px
   来源：juejin.cn/post/7245936314851622970
   名受限