网站导航
> 技术文档 > 前端开发面试题总结-原生小程序部分_原生小程序面试题

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

网友: 技术文档 2025-07-30 21:00:37

文章目录

  • 1、wxss和css的区别?
  • 2、原生小程序组件使用过哪些?
  • 3、原生小程序中如何绑定事件?
  • 4、原生小程序中如何修改数据并同步视图?
  • 5、原生小程序中如何进行事件传参?
  • 6、小程序中发起网络请求
  • 7、 导航跳转方式?
  • 8、 监听上拉触底和下拉刷新?
  • 9、 小程序的生命周期函数?
  • 10、定义全局组件和局部组件
  • 11、 组件通信
  • 12、wxs是什么?
  • 13、原生小程序上线流程
  • 14、登录流程
  • 18、 小程序如何跳转另外一个小程序？
  • 19、小程序地图

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. 创建一个组件
    2.通过页面的json中的useingComponets进行组件注册, 注册为局部组件

11、 组件通信

父向子传值

<local-com list=\"{{swipers}}\" />

子组件通过properties进行接收

properties: { list: { type: Array, required: true } },

子向父传值
1.子组件传值

this.triggerEvent(\'自定义事件名\', 传递的数据)

2.父组件接收, 通过bind:绑定自定义的事件名, 通过事件函数的e.detail获取到子组件传递的数据

<local-com bind:自定义事件名=\"getImage\" list=\"{{swipers}}\" />

3.通过事件函数的e.detail接收数据

getImage(e) { console.log(e.detail)},

获取子组件的方式
1.通过selectComponents获取子组件

this.selectComponents(\'组件对应的选择器\')

12、wxs是什么?

wxs weixin script: 在模板中无法调用js中定义的函数,可以调用wxs定义的函数,一般用wxs进行数据处理
缺点:

  1. 不支持es6
  2. 不支持小程序的api
  3. 隔离性, wxs和js不能互相调用
    优点:
    1.没有兼容性(小程序的版本库)
    2.在ios设备上比js快2-20倍

13、原生小程序上线流程

● 代码进行上传
● 将版本设置为体验版本(产品和ui进行体验)(测试)
● 改bug, 重复上述两个步骤
● 提交审核
●审核通过点击发布

14、登录流程

1.微信授权登录
1.1 获取用户信息(iv, rawData, encrytedData,signature)

const userInfo = await uni.getUserProfile({ desc: \'智慧商城获取您的用户信息\' }) const { iv, rawData, encrytedData, signature } = userInfo[1]

1.2 调用uni-app的login方法获取code(用户凭证)

const { code } = await uni.login()

2.根据微信授权的信息进行接口登录

const res = await login({ iv, rawData, encryptedData, signature, code })

登录成功后
● 将token存到vuex
●判断是否有回跳地址,如果有,从哪来回哪去

// 1. 跳转到登录页面并传递回跳地址 uni.reLaunch(()=>{ url: \'/pages/login/login?redirectUrl=/pages/cart/cart\' }) // 2. 登录页面接收数据 onLoad(options){  // 2.1 接收参数并存储  this.redirectUrl = options.url } // 3. 登录成功后回跳 this.$store.commit(\'user/setUserInfo\', res.data) if(this.redirectUrl){  uni.switchTab({ url: this.redirectUrl }) }
  1. 支付流程
    1.根据购买的商品信息生成订单,从而得到订单号
async createOrder() { // 要购买的商品 const payGoods = this.$store.state.cart.list.filter(item => item.goods_state) // 通过map进行格式化 const goods = payGoods.map(item => { return { goods_id: item.goods_id, goods_number: item.goods_count, goods_price: item.goods_price } }) // 调起创建订单的接口  const { message: { order_number } } = await createOrder({ order_price: this.totalPrice, consignee_addr: this.$store.getters[\'user/addressStr\'], goods: goods }) // 获取到订单id  this.payGoods(order_number) },

2.预支付: 根据订单号得到支付的参数

async payGoods(order_number) { // 获取支付参数 const { message: { pay } } = await getPayParams({ order_number }) // },

3.uni.requestPayMent: 支付,需要很多参数

// 发起微信支付 const [err, res] = await uni.requestPayment(pay) if (err) { uni.showToast(\'取消支付,跳转订单页面\') } else { uni.showToast(\'支付成功,跳转订单页面\') }
  1. tabbar页面切换如何传递参数
    ●利用reLaunch
uni.reLaunch({ url: \'/pages/my/my?url=123\' })

● vuex
●本地

18、 小程序如何跳转另外一个小程序？

wx.navigateToMiniProgram(Object object)

19、小程序地图

小程序中实现地图及定位功能，需借助小程序地图组件wxapp-map组件和小程序定位api（getLocation）
map组件
1.基本地图组件

<map id=\"map\"></map>

2.样式

/* pages/home/home.wxss */ page { height: 100%; } #map { width: 100%; height: 70%; }

地图定位
1.app.json配置

 \"requiredPrivateInfos\": [ \"getLocation\" ], \"permission\": { \"scope.userLocation\": { \"desc\": \"用于测试小程序\" } },
网络标签：

相关问题