1、什么是微信小程序

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
寄生于宿主应用，可以调用宿主应用的其他能力，也可以调用设备本身的能力。

2、微信小程序与传统的h5有什么区别

2.1 运行环境方面

web端需要面对的环境是各式各样的浏览器，PC端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对 Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。

小程序：运行于特定的软件平台（wx、支付宝、qq）。

拿微信举例，小程序开发过程中需要面对的是两大操作系统 iOS和 Android的客户端，以及还会有用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的：

运行环境	逻辑层	渲染层
iOS	JavaScriptCore	WKWebView
安卓	V8	chromium定制内核
小程序开发者工具	NWJS	Chrome WebView

将以上三个环境都兼顾到了，基本就👌 。

微信小程序是基于浏览器内核重构的内置解析器，它并不是一个完整的浏览器，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

2.2 运行机制方面

H5 的运行就是一个网页的运行，这里不过多叙述。

小程序：小程序从启动到最终被销毁，会经历很多不同的状态，小程序在不同状态下会有不同的表现。

从用户认知的角度看，广义的小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

名词	解释
热启动	如果用户已经打开过某小程序，在一定时间内再次打开该小程序，此时无需重新启动，只需将后台的小程序切换到前台即可，整个过程就是所谓的热启动。
冷启动	如果用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，就是冷启动。
销毁	当小程序进入后台一定时间，或系统资源占用过高，或者是你手动销毁，才算真正的销毁。

（从小程序生命周期的角度来看，我们一般讲的「启动」专指冷启动，热启动一般被称为后台切前台。）

2.3 系统权限

名词	解释
h5	网络通信状态、数据缓存能力、通讯录、或调用硬件的，如蓝牙功能等等一些APP有的功能，H5就没有这些系统权限，因为它重度依赖浏览器能力。
小程序	微信客户端的这些系统级权限都可以和微信小程序无缝衔接，官方宣称拥有 Native App 的流畅性能。

2.4 开发语言

名词	解释
h5	标准的 HTML、CSS、JavaScript，前端三剑客🔪
小程序	不同平台的小程序有不同语言。最常用的微信小程序，自定义的 WXML、WXSS，WXML 中全部是微信自定义的标签，WXSS、JSON 和 JS 文件中的写法都稍有限制，官方文档中都有明确的使用介绍，虽容易上手，但还是有区别的。

2.5 开发成本

名词	解释
h5	首先开发工具 ( vscode/webstorm... )，其次是开发框架 ( Vue/React...),模块化工具、UI库、各种包的选择，还要考虑兼容问题，成本还是比较高的。
小程序	不用再去考虑浏览器兼容性，拿微信小程序举例子，只需要看着文档开发就可以，小程序独立出来了很多原生APP的组件，H5需要模拟才能实现的功能，小程序里可以直接调用组件，都是封装好的。

不过小程序再简单也是需要学习成本在里面的，遇到的问题当然也不少。

比如我前两天在小程序中写了个表单，用的<ul> <li>标签，在开发web的时候这套标签组合使用率还是蛮高的，结果却发现微信小程序里是没有<ul> <li>标签的。虽然在开发的过程中并没有发现什么异常，但是去文档里面搜了一下，确实是没有的。在开微信小程序前，还是有必要去研究下文档的😂

2.6 更新机制

名词	解释
h5	基本上可以做到实时的更新，把代码推到正确的环境上部署完成后，刷新当前的页面，不出意外的话应该就可以刷新到最新版本了。
小程序	1.更新机制较h5来说较难控制。每次更新需要提交最新版本进行审核，只有审核通过才可以发布成功。而且开发者在发布新版本之后，无法立刻影响到所有现网用户，要在发布之后 24 小时之内才下发新版本信息到用户小程序。每次冷启动时，都会检查有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包进行启动，所以新版本的小程序需要等下一次冷启动才会应用上。2.需要开发者手动出发更新，在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。

名词

解释

基本上可以做到实时的更新，把代码推到正确的环境上部署完成后，刷新当前的页面，不出意外的话应该就可以刷新到最新版本了。

小程序

