前端面试题-小程序面试题整理

244 阅读7分钟

1.数据请求怎么封装

l 将所有的接口放在统一的 js 文件中并导出(或者将请求地址、头、方法在一

个 js 文件里统一定义为一个常量并导出)

l 在 app.js 创建封装请求数据的方法

l 在子页面中调用封装的方法请求数据

 

2.参数传值的方法

给 HTML 元素中添加 data-*属性来传递需要的值,之后通过

e.currentTarget.dataset 或 onload 的 param 参数获取。注意不能有大写字母,

不可以存放对象

跳转页面时通过 navigator 传递需要的参数值

设置 id 的方法标识,通过 e.currentTarget.id 获取设置的 id 值,然后通过设置

全局变量的方法来传递数值

 

3.提高小程序的应用速度的方法

l 减少默认 data 的大小

l 组件化方案,公用的如弹框等写个自定义的组件,然后调用

 

4.小程序的优点

l 无需下载

l 打开速度快

l 开发成本低

l 为用户提供良好的安全保障。发布有一套严格的审查流程,不能通过审查的

程序无法发布上线

l 服务请求快

 

5.小程序的缺点

l 依托微信,不能开发后台管理功能

l 大小限制不能超过 2M,不能打开超过 5 个层级的页面

 

 

 

 

 

6.简述小程序原理

l 小程序分为两个部分 webview 和 appService,webview 用来展现 UI,

appService 用来处理业务逻辑、数据及接口调用,它们在两个进程中运行,

通过系统层 JSBridge 实现通信,完成 UI 渲染、事件处理。

 

7.怎么解决异步请求问题

l <1>不封装接口的话可以在返回成功的回调里面处理逻辑

l <2>可以用 Promise  来封装

l <3>可以引用 runtime 来使用 async await

l <4>使用 wepy 或着美团的小程序框架,可以通过安装库解决

l <5>在回调函数中调用下一个组件的函数

 

webview ****中的页面怎么跳回小程序中

先在管理后台配置域名白名单,

然后引入 weixin-1.3.2.js(res.wx.qq.com/open/js/jwe…

最后

wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})

wx.miniProgram.navigateTo({url: '/path/to/page'})

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'

})

 

7.小程序和 ****Vue ****写法的区别

循环遍历:小程序是 wx:for="list",vue 是 v-for="inforin list"

调用 data 模型:小程序是 this.data.unifo,vue 是 this.unifo

 

 

 

 

 

给模型赋值:小程序是 this.setData({unifo:1}),vue 是直接 this.unifo=1

 

8.小程序的双向绑定和 ****vue ****哪里不一样

小程序直接 this.data 的属性是不可以同步到视图的,必须调用 this.setData({})

 

1px ****= ****2rpx

 

9.生命周期函数

onLoad——页面加载,调一次

onShow——页面显示,每次打开页面都调用

onReady——初次渲染完成,调一次

onHide——页面隐藏,当 navigateTo 或底部 tab 切换时调用

onUnload——页面卸载,当 redirectTo 或 navigateBack 时调用

 

10.几种跳转,小程序内的页面跳转

wx.navigateTo——保留当前页面,跳转到应用内的某个页面。但是不能跳到

tabbar  页面(参数必须为字符串)

wx.redirectTo——关闭当前页面,跳转到应用内的某个页面。但是不允许跳转

到  tabbar  页面

wx.switchTab——跳转到  tabBar  页面,并关闭其他所有非  tabBar  页面,路

径后不能带参数

wx.navigateBack——关闭当前页面,返回上一页面或多级页面。可通过

getCurrentPages()  获取当前的页面栈,决定需要返回几层

wx.reLaunch——关闭所有页面,打开到应用内的某个页面

通过 navigator 跳转

 

11.如何自定义组件

先创建一个 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)就可以

 

12.如何实现下拉刷新

先在 app.json 或 page.json 中配置 enablePullDownRefresh:true

page 里用 onPullDownRefresh 函数,在下拉刷新时执行

在下拉函数执行时发起数据请求,请求返回后,调用 wx.stopPullDownRefresh

停止下拉刷新的状态

 

bindtap **** ****catchtap ****的区别是什么

bindtap 不会阻止冒泡事件,catchtap 阻止冒泡

 

