小程序、uniapp、原生微信小程序高频面试题总结

1. 什么是小程序

小程序是一种轻量级的应用程序，可以在手机等设备上运行，而无需用户下载和安装。它结合了移动应用程序的功能和网页应用程序的便捷性，允许用户在一个封闭的环境中直接使用应用程序。特点：无需下载安装；轻量级；跨平台兼容；互联网便携；

2.小程序和传统网页应用程序的区别是什么

  1. 安装和访问：传统web需要输入url地址进行网页的访问，而小程序通过扫描二维码和搜索进行访问并且不需要进行安装
  2. 功能和能力：小程序除了能和浏览器一样调用设备信息等接口，还具有蓝牙，定位等接口的调用，用户的交互性大大提高，而传统web受限于网页浏览器并不具备小程序的上述功能
  3. 数据存储与缓存：小程序使用的是本地缓存，提供更好的用户体验，而网页应用程序是使用的浏览器的缓存机制进行数据的缓存，有一定的局限性
  4. 跨平台兼容性强：uniapp开发的项目可以在多个平台进行发布使用，而传统网页应用程序需要考虑不同版本的浏览器进行兼容和测试，开发繁琐

3.常见的小程序框架

  1. 微信小程序框架：基于WXML, WXSS, JavaScript的开发框架
  2. 支付宝小程序框架: 基于AXML，ACSS，JavaScript的开发框架
  3. 百度小程序框架：基于Swan，Csss，JavaScript的开发框架

4.小程序实现页面跳转的方式

  1. navigator组件
// 使用自带的原生组件navigator
<navigator url="/pages/index/index">点击跳转</navigator>
  1. API [wx.navigatorTo、wx.redirectTo、wx.reLaunch、wx.switchTab]
    1. wx.navigatorTo: 点击跳转页面会将当前页面加入页面栈中进行存储，可以使用返回按钮返回上一页，同时可以进行页面的传参，在onLoad里面接收参数
    2. wx.redirectTo: 点击跳转页面之后上一页会被卸载掉，不能进行返回，页面栈中只会保留当前页
    3. wx.reLaunch: 关闭当前的所有页面，创建新的页面栈，跳转之后的页面会被设定为新的栈顶页面
    4. wx.switchTab: 专门用于跳转到tabbar页面，会关闭其他的非tabbar页面，不能进行传参
    5. wx.navigataBack: 用于返回上一页使用

5.小程序实现页面传参的方式

  1. url传参
    该方法可以在搭配navigatorTo进行页面跳转的时候在后面拼接上需要传递的参数，常用于传递id等值，如果目标页面需要进行详情的数据渲染，当前页面就是详情页的所有数据，如果数据较少的情况下可以直接转为json格式的数据直接拼接到url地址后面进行传递，这适用于数据量较少的情况下，相反还是使用vuex或者浏览器缓存进行传递
  2. 全局参数
    原生小程序可以在app.js文件中的APP({…})定义全局的数据进行共享使用，数据是以对象的方式进行存储，如果哪个页面需要就调用getApp().变量名 就可以获取到这个全局变量进行使用
// app.js
App({
	name: 'xiaowu',
	age: 20
})

// 目标页面
...
let name = getApp().name;
let age = getApp().age;
...
  1. 浏览器缓存
    使用wx.setStorageSync(key, value)将目标页面需要的数据存储到本地浏览器缓存中，在目标页面使用getStorageSync(key)的方式将数据又重缓存中读取出来，一般用于存储token，详情信息等
  2. vuex/pinia
    如果你的项目使用到了vue框架，可以用vuex、pinia进行数据的统一状态管理，哪个页面需要该数据直接调用getter就行，极大的方便统一的管理和调用
  3. 事件绑定
    适用于父子组件间的数据传输和通信，子组件通过this.$emit(name, value)方法传递数据给父组件，父组件在子组件上自定义一个事件，就可以监听并接收子组件传递过来的数据

6.小程序的生命周期钩子函数

  1. onLaunch: 只在小程序启动的时候加载，全局只会执行一次
  2. onLoad: 只要页面一加载的时候就会执行，比较常用，可以用来url传递过来的参数；调用方法等；
  3. onReady: 监听页面初次渲染完成的时候调用
  4. onShow / onHide: 进入当前页面触发 、 离开当前页面触发
  5. onError: 小程序发生错误时触发，比如api调用失败
  6. onShareAppMessage：点击分享时触发
  7. onUnload: 页面卸载的时候触发

7. 小程序性能优化的方法

  1. 减少http的请求
    将请求到的数据进行缓存或者进行状态统一管理，可以减少http的请求
  2. 使用缓存或者框架的统一状态管理工具（vuex, pinia)
  3. 使用异步请求，避免回调地狱
  4. 图片懒加载
    -uniapp可以使用自带的image组件的lazy-load属性但是只能在page页面和scroll-view组件中的image使用，也可以使用外部插件
    -原生小程序可以使用节点布局相交状态 IntersectionObserver 这个api来判断是否是否出现在页面可视区实现图片的懒加载
// index.wxml
<view wx:for="{{imageList}}" class='item item-{{index}}'
 wx:key="{{index}}">
	<image class="{{item.show ? 'active': ''}}" src="{{item.show ? item.src : item.def}}"></image>