1.更新机制较h5来说较难控制。每次更新需要提交最新版本进行审核，只有审核通过才可以发布成功。而且开发者在发布新版本之后，无法立刻影响到所有现网用户，要在发布之后 24 小时之内才下发新版本信息到用户小程序。每次冷启动时，都会检查有无更新版本，如果发现有新版本，会异步下载新版本代码包，并同时用客户端本地包进行启动，所以新版本的小程序需要等 下一次冷启动 才会应用上。2.需要开发者手动出发更新，在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.getUpdateManager API 进行处理。在有新版本时提示用户重启小程序更新新版本。

const updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {
  // 请求完新版本信息的回调
  console.log(res.hasUpdate)
})

updateManager.onUpdateReady(function () {
  wx.showModal({
    title: '更新提示',
    content: '新版本已经准备好，是否重启应用？',
    success(res) {
      if (res.confirm) {
        // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
        updateManager.applyUpdate()
      }
    }
  })
})

updateManager.onUpdateFailed(function () {
  // 新版本下载失败
})

如果更新失败或超时，为了保障小程序的可用性，还是会使用本地版本打开。

2.7 渲染机制

名词	解释
h5	web渲染，浏览器渲染。
小程序	宿主环境是微信，宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件，提供了双线模型

那么什么是双线程模型呢？先看一张官方图：

小程序的渲染层和逻辑层分别由 2 个线程管理

渲染层：界面渲染相关的任务全都在 WebView 线程里执行，一个小程序存在多个界面，所以渲染层存在多个 WebView线程

逻辑层：一个单独的线程执行 JavaScript，在这个环境下执行的都是有关小程序业务逻辑的代码，就是通过图中的 JsCore 线程来运行 JS 脚本

这两个线程都会经过微信客户端( Native )中的 WeixinJsBridage 进行中转通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

小程序的渲染逻辑详解：

在渲染层将WXML先转换为 js 对象也就是虚拟 DOM在逻辑层将虚拟 DOM 对象生成真实DOM树，交给渲染层渲染当视图有数据需更新时，逻辑层调用小程序宿主环境提供的 setData 方法将数据从逻辑层传递到渲染层。经过对比前后差异，把差异应用在真实的 Dom 树上，渲染出正确的 UI 界面完成视图更新。

虽然小程序是通过 Native 原生渲染的，但是小程序也支持web渲染，就是 web-view 组件，在 web-view 中加载 H5 页面，而我们开发小程序时，通常会使用 hybrid 的方式(混合模式移动应用)。，根据具体情况选择部分功能用小程序原生的代码来开发，部分功能通过 web-view 加载 H5 页面来实现，Native 与 Web 渲染混合使用，实现项目最优解。

3、微信小程序为什么会越来越受欢迎/优点是什么？

不占内存,随用随走。 小程序不需要存储空间，不用下载、注册等一系列繁琐的操作，用户使用简介方便，随用随走。
成本低、利润大。 相对于APP，小程序的开发成本更低，小程序还可以结合线上线下的营销活动，争取更大的利润。
宣传应用范围广。 不管是餐饮、旅游、教培、电商，还是政务，几乎每个领域都可以通过小程序实现自己的业务。而且小程序、社群、直播等多种方式都可以进行宣传，相对于传统的实体门店宣传范围更广泛。
日活量丰富,用户基数大。 那微信小程序来说，小程序是基于微信的，微信的十亿日活量，带给小程序巨大的流量池，用转化更容易。

4、一些兼容性问题 && 好用的代码库

IOS 的 Date 构造函数不支持2018-04-26这种格式的日期，必须转换为2018/04/26这种格式，可以通过相应的方式进行处理
mp-html 小程序富文本组件

5、微信小程序web-view与H5 通信方式

5.1 需求

微信小程序 H5 混合开发就是 在一个小程序中，采用部分小程序原生页面，部分通过Webview内嵌 H5 页面，二者配合实现完整业务逻辑的方案。

5.2 为什么需要混合开发

原生无法满足（例如某团队维护SDK 只提供了WEB端jsSDK，且不维护小程序SDK）
H5可以同时适用多端（适用范围更广）
H5可以弥补小程序部分欠缺
微信生态有部分限制（包大小，设计规范等）：主要是包大小的问题

5.3 小程序WebView基本用法

