微信小程序总结

一、小程序基本概念

1、简单描述下微信小程序的相关文件类型？

答：微信小程序项目结构主要有四个文件类型,如下：

WXML （WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件。

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，

js 逻辑处理，网络请求

json 小程序设置，如页面注册，页面标题及tabBar。

app.json

必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。

app.js

必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。

app.wxss

小程序的公共样式

 

2、小程序与原生App哪个好？

答： 小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势，在服务请求延时与用户使用体验是都得到了较大幅度  的提升，使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。

区别

• 原生APP 需要下载，小程序则不需要，只需要短暂的加载时间。
• 原生APP 由于平台的不同，必须开发苹果，安卓两个版本或者采用混合开发。小程序则不需要，即时打开，即时关闭。安卓用户还可以发送到桌面，某种程度上可以替代原生APP。
• 由于微信对小程序的限制在 2M，所以原生APP 实现的功能要比小程序多。

优点:

1. 不用安装，即开即用，用完就走。省流量，省安装时间.
2. 开发成本更低
3. 服务更加快捷方便，用户的使用门槛大大降低。方便推广

缺点

1. 对于大型应用来说，无法实现原生APP 所具有的全部功能。
2. 你所能获取的用户数据将非常有限，微信给你开放的用户数据基本就是头像和昵称还有一定的好友关系。数据对你自己的重要性一定要考虑清楚!
3. 小而美，做垂直，功能复杂度有限制，如果想做成庞大的独角兽， 必须是高频刚需但复杂度又不是太高，就像支付宝一样。
4. 用完即走因为没办法多任务处理，你的产品如果不能在一定时间内完成特定场景的需求并且达成自己的目标，你就比较难做。

 

3、简述微信小程序原理？

答：

小程序的页面主要由四部分组成，分别是wxml、wxss、js、json。wxml用于构建用户界面，wxss用于编写界面的样式，js用于编写界面逻辑，json用于界面的配置。

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

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发。

 

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

答：

优势：

1. 入口众多。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、发现-小程序等五十多个的入口。这些入口有助于企业更好的获取流量，从而进行转化、变现。
2. 使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用，更加符合用户对使用方便、快捷的需求，所以小程序的用户数量不断增加。
3. 体验良好，有接近原生app的体验。在微信生态里，小程序在功能和体验上是可以秒杀掉 H5 页面的，H5 页面经常出现卡顿、延时、加载慢、权限不足等原因，而这些问题在小程序里都不会出现。
4. 微信助力，容易推广。
5. 成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一，无论是对创业者还是传统商家来说都是一大优势。

劣势：

1. 大小限制为2M，这导致无法开发大型的应用。
2. 不能直接分享到朋友圈。
3. 需要像app一样审核上架，这点相对于H5的发布要麻烦一些
4. 微信对小程序的开发也有限制

 

5、微信小程序与H5的区别？

答：

第一条是运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

第二条是开发成本的不同

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG

第三条是获取系统级权限的不同

系统级权限都可以和微信小程序无缝衔接

第四条便是应用在生产环境的运行流畅度

长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体验总是不尽人意，需要不断的对项目优化来提升用户体验。但是由于微信小程序运行环境独立

 

6、小程序的双向绑定和vue哪里不一样？

答：

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

 

7、 bindtap和catchtap的区别是什么？

答：

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

 

8、wxss和css的异同？

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

 

9、请谈谈wxml与标准的html的异同？

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

 

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

app：

属性	说明
onLaunch	生命周期回调——监听小程序初始化。
onShow	生命周期回调——监听小程序启动或切前台。
onHide	生命周期回调——监听小程序切后台。

 

页面：

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

属性	说明
onLoad	生命周期回调—监听页面加载
onShow	生命周期回调—监听页面显示
onReady	生命周期回调—监听页面初次渲染完成
onHide	生命周期回调—监听页面隐藏
onUnload	生命周期回调—监听页面卸载

component:

定义段	描述	最低版本
created	组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用 setData )
attached	组件生命周期函数-在组件实例进入页面节点树时执行)
ready	组件生命周期函数-在组件布局完成后执行)
moved	组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)
detached	组件生命周期函数-在组件实例被从页面节点树移除时执行)
lifetimes	组件生命周期声明对象，参见 组件生命周期	2.2.3
pageLifetimes	组件所在页面的生命周期声明对象，参见 组件生命周期	2.2.3

 

二、小程序开发过程中的常见问题

1、怎么解决小程序的异步请求问题？

答：

1. 在回掉函数中执行之后的操作
2. 将这些方法封装成promise

2、你使用过哪些方法，来提高微信小程序的应用速度？

答：

1. 精简代码，降低WXML结构和JS代码的复杂性；
2. 合理使用setData调用，减少setData次数和数据量
3. 必要时使用分包优化

 

三、小程序的具体操作

1、简述一下小程序的开发流程

答：

