0.简述微信小程序原理？

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

微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。

WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

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

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

原文链接：blog.csdn.net/weixin_4405…

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

project.config.json：项目配置文件，用的最多的就是配置是否开启https校验
App.js：设置一些全局的基础数据等
App.json：底部tab，标题栏和路由等设置
App.wxss：公共样式，引入iconfont等
pages：里面包含一个个具体的页面
index.json：配置当前页面标题和引入组件
index.wxml：页面结构
index.wxss：页面样式表
index.js：页面的逻辑，请求和数据处理

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

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

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

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

4.分析微信小程序的优劣势？

优势：

容易上手，基础组件库比较全，基本不需要考虑兼容问题
开发文档比较完善，开发社区比较活跃，支持插件式开发
良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
开发成本比APP要低
为用户提供良好的保障（小程序发布，严格是审查流程）

劣势：

限制较多，页面大小不能超过1M，不能打开超过5个层级的页面
样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
依托与微信，无法开发后台管理功能
后台调试麻烦，因为api接口必须https请求且公网地址
真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢\

5.微信小程序和H5的区别？

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

6.小程序和Vue写法的区别？

遍历的时候：小程序wx:for="list",而Vue是v-for="item in list" 调用data模型（赋值）的时候：

小程序：this.data.item // 调用，this.setDate({item:1})//赋值

Vue：this.item //调用，this.item=1 //赋值

7.小程序与原生App那个好？

各有各自的优点，都又有缺点

小程序的优点：

基于微信平台开发，享受微信自带的流量，这个优点最大
无需安装，只要打开微信就能用，不占手机内存，体验好
开发周期段，一般最多一个月就可以上线完成
开发所需的资金少，所需资金是开发原生APP的一半不到
小程序名称是唯一的，在微信的搜索里权重很高
容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题
基本不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序
发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布
开发文档完善，社区活跃
支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用

缺点：

局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能
不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制
后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦
前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致
js引用只能使用绝对路径，不能操作DOM

原生App优点

原生的相应速度快
对于有无网络操作时，譬如离线操作基本选用原生开发
需要调用系统硬件的功能（摄像头，拨号，短信蓝牙..）
在无网络或者弱网情况下体验好

原生App缺点

开发周期长，开发成本高，需要下载

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

参考：www.cnblogs.com/ssrstm/p/68…

注册微信小程序账号
获取微信小程序的AppID
下载微信小程序开发者工具
创建demo项目
去微信公众号配置域名
手机浏览
代码上传
提交审核
小程序发布\

9.小程序还有那些功能？

客服功能，录音，视频，音频，地图，定位，拍照，动画，canvas

常见问题： rpx：

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

本地资源无法通过wxss获取：

background-image：可以使用网络图片，或者base64，或者使用标签

wx.navigateTo无法打开页面：

一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo

tabBar设置不显示：

1.tabBar的数量少于2项或超过5项都不会显示。
2.tabBar写法错误导致不会显示。
3.tabBar没有写pagePath字段（程序启动后显示的第一个页面）

10.提高微信小程序的应用速度？

a.提高页面加载速度:

首先用户在页面切换也就是路由跳转时,会有一个100m-300m的一个时间，我们可以利用这个时间段,预先发起新页面所需要的网络加载时间。

2.例如从A页面预加载B页面时,我们可以通过在A页面通过this.$route的方法向B页面传递参数,B页面接收到参数之后利用我们封装好的全局put take的方法,利用缓存来进行ajax请求

疑难:为什么我在A页面时会访问到B页面的实例呢？此时B页面不是未创建吗?