定义：微信小程序组件 Web-view 定义：承载网页的容器

<web-view class="web-holder" src="{{url}}" bindload="bindload" binderror="binderror" bindmessage="bindGetMsg"></web-view>

web-view网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。支持的接口有：

接口名	说明	最低版本
wx.miniProgram.navigateTo	参数与小程序接口一致	1.6.4
wx.miniProgram.navigateBack	参数与小程序接口一致	1.6.4
wx.miniProgram.switchTab	参数与小程序接口一致	1.6.5
wx.miniProgram.reLaunch	参数与小程序接口一致	1.6.5
wx.miniProgram.redirectTo	参数与小程序接口一致	1.6.5
wx.miniProgram.postMessage	向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件	1.7.1
wx.miniProgram.getEnv	获取当前环境	1.7.1

解决方式-小程序后台配置合法域名

由于我们处于开发阶段，本地H5项目 ip 为127.0.0.1，估我们需要配置以下，临时打开

image.png

5.4 Bug & Tip

tip：网页内 iframe 的域名也需要配置到域名白名单。
tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。

image.png

tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
tip：在 iOS 中，若存在 JSSDK 接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。
tip：避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent

6、小程序与H5 通信方式

6.1 ：小程序->H5 通过 URL 拼接参数

http://127.0.0.1:8080/test?key=123

6.2.1：H5->小程序wx.miniProgram.postMessage api

实现方式：

引入js SDK

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

vue 项目需要安装依赖

npm install weixin-webview-jssdk

小程序绑定方法

<web-view  bindmessage="bindGetMsg"></web-view>

  bindGetMsg:function(res){
        console.log('从h5页面获取到的信息----->',res)
}

h5端调用wx.miniProgram.postMessage

import wx from "weixin-webview-jssdk";
wx.miniProgram.postMessage({ data: { foo: {} } });

优点：接入成本低

缺点：向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件，只能这些特定时机，基本宣布postMessage没用！因为这些时机很苛刻，不符合我们要求。反人类设计！

6.2.2：小程序-> H5 url 携带信息navigateTo、reLaunch、redirectTo

实现方式：

wx.miniProgram.navigateTo({
  url: '../h5/loading-page',
})

wx.miniProgram.navigateTo({
  url: '../h5/loading-page?type=aaa',
})

缺点：url 数据量有限，且需要打开界面

6.3 ：内存共享(无法实现)

无法实现，原因 wx.setStorage 与localStorage 隔离

localStorage.setItem('h5key','value')

wx.setStorageSync('wx-key', 'value')

6.4 长连-Websocket

Websocket 简介：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议；
建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

优点：可以实现实时通信

缺点：成本高，服务器压力大等；放弃此方式。

总结

微信并不鼓励在小程序中大范围嵌入 H5，为了避免开发者把小程序变成“浏览器”，微信对小程序与内嵌 H5 的通讯做了诸多限制
尽量使用单一方式实现，比如纯小程序原生，将h5功能移至小程序原生
原生页面与 H5 之间通过 URL 进行通信
不要尝试越过wx 限制
不得不用混合开发时，尽量做好优化，引入骨架屏等优化方式提高用户体验感
以上三种方式均未很好实现web-view 与H5双向通信

7、体验优化-骨架屏

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。骨架屏在内容还没有出现之前的页面骨架填充，以免留白。

7.1 小程序骨架屏引入方式

微信支持一键生成骨架屏

使用方法：

生成骨架屏页面index.skeleton.wxml

<template name="skeleton">
  <view class="sk-container">
    <view class="container">
      <view class="userinfo">
        <view class="userinfo-avatar">
          <open-data type="userAvatarUrl"></open-data>
        </view>
        <open-data type="userNickName"></open-data>
      </view>
      <view class="usermotto">
        <text class="user-motto sk-transparent sk-text-14-2857-765 sk-text">Hello World</text>
      </view>
    </view>
  </view>
</template>

生成骨架屏样式index.skeleton.wxss

.sk-transparent {
  color: transparent !important;
}
.sk-text-14-2857-765 {
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
  background-size: 100% 44.8000rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}

在 /pages/index/index.wxml 引入模板

<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />

在 /pages/index/index.wxss 中引入样式

