前端开发面试题总结-原生小程序部分

文章目录

  • 1、wxss和css的区别?
  • 2、原生小程序组件使用过哪些?
  • 3、原生小程序中如何绑定事件?
  • 4、原生小程序中如何修改数据并同步视图?
  • 5、原生小程序中如何进行事件传参?
  • 6、小程序中发起网络请求
  • 7、 导航跳转方式?
  • 8、 监听上拉触底和下拉刷新?
  • 9、 小程序的生命周期函数?
  • 10、定义全局组件和局部组件

1、wxss和css的区别?

● wxss是小程序配合wxml渲染结构样式
● css是网页结合html渲染结构样式
● wxss新增了rpx,适配单位, 750rpx等于整屏的宽度
● wxss区分全局样式和局部样式
○全局样式app.wxss,局部样式则是每个页面内部的wxss文件

2、原生小程序组件使用过哪些?

● view: 盒子
● text: 文本
● rich-text: 富文本,可以通过nodes节点解析html标签
● scroll-view: 滚动区域
● swiper: 轮播图
● button: 按钮 open-type开放能力(share / contact / …)
●map:地图组件

3、原生小程序中如何绑定事件?

● 通过bind: xxx 或者bindxxx
●比如:bind:tap 绑定点击事件

4、原生小程序中如何修改数据并同步视图?

● this.setData(), 既可以更改数据,也可以同步视图
● 不可以直接修改数据, 直接this.data.数据名=xxx只更改数据,视图不变
●注意: this.setData()是异步的,视图同步完毕后会触发setData函数的回调函数执行

this.setData({   
name: '张三' 
}, ()=>{  
// 视图更新完毕了, 就会触发该回调函数, 相当于vue中的$nextTick 
})

5、原生小程序中如何进行事件传参?