解答: 1.首先根据微信小程序的机制来说,在我们小程序启动时,会把所有的page()方法内的object存在一个队列中,每次页面访问时,就会创建一个新的对象实例,简单理解就是深拷贝。
2.在我们的A页面进行点击响应事件的时候,B页面实例此时未加载,所以此时调用onload方法(onNavigate)方法时,此时this指向还是在page对象的原型,也就是小程序启动时刚创建时的那个实例。
3.而马上被创建好的B页面此时又是另外一个obeject对象,此时this指向不是同一个对象,不能把我们临时的数据存储住,因此我们可以封装一个全局的put take缓存方法进行存储。
4.为了通用性,我们将所有公共的方法比如put take route都定义在了page这个基类之中,基类同时还保存了所有的list页面,这样就可以根据需求来通过onNavigate方法预加载我们的页面了。哪个页面有onNavigate方法就执行预加载,没有则不执行。

b.用户行为预测:

1.什么是用户行为预测,就是根据用户可能点击某一个界面的机率来预先加载数据,从而实现界面秒开的效果,提高用户的浏览体验。
2.与提高页面加载速度原理大致相同,我们需要给page对象拓展一个方法,在我们每次预载的页面之中调用这个方法,与上一个方法不同的是,本方法的临时数据会储存在storge之中,因为用户有可能不点击这个页面,而把数据全部存储在全局变量中,会影响小程序本身的内存,小程序本身一个也就支持11M的数据。

c.减少默认data的大小:

从一个面跳转到下一个页面时,此时我们跳转后的页面会深拷贝一个page对象,所以我们为了提高性能理应减少data的体积,比如data有100个属性时,就会有一个150ms的延迟。

d.组件化方案:

我们将一些公共的组件一个封装,在我们需要的时候来进行一个组件的调用,提高复用性,避免内存的重复占用。

11.小程序页面之间有哪些（传值）传递数据的方法？

使用全局遍历实现数据传递
页面跳转或重定向时，使用url带参数传递数据
使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递参数
给html元素添加data-属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值

12.小程序的生命周期函数

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

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

在根目录下创建util目录及api.js文件和apiConfig.js文件
在apiConfig.js封装基础的get，post和put，upload等请求方法，设置请求体，带上token和异常处理等
在api中引入apiConfig.js封装好的请求方法.根据页面数据请求的urls，设置对应的方法并导出
在具体的页面中导入或将所有的接口放在统一的js文件中并导出
在app.js中创建封装请求数据的方法
在子页面中调用封装的请求数据

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

大体相同，但小程序之间this.data的属性是不可以同步到视图的，必须调用this.setData()方法

15.请谈谈原生开发小程序，wepy，mpvue的对比？

个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。

而如果有老的 h5 项目是 vue 开发或者也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。而如果如果团队前端强大，自己做一套框架也没问题。

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

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

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

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

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

用view代替scroll-view，设置onPullDownRefresh函数实现

19.webview中的页面怎么跳转回小程序?

wx.miniProgram.navigateTo({
    url:'pages/login/login'+'$params'
})
//跳转到小程序导航页面
wx.miniProgram.switchTab({
    url:'/pages/index/index'
})

首先，需要在你的html页面中引用一个js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
//然后为你的按钮标签注册一个点击事件
$(".kaiqi").click(function(){
        wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})
});
// 这里的redirectTo跟小程序的wx.redirectTo()跳转页面是一样的，会关闭当前跳转到页面，换成navigateTo，跳转页面就不会关闭当前页面

20.bindtap和catchtap的区别？

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

21.如何提高小程序的首屏加载时间

提前请求：异步数据数据请求不需要等待页面渲染完成、
利用缓存：利用 storage API 对异步请求数据进行缓存，二次启动时先利用缓存数据渲染页面，再进行后台更新
避免白屏：先展示页面骨架和基础内容
及时反馈：及时地对需要用户等待的交互操作给出反馈，避免用户以为小程序没有响应
性能优化：避免不当使用 setdata 和 onpagescroll

22.小程序授权登录流程

（授权，微信登录获取code，微信登录，获取 iv , encryptedData 传到服务器后台，如果没有注册，需要注册。）

23.小程序支付如何实现？

小程序注册，要以公司的身份去注册一个小程序，才有微信支付权限
绑定商户号
在小程序填写合法域
调用wx.login()获取appid
调用

wx.requestPayment(
{
    'timeStamp': '',//时间戳从1970年1月1日00:00:00至今的秒数,即当前的时间
    'nonceStr': '',//随机字符串，长度为32个字符以下。
    'package': '',//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*
    'signType': 'MD5',//签名类型，默认为MD5，支持HMAC-SHA256和MD5。注意此处需与统一下单的签名类型一致
    'paySign': '',//签名,具体签名方案参见微信公众号支付帮助文档;
    'success':function(res){},//成功回调
    'fail':function(res){},//失败
    'complete':function(res){}//接口调用结束的回调函数（调用成功、失败都会执行）
})

24.使用webview直接加载要注意那些事项？

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

25.怎么解决微信小程序的异步请求问题？

微信小程序为了提高用户体验，提供的api大部分都是异步操作，除了数据缓存操作里面有一些同步操作。是提高了用户体验，但是在开发的时候，

就有点坑了，例如我要写一个公共方法，发起网络请求，去后台去一些数据，成功之后，再做一些操作，但是由于wx.request是异步请求，就会

导致，网络请求还没结束，就会执行后面的代码，从而引起异常，怎么解决这种异步导致的问题呢，

在ES6，有了Promise来解决异步问题。

这是ES6的语法，它解决了我们的问题。可能现在看起来，不如回调嵌套方便，这是因为我演示的代码很简单，很基础。当你的代码量很大的时候，promise绝对要优于回调嵌套的。而且可以对promise进行一些封装，更好的解决实际需求。

其实promise并不是最优雅的解决异步的方法。

在ES7中有了 async await 可以更加优雅的解决异步问题，并且是目前这个问题领域中的最优解。

但是现在的微信小程序的客户端目前是完全支持Promise的，并不直接支持async await，如果想用async await，还需要npm 依赖，分离js文件，require调用。

原文链接：blog.csdn.net/m0_46171043…

26.如何自定义组件（弹窗）

（1）先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss

（2）基本配置

json——进行自定义组件声明

{
  "component": true
}

（3）使用组件

假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明。

{  
  "usingComponents": {  
      "toastdemo": "/components/toastdemo/toastdemo"  
  }  
}

（4）接着在index.wxml中引用

（5）然后在index.js进行配置

（6）使用时直接执行this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了

27.小程序内的页面跳转

wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）
wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch——关闭所有页面，打开到应用内的某个页面

28.请简述你经常使用的小程序的组件

View icon text image swiper navigator input button map

29.小程序如何显示用户头像与用户名

传统接口 wx.getuserinfo 目前可以用，需要用户授权，使用时会有官方发提示，这个方法需要升级

最新方法：open-data 标签，使用这个标签可以不用用户授权直接获取头像和用户名，可以在 button 中将 opendata 作为属性写进去，写个点击事件就直接获取到了

30 小程序适配方案

因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。

rpx适配 rpx是小程序中的尺寸单位，它有以下特征：

小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px 由上可知，在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。

vw、vh适配 vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh 所以，我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。

31.微信小程序实现跳转到另外一个小程序的方法

1,首先需要在当前小程序app.json中定义：需要跳转的小程序的app-id

app.josn

 "navigateToMiniProgramAppIdList": [
    "*******" //appid
  ],

第一种方法：wx.navigateToMiniProgram（打开另一个小程序）

wx.navigateToMiniProgram({
  appId: '**********',
  path: 'page/index/index?id=123', //路径和携带的参数
  extraData: {
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  },
  fail(res){
    // 打开失败
  },
  complete(res){
    // 调用结束  不管成功还是失败都执行
  }
  })

appId：跳转到的小程序app-id
path：打开的页面路径，如果为空则打开首页，path 中 ? 后面的部分会成为 query，在小程序的 App.onLaunch、App.onShow 和 Page.onLoad的回调函数中获取query数据
extraData：需要传递给目标小程序的数据，目标小程序可在 App.onLaunch、App.onShow 中获取到这份数据
envVersion：要打开的小程序版本，有效值: develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效，如果当前小程序是正式版，则打开的小程序必定是正式版

第二种方法：navigator（跳转）

<navigator
class="btn" 
target="miniProgram" 
open-type="navigate" 
app-id="wx213c5ba6740c814d"
version="trial">
点击跳转另一个小程序
</navigator>

target：在哪个目标上发生跳转，默认当前小程序，有效值: self（当前小程序），miniProgram（其它小程序）
open-type：跳转方式 “avigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能”
app-id：跳转到的小程序app-id
version：要打开的小程序版本，有效值: develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效，如果当前小程序是正式版，则打开的小程序必定是正式版

说一下对 websocked 的理解

Websocked 是一种双向通信协议，在建立连接后，websocked 服务器和浏览器都能主动向对方发送或者接收数据，websocked 需要类似于 tcp 的客户端和服务器通过握手连接，连接成功后才能互相通信

企业中的项目流程

1.WEB 前端项目开发流程

项目需求分析

这个环节是由项目经理完成，项目经理首先和客户进行交流，了解客户的需求，然后分析项目的可行性，如果项目可以被实现，项目经理写出项目需求文档交给设计师完成后续的开发。

页面设计/项目选型

这个环节主要是 UI 设计师参与，UI 设计师根据产品需求分析文档，对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。并且确定使用技术

编码

这个部分由程序员来实现。（程序员分为 WEB 前端开发工程师和后台开发工程师。前端开发人员主要做我们可以在网页上看的见的页面，后台就做一些我们看不见的管理系统以及功能的实现。）程序员根据 UI 设计师的设计，用编码来完成整个项目的各个功能。

测试

这部分由程序测试员来完成。程序测试员主要就是测试寻找程序还存在的 bug，一般来说刚编码完成的程序都是存在问题的，就需要测试人员反复不断的测试并将存在问题的测试结果交给编码人员进行 bug 的修复。等到几乎所有 bug 修复完成，这个项目差不多就可以上线了。

维护

程序的维护是整个项目的最后一个阶段，但也是耗时最多，成本最高最高的的一个阶段。程序的维护包括程序上线后后续 bug 的修复和程序版本的更新。

更换接口域名

就是在开发的时候调用的后台接口是后台测试的接口项目上线后要把请求的接口替换成上线的域名

经常使用的工具

代码管理平台：github 码云
需求发布平台：钉钉任务，禅道
Ui 交互平台：蓝湖
产品原型工具：axure
企业邮箱：阿里腾讯企业邮箱
后台语言：java php python（西安不多）
*2 大公司和小公司开发的区别*

大型外包公司更加流程化，人员多，沟通少，项目交付后不需要自己维护，采用瀑布开发模式（以文档为主）

小型公司：人少需求经常改变沟通方便采用敏捷开发（快速推出 v1 版本，之后迭代）

2.前后台分离怎么测试？

1.你们后端开发用的什么？

2.移动端如何刷新页面？

3.项目初始化构建流程

4.项目中自己觉得骄傲的地方？

5.说说自己的缺点

6.热部署是什么？

7.用户有多少

8 怎么调用接口（是怎么跟后台沟通的）

9.单元格测试是怎么做的

10.开发环境，测试环境，上线环境的环境变量你们在开发中是如何

处理的

原文链接：blog.csdn.net/weixin_4425… 原文链接：blog.csdn.net/liyi1009365…

原文链接：blog.csdn.net/qq_35321405…

原文链接：blog.csdn.net/yizhangzzzz…

原文链接：blog.csdn.net/weixin_5315…

2022 小程序面试题