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

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. 创建一个组件