小程序面试题2023

1.请谈谈wxml与标准的html的异同？

• 标签名字有点不一样
• 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
• 开发工具限制：WXML仅能在微信小程序开发工具中预览，而HTML可以在浏览器内预览。
• 组件封装不同：WXML对组件进行了重新封装，为后续的性能优化提供了可能，同时避免开发者写出低质量的代码。
• 没有DOM树：小程序运行在JS Core内，没有DOM树和window对象，没有办法使用相关API。

2.请谈谈WXSS和CSS的异同？

• 新增了rpx尺寸单位   750rpx

• wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚

• 提供了全局的样式和局部样式

       项目根目录中的app.wxss会作用于所有小程序页面局部页面 .WXSS 样式仅对当前页面生效
  

• WXSS仅支持部分css选择器

     .class 和 #idelement并集选择器、后代选择器::after 和 ::before 等伪类选择器 
  

3.请谈谈微信小程序主要目录和文件的作用？

app.js 逻辑文件，主要用来注册小程序全局实例。监听并处理小程序的生命周期函数，声明全局变量等。
app.json 公共设置文件，配置小程序全局设置。底部tab，标题栏和路由等设置。
app.wxss 主样式表文件，类似HTML的css文件。全局配置的样式文件。该文件不是必需的。
小程序的4个页面文件：
.js文件 页面逻辑文件，页面的逻辑，请求和数据处理。
.wxml文件 页面结构文件，用来设计页面的布局、数据绑定等。
.wxss文件 页面样式表文件，用来定义页面中用到的各类样式表。该文件不是必需的。
.json文件 页面配置文件。配置当前页面标题和引入组件。其在页面中不可缺少。

4.简单描述下微信小程序的相关文件类型？

微信小程序项目结构主要有四个文件类型：wxml；wxss；json；js

.WXML：是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面结构。

.WXSS：描述 WXML 的组件样式。css使用px、wxss使用rpx

.js：逻辑处理，网络请求。

.json：小程序设置，如页面注册，页面标题及tabBar

5.请谈谈小程序的双向绑定和vue的异同？

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

6.微信小程序有哪些传值(传递数据)方法？

1. 页面跳转或重定向时，使用url带参数传递数据（路由传值）

      使⽤ 路由wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔。 然后在⽬标⻚⾯通过在 onLoad 周期中，通过参数来获取传递过来的值。
2. 使用本地存储传递参数
3. 使用全局变量传递数据

     使⽤全局变量在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。

     在 组件.js 中， 头部 引⼊ const app = getApp();

      获取到全局变量直接使⽤app.globalData.key 来进⾏赋值和获取值。

4. 给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
5. 设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
6. 在navigator中添加参数数值

7.bindtap和catchtap的区别？

相同点： 都是点击事件

不同点： bindtap 不会阻⽌冒泡， catchtap 可以阻⽌冒泡。

8.wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
​wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
​wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
 

9.微信小程序与H5的区别？

• 运行环境不同（小程序在微信运行，h5在浏览器运行）
• 开发成本不同（h5需要兼容不同的浏览器）
• 获取系统权限不同（系统级权限可以和小程序无缝衔接）
• 应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

10.小程序和Vue写法的区别？

• 小程序的路由写在app.json文件里，vue写在route.js里

• 小程序用 src=“{{path}}” 绑定标签属性，vue用 :src=“path” 绑定标签属性

• 小程序用 wx:if=“{{lenth>5}}” 来条件判断，vue用 v-if=“lenth>5” 来条件判断

• 小程序用 wx:for=“{{array}}” 来遍历列表，默认数组的当前项的下标变量名为 index，默认数组当前项的变量名为 item；vue用 v-for=“(item,index) in array” 来条件遍历列表

• 小程序用wx.navigateTo()或wx.rediretTo()跳转页面，vue用this.router.push()或this.router.replace()跳转页面

• 小程序绑定事件传参这标签里加data-变量名="参数值"的属性，事件回调方法取参时使用e.currentTarget.dataset.变量名的方式获取参数值；vue绑定事件传参直接在标签里的事件回调方法后加参数，如@click=“callbackName(参数值)”,事件回调方法取参数只要声明function加上参数名，如callbackName:function(变量名){ }，方法体里就可以用变量名直接使用该参数

