程序⾯试题(最新)
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}u盘文件加密
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,然后通过回调的形式返回拿到的数据
调⽤:
⾸先要导⼊包