uniapp和小程序面试题

本文探讨了Uniapp在不同平台(H5、H5MP-WEIXIN、微信小程序)的条件编译方法,并介绍了配置文件、入口文件及页面管理。还涉及了文件上传、地理位置获取、尺寸单位和滚动监听的技巧。此外,对比了Uniapp与传统框架的优缺点,以及在本地存储、页面传参和生命周期管理上的区别。

uniapp进行条件编译的两种方法?小程序端和H5的代表值是什么?

通过 #ifdef、#ifndef 的方式 H5 : H5 MP-WEIXIN : 微信小程序

uniapp的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分

uniapp上传文件时用到api是什么 格式是什么?

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

uniapp获取地理位置的API是什么?

uni.getLocation

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

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

uniapp如何监听页面滚动?

使用 onPageScroll 监听

如何让图片宽度不变,高度自动变化,保持原图宽高比不变?

给image标签添加 mode=‘widthFix’

uni-app的优缺点

优点:
a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
c. 拓展能力强
d. 使用HBuilderX开发,支持vue语法
e. 突破了系统对H5条用原生能力的限制
缺点:
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差
e. 文件命名受限

分别写出jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么?

jQuery:
存:$.cookie('key','value')
取:$.cookie('key')
vue:
存储:localstorage.setItem(‘key’,‘value’)
接收:localstorage.getItem(‘key’)
微信小程序:
存储:通过wx.setStorage/wx.setStorageSync写数据到缓存
接收:通过wx.getStorage/wx.getStorageSync读取本地缓存
uni-app:
存储:uni.setStorage({key:“属性名”,data:“值”})
接收:uni.getStorage({key:“属性名”,success(e){e.data//这就是你想要取的token}})

jq、vue、uni-app、小程序的页面传参方式

jq传参
通过url拼接参数进行传参。
vue传参
vue可以通过标签router-link跳转传参,通过path+路径,query+参数
也可以通过事件里的this.$router.push({})跳转传参
小程序传参
通过跳转路径后面拼接参数来进行跳转传参

vue、微信小程序、uni-app绑定变量属性

  1. vue和uni-app动态绑定一个变量的值为元素的某个属性的时候,会在属性前面加上冒号":"
  2. 小程序绑定某个变量的值为元素属性时,会用两个大括号{{}}括起来,如果不加括号,为被认为是字符串。

vue、小程序、uni-app的生命周期

vue
beforeCreate(创建前)
created(创建后)
beforeMount(载入前),(挂载)
mounted(载入后)
beforeUpdate(更新前)
updated(更新后)
beforeDestroy(销毁前)
destroyed(销毁后)
小程序、uni-app
onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow:加载完成后、后台切到前台或重新进入页面时触发
onReady:页面首次渲染完成时触发
onHide:从前台切到后台或进入其他页面触发
onUnload:页面卸载时触发
onPullDownRefresh:监听用户下拉动作
onReachBottom:页面上拉触底事件的处理函数
onShareAppMessage:用户点击右上角转发

git是什么?git的五个命令,git和svn的区别

git是什么
git是目前世界上最先进的分布式管理系统。
git的常用命令
git init 把这个目录变成git可以管理的仓库
git add README.md 文件添加到仓库
git add 不但可以跟单一文件,也可以跟通配符,更可以跟目录。一个点就把当前目录下所有未追踪的文件全部add了
git commit -m ‘first commit’把文件提交到仓库
git remote add origin git@github.com:wangjiax9/practice.git //关联远程仓库 
git push -u origin master //把本地库的所有内容推送到远程库上
Git和SVN的区别
Git是分布式版本控制工具 , SVN是集中式版本控制工具
Git没有一个全局的版本号,而SVN有
Git和SVN的分支不同
git吧内容按元数据方式存储,而SVN是按文件
Git内容的完整性要优于SVN
Git无需联网就可使用(无需下载服务端),而SVN必须要联网(须下载服务端)因为git的版本区就在自己电脑上,而svn在远程服务器上

Git项目如何配置,如何上传至GitHub,描述其详细步骤

  1. 注册登录github
  2. 创建github仓库
  3. 安装git客户端
  4. 绑定用户信息
  5. 设置ssh key
  6. 创建本地项目以及仓库
  7. 关联github仓库
  8. 推送项目到github仓库
### 页面跳转配置 UniApp 的页面跳转机制与小程序相似,均依赖于预配置的页面路径。若需跳转至 tab 页面,需使用 `switchTab` 方法实现跳转,这与小程序的机制一致。对于熟悉小程序开发的开发者,上手 UniApp 的页面跳转逻辑并无难度,反之亦然。在实际开发中,页面跳转可以通过 `navigateTo`、`redirectTo`、`reLaunch` 等方法实现,具体使用场景取决于页面栈的管理需求。 ```javascript // 示例:使用 navigateTo 进行页面跳转 uni.navigateTo({ url: '/pages/details/details' }); ``` ### 生命周期钩子函数 UniApp 的生命周期钩子函数与小程序一致,主要包括 `onLaunch`、`onShow`、`onHide` `onError`。这些钩子函数用于监听小程序的启动、显示、隐藏及错误处理等事件。例如,`onLaunch` 在用户首次打开小程序时触发,并且在整个应用生命周期内仅执行一次。 ```javascript // 示例:在 App.vue 中使用生命周期钩子 export default { onLaunch() { console.log('小程序初始化完成'); }, onShow() { console.log('小程序进入前台'); }, onHide() { console.log('小程序进入后台'); }, onError(err) { console.error('小程序发生错误:', err); } }; ``` ### TabBar 配置 在 UniApp 中,TabBar 的配置方式与小程序相似,需在 `pages.json` 文件中进行设置。TabBar 配置包括颜色、选中状态、图标路径以及页面路径等信息。以下是一个典型的 TabBar 配置示例: ```json { "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "iconPath": "static/bottomTabBar/home2_icon.png", "selectedIconPath": "static/bottomTabBar/home1_icon.png", "text": "分享" }, { "pagePath": "pages/read/read", "iconPath": "static/bottomTabBar/readTrain2_icon.png", "selectedIconPath": "static/bottomTabBar/readTrain1_icon.png", "text": "阅读" }, { "pagePath": "pages/mine/mine", "iconPath": "static/bottomTabBar/mine2_icon.png", "selectedIconPath": "static/bottomTabBar/mine1_icon.png", "text": "我的" } ] } } ``` ### 组件通信 在 UniApp 中,组件之间的通信方式与 Vue.js 类似,支持父子组件通信、事件传递以及全局状态管理。父子组件通信可以通过 `props` `$emit` 实现。此外,UniApp 也支持使用 `EventBus` 或 `Vuex` 进行跨组件通信。 ```javascript // 父组件向子组件传值 <template> <child-component :message="parentMessage" /> </template> <script> import ChildComponent from '@/components/ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent' }; } }; </script> ``` ```javascript // 子组件接收父组件传值 export default { props: ['message'], mounted() { console.log(this.message); // 输出: Hello from parent } }; ``` ### 数据双向绑定 UniApp 支持数据的双向绑定,通常通过 `v-model` 指令实现。该机制允许在表单元素与组件之间建立双向数据绑定,从而简化了数据更新的流程。 ```html <template> <input v-model="inputValue" placeholder="请输入内容" /> </template> <script> export default { data() { return { inputValue: '' }; } }; </script> ``` ### 性能优化 在 UniApp 开发中,性能优化是提升用户体验的关键。常见的优化方法包括减少页面重绘、使用懒加载、合理管理页面栈、优化图片资源等。此外,还可以通过减少不必要的数据请求、合理使用缓存机制等方式提升应用性能。 ### 权限管理 在小程序开发中,权限管理主要涉及用户授权与 API 调用限制。开发者需在调用敏感 API(如地理位置、摄像头等)前请求用户授权,并根据授权结果决定后续操作。 ```javascript uni.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { uni.authorize({ scope: 'scope.userLocation', success() { console.log('授权成功'); }, fail() { console.log('授权失败'); } }); } } }); ``` ### 下拉刷新与上拉加载 UniApp 支持通过 `onPullDownRefresh` `onReachBottom` 实现下拉刷新与上拉加载更多功能。开发者需在页面配置中启用 `enablePullDownRefresh` 并实现相应的回调函数。 ```javascript export default { onPullDownRefresh() { console.log('开始刷新'); uni.stopPullDownRefresh(); // 停止刷新 }, onReachBottom() { console.log('已到达底部'); } }; ``` ### 数据监听 在 UniApp 中,数据监听可通过 `watch` 或 `computed` 实现。`watch` 用于监听特定数据的变化并执行相应操作,而 `computed` 则用于基于已有数据计算出新的值。 ```javascript export default { data() { return { count: 0 }; }, watch: { count(newVal, oldVal) { console.log(`count 从 ${oldVal} 变为 ${newVal}`); } } }; ``` ### 相关问题 1. 如何在 UniApp 中实现组件间的事件通信? 2. UniApp 中如何配置全局状态管理? 3. 如何在 UniApp 中实现页面的懒加载? 4. UniApp 中如何处理用户授权失败的情况? 5. 如何在 UniApp 中实现页面的下拉刷新上拉加载更多功能?
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

勋染

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值