• 小程序用配合wx:if或wx:for来渲染包含多个元素的内容，vue用配合v-if或v-for来渲染包含多个元素的内容

• 小程序里给data的属性赋值需要使用this.setData(item:1)方法来更新，不能用’=‘直接赋值；小程序调用：this.data.item 。vue给data里的属性赋值可以直接用’='，如this.a=true

• 小程序防止事件冒泡把bindtap改为catchtap就可以了；vue防止事件冒泡用添加事件修饰符来实现，如@click.stop

11.微信小程序怎么缓存数据？

小程序提供了读写本地数据缓存的接口，通过wx.getStorage/wx.getStorageSync 读取本地缓存，通过wx.setStorage/wx.setStorageSync 写数据到缓存，其中Sync后缀的接口表示是同步接口。

14.微信小程序怎么进行网络请求？

微信小程序支持GET,POST等请求。用method可以设置.
微信小程序提供了 wx.request(Object object) 这个API，用于发送网络请求，该API接受一个对象作为参数，该对象包含多个属性，其中常用的有：

url，请求的地址，string类型，必填。
data，请求的参数，可以是一个字符串或一个对象，非必填。
method，请求的方法，string类型，默认值是"GET"。
success，请求成功的回调函数，非必填。
fail，请求失败的回调函数，非必填。

getInfo(){vxwx.request({url: 'https://www.escook.cn/api/get',method:'GET',data:{name: 'zs',age:20},success:(res) => {console.log(res.data)}})},

15.如何封装⼩程序请求

1. 在src目录中新建一个utils目录，在目录中新建一个request.js；

2. 在request.js中首先获取整个小程序的实例（var app = getApp(); ）来保证能调用wx所有方法；3. 定义get和post等请求的方法；

4. 在get或者post请求的方法中设置wx.showToast()；

5. 通过wx.request来实现get或者post请求，在success中，关闭loading，然后通过回调的形式返回拿到的数据

调用：

首先要导入包

var http=require("../utils/request.js")

在方法中通过http.get方法（参数，回调）来调用
 

16、小程序的生命周期

1. 请谈谈小程序的生命周期函数(应用 页面的 )5个

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时
-------------------------

onPullDownRefresh()：下拉刷新的钩子函数

onReachBottom()：上翻到底的钩子函数

2. 请谈谈小程序的组件生命周期函数
created()：组件实例刚刚被创建好时触发。

attached()：在组件完全初始化完毕、进入页面节点树后触发。

detached() 组件离开页面节点树后触发。

17.微信小程序模块化？

可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。

18.微信小程序所有api放在哪里，简单介绍几个api？

小程序全局对象是: wx，所有的 API 都保存在 wx 对象中
例如常用API：
页面跳转： wx.navigateTo（）等
设置本地存储：wx.setStorageSync(‘名’,值)
读取本地存储：wx.getStorageSync(‘名’)

wx.request，wx.login 等

19. 简述小程序的原理

小程序分为两个部分webview和appService。

webview用来展现UI，

appService用来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理

20、小程序的运行机制和更新机制

1.运行机制

热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤（挂起状态）。
冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。

1.1 小程序的冷启动和热启动

1.2小程序前后台

1.3挂起状态

1.4小程序销毁

2.更新机制

其实微信客户端会有若干个时机取检查本地缓存，如果有新版本，那就进行小程序代码包的更新，但如果恰巧发布新版本后没有经过这些时机就打开小程序，那打开可能还会是旧版本的小程序。

2.1 启动时同步更新

• 定期检查发现新版本

• 用户长时间未使用

2.2 启动时异步更新

2.3 开发者手动触发

20.那些方法来提高微信小程序的应用速度？

• 提高页面的加载速度
• 用户行为预测
• 减少默认的data的大小
• 组件化方案

21.分析微信小程序的优劣势？

优势：

无需下载，通过搜索和扫一扫就可以打开

良好的用户体验：打开速度快 ，开发成本比App要低

安卓上可以添加到桌面，与原生App差不多

为用户提供良好的安全保障。

劣势：