●通过data-属性名

 <view data-car="劳斯莱斯" bind:tap="getCarName">x</view> getCarName(ev) {    console.log(ev.currentTarget.dataset.car) // 劳斯莱斯  }

●通过mark:属性名(推荐)

 <view mark:car="劳斯莱斯" bind:tap="getCarName">x</view> getCarName(ev) {     console.log(ev.mark.car) // 劳斯莱斯  }

6、小程序中发起网络请求

● 通过wx.request,这个方法不支持promise, 所以在原生小程序中需要对wx.request进行二次封装
● 注意:小程序中不存在跨域的问题,只有浏览器才有同源保护策略
● 三方的: wechat-http

7、 导航跳转方式?

● 声明式导航
○ navigator标签进行跳转, 使用to属性
○ 跳转到tabbar页面, 需要配合open-type=“switchTab”
○ open-type=“navigateBack” delta=“层级”
● 编程式导航
○ wx.navigatorTo() 普通页面的跳转
○ wx.switchTab()跳转到tabbar页面,wx.navigateBack
● 导航传参
○ 通过query(?根参数 key=value&key=value)传递参数
○ 接收参数,通过onLoad的形参去接收

8、 监听上拉触底和下拉刷新?

● onPullDownRefresh 监听用户下拉动作
在 app.json中配置: “enablePullDownRefresh”: true
● onReachBottom
在app.json中设置触底高度: “onReachBottomDistance”: 100
一旦到达触底高度则会触发onReachBottom钩子函数的执行

9、 小程序的生命周期函数?

1.应用的·生命周期

// 触发一次 
onLaunch() {   console.log('小程序开启启动,初始化完成') 
},// 小程序显示,多次触发 onShow() {   console.lg('小程序显示了') },onHide() {   console.log('小程序隐藏了') },onError() {   console.log('小程序出现异常') },

2.页面的生命周期

// 1. onLoad 页面开始加载 发送请求获取数据,获取到导航参数 
// 2. onShow 页面显示 (多次触发) 提示信息 
// 3. onReady 页面初次渲染完成 
// 4. onHide 页面隐藏  tabbar页面切换只是隐藏 
// 5. onUnload 页面销毁 不是tabbar页面 b页面 返回 A页面对应的页面销毁 // 清理操作

3.组件的生命周期函数

// 1. created 在组件实例刚刚被创建时执行(拿到数据) 
// 2. attached 在组件实例进入页面节点树时执行 
// 3. ready 在组件在视图层布局完成后执行 
// 4. moved 在组件实例被移动到节点树另一个位置时执行 
// 5. detached 在组件实例被从页面节点树移除时执行 
// 6. error 每当组件方法抛出错误时执行

10、定义全局组件和局部组件

全局组件

  1. 创建一个组件
  2. 通过app.json中的useingComponets进行组件注册, 注册为全局组件
    局部组件
  3. 创建一个组件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/910700.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPS会员享受权益集锦

也许你经常使用WPS&#xff0c;但可能不了解究竟有哪些功能只有会员才能享受呢&#xff0c;作为一个经常使用WPS会员办公的老师&#xff0c;我今天就给你分类理一理&#xff1a;我把WPS会员功能进行分类整理&#xff0c;按功能属性划分为以下六大类&#xff1a; 一、云存储与管…

某只股票量化对冲策略计算绘图

量化对冲策略计算绘图 代码提要 代码运行环境&#xff0c;WIN 11 &#xff0c;python 3.13 使用akshare获取股票数据&#xff0c;并用pandas的ewm函数添加了akshare库获取真实股票数据主程序中使用ak.stock_zh_index_daily获取上证指数数据增加了异常处理&#xff0c;当获取…

JavaEE初阶第五期:解锁多线程,从 “单车道” 到 “高速公路” 的编程升级(三)

专栏&#xff1a;JavaEE初阶起飞计划 个人主页&#xff1a;手握风云 目录 一、线程的状态 1.1. 观察所有线程的状态 1.2. 观察线程的状态和转移 1.3. 线程状态和状态转移的意义 二、线程安全 2.1. 观察线程不安全 2.2. 线程安全的概念 2.3. 线程不安全的原因 一、线程的…

Python爬虫实战:研究xmltodict库相关技术

1. 引言 1.1 研究背景与意义 气象数据在农业生产、交通规划、灾害预警等多个领域具有重要应用价值。传统的气象数据获取方式主要依赖于气象部门发布的统计信息,存在更新不及时、数据维度有限等问题。随着互联网技术的发展,气象网站提供了丰富的实时气象数据,但这些数据通常…

暴力风扇方案介绍

炎炎夏日&#xff0c;当普通风扇只能送来 “温柔拂面”&#xff0c;暴力风扇却能吹出 “台风级” 清凉&#xff01;想知道这些 “风力狂魔” 是如何炼成的&#xff1f;答案藏在电机、电路和芯片的黄金三角组合里。​ 一、电机&#xff1a;暴力风扇的 “心脏起搏器”​ 暴力风扇…

电子计数跳绳原型

引子 这些日子和跳绳杠上了&#xff0c;前些日子的拆解&#xff0c;让我有一个大胆的想法&#xff0c;就是能不能用3D打印写程序的方式实现一个计数功能的&#xff0c;当然看到有些结构这个现在实现起来有些难度&#xff0c;只能那原有的部件充数。目标只是说明一下原理&#…

桌面小屏幕实战课程:DesktopScreen 17 HTTPS

飞书文档http://https://x509p6c8to.feishu.cn/docx/doxcn8qjiNXmw2r3vBEdc7XCBCh 源码参考&#xff1a; /home/kemp/work/esp/esp-idf/examples/protocols/https_request 源码下载方式参考&#xff1a; 源码下载方式 获取网站ca证书 openssl s_client -showcerts -connec…

Spring Cloud:高级特性与最佳实践

一、Spring Cloud 高级特性 &#xff08;一&#xff09;分布式配置管理 分布式配置管理是微服务架构中的一个重要功能&#xff0c;Spring Cloud 提供了多种配置管理解决方案&#xff0c;如 Spring Cloud Config 和 Spring Cloud Consul。 Spring Cloud Config Spring Cloud C…