13.setData ****的回调函数

微信小程序的 setData 实现是和 react 的 setData 实现类似的,所以它也是一

个异步函数,并且有回调函数的参数,当然平时小量数据我们可能并没有感觉到

它的异步,但是为了确保逻辑的正确执行,在需要用到 setData 后  data 里的数

据的步骤,请写入 setData 的回调函数中,如下示例:

this.setData({

a: this.data.a++

},()=>{

})

 

14.小程序和小程序之间的跳转

在同一主体公众号上关联 2 个小程序 appid,

用 navigator,对应设置一些属性即可

target:miniProgram——其他小程序

 

 

 

 

 

target:self——当前小程序

 

15.小程序顶部自定义导航怎么写

原生导航栏

自定义导航栏:在 app.json 的 window 对象中定义导航的样式

navigationStyle:"custom"

www.cnblogs.com/jiangbeixia…

 

16.小程序的单向数据绑定

{{属性名}},this.setData{{}}setdata 和页面数据的线程机制

多线程 Worker:执行多条并行线程,

blog.csdn.net/weixin_4044…_

1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.

pc_relevant.none-task

1.www.jb51.net/article/165…

2.www.cnblogs.com/idreamo/p/1…

3.developers.weixin.qq.com/miniprogram…

er.html

 

17.分包的操作,发布的时候是选择某个包来发吗

分包:主包添加跳转路径,分包放内容,在 app.json 配置 subpakeages 声明

项目分包结构。代码包总包大小为 12M,单个主包/分包大小不能超过 2M。

按照功能划分的打包原则:可以按照功能的划分,拆分成几个分包,当需要用到

某个功能时,才加载这个功能对应的分包;公共逻辑、组件放在主包内。

首次启动时,先下载小程序主包,显示主包内的页面;如果进入了某个分包的页

面,再下载这个对应分包,下载完毕后,显示分包的页面,

总结:首先配置好打包路径,tabbar 页面必须在主包内。各分包之间不能互相

调用,能调用主包内的

分包加载,预分包加载

 

18.同时 ****setdata ****很多数据,对性能有什么影响

import 是 es 的还是 node 的,怎么使用 npm install 了的文件

npm run dev 的 dev 是怎么设置的

 

 

 

 

 

19.小程序的微信支付是哪个 ****API,参数是哪些及怎么获取的

wx.requestPayment

 

20.说几个常用的 ****API

wx.login

wx.request

wx.navigateTo

wx.redirectTo

wx.switchTab

wx.naviageteBack

wx.reLaunch

等等…

 

21.授权验证登录怎么做,用户退出后下次进入还需要再次授权吗

wx.login 获取到一个 code,拿这 code 去请求后台得到 openId, sessionKey,

unionId。

调 wx.getUserInfo

一次性授权:

永久授权:调取授权登录接口并把获取到的用户公开信息存入数据库

22.小程序有常用的 UI 库吗,是什么

WeUI,可按需下载,把下载的压缩好放入项目里,项目目录为

weui-miniprogram。

developers.weixin.qq.com/miniprogram…

wnload.html

 

23.验证授权是自动弹出还是触发的

按钮触发的,open-type 指定为 getUserInfo 类型

24.小程序页面间有哪些传递数据的方法

使用全局变量实现数据传递:在 app.js 文件中定义全局变量 globalData,将需

要存储的信息存放在里面:

// app.js

 

 

App({

//  全局变量

 

 

 

 

 

globalData: {

userInfo: null

}

})

使用的时候,直接使用 getApp()拿到存储的信息

使用 wx.navigateTo 和 wx.redirectTo 的时候,可以将部分数据放在 url 里,并

在新页面 onLoad 的时候初始化

 

25.小程序网络请求封装

网络请求小程序提供了 wx.request

segmentfault.com/a/119000001…

 

26.怎么解决小程序的异步请求问题

小程序支持大部分 es6 语法:在返回成功的回调里面处理逻辑;Promise 异步

 

27.小程序关联微信公众号如何确定用户的唯一性

unionid 是相同且唯一的

 

28.如何实现下拉刷新

首先在全局 config 中的 window 配置 enablePullDownRefresh

 

30.小程序页面见传值的方式有几种

url(跳转)

storage(wx.storageSync)

全局变量(getApp)