微信小程序 自动解决分包大小问题_2020微信小程序前端面试题汇总
[持续更新,欢迎补充]
1、文件类型
WXML——模板文件
JSON——配置/设置文件,如标题,tabbar,页面注册
WXSS——样式文件,样式可直接用import导入
JS——脚本逻辑文件,逻辑处理,网络请求
app.json——配置文件入口,整个小程序的全局配置,网络超时时间、底部tab、页面路径,window字段是小程序所有页面的顶部背景颜色、文字颜色
app.js——可以没有内容,可以在里边监听生命周期函数、声明全局变量
app.wxss——全局配置样式文件
2、数据请求怎么封装
将所有的接口放在统一的js文件中并导出(或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出)
在app.js创建封装请求数据的方法
在子页面中调用封装的方法请求数据
3、参数传值的方法
给HTML元素中添加data-*属性来传递需要的值,之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母,不可以存放对象
跳转页面时通过navigator传递需要的参数值
设置id的方法标识,通过e.currentTarget.id获取设置的id值,然后通过设置全局变量的方法来传递数值
4、提高小程序的应用速度的方法
减少默认data的大小
组件化方案,公用的如弹框等写个自定义的组件,然后调用
5、小程序的优点
无需下载
打开速度快
开发成本低
为用户提供良好的安全保障。发布有一套严格的审查流程,不能通过审查的程序无法发布上线
服务请求快
6、小程序的缺点
依托微信,不能开发后台管理功能
大小限制不能超过2M,不能打开超过5个层级的页面
7、简述小程序原理
小程序分为两个部分webview和appService,webview用来展现UI,appService用来处理业务逻辑、数据及接口调用,它们在两个进程中运行,通过系统层JSBridge实现通信,完成UI渲染、事件处理。
8、怎么解决异步请求问题
<1>不封装接口的话可以在返回成功的回调里面处理逻辑
<2>可以用Promise 来封装
<3>可以引用runtime来使用async await
<4>使用wepy或着美团的小程序框架,可以通过安装库解决
<5>在回调函数中调用下一个组件的函数
app.js
success: function (info) {
that.apirtnCallback(info)
}
index.js
onLoad: function () {
app.apirtnCallback = res => {
console.log(res)
}
}
9、webview中的页面怎么跳回小程序中
先在管理后台配置域名白名单,
然后引入jweixin-1.3.2.js(https://res.wx.qq.com/open/js/jweixin-1.3.0.js),最后
wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})
wx.miniProgram.navigateTo({url: '/path/to/page'})
10、webview的页面怎么跳转到小程序导航的页面?
小程序导航的页面可以通过switchTab,但默认情况是不会重新加载数据的。若需加载新数据,则在success属性中加入以下代码即可:
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
webview的页面,则通过
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
11、小程序和Vue写法的区别
循环遍历:小程序是wx:for="list",vue是v-for="inforin list"
调用data模型:小程序是this.data.unifo,vue是this.unifo
给模型赋值:小程序是this.setData({unifo:1}),vue是直接this.unifo=1
12、小程序的双向绑定和vue哪里不一样
小程序直接this.data的属性是不可以同步到视图的,必须调用this.setData({})
13、1px = 2rpx
14、生命周期函数
onLoad——页面加载,调一次
onShow——页面显示,每次打开页面都调用
onReady——初次渲染完成,调一次
onHide——页面隐藏,当navigateTo或底部tab切换时调用
onUnload——页面卸载,当redirectTo或navigateBack时调用
15、几种跳转,小程序内的页面跳转
wx.navigateTo——保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面(参数必须为字符串)
wx.redirectTo——关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab——跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数
wx.navigateBack——关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
wx.reLaunch——关闭所有页面,打开到应用内的某个页面
通过navigator跳转
16、如何自定义组件
先创建一个components文件夹,用来存放所有自定义组件的,目录结构依然是js,wxml,json,wxss
基本配置:
.json——进行自定义组件声明
{
"component": true
}
使用组件:
假如在index.wxml中使用这个自定义的组件,首先在index.json中进行声明
{
"usingComponents": {
"toastdemo": "/components/toastdemo/toastdemo"
}
}
接着在index.wxml中引用
然后在index.js进行配置
使用时直接执行this.toastdemo.showToast('弹框组件调用成功',2000)就可以了
17、如何实现下拉刷新
先在app.json或page.json中配置enablePullDownRefresh:true
page里用onPullDownRefresh函数,在下拉刷新时执行
在下拉函数执行时发起数据请求,请求返回后,调用wx.stopPullDownRefresh停止下拉刷新的状态
18、bindtap和catchtap的区别是什么
bindtap不会阻止冒泡事件,catchtap阻止冒泡
19、setData的回调函数
微信小程序的setData实现是和react的setData实现类似的,所以它也是一个异步函数,并且有回调函数的参数,当然平时小量数据我们可能并没有感觉到它的异步,但是为了确保逻辑的正确执行,在需要用到setData后 data里的数据的步骤,请写入setData的回调函数中,如下示例:
this.setData({
a: this.data.a++
},()=>{
})
20、小程序和小程序之间的跳转
在同一主体公众号上关联2个小程序appid,
用navigator,对应设置一些属性即可
target:miniProgram——其他小程序
target:self——当前小程序
21、小程序顶部自定义导航怎么写
原生导航栏
自定义导航栏:在app.json的window对象中定义导航的样式navigationStyle:"custom"
https://www.cnblogs.com/jiangbeixiaoqiao/p/10826291.html
22、小程序的单向数据绑定
{{属性名}},this.setData{{}}
23、MVVM
model——数据模型
view——界面,数据的展示
ViewModel——model与view通过viewmodel实现双向数据绑定
24、双向数据绑定的原理
vue通过{{}}和v-model和事件指令
mvvm,数据变化更新视图,视图变化更新数据
25、setdata和页面数据的线程机制
多线程Worker:执行多条并行线程,
https://blog.csdn.net/weixin_40440167/article/details/78386412?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
1.
https://www.jb51.net/article/165372.htm
2.
https://www.cnblogs.com/idreamo/p/10853965.html
3.
https://developers.weixin.qq.com/miniprogram/dev/api/worker/Worker.html
26、分包的操作,发布的时候是选择某个包来发吗
分包:主包添加跳转路径,分包放内容,在app.json配置subpakeages声明项目分包结构。代码包总包大小为12M,单个主包/分包大小不能超过2M。
按照功能划分的打包原则:可以按照功能的划分,拆分成几个分包,当需要用到某个功能时,才加载这个功能对应的分包;公共逻辑、组件放在主包内。
首次启动时,先下载小程序主包,显示主包内的页面;如果进入了某个分包的页面,再下载这个对应分包,下载完毕后,显示分包的页面,
总结:首先配置好打包路径,tabbar页面必须在主包内。各分包之间不能互相调用,能调用主包内的
分包加载,预分包加载
27、同时setdata很多数据,对性能有什么影响
28、import是es的还是node的,怎么使用npm install了的文件
29、npm run dev的dev是怎么设置的
30、小程序的微信支付是哪个API,参数是哪些及怎么获取的
wx.requestPayment
31、说几个常用的API
wx.login
wx.request
wx.navigateTo
wx.redirectTo
wx.switchTab
wx.naviageteBack
wx.reLaunch
等等…
32、wepy框架了解多少
33、箭头函数和普通函数有什么区别
34、小程序支持多少并发
35、OCR
36、授权验证登录怎么做,用户退出后下次进入还需要再次授权吗
wx.login获取到一个code,拿这code去请求后台得到openId, sessionKey, unionId。
调wx.getUserInfo
一次性授权:
永久授权:调取授权登录接口并把获取到的用户公开信息存入数据库
37、小程序有常用的UI库吗,是什么
WeUI,可按需下载,把下载的压缩好放入项目里,项目目录为weui-miniprogram。
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/download.html
38、节流,防抖,使用过吗
39、JS垃圾回收机制
40、验证授权是自动弹出还是触发的
按钮触发的,open-type指定为getUserInfo类型
41、用JS实现快速排列
42、跨域,怎么解决
43、小程序页面间有哪些传递数据的方法
使用全局变量实现数据传递:在app.js文件中定义全局变量globalData,将需要存储的信息存放在里面:
// app.js
App({
// 全局变量
globalData: {
userInfo: null
}
})
使用的时候,直接使用getApp()拿到存储的信息
使用wx.navigateTo和wx.redirectTo的时候,可以将部分数据放在url里,并在新页面onLoad的时候初始化
44、小程序网络请求封装
网络请求小程序提供了wx.request
https://segmentfault.com/a/1190000014789969
45、怎么解决小程序的异步请求问题
小程序支持大部分es6语法:在返回成功的回调里面处理逻辑;Promise异步
46、小程序关联微信公众号如何确定用户的唯一性
unionid是相同且唯一的
47、如何实现下拉刷新
首先在全局config中的window配置enablePullDownRefresh
48、es6的Promise是同步还是异步,Promise的抛出异常和处理异常是什么
Promise本身的同步的,是解决异步编程导致陷入回调地狱问题的。
Promise作用:解决异步回调的问题。
Promise对象:resolve表示将状态变成成功完成,reject表示将状态变成失败完成。
resolve方法执行完后再执行then方法,resolve就走then
https://www.jianshu.com/p/7b1dd9c50d2b
49、Promise和then的区别
50、es6的fetch和map的区别
51、vue双向绑定的原理是什么
52、vue的生命周期
53、vue有哪些属性
54、vue的v-router有几种模式,有什么区别
55、小程序页面见传值的方式有几种
url(跳转)
storage(wx.storageSync)
全局变量(getApp)
56、axios拦截器
57、对Promise中resolve、reject、catch的理解
https://www.jianshu.com/p/614c2a7ca7fc
58、JS闭包了解吗,及怎么使用
https://www.cnblogs.com/Renyi-Fan/p/11590231.html
https://www.cnblogs.com/itjeff/p/10106855.html
闭包3个特性:函数嵌套函数、函数内部可以引用函数外部的参数和变量、参数和变量不会被垃圾回收机制回收。
59、深浅拷贝说说是什么,及怎么实现
https://www.cnblogs.com/jiajialove/p/11288296.html
https://segmentfault.com/a/1190000017773877
60、typeof的返回值是什么,比如typeof(a)返回的是什么
typeof用来判断变量类型:
61、==和===有什么区别,比如 "1"==1,返回什么
==:相等运算符,数值相等就为true
===:严格运算符,数值和数据类型都要相等才为true
"1"==1,返回true
"1"===1,返回false
62、
63、
64、
65、
66、
微信小程序 自动解决分包大小问题_2020微信小程序前端面试题汇总相关推荐
- 微信小程序 自动解决分包大小问题_微信小程序分包加载设置
设置分包加载 微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包? 小程序项目中,有多种角色(公共页面很少),设置分包加载方便管理 整个小程序压缩后代码 ...
- 微信小程序 自动解决分包大小问题_微信小程序-分包 -每包2M
限制在2M以内.如果超过2M,可以通过分包加载实现,在app.json中配置即可, 小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个 ...
- 微信小程序 自动解决分包大小问题_一个小小的优化,能让你的小程序瘦身10%...
我司一直专注于微信小程序(以下简称小程序)开发,可以说是重仓押注在小程序上.但由于小程序的大小有严格的限制(单个分包/主包大小不能超过2M).而我们的业务又相对比较复杂,因此常常会突破小程序的大小限制 ...
- Web前端程序员必备 前端面试题汇总(1)
任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次.人力面试一般也就是考察一下个人品质以及薪资问题,而技术岗位则是考察你是否有真才实学.本文和大家分享一个难到了很多前端工程师的面试题:Qui ...
- 2020微信小程序前端面试题汇总
[持续更新,欢迎补充] 1.文件类型 WXML--模板文件 JSON--配置/设置文件,如标题,tabbar,页面注册 WXSS--样式文件,样式可直接用import导入 JS--脚本逻辑文件,逻辑处 ...
- 前端面试题(HTML、JS、Vue、React、小程序)
前端面试题 HTML && CSS HTML 1.Div 里面有个一个div ***** Q:有几种方法可以水平,垂直居中 2.doctype的作用 * 3.link标签和import ...
- 前端面试题总结(js、html、小程序、React、ES6、Vue、全栈)
前端面试题总结(js.html.小程序.React.ES6.Vue.全栈) 文档描述 本文是关注微信小程序的开发和面试问题, 由基础到困难循序渐进, 适合面试和开发小程序. 并有热点框架(vue re ...
- 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)
好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...
- 小程序---wxParse解决图片大小不适应小程序页面问题
有时候使用wxParse渲染html的图文信息时,图片会按照原图的大小显示,在小程序页面就容易出现滚动条,这样页面一点都不美观. 解决办法: 进入wxParse.js文件: 一. var recal ...
最新文章
- 除了百度,国内还有哪些无人驾驶公司?
- Hadoop生态组件-HIVE学习
- python反转单链表
- C++ const 关键字小结
- HBuilder Android真机调试
- 图解50道sql编写题
- YAML_06 playbook从上往下顺序执行,若报错,不提示,继续往下执行
- arcgispython空间插值_[转载]ARCGIS中几种空间插值简单比较
- 谷歌浏览器安装扩展插件
- Word2013出现未响应的解决方法
- win10计算机出现乱码,win10系统出现汉字乱码如何解决
- java计算机毕业设计用户行为自动化书籍推荐系统MyBatis+系统+LW文档+源码+调试部署
- 利用html做一个3D 图片动态效果
- android 获取屏幕旋转方向,android获取手机屏幕尺寸和旋转方向
- mybatis-config.xml配置文件中“http://mybatis.org/dtd/mybatis-3-config.dtd”报错
- 基金定投是什么?定投的特点?
- 小程序接入流量主、banner广告、激励广告
- 近日学习笔记:df -h和du -sh命令,查看linux版本,vbm管理工具,su命令,ssh服务升级技巧,source命令
- Keil运行密钥(pojie)软件运行时,exe程序无法运行/被删除/防火墙警告的解决方法
- 【Typora 图片居中】彻底解决Typora图片无法居中的问题
热门文章
- api-proxy-house(APH)使用说明
- java实现猜数字游戏,直到猜对猜跳出
- 股票配资炒股技巧是什么?
- 父相子绝导致父元素没有高度,坍塌问题
- 模糊控制洗衣机MATLAB模型,基于matlab的洗衣机模糊控制仿真
- 王家林最受欢迎的一站式云计算大数据和移动互联网解决方案课程 V1之Android架构设计和实现完整训练:HALFrameworkNative ServiceAndroid ServiceBes
- python输入名字显示姓和名_Python函数返回名字和姓氏中常用字母的列表
- C#/VB.NET 在PDF表格中添加条形码
- 《特征工程三部曲》之一:数据处理
- 商城系统:包含用户注册/用户登陆/商品浏览/我的购物车功能.