1. 申请注册微信小程序账号，注意：注册账号之后会有一个AppID，下载微信开发者工具，新建项目的时候需要填上，否则很多功能用不了，比如不能预览、不能上传代码等问题。
2. 通过微信开发工具新建项目。
3. 根据业务需求配置小程序，并进行业务代码的开发。
4. 如果涉及到发送请求，需要在小程序后台管理页面配置服务器合法域名，或者关闭域名校验（部署则必须配置合法域名，域名必须是https协议的，并且已经备案了）（这里有可能问http和https的区别）
5. 开发完成之后点击上传代码可以将小程序发不到体验版
6. 体验版确定无误后提交审核，审核通过后就可以正式上线了。

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

答：

1. 将所有的接口放在统一的js文件中并导出
2. 在app.js中创建封装请求数据的方法, 并且添加统一的配置, 使用promise对象来封装请求
3. 在子页面中调用封装的方法请求数据

 

3、如何给方法传值？

答：

通过设置标签的data-*属性，在方法中通过e.currentTarget.dataset获取到数据

 

4、常见的路由跳转有哪些，请简述区别？

答：

打开新页面：调用 API wx.navigateTo 或使用组件 < navigator open-type="navigateTo"/>

页面重定向：调用 API wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>

页面返回：调用 API wx.navigateBack 或使用组件<navigator open-type="navigateBack">或用户按左上角返回按钮

Tab 切换：调用 API wx.switchTab 或使用组件 <navigator open-type="switchTab"/> 或用户切换 Tab

重启动：调用 API wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>

 

5、如何绑定事件？

答：

事件绑定的写法和组件属性一致，以key="value"的形式，其中：

1. key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。同时bind和catch前还可以加上capture-来表示捕获阶段。
2. value是一个字符串，需要在对应的页面Page构造器中定义同名的函数，否则触发事件时在控制台会有报错信息。
   bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段。

6、如何实现事件的下拉刷新？

答：

监听用户下拉刷新事件。

1. 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
2. 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
3. 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
4. 用户执行下拉刷新的时候会触发onPullDownRefresh函数

 

7、小程序常用的接口请求

HTTPS 请求（wx.request）

上传文件（wx.uploadFile）

下载文件（wx.downloadFile)

WebSocket 通信（wx.connectSocket）

8、小程序如何进行登录

1. 通过wx.login可以获得code。
2. 调用服务端提供的code2Session，可以拿到用户的open_id（唯一id)。
   1. open_id可以和后端的账号关联，后端会根据open_id返回关联的用户信息。

 

9、小程序页面跳转如何传递参数

答：

1. 跳转的时候可以在链接后面加上?参数名=参数值
2. 跳转到的页面可以在onLoad的生命周期函数中获取到参数

 

onLoad(option){

  // 通过这个参数可以获取到地址参数

}

 

如果被问到taro框架传递参数，在taro组件的生命周期函数中都可以通过this.$router.params 获取到参数

10、微信小程序使用npm的步骤（外部依赖）

答：

1. 首先在项目根目录执行npm init
2. 根据需要安装相应的组件，这里需要注意的加上--production参数减少安装一些业务无关的包，从而减少整个小程序的大小。
3. 在微信开发工具的本地设置中打开使用npm模块
4. 在微信开发工具的工具菜单栏点击构建npm

 

11、微信小程序有哪些方式可以隐藏界面元素，有什么区别？

答：

1. wx:if
2. 组件的hidden属性

区别：wx:if会把这个元素从dom树中移除，hidden是设置display为none

 

12、小程序中如何使用组件

答：

1. 在页面的配置文件中配置usingComponents声明组件，其中key就是这个组件的名字，value是这个组件的地址。
2. 在页面上通过引用组件的名字使用组件。

 

13、小程序中如何定义组件以及组件间的通信

答：

组件和页面一样包括js、wxss、wsml、json这个几个文件，不同的是组件的构造器使用的是Component。

组件间的基本通信方式有以下几种。

• WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模板和样式 章节中介绍。
• 事件：用于子组件向父组件传递数据，可以传递任意数据。
• 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

 

14、组件的事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

var myEventDetail = {} // detail对象，提供给事件监听函数

var myEventOption = {} // 触发事件的选项

this.triggerEvent(事件名, myEventDetail, myEventOption)

触发事件的选项

选项名	类型	是否必填	默认值	描述
bubbles	Boolean	否	false	事件是否冒泡
composed	Boolean	否	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhase	Boolean	否	false	事件是否拥有捕获阶段

15、组件的生命周期：

生命周期	参数	描述	最低版本
created	无	在组件实例刚刚被创建时执行	1.6.3
attached	无	在组件实例进入页面节点树时执行	1.6.3
ready	无	在组件在视图层布局完成后执行	1.6.3
moved	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
detached	无	在组件实例被从页面节点树移除时执行	1.6.3
error	Object Error	每当组件方法抛出错误时执行	2.4.1