限制较多，页面大小不能超过1M，不能打开超过5个层级的页面
样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
依托与微信，无法开发后台管理功能
 

 22、小程序实现下拉刷新有哪几种方法

⽅案 ⼀ ：onPullDownRefresh函数

1. 通过在 app.json 中， 将 "enablePullDownRefresh": true, 开启全局下拉刷新。

或者通过在 组件 .json ， 将 "enablePullDownRefresh": true, 单组件下拉刷新。

2. 在页面中监听页面下拉事件，跟生命周期同级位置声明 onPullDownRefresh 函数

3. 在刷新完成后关闭下拉刷新效果。stopPullDownRefresh()

// 下拉刷新的事件
onPullDownRefresh() {
  // 因为刷新后数据都重新渲染, 那我们要确保最新的数据在第一页 
  this.queryObj.pagenum = 1
  this.goodsList(uni.stopPullDownRefresh)
}

⽅案⼆：

scroll-view ：使⽤该滚动组件 ⾃定义刷新，通过 bindscrolltoupper 属性， 当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利⽤这个属性，来实现下拉刷新功能。
 

23.19.webview中的页面怎么跳转回小程序?

wx.miniProgram.navigateTo({
    url:'pages/login/login'+'$params'
})
//跳转到小程序导航页面
wx.miniProgram.switchTab({
    url:'/pages/index/index'
})

24.小程序的发布流程（开发流程）

1. 注册微信小程序账号
2. 获取微信小程序的AppID
3. 下载微信小程序开发者工具
4. 开发小程序
5. 去微信公众号配置域名
6. 手机浏览
7. 代码上传
8. 提交审核
9. 发布

24.小程序中获取openid的方法？

通过login获取code，再根据code获取openid

25.小程序授权登录流程

授权登录是为了获取用户信息、昵称、以及头像id。若没有授权登录，用户无法正常访问并使用小程序。

