小程序面试题_原生小程序面试题

第4节 小程序面试题 (26道)#

摘讲#

19 请谈谈原生开发小程序、wepy、mpvue 的对比

27 小程序自定义组件

01 小程序中switchTab跳转可以传参数么，如何跳转到 tabBar页面怎样实现参数传递， ***#

1. 可以通过storage来缓存数据，跳转到指定页后获取storage，并清除数据
2. reLanch
3. 全局变量 App.js  globalData

02 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别#

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

03 小程序父组件调用子组件函数  *#

-- 父传子 父组件传递参数，子组件使用 properties 接收 -- 子传父 子组件wxml：绑定事件

<view style="width:80%;height:50rpx; border:1px solid orange;" bindtap="changeP">点击，隐藏我自己</view>

子组件的js：

changeP:function(){
      console.log('子组件的函数触发了');
      const myEventDetail = {type:false};//子传父的参数设置
      const myEventOption = {};//调用时的触发事件选项
      //主动触发事件，自动绑定父组件中的自定义事件
      this.triggerEvent('myevent',myEventDetail,myEventOption);
    }

父组件wxml： 父组件js：

//接收从子组件传过来的参数
getValue:function(data){
  console.log("接收了从子组件传过来的参数",data);
  this.setData({
    type:data.detail.type
  })
},

04 小程序优化 *#

1、提高页面加载速度 2、用户行为预测 3、减少默认 data 的大小 *** 4、组件化方案 *** 控制包的大小 提升体验最直接的方法是控制小程序包的大小，基本上可以说，1M的代码包，下载耗时1秒左右。 控制包的大小的措施 压缩代码，清理无用的代码 使用外部图片 *** 采用分包策略  *** 分包预加载 独立分包（版本要求有点高） 除了上面讲的控制包的大小，对异步请求的优化也很重要。 对异步请求的优化 onLoad 阶段就可以发起请求，不用等ready 请求结果放在缓存中, 下次接着用 请求中可以先展示骨架图 先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再发起异步请求。 提升渲染性能 减少使用data，减少使用setData *** 合并setData的请求，减少通讯的次数 列表的局部更新,做分页，上拉加载更多页  *** onPageScroll，考虑使用防抖节流  *** 尽可能使用小程序组件 一共可以有10个分包 ，一个分包可以有2M

05 小程序的页面新建一个页面会添加4个文件 **#

.wxml  相当于 html页 .wxss  相当于css页 .json  小程序页面的配置 .js    小程序的javascript页面

06 wxss 微信的css样式 **#

请谈谈WXSS和CSS的异同？

都是用来描述页面的样子； WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改； WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx； WXSS 仅支持部分 CSS 选择器； WXSS 提供全局样式与局部样式 WXSS 不支持window和dom 文档流

07 钩子函数#

--7.1 App 注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
钩子函数有：
属性	类型	默认值	必填	说明	最低版本
onLaunch	function		否	生命周期回调——监听小程序初始化。	
onShow	function		否	生命周期回调——监听小程序启动或切前台。	
onHide	function		否	生命周期回调——监听小程序切后台。	
onError	function		否	错误监听函数。	
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection
	
--getApp  获取小程序的实例
--var myApp = getApp();
--myApp.globalData.全局变量名  可以获取在app.js中定义的全局变量的值
--全局变量可以跨页面传参
 
--7.2 Page(Object object)
注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
页面的钩子函数：
**onLoad	function			生命周期回调—监听页面加载   只执行一次的
**onShow	function			生命周期回调—监听页面显示   执行多次
**onReady	function			生命周期回调—监听页面初次渲染完成 只执行一次的
**onHide	function			生命周期回调—监听页面隐藏   执行多次
**onUnload	function			生命周期回调—监听页面卸载     只执行一次的
**onPullDownRefresh	function			监听用户下拉动作
**onReachBottom	function			页面上拉触底事件的处理函数
**onShareAppMessage	function			用户点击右上角转发
onPageScroll	function			页面滚动触发事件的处理函数
onResize	function			页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function			当前是 tab 页时，点击 tab 时触发

08 小程序中的事件 **#

--事件分为冒泡事件和非冒泡事件：

bindtap冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
catchtap非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

