技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

小程序面试题

 收录于 未分类
   约 6477 字   预计阅读 13 分钟 
https://bing.ee123.net/img/rand?artid=121261067
目录

小程序面试题

1.请谈谈微信小程序主要目录和文件的作用？

  • App.js 项目的入口文件，写入全局的公共方法，像本地存储的数据；
  • App.json 底部tab, 标题栏和路等设置；
  • App.wxss 公共样式，引入iconfont等；
  • pages 里面包含一个个具体的页面；
  • index.json (配置当前页面标题和引入组件等)；
  • index.wxml (页面结构–模板文件)；
  • index.wxss (页面样式表)；
  • index.js (页面的逻辑，请求和数据处理等)；
  • project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
// App.json
{
  "pages": ["pages/index/index", "pages/logs/logs"],
    // 标题栏
  "window": {
    // 导航栏背景颜色
    "navigationBarBackgroundColor": "#ffffff",
    // 导航栏标题、状态栏颜色
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

// App.js
App({
  onPageNotFound(res) {
    wx.redirectTo({
      url: 'pages/...'
    }) // 如果是 tabbar 页面，请使用 wx.switchTab
  },
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide (options) {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

2 请谈谈wxml与标准的html的异同？

相同 :

  • 两者都是页面渲染语言，用于描述网页的结构和内容
  • 两者都是用标签来组织语言
  • 两者都支持是用css样式表来控制页面的外观和布局
  • 两者都支持事件处理，可以通过绑定事件来响应用户的操作

不同:

  • 标签不同，wxml的标签,;html的标签,
  • 属性不同，wxml的wx:if,wx:for,html没有这些属性
  • 样式不同：wxml中样式是用wxss定义，html用css定义
  • 调用data模型：小程序是this.data.unifo，vue是this.unifo
  • WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览

3.请谈谈WXSS和CSS的异同？

相同:

  • 两者都用于定义页面元素的样式
  • 两者都支持选择器，属性，值等基本语法
  • 都是用来描述页面的样子；

不同:

  • 单位不同：css像素px,百分比。wxss用rpx，rpx会根据屏幕宽度进行自使用调整，适应不同设备的屏幕
  • 选择器：wxss不支持::after伪元素

4.你是怎么封装微信小程序的数据请求的？

在根目录下创建api目录及index.js文件和request.js文件；

https://i-blog.csdnimg.cn/blog_migrate/2c1dadc661e281b6a578e39b865a0a27.png

2.在request.js 封装基础的get, post 和 put，delete方法和一个请求公共的方法，创建函数设置请求体，带上token和异常处理等；

https://i-blog.csdnimg.cn/blog_migrate/867008aa8b9535799a7b68e3fc076399.png https://i-blog.csdnimg.cn/blog_migrate/4252926091cc35de17364663ea1645e0.png

根据页面数据请求的需要, 导出增删改查4个方法

https://i-blog.csdnimg.cn/blog_migrate/ad9b6a637afea8644988529bce1382e7.png

4 .index.js————–>是写请求接口的,引入4个方法,并根据不同接口使用不同函数

https://i-blog.csdnimg.cn/blog_migrate/05aedbf5eeb163538614f822aba73a0c.png

在具体的页面中导入；

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

  • 全局数据传递：可以将数据存储在APP实例中 globalData属性中，在目标页面中使用getApp().gloabalData获取数据
// app.js

App({
     // 全局变量
  globalData: {
    name: null
  }
})

//pageA.js
···
getApp().globalData.name = "jake";


//pageB.js
···
this.setData({
  userName: getApp().globalData.name
});
  • url传参：/pages/index/index?id=1&name=abc，在目标页面onLoad生命周期中可以通过options参数获取传递的值
//pageA.js

// Navigate
wx.navigateTo({
  url: '../pageB/pageB?name=jake&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageB/pageB?name=jake&gender=male',
})

// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender);
    this.setData({
      option: option
    });
  }
})
  • Storage存储：可以用 wx.setStorageSync 或 wx.setStorage方法将数据存储到本地缓存中，在目标页面中使用wx.getStorageSync和wx.getStorage方法获取数据

注意：

  • Storage每次存入会覆盖掉原来该 key 对应的内容。
  • 如果用户主动删除小程序或因存储空间原因被系统清理，Storage中数据将被清除。
  • 单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
//pageA.js
···
wx.setStorageSync('sessionId', "session");


//pageB.js
···
var sessionId = wx.getStorageSync('sessionId');

6.请谈谈小程序的双向绑定和vue的异同？

相同点：

  • 都是实现数据的双向绑定，即数据的改变可以自动更新到视图，视图的改变也可以自动更新到数据
  • 都是通过数据劫持的方式实现的，即通过监听数据的变化来更新视图

不同点：

  • 小程序的双向绑定是基于数据绑定和事件绑定实现的，而vue的双向绑定基于数据劫持和发布/订阅模式实现的
  • 小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！

7 请谈谈小程序的生命周期函数？

微信小程序的生命周期包括App、Page和Component三个部分，分别对应着小程序、页面和组件的生命周期

App生命周期主要包括onLaunch和onShow两个函数，分别在小程序初始化时和进入前台时触发。

  • onLaunch(options)：小程序初始化时调用，可以获取打开小程序的场景值、query参数等。
  • onShow(options)：小程序启动或从后台进入前台时调用，可以获取打开小程序的场景值、query参数等。

Page生命周期

Page生命周期主要包括onLoad、onShow、onReady、onHide和onUnload五个函数，分别在页面加载、页面显示、页面初次渲染完成、页面隐藏和页面卸载时触发。

  • onLoad(options)：页面加载时调用，可以获取上个页面传递的参数等。
  • onShow()：页面显示时调用。
  • onReady()：页面初次渲染完成时调用。
  • onHide()：页面隐藏时调用。
  • onUnload()：页面卸载时调用。

Component生命周期主要包括created、attached、ready、moved和detached五个函数，分别在组件创建、组件添加到页面、组件初次渲染完成、组件移动和组件从页面中移除时触发。

  • created()：组件实例刚刚被创建时调用，可以在这个函数中定义组件的数据和方法等。
  • attached()：组件被添加到页面中时调用。
  • ready()：组件初次渲染完成时调用。
  • moved()：组件被移动到另外一个节点时调用。
  • detached()：组件被从页面中移除时调用。

8 简述微信小程序原理？

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；

它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；

9.小程序视图渲染结束回调？

使用setData(data, callback)，在callback回调方法中添加后续操作代码

10.this.setData

赋值用的,会让页面重新渲染,如果直接用data里赋值,页面不会重新渲染,与vue的不同之处

11.方法传值

问题:点击方法怎么获得传的值?

可以data-参数名 = “传的值”    wxml

e.currentTarget.dataset.属性值 js

接收值：options.属性值

12.小程序2点间距离

获取当前用的地理位置   wx.getlocal

用wx.getlocal拿到经纬度,再用后台返的经纬度,再在前端方法计算2点间距离

PC端

1.引入腾讯地图js文件

2.页面创建一个节点(div)

3.初始化新建地图实例的一个方法

搜索:通过调用腾讯地图的API实现

13.json:小程序页面的配置

如：页面标题,颜色什么的都可以在这里面设置

主要文件:

  • app.json   全局配置  tarBar
  • app.js       入口文件必须有的

14.小程序跳转方式有几种?

  • wx.navigateTo:  保留当前页面，跳转到应用内的某个页面
  • wx.redirectTo：关闭当前页面，跳转到应用内的某个页面
  • wx:relanuch:关闭所有页面，打开到应用内的某个页面
  • wx.navigateBack:关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
  • wx:swichTab:跳转到 tabBar 页面
  • 前3个不能跳转到tab页

15.如何提高微信小程序的应用速度？

[微信小程序之提高应用速度小技巧 - 程序员大本营

https://csdnimg.cn/release/blog_editor_html/release2.3.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P1C7 “微信小程序之提高应用速度小技巧 - 程序员大本营”)

  1. 提高页面加载速度
  2. 用户行为预测
  3. 组件化方案
  4. 减少默认data的大小

16.组件间通信

[小程序中父子组件间的通信与事件 - 与f - 博客园

https://csdnimg.cn/release/blog_editor_html/release2.3.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=P1C7 “小程序中父子组件间的通信与事件 - 与f - 博客园”)

https://i-blog.csdnimg.cn/blog_migrate/a4e2f6cac6fd1ad967f893352c699e69.png

https://i-blog.csdnimg.cn/blog_migrate/85a47042bb21485cb7ccda1cd17fde8a.png

16.前端分页–分页

https://i-blog.csdnimg.cn/blog_migrate/951bd9d26116827a34830a4250c343cb.png

17.组件传值

1.父组件引用子组件

父组件json文件中(局部的)

 "usingComponets":{

"customerSelector":"/compnents/customerSelector/index"

    }

子组件中json

{
  "component": true
}

2.父组件中给组件传的值

<empty-image tableList="{{tableList.list}}"></empty-image>

3.子组件接收

// 无数据
Component({
  properties: {
    tableList: {
      type: Array,
      value: []
    }
  }
})

2 ：子组件传值给父组件

子组件在需要传值时，使用triggerEvent传给父组件一个事件( myevent ），并传递想要给父组件的值( sonParam )

https://i-blog.csdnimg.cn/blog_migrate/5b349b0d7770a91847bc00f13c885916.png

在父组件中，子组件的引用处，通过这个myevent事件绑定一个方法( onMyEvent )

https://i-blog.csdnimg.cn/blog_migrate/f440d0475e9ac6777af084f0295a851e.png

在父组件的js中，定义这个方法onMyEvent，在这个方法内就可以获取到子组件传递过来的值了

https://i-blog.csdnimg.cn/blog_migrate/d98df3c2ba6a83ff4c88799f8b867380.png

18.app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？

  • pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
  • window字段 —— 小程序所有页面的顶部背景颜色（“navigationBarBackgroundColor”: “#fff””,），文字颜色定义在这里的
  • tab字段—小程序全局顶部或底部tab

19.小程序的wxss和css有哪些不一样的地方？ （不用看）

新像素单位 rpx样式可直接使用import导入

1、尺寸单位 rpx

rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

2、使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** index.wxss **/

@import './base.wxss';

.container{
    color: red;
}

20.小程序有哪些参数传值的方法？

1.给HTML元素添加data-属性来传递我们需要的值，然后通过e.currentTarget.dataset或onload的param参数获取。但data-名称不能有大写字母和不可以存放对象；

2.设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值；

3.在navigator中添加参数传值（？传的值的名称=所传的值在onLoad(option)用option来接收并获取）

21.小程序简单介绍下三种事件对象的属性列表？

  • 基础事件（BaseEvent）
  1. type: 事件类型
  2. timeStamp：事件生成时的时间戳
  3. target：触发事件的组件的属性值集合
  4. currentTarget：当前组件的一些属性集合
  • 自定义事件（CustomEvent）
  1. detail
  • 触摸事件（TouchEvent）
  1. touches
  2. changedTouches

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

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。

23.微信小程序如何实现下拉刷新？

用view代替scroll-view，设置onPullDownRefresh函数实现，在json文件中设为enablePullDownRefresh:true

  • 先在app.json或page.json中配置enablePullDownRefresh:true
  • page里用onPullDownRefresh函数，在下拉刷新时执行
  • 在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

24.bindtap和catchtap的区别？

  • bind事件绑定不会阻止冒泡事件向上冒泡
  • catch事件绑定可以阻止冒泡事件向上冒泡

25.rpx:小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率的屏幕。

26.页面栈及路由跳转

路由是由一个栈维护的，这个页面栈的长度是有限的。小程序页面栈存放最多10个。

27.tabBar设置不显示

  1. tabBar的数量少于2项或超过5项都不会显示；
  2. tabBar写法错误导致不显示；

28.微信小程序登录流程

1.调用wx.login()获取临时登录凭证code,并回传到开发者服务器

微信小程序授权登录流程如下：

用户点击小程序页面中的授权登录按钮。

小程序调用wx.login API 获取用户的临时登录凭证code。

小程序将code发送到开发者服务器。

开发者服务器调用微信登录凭证校验API（https://api.weixin.qq.com/sns/jscode2session）获取openid和session_key。

开发者服务器生成自己的登录态（例如token），并将token、openid等信息保存到自己的数据库中。

开发者服务器将token返回给小程序。

小程序使用token发起后续的业务请求。

需要注意的是，小程序只能获取到用户的openid等基本信息，不能获取到用户的其他信息，如昵称、头像等。如果需要获取其他信息，需要引导用户进行微信公众号授权。

另外，为了保证用户信息的安全性，开发者在实现小程序授权登录功能时，需要注意以下几点：

不能直接将用户的openid等信息保存在小程序端，必须将其保存在开发者服务器上。

需要对用户的信息进行加密，保证其不被篡改。

需要设置有效期，定期更新token，避免被恶意利用。

29.授权

wx.getSetting

30.微信小程序与H5的区别？

  • 1.运行环境不同（小程序在微信运行，h5在浏览器运行）；
  • 2.开发成本不同（h5需要兼容不同的浏览器）；
  • 3.获取系统权限不同（系统级权限可以和小程序无缝衔接）；
  • 4.应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）；

31.微信小程序开发文档界面都有哪些操作，列举几项？

  • 搜索框：可以输入关键字搜索相关内容。
  • 导航栏：提供了分类导航，方便查找对应的开发文档。
  • 侧边栏：提供了开发者工具、API、组件等相关链接。
  • 示例代码：提供了丰富的示例代码，帮助开发者更快地上手。

32.小程序的发布流程（开发流程）

  1. 注册微信小程序账号
  2. 获取微信小程序的 AppID
  3. 下载微信小程序开发者工具
  4. 创建demo项目
  5. 去微信公众平台配置域名
  6. 手机预览
  7. 代码上传
  8. 提交审核
  9. 小程序发布

33.简述小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理。

34.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'  
})

36.简述微信小程序的优劣势？

优点：容易上手，基础组件库比较全，开发文档比较完善，支持插件开发

劣势：

  • 限制较多：页面大小不能超过1M，不能打开超过5个层级的页面
  • 依托与微信，无法开发后台管理功能

37.微信小程序调用后台接口遇到那些问题？

数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；

38.微信小程序怎么进行网络请求？

微信小程序提供了一些API来进行网络请求，常用的API包括：

  • wx.request(Object object)：发起 HTTPS 网络请求。
  • wx.uploadFile(Object object)：上传文件到服务器。
  • wx.downloadFile(Object object)：下载文件到本地。

这些API都是异步操作，需要传入一个 Object 类型的参数，其中包括请求的 URL、请求的参数、请求的方法、请求的头部信息等。具体可以参考官方文档。

wx.request({
  url: 'https://www.example.com/api',
  method: 'GET',
  data: {
    key1: value1,
    key2: value2
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  },
  fail(res) {
    console.log('请求失败', res)
  }
})

在请求成功后，服务器返回的数据可以通过 success 回调函数中的 res 参数获取。在请求失败时，可以通过 fail 回调函数中的 res 参数获取失败原因。

37.小程序使用webview直接加载要注意那些事项？ (不用看）

必须要在小程序后台使用管理员添加业务域名

h5页面跳转至小程序的脚步必须是1.3.1以上

微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上

h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的

如何自定义头部？

如何自定义底部？

更新于 2021-11-11
 微信小程序, 小程序, 前端
返回 | 主页