1、当用户进入微信小程序时，我们先判断用户是否授权过此小程序：wx.getSetting({（查看是否授权）
2、如果没有授权，我们通过一个按钮来实现授权登录：

open-type="getUserInfo"  bindgetuserinfo="getuserinfo">授权
3、通过bindgetuserinfo事件，我们可以获取到个人的信息、加密偏移数据、加密用户信息（e.detail获取）

     getuserinfo(e)
4.用户可以授权登录，也可以取消授权：    wx.login（）

     每次进入小程序，都需要调用登录接口，来检查登录状态，但是只需要打开小程序才需要调           用，所以可以把登录接口放在app.js里面的onLaunch方法里执行
5、根据登录接口返回的code码，判断用户是否新用户：

      如果不是新用户，我们就直接保存下token（服务器返回的token）；

      如果是新用户，我们就要先注册，再登录。
6、当用户注册成功后，再调登录接口，保存token。在有些页面需要使用token

7、在步骤1中，当我们授权过时，我们要看token是否存在
8、当token存在时，我们直接执行逻辑代码
9、当token不存在时，我们就需要登录，登录后判断返回的code码，再根据code码判断用户是否是新用户。最后保存token。

26.小程序的支付是如何实现的

      小程序注册，要以公司的身份去注册一个小程序，才有微信支付权限

1.创建订单

请求创建订单的 API 接口：把（订单金额、收货地址、订单中包含的商品信息）发送到服务器

服务器响应的结果：订单编号

2.订单预支付

请求订单预支付的 API 接口：把（订单编号）发送到服务器

服务器响应的结果：订单预支付的参数对象，里面包含了订单支付相关的必要参数

3.发起微信支付

调用 uni.requestPayment() 这个 API，发起微信支付；把步骤 2 得到的 “订单预支付对象” 作为参数传递给 uni.requestPayment() 方法

监听 uni.requestPayment() 这个 API 的 success，fail，complete 回调函数

wx.requestPayment({
		   'timeStamp': _this.data.order.jsApiParameters.timeStamp,   //当前时间戳
		   'nonceStr' : _this.data.order.jsApiParameters.nonceStr,   //随机字符串长度
		   'package'  : _this.data.order.jsApiParameters.package,    //统一下单
		   'signType' : 'MD5',                                      //签名算法，应与后台下单时的值一致
		   'paySign'  : _this.data.order.jsApiParameters.paySign,   //签名
		   'success':function(res){
			   if(res.errMsg == 'requestPayment:ok'){
				   wx.navigateTo({
					  url:'/pages/success/success?order_id='+_this.data.order_id,  //跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
				   })
			   }else{
				   wx.navigateTo({
					  url:'/pages/error/error?order_id='+_this.data.order_id,  //跳转页面的路径，可带参数 ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
				   })
			   }
		   },
		   'fail':function(res){
			   wx.showToast({
	              title: '已取消',
	              duration: 1000,
	           });
			   return false;
		   }
	 })

27.小程序还有那些功能？

客服功能，录音，视频，音频，地图，定位，拍照，动画，canvas

28. 说出小程序当中常用的UI组件

视图容器组件：view、swiper、swiper-item

基础内容组件：text、icon、rich-text

表单组件：button、form checkbox、input

导航组件：navigator

媒体组件：image

29.什么是分包加载，如何使用分包加载

1.概念 减少首屏加载时间，用户在使用时按需加载
2.使用
  1. 在app.json中配置项目分包结构
  2. 配置`subpackages`属性
    subpackages: {
            "root": "分包的根目录",
            "pages": [""] // 需要按需加载的包所在路径
        }
 

30. 小程序中如何自定义组件

1. 在根目录新建一个components文件夹，然后在这个文件夹下放置自定义的组件，需要用到某个自定义组件时，就在它里面的json文件中配置 "component": true

2. 在父组件的json文件中的usingComponents中导入这个组件

usingComponents: {
  "自定义组件名": "自定义组件所在路径"
}

31. 小程序中如何自定义tabBar

• 首先在app.json中定义tabbar
• 在项目根目录创建自定义tabbar组件
• 在pages下的各个页面组件引入tabbar

 

32. ⼩程序怎么跟随事件传值

在 ⻚⾯标签上通过 绑定 dataset-key = value ， 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值

bindtap="get"  data-name="测试"> 拿到传值

get(e){ console.log(e.currentTarget.dataset.name) },
 

33. vue、小程序、uni-app中的本地存储数据和接受数据是什么

vue：

存储：localstorage.setItem

接收：localstorage.getItem

微信小程序：

存储：wx.setStorage/wx.setStorageSync

接收：wx.getStorage/wx.getStorageSync

uni-app：

存储：uni.setStorage

接收：uni.getStorage
 

34. 小程序for循环中的key值有什么用

保持列表中项目的特征和状态;
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

36. 微信小程序如何跳转到外部小程序

wx.navigateToMiniProgram(Object object)
 

37.简述下app.json文件

必须要有这个文件，如果没有这个文件，项目无法运行。

因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

38.请写出设置导航栏标题的办法

全局 app.json配置 navigationBarTitleText： “”

单个页面json配置 navigationBarTitleText： “”

wx.setNavigationBarTitle({
    title: '当前页面'
})

39.没有授权小程序用户信息的情况下，小程序如何展示用户头像和昵称

<open-data  type="userNickName">
userAvatarUrl">

40.小程序设置tabbar徽标的api

wx.setTabBarBadge({
   index: 0,
   text: '1'
})

50. 请写出预览图片的api

wx.previewImage({
   current: '', // 当前显示图片的http链接
   urls: [] // 需要预览的图片http链接列表
})

51. 请写出选择地址的api

wx.chooseAddress({
  success (res) {
    console.log(res.userName)
    console.log(res.postalCode)
    console.log(res.provinceName)
    console.log(res.cityName)
    console.log(res.countyName)
    console.log(res.detailInfo)
    console.log(res.nationalCode)
    console.log(res.telNumber)
  }
})
 

52.小程序转发的方式

1. 通过用户点击右上角 ... 转发

2. 通过 button组件，将open-type属性设置为 share

57. 小程序获取场景值的方法？
let options = wx.getLanchOptionsSync()

58. 小程序onPageScroll方法的使用注意什么
由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次

59. 小程序同步API和异步API使用时注意事项
像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作

60. 小程序组件有监听属性吗，简述一下
有，observers;可以监听 data或者properties内的数据的变化

observers: {

      num(newVal,oldVal){

       }

}