09 小程序和普通网页开发的区别 ***#

1.1

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应； 二者是分开的，分别运行在不同的线程中 1.2 网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作； 小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。 1.3 网页开发者需要面对的环境是各式各样的浏览器； 而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端 1.4 网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。 小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。 1.5 网页 标签 div  span  img..... 小程序 view  text image button template block 1.6 普通的网页 做不到 小程序可以使用 api调用 手机底层接口 比如：获取摄像头、获取通讯录、获取相册...

10 小程序和原生App的区别 ***#

2.1 小程序无需安装、无需卸载，不占内存，用完即走 2.2 小程序的开发成本低，开发速度快 2.3 学习成本低  ，js，html，css 就可以开发小程序了 2.4 运行速度比原生的app慢 2.5 微信的客户群体大，推广容易

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

小程序直接 this.data 的属性是不可以同步到视图的，必须调用： this.setData({ // 这里设置 })

12 小程序页面间有哪些传递数据的方法 *#

1.使用全局变量实现数据传递 在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面 2.路由传参使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化 3.使用本地缓存 Storage 相关 4.使用模块，创建独立的模块文件，输出对象， 模块的使用,可以使用 封装好的js的对象进行传参  ，比如： utils/util.js

module.exports = {
  formatTime: formatTime,
  ggdata:'测试utils中数据是否能跨页传递'
}

在页面中使用时，用 require引入该模块文件 例如:

const util = reqiure("../../utils/util.js");

13 微信小程序的优劣势  ***#

优势 即用即走，不用安装，省流量，省安装时间，不占用桌面 依托微信流量，天生推广传播优势 开发成本比 App 低 缺点 用户留存，即用即走是优势，也存在一些问题 入口相对传统 App 要深很多 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面

14 如何实现下拉刷新  **#

首先在全局 config 中的 window 配置 enablePullDownRefresh 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新

15 请谈谈wxml与标准的html的异同？ *#

都是用来描述页面的结构； 都由标签、属性等构成； 标签名字不一样，且小程序标签更少，单一标签更多； 多了一些 wx:if 这样的属性以及 这样的表达式 WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览 组件封装不同， WXML对组件进行了重新封装， 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。

16 你是怎么封装微信小程序的数据请求的？ *#

在根目录下创建utils目录及api.js文件和apiConfig.js文件； 在appConfig.js封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等, 封装了数据没获取过来时，旋转和加载中的提示，及数据返回后，返回promise对象，解决回调地狱问题； 在api.js中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls，设置对应的方法并导出； 在具体页面导入； 小程序支持 ES6 语法 在返回成功的回调里面处理逻辑 Promise 异步 async/await utils文件夹 http.js  封装 了 request config.js 做配置 api.js  对获取后台数据的统一管理

17 将一个页面的 wxml的数据传递到 js  ***#

1. 使用 函数进行传参， 需要在 js文件中接收 ev的值 写法是：

  saveText: function(ev){
    console.log(ev.detail.value);
  },

1. 给按钮绑定事件，需要传递 for循环中的数据的属性，比如：id

 <button class="del" bindtap="delFunc" data-id="{{item.id}}">删除</button>

在 js中接收数据：

delFunc:function(ev){
    console.log(ev);
    const id = ev.currentTarget.dataset.id;
  },

18 简述微信小程序原理？  ***#

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口； 它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现； 它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发； 功能可分为webview和appService两个部分； webview用来展现UI，appService有来处理业务逻辑、数据及接口调用； 两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。 或 微信小程序采用JavaScript、wxml、wxss三种技术进行开发，与现有前端开发的区别： JavaScript的代码是运行在微信APP中的，因此一些h5技术的应用需要微信APP提供对应的API支持； wxml微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的； wxss具有css的大部分特性，但并不是所有都支持没有详细文档（wxss的图片引入需使用外链地址，没有body，样式可直接使用import导入）。 微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。 小程序功能分为webview和APPservice，webview主要用来展示UI，appservice用来处理业务逻辑、数据及接口调用。它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染、事件处理。

19 请谈谈原生开发小程序、wepy、mpvue 的对比？  *#

使用uni-app   可以使用 vue语法开发小程序 taro可以使用react开发小程序 个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。 而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。 而如果如果团队前端强大，自己做一套框架也没问题。

20 使用webview直接加载要注意哪些事项？ **#

必须要在小程序后台使用管理员添加业务域名； h5页面跳转至小程序的脚步必须是1.3.1以上； 微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上； h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的

21 小程序调用后台接口遇到哪些问题？ **#

数据的大小限制，超过范围会直接导致整个小程序崩溃，除非重启小程序； 小程序不可以直接渲染文章内容这类型的html文本，显示需借助插件 注：插件渲染会导致页面加载变慢，建议在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签。然后其他的标签让插件来做。

22 webview中的页面怎么跳转回小程序？  ***#

• 22.1 h5跳转到小程序

• 在 h5 页面先引入 jssdk js插件  https://res.wx.qq.com/open/js/jweixin-1.6.0.js

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

//跳转到小程序导航页面

wx.miniProgram.switchTab({
	url:’/pages/index/index’
})

• 22.2  小程序跳转到h5 从小程序跳转到html5页面
  src需要在小程序后台进行配置
• 22.3 小程序怎样跳转到另一个小程序： 微信小程序如何跳转到另一个小程序？ - 鹿长生i - 博客园 "navigateToMiniProgramAppIdList": [ "目标小程序的appid" ],

23 你说你负责支付环节，那么微信支付的 流程是否可以简单说一下？  *#

临时凭证 获取 wxid 生成repayid json，返回给小程序，小程序调支付窗口。 支持成功提示 + POST回调。

24 登录 *#

a.使用wx.login获取code值 b.使用wx.request请求后台的api,把code值作为参数发送给后台 后台会根据我们传过去的code值来获取openid和session_key，后台需要调用数据库，将登录的信息进行保存，如果是第一次登录，会生成一条新的注册记录

    把微信账号登录态生成一个session id并维护在我们自己的session机制中，然后把登录成功的状态返回到小程序客户端作为已经登录成功的凭证。并且返回token值。

c.把登录成功的状态的session值保存到本地，使用wx.setStorage把token保存到本地, d.在你需要使用的地方session_id的地方调用wx.getStorage（建议你也可以封装一个方法，就可以很方便的取出你要的数据） e.登录成功后，需要  if (res.authSetting['scope.userInfo']) { //如果返回true表示 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框 如果授权成功，调用  wx.getUserInfo ，获取用户信息，保存到  this.globalData中 注意：有的网站，登录成功后，还有一个手机绑定的功能，获取该微信的手机号，使用wx.request传到后台，与相应的注册账号进行绑定

25 支付流程  *#

25.1 支付之前的准备工作 ,微信账号是企业级的，需要认证，需要申请小程序支付，并获得小程序支付的后台账号， 并且配置好后台的对公账号，打较少的钱，测试账号是否可用 25.2 首先判断是否是已经登录状态，如果不是就跳转登录 25.3 如果已经登录完，我们根据一个用户表将id和openid联系起来，对应openID的id则是用户的uid，生成token，保存缓存 25.4 调用后台 统一下单接口，获取prepay_id,获取所有的签名信息，保存缓存中 25.5 在小程序中调用后台的 order订单接口，获取订单信息，在后台创建商品订单，在订单中会保存商品的id、名称、数量...;如果订单创建成功，将订单内容保存到缓存； 25.6 如果订单创建成功，使用 wx.request调用后台的支付接口 '/pay/pre_order'，进行后台的支付流程； 在 success的回调中 ，调用  wx.requestPayment ，请求小程序的支付，在请求的参数中传递 签名信息和商品信息；如果返回 success，那么表示支付成功；如果失败则提示支付失败，并跳转到 未支付页面 【支付流程】详解微信小程序支付流程_MClink的博客-CSDN博客_微信小程序支付流程 [小程序面试题]微信小程序面试题总结 - changxin7 - 博客园

##常识类: ##1. 与后台调试接口 当后台接口开发完 ，将 模拟数据替换成真实数据时 第一种： 你的模拟数据和后台数据格式不一样，导致页面报错 需要和 后台人员沟通，看看是后台改接口还是前台改页面 第二种： 接口调用不到 ，

报301 304  400 401 403 404 405
5**(服务器端错误)

26 与ui的配合#

vant 小程序ui库