@import "./index.skeleton.wxss";

小程序骨架屏官方指引

7.2 H5骨架屏引入方式

Page Skeleton是一款 webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。

支持多种加载动画
针对移动端 web 页面
支持多路由
可定制化，可以通过配置项对骨架块形状颜色进行配置，同时也可以在预览页面直接修改骨架页面源码
几乎可以零配置使用

H5 骨架屏使用方式具体见Page Skeleton GitHub

8、（重要）性能优化

参考链接：

1、mp.weixin.qq.com/s/kiLgCwfba…

TODO TODO

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

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

wxml 模板文件，是框架设计的一套标签预言，结合基础组件，事件系统，可以构建出页面的结构 wxss 样式文件，是一套样式语言，用于描述WXML的组件样式 js脚本逻辑文件。逻辑处理网络请求 json配置文件，小程序设置，如页面注册，页面标题及tabBar
app.json是整个小程序的全局配置，包括：
- pages:所有页面路径
- 网络设置（网络超时事件）
- 页面表现（页面注册）
- window：（背景色，导航样式，默认标题）
- 底部tab等
app.js 监听并处理小程序的生命周期函数，声明全局变量
app.wxss 全局配置的样式文件

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

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

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

都是用来描述页面的样子

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

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

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

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

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

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

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

15. （重要）请谈谈小程序的生命周期函数

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

16. （重要）简述微信小程序原理

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

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

它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；

功能可分为webview和APPService两个部分：

webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；
appService用来处理业务逻辑、数据及接口调用；

两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。

javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持 wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的 wxss具有css的大部分特性，但并不是所有都支持，没有详细文档

wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入。

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

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

而如果有老的 h5 项目是 vue 开发或者也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。

而如果如果团队前端强大，自己做一套框架也没问题。这时候可以说说公司的框架：vue3开发小程序。

18.（重要）那些方法来提高微信小程序的应用速度？

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

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

优势：

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

劣势：

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

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

在回调函数中调用下一个组件的函数

*/app.js*/
success:function(info){
  that.apirtnCallback(info)
}

*/index.js*/
onLoad:function(){
    app.apirtnCallback = res =>{
        console.log(res)
    }
}

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

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

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

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

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

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

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

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

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

2、page 里用 onPullDownRefresh 函数，在下拉刷新时执行

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

4、停止下拉刷新的状态

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

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

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

  
// 2.
// 首先，需要在你的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，跳转页面就不会关闭当前页面

25. bindtap和catchtap的区别？

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

26. （重要）简述小程序路由的区别

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

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

1. 遍历的时候：
小程序：wx:for="list" 

Vue：v-for="item in list"

2. 调用data模型（赋值）的时候：
小程序： this.data.item // 调用
			  this.setDate({item:1})//赋值

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

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

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

小程序的优点：

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

小程序缺点：

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

原生App优点：

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

原生App缺点：

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

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

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

30. （重要）小程序授权登录 + 支付流程

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

//1.小程序注册，要以公司的身份去注册一个小程序，才有微信支付权限

//2.绑定商户号

//3.在小程序填写合法域

//4.调用 wx.login() 获取 appid

//5.调用 wx.requestPayment
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){}//接口调用结束的回调函数（调用成功、失败都会执行）
})

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

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

32. 小程序的常见问题：

rpx：小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率屏幕本地资源无法通过wxss获取：background-image：可以使用网络图片，或者base64，或者使用标签
wx.navigateTo无法打开页面：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
tabBar设置不显示：
- 1.tabBar的数量少于2项或超过5项都不会显示。
- 2.tabBar写法错误导致不会显示。
- 3.tabBar没有写pagePath字段（程序启动后显示的第一个页面）

33. 什么是uni-app

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

34. （重要）小程序的生命周期

首先他有两个生命周期，一个是小程序的生命周期，一个是页面的生命周期：

34.1 小程序的：

onLaunch:当小程序初始化完成时，会触发 onLaunch(全局只触发一次)。

onShow:当小程序启动，或从后台进入前台显示，会触发 onShow

onHide:当小程序从前台进入后台，会触发 onHide。

onError:当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

34.2 页面的：

onLoad: 监听页面加载.

onReady:监听页面初次渲染完成.

