⼩程序⾯试题（最新）
1. 简述⼩程序的运⾏机制
热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。
冷启动：⽤户⾸次打开⼩程序或被主动销毁再次打开的情况，此时⼩程序需要重新加载启动。
2. 分析⼀下⼩程序的优劣势
优势
⽆需下载，通过搜索和扫⼀扫就可以打开
良好的⽤户体验：打开速度快 开发成本⽐App要低
安卓上可以添加到桌⾯，与原⽣App差不多
为⽤户提供良好的安全保障。
劣势：
限制较多。
样式单⼀。
推⼴⾯窄，不能分享朋友圈，
依托于，⽆法开发后台管理功能顺丰快递查询单号
3. 简单描述下⼩程序的相关⽂件类型
⼩程序项⽬结构主要有四个⽂件类型，如下：
1. WXML可以构建出页⾯的结构
2.WXSS 是⼀套样式语⾔，⽤于描述 WXML 的组件样式
3.js逻辑处理，⽹络请求
4.json⼩程序配置⽂件
5.app.json作为配置⽂件⼊⼝，整个⼩程序的全局配置。
6.app.js必须要有这个⽂件，没有也是会报错
7.app.wxss全局页⾯样式设置，在app.wxss中设置的样式可以在⼩程序的所有页⾯⽣效
4. 请谈谈⼩程序的⽣命周期函数(应⽤页⾯的 )
onLoad()：页⾯加载时触发
onShow()：页⾯显⽰/切⼊前台时触发
onReady()：页⾯初次渲染完成时触发
onHide()：页⾯隐藏/切⼊后台时触发
onUnload()：页⾯卸载时触发
onPullDownRefresh()：下拉刷新的钩⼦函数
onReachBottom()：上翻到底的钩⼦函数
5. 请谈谈⼩程序的组件⽣命周期函数
created()：组件实例刚刚被创建好时触发。
attached()：在组件完全初始化完毕、进⼊页⾯节点树后触发。
detached() 组件离开页⾯节点树后触发。
6. ⼩程序中的路由及其区别
// wx.navigateTo()：保留当前页⾯，跳转到应⽤内的某个页⾯。但是不能跳到 tabbar 页⾯
// wx.redirectTo()：关闭当前页⾯，跳转到应⽤内的某个页⾯。但是不允许跳转到 tabbar 页⾯
// wx.switchTab()：跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯
// wx.navigateBack()关闭当前页⾯，返回上⼀页⾯或多级页⾯。可通过 getCurrentPages() 获取当前的页⾯栈，决定需要返回⼏层 // wx.reLaunch()：关闭所有页⾯，打开到应⽤内的某个页⾯
7. 说出⼩程序当中常⽤的UI组件
视图容器组件：view、swiper、swiper-item
基础内容组件：text、icon、rich-text
表单组件：button、form checkbox、input
导航组件：navigator
媒体组件：image、
8. 谈⼀谈你对wxs的理解
概念：wxs（WeiXin Script）是⼩程序的⼀套脚本语⾔，结合 WXML，可以构建出页⾯的结构
特点：
没有兼容性
与JavaScript不同
隔离性
蓝波大人
不能作为事件回调
ios设备上⽐javascript运⾏快
wxs遵循CommonJs模块化规范
⽀持的数据类型：
number：数值类型
己亥杂诗的诗意string：字符串类型
boolean：布尔类型
object：对象类型
function：函数类型
array：数组类型
date：⽇期类型
regexp：正则
9. 简述⼀下wx:if和hidden的区别
1.`wx:if `动态创建或销毁对应的UI结构
2.`wx:if `条件为 false，什么也不做；为true时，才开始局部渲染
3.`hidden `简单的控制组件的显⽰与隐藏
4.`wx:if `有更⾼的切换消耗⽽ `hidden `有更⾼的初始渲染消耗。频繁切换的情况下，⽤ `hidden `更好，运⾏时条件不⼤可能改变则`wx:if` 较好。
10. 说出⼩程序中⽗⼦组件通信的三种⽅式
属性绑定：⽤于⽗组件向⼦组件的指定属性设置数据，仅能设置 JSON 兼容的数据
事件绑定：⽤于⼦组件向⽗组件传递数据，可以传递任意数据
获取组件实例：⽗组件还可以通过this.selectComponent() 获取⼦组件实例对象，这样就可以直接访问⼦组件的任意数据和⽅法
11.什么是分包加载，如何使⽤分包加载
1.概念 减少⾸屏加载时间，⽤户在使⽤时按需进⾏加载
2.使⽤
1. 在app.json中配置项⽬分包结构
2. 配置`subpackages`属性
subpackages: {
"root": "分包的根⽬录",
"pages": [""] // 需要按需加载的包所在路径
}
12. ⼩程序中如何⾃定义组件
在根⽬录新建⼀个components⽂件夹，然后在这个⽂件夹下放置⾃定义的组件，需要⽤到某个⾃定义组件时，就在它⾥⾯的json⽂件中配置 "component": true
在⽗组件的json⽂件中的usingComponents中导⼊这个组件
usingComponents: {
"⾃定义组件名": "⾃定义组件所在路径"
}
13. ⼩程序中如何⾃定义tabBar
在 app.json 中的 tabBar 项指定 custom 字段
在所有 tab 页的 json ⾥声明 usingComponents 项，或者在 app.json 中全局开启
在代码根⽬录下创建custom-tab-bar⽂件夹，⾥⾯放⾃定义的tabBar⽂件
编写tabBar代码
14. ⼩程序WXSS与CSS 的区别
wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚
⼩程序样式使⽤ @import 引⼊ 外联样式⽂件，地址为相对路径。
尺⼨单位为 rpx , rpx 是响应式像素，可以根据屏幕宽度进⾏⾃适应。
15. ⼩程序的双向绑定和Vue哪⾥不⼀样?
⼩程序 直接使⽤this.data.key = value 是 不能更新到视图当中的。必须使⽤ this.setData({ key ：value }) 来更新值
16. 在wepy中如何将异步API promise化
下载模块@wepy/use-promisify
npm i @wepy/use-promisify
在app.wpy中引⼊该模块
import promisify from '@wepy/use-promisify'
在app.wpy中，将promisify⽅法挂载到wepy上
wepy.use(promisify)
使⽤
quest('url地址')
17. ⼩程序怎么实现下拉刷新
两种⽅案
⽅案 ⼀ ：
通过在 app.json 中， 将 "enablePullDownRefresh": true, 开启全局下拉刷新。
或者通过在 组件 .json ， 将 "enablePullDownRefresh": true, 单组件下拉刷新。
⽅案⼆：
scroll-view ：使⽤该滚动组件 ⾃定义刷新，通过 bindscrolltoupper 属性， 当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利⽤这个属性，来实现下拉刷新功能。
18. 使⽤wepy框架初始化项⽬的步骤
下载项⽬模板
npm i standard 项⽬名(mypro)
进⼊到项⽬⽬录
cd mypro
下载依赖
npm i
运⾏项⽬
npm run dev
19. bindtap和catchtap区别
相同点： 都是点击事件
不同点： bindtap 不会阻⽌冒泡， catchtap 可以阻⽌冒泡。
20. ⼩程序怎么跟随事件传值
在 ⻚⾯标签上通过 绑定 dataset-key = value ， 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值
<button bindtap="get" data-name="测试"> 拿到传值</button>
get(e){ console.log(e.currentTarget.dataset.name) },
21. uni-app的配置⽂件、⼊⼝⽂件、主组件、页⾯管理部分
pages.json配置⽂件
main.js⼊⼝⽂件
App.vue主组件
pages页⾯管理部分
22. 如何封装⼩程序请求
封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常⽤⽅法 POST , GET , DELETE , PUT .... 最后导出这些⽅法然后新建⼀个 api.js ⽂件，导⼊封装好的⽅法，然后调取相应的⽅法，传递数据。
封装：
var app = getApp(); //获取⼩程序全局唯⼀app实例
var host = '******************'; //接⼝地址
所有权保留//POST请求
function post(url, data, success,fail)
{
request(url, postData, "POST", doSuccess, doFail);
}
//GET请求
function get(url, data, success, fail)
{
request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail)
{
wx.showLoading({ title: "正在加载中...", })
url: host + url, //请求地址
method: method, //请求⽅法
header: { //请求头
毛宁老婆
"Content-Type": "application/json;charset=UTF-8"
},
data: data, //请求参数
dataType: 'json', //返回数据格式
responseType: 'text', //响应的数据类型
success: function(res) { //成功执⾏⽅法，参数值为res.data，直接将返回的数据传⼊
wx.hideLoading();
success(res.data);
},
fail: function() { //失败执⾏⽅法 fail(); },
})
}
组件使⽤ 封装好的请求：
var http = require('../../utils/request.js'); //相对路径
var params = {//请求参数 id:this.data.userId}
http.postRequest("user/delUser", params, function(res) { console.log("修改成功！"); }, function(res) { console.log("修改失败")})恋恋笔记本台词
总结：
在src⽬录中新建⼀个utils⽬录，在⽬录中新建⼀个request.js，在request.js中⾸先获取整个⼩程序的实例来保证能调⽤wx所有⽅法，定义get和post等请求的⽅法，然后在get或者post请求的⽅法中设置wx.showToast()，然后通过wx.request来实现get或者post请求，在success中，关闭loading，然后通过回调的形式返回拿到的数据
调⽤：
⾸先要导⼊包