</view> 

// index.js
let imageList= this.data.imageList// 获取图片数组数据
for (let i in this.data.imageList){   wx.createIntersectionObserver().relativeToViewport().observe('.item-'+ i, (ret) => {
	   if (ret.intersectionRatio > 0){
	     imageList[i].show = true 
	   }
	   this.setData({
	     imageList
	   })
	 })
}
  1. 虚拟列表
    对返回的一个较大的数据集，如果需要渲染到页面可以使用虚拟列表技术，只对当前的视图可见区域的数据进行渲染，减少性能消耗
  2. 骨架屏

8. 小程序用户的权限管理如何实现

  1. wx.getSetting
    在组件中可以使用该api来获取当前用户的授权状态，在成功的回调中如果res.authSetting[‘scope.userInfo’]成立就说明用户已经授权，反之就是没有进行授权，可以引导用户进行授权，可以使用按钮弹出弹框来获取用户的授权，在按钮身上必须加上一个属性open-type="getUserInfo"才能有弹窗效果,然后可以在回调中获取用户的授权信息
  2. 小程序的用户授权一般是以模块或功能为单位进行授权，而非一次性授权全部权限。因此，在具体场景中，可能还需要进行其他授权操作，如地理位置、通讯录等。你可以根据需要使用不同的授权方式和API，提供给用户更精细的操作和授权选择（总结：按需授权，不能一把抓）

9.小程序如何实现数据的双向绑定

  1. 使用input框的bindinput属性绑定一个监听事件
  2. 页面的数据使用插值语法
  3. js中声明该监听事件方法，在回调函数中获取事件对象，然后通过this.setData({}) 方法来更改data里面的数据，实现数据的双向绑定
// wxml
<view> {{msg}} </view>
<input bindinput="onInputEvent" value='{{msg}}' />

// js
page({
	data: {
		msg: ''
	},
	onInputeEvent(e){
		this.setData({
			this.data.msg = e.detail.value;
		})
	}
})

10. 小程序如何实现下拉刷新和上拉加载更多

  1. 下拉刷新
    首先在json文件中开启下拉刷新功能（enablePullDownRefresh ：true），然后onPullDownRefresh通过该方法监听是否产生了下拉的动作，如果有就会执行响应的操作，可以在函数里面进行http请求等；注意这里需要进行手动的关闭，不然loading效果会一直在，可以使用wx.stopPullDownRefresh(）停止下拉刷新
  onPullDownRefresh() {
    console.log("触发下拉");
    this.getData();
    wx.stopPullDownRefresh()
  }
  1. 上拉加载更多
    使用onReachBottom事件处理函数可以监听到是否上拉的操作，然后再函数体里面可以进行数据请求等操作，实现上拉加载更多；默认的触底距离是50px可以在json文件中通过onReachBottomDistance进行自定义更改

11. 小程序如何实现数据监听

1. 使用observers函数(必须要在组件component里面才能使用这个功能)

// .js
data: {
  a: 1,
  sum: 0
},
methods: {
  add(){
	this.setData({
		a: this.data + 1
	})
  }
},
// 调用observers函数
observers:{
// 要监听的变量名  function(自动接收到最新的值)
  'a': function(newVal){
// 使用this.setData方法将新的值*10之后再赋值给原来的值
	this.setData({
		sum: newVal * 10
	})
  }
}

2. 使用第三方库watch

const watch = require('watch.js'); // 引入watch.js库

Page({
  data: {
    count: 0,
  },
  onLoad() {
    // 监听count的变化
    watch(this, {
      count(newVal) {
        console.log('count变化了', newVal);
      },
    });
  },
  // 增加的方法
  increment() {
    this.setData({
      count: this.data.count + 1,
    });
  },
});

11. 小程序父子组件如何通信

1. 属性传递
通过给子组件绑定一个属性并传递数据，子组件使用properties进行接收定义值的类型，默认值，还可以使用observer监听值的变化，获取到最新的传递的 值

// 父组件的wxml
<child-component data="{{dataFromParent}}"></child-component>

// 子组件的js
Component({
  properties: {
    data: {
      type: String,
      value: '',
      observer(newVal) {
        console.log('父组件传递的数据变化了', newVal);
      },
    },
  },
});

2. triggerEventToParent() 事件触发
用于子组件在向父组件传递值的时候类似于vue的this.$emit()方法，参数为（自定义事件名, 数据），然后父组件绑定自定义事件之后可以使用自定义的事件的回调函数接收传递过来的值

// 子组件的js
Component({
  methods: {
    triggerEventToParent() {
      const dataToParent = 'Hello, Parent!';
      this.triggerEvent('eventToParent', { data: dataToParent });
    },
  },
});

// 父组件的wxml
<child-component bind:eventToParent="handleEventFromChild"></child-component>

// 父组件的js
Page({
  handleEventFromChild(event) {
    console.log('子组件触发的事件', event.detail);
  },
});

手动总结，如有错误欢迎留言纠正，谢谢。

# 小程序 # uni-app # 微信小程序 # 面试
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云Stack8.3面向香港正式发布，六大亮点激发云上跃迁

avatar 华为云开发者联盟
cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟
cover

GaussDB SQL查询语句执行过程解析

avatar 华为云开发者联盟