onShow: 监听页面显示.

onHide: 监听页面隐藏.

onUnload: 监听页面卸载

35. 微信小程序用哪种响应式方案？

flex +rpx

rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

因为小程序是以微信为平台运行的，可以同时运行在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就已经足够使用了,所以它们的出场机会很少。

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

unionid 是相同且唯一的

37. 小程序网络请求封装

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

segmentfault.com/a/119000001…

38. （重要）setData是异步还是同步？

todo

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

todo

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

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

target：miniProgram——其他小程序

target：self——当前小程序

40. 自定义导航栏

todo

原生导航栏

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

navigationStyle："custom"

www.cnblogs.com/jiangbeixia…

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

todo

{{属性名}}，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

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

todo

分包加载：在小程序加载的时候不用全部把所有的页面加载完成，可以使用分包加载实现页面的按需加载。

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

项目分包结构：代码包总包大小为 12M，单个主包/分包大小不能超过 2M。（一直在变）

按照功能划分的打包原则：可以按照功能的划分，拆分成几个分包，当需要用到某个功能时，才加载这个功能对应的分包；公共逻辑、组件放在主包内。

首次启动时，先下载小程序主包，显示主包内的页面；如果进入了某个分包的页面，再下载这个对应分包，下载完毕后，显示分包的页面

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

分包加载，预分包加载

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

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

调 wx.getUserInfo

一次性授权：

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

44. 小程序有常用的 UI 库吗，是什么？

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

weui-miniprogram。

developers.weixin.qq.com/miniprogram…

wnload.html

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

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

46. ⼩程序 WXSS 与CSS 的区别

wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚⼩程序样式使⽤ @import 引⼊外联样式⽂件，地址为相对路径。尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。

47. ⼩程序运⾏机制

热启动：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们把后台打开的⼩程序切换到前台来使⽤。
冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。

48. （重要）小程序组件通信

1. 父传子

在父组件中的子组件标签绑定属性传递要传输的变量
在子组件中用properties来接收数据可以直接使用
改变组件的properties数据使用setData()

2. 子传父

在父组件的子组件标签上定义一个事件，绑定要执行的方法
在子组件中通过 this.triggerEvent来触发自定义事件，传递数据
在父组件中接收传递的数据，通过事件对象e来接收

3、获取其他组件数据

this.selectComponent(".类名")：想获取哪个组件的数据

49. ⼩程序wx:if和 hidden的区别

wx:if : 有更⾼的切换消耗。

hidden : 有更⾼的初始渲染消耗。

使⽤频繁切换使⽤ hidden , 运⾏时条件变化使⽤ wx: if

48. 小程序知识点

todo

来源：juejin.cn/post/688563…

49. 小程序插槽的使用slot

todo

50. wx.getSystemInfoSync获取windowHeight不准确

因为有可能是自定义导航栏，需要手动计算

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

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

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

51. （重要）提高微信小程序的应用速度？

a.提高页面加载速度:

首先用户在页面切换也就是路由跳转时,会有一个100m-300m的一个时间，我们可以利用这个时间段,预先发起新页面所需要的网络加载时间。
例如从A页面预加载B页面时,我们可以通过在A页面通过this.$route的方法向B页面传递参数,B页面接收到参数之后利用我们封装好的全局put take的方法,利用缓存来进行ajax请求

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

解答:

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

b.用户行为预测:

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

c.减少默认data的大小:

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

d.组件化方案:

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

52. （重要）如何提高小程序的首屏加载时间

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

包体积优化

分包加载（优先采用，大幅降低主包体积）。
图片优化（1.使用tinypng压缩图片素材； 2.服务器端支持，可采用webp格式）。
组件化开发（易维护）。
减少文件个数及冗余数据。

请求优化

关键数据尽早请求(onLoad()阶段请求,次要数据可以通过事件触发再请求)；整合请求数据，降低请求次数。
采用cdn缓存静态的接口数据（如判断用户登录状态，未登录则请求缓存接口数据），cdn稳定且就近访问速度快（针对加载总时长波动大）。
缓存请求的接口数据。

首次渲染优化

