某外包面试官:你还不会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. uni.navigateTo 不关闭当前页的情况下跳转其他页面
  2. uni.redirectTo 关闭当前页的情况下跳转其他页面
  3. uni.switchTab 跳转去tabBar,关闭其他非tabBar页面
  4. uni.reLaunch 关闭所有页面,跳转到其他页面
  5. uni.navigateBack 返回
  6. 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. 尝试了下,发现textarea不会和input一样出现字体随着页面滚动的情况,这是一个兼容方案
  2. 还有个不优雅的方案是输入完成后使用其他事件让其失焦或者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. 学习成本低,语法是vue的,组件是小程序的
  3. 拓展能力强
  4. 使用HBuilderX开发,支持vue语法
  5. 突破了系统对H5条用原生能力的限制
  • 缺点:
  1. 问世时间短,很多地方不完善
  2. 社区不大
  3. 官方对问题的反馈不及时
  4. 在Android平台上比微信小程序和iOS差
  5. 文件命名受限

原文链接:https://juejin.cn/post/7245936314851622970 作者:margin_100px

(0)
上一篇 2023年6月19日 上午10:47
下一篇 2023年6月19日 上午10:58

相关推荐

发表回复

登录后才能评论