图片懒加载（节省带宽）。
setData优化（不要一次性设置过多的数据等）。
DOM渲染优化（减少DOM节点）

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

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（正式版），仅在当前小程序为开发版或体验版时此参数有效，如果当前小程序是正式版，则打开的小程序必定是正式版

54. 分享

todo

可以使用 wx.showShareMenu、wx.updateShareMenu、wx.onShareAppMessage 等 API 来实现微信小程序的分享功能。

55. 订阅

todo

56. 微信小程序支持哪些事件类型？

支持 touchstart、touchmove、touchcancel、touchend、tap、longtap、submit、reset、focus、blur 等事件类型。

57. 如何实现微信小程序的上拉加载更多功能？

需要在页面的 json 文件中设置 onReachBottomDistance 为一个正整数，则当页面距离底部达到该阈值时，会触发 page.onReachBottom 函数，在该函数中可以实现加载更多数据的逻辑。

58. 微信小程序中如何管理用户授权信息？

可以使用 wx.getSetting、wx.authorize、wx.openSetting 等 API 来管理用户的授权信息。

59. 微信小程序中如何实现页面缓存？

答案：可以使用页面的 onLoad、onUnload 生命周期函数，以及 wx.setStorageSync、wx.getStorageSync 等 API 实现页面缓存。

60. 微信小程序中如何实现 Canvas 绘图功能？

答案：可以使用 wx.createCanvasContext API 创建 Canvas 绘图上下文，并实现相应的绘图操作。

61. 微信小程序中如何使用本地缓存？

答案：可以使用 wx.setStorageSync、wx.getStorageSync、wx.removeStorageSync 等 API 操作微信小程序的本地缓存。

62. 如何实现微信小程序的音视频播放功能？

答案：可以使用 wx.createAudioContext、wx.createVideoContext 等 API 创建音视频播放上下文，并实现相应的播放控制。

63. 微信小程序中如何实现动画效果？

答案：可以使用 wx.createAnimation API 创建动画实例，然后通过相应的 API 实现动画效果。

（备忘录）微信小程序基础知识

1、什么是微信小程序

2、微信小程序与传统的h5有什么区别

2.1 运行环境方面

2.2 运行机制方面

2.3 系统权限

2.4 开发语言

2.5 开发成本

2.6 更新机制

2.7 渲染机制

3、微信小程序为什么会越来越受欢迎/优点是什么？

4、一些兼容性问题 && 好用的代码库

5、微信小程序web-view与H5 通信方式

5.1 需求

5.2 为什么需要混合开发

5.3 小程序WebView基本用法

5.4 Bug & Tip

6、小程序与H5 通信方式

6.1 ：小程序->H5 通过 URL 拼接参数

6.2.1：H5->小程序wx.miniProgram.postMessage api

6.2.2：小程序-> H5 url 携带信息navigateTo、reLaunch、redirectTo

6.3 ：内存共享(无法实现)

6.4 长连-Websocket

总结

7、体验优化-骨架屏

7.1 小程序骨架屏引入方式

7.2 H5骨架屏引入方式

8、（重要）性能优化

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

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

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

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

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

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

15. （重要）请谈谈小程序的生命周期函数

16. （重要）简述微信小程序原理

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

18.（重要）那些方法来提高微信小程序的应用速度？

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

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

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

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

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

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

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

25. bindtap和catchtap的区别？

26. （重要）简述小程序路由的区别

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

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

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

30. （重要）小程序授权登录 + 支付流程

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

32. 小程序的常见问题：

33. 什么是uni-app

34. （重要）小程序的生命周期

34.1 小程序的：

34.2 页面的：

35. 微信小程序用哪种响应式方案？

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

37. 小程序网络请求封装

38. （重要）setData是异步还是同步？

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

40. 自定义导航栏

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

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

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

44. 小程序有常用的 UI 库吗，是什么？

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

46. ⼩程序 WXSS 与CSS 的区别

47. ⼩程序运⾏机制

48. （重要）小程序组件通信

1. 父传子

2. 子传父

3、获取其他组件数据

49. ⼩程序wx:if和 hidden的区别

48. 小程序知识点

49. 小程序插槽的使用slot

50. wx.getSystemInfoSync获取windowHeight不准确

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

51. （重要）提高微信小程序的应用速度？