一个小白对微信小程序的理解

一、小程序开发框架组成介绍

首先介绍一个小程序宿主环境差异，其中iOS是基于JavaScriptCore，Android是基于X5内核，IDE是基于nwjs。

1.WXML （WeiXin Markup Language）

它是框架设计的一套标签语言，结合组件、WXS和事件系统，可以构建出页面的结构。你需要了解他的相关知识：

1）数据绑定

2）列表渲染

3）条件渲染

4）模板及引用

2.WXSS

它是一套样式语言，用于描述WXML的组件样式。（CSS也是一套样式语言，是一种样式表语言，用来描述HTML或XML文档的呈现）你需要了解它的相关知识：

1）响应式像素

2）样式

3）选择器

3.WXS（Wei Xin Script）

它是它是小程序自己的脚本语言

4.JavaScript

JavaScript是一种轻量的、解释性的、面对对象的头等函数语言，是一种动态的基于原型和多范式的脚本语言，支持面向对象、命令式和函数式的编程风格。

Nodejs中的JavaScript包括三个组成部分1）ECMAScript 2）Native 3） NPM

浏览器中的JavaScript包括三个组成部分1）ECMAScript 2）DOM 3）BOM

二、MINA框架

三、小程序运行和加载机制

1.小程序的启动分为冷启动和热启动。

四、小程序的声明周期

1.小程序的生命周期

App() 必须在 app.js 中调用，必须调用且只能调用一次，app.js中定义了一些应用的生命周期函数

1.onLaunch 初始化小程序时触发，全局只触发一次

2.onShow 小程序初始化完成或用户从后台切换到前台显示时触发

3.onHide 用户从前台切换到后台隐藏时触发

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

后台： 点击左上角关闭，或者按了设备 Home 键离开微信，并没有直接销毁，而是进入后台
前台：再次进入微信或再次打开小程序，相当于从后台进入前台。

2.小程序界面的声明周期

1）onLoad 2）onShow 3）onReady 4）onHide 5)onUnload

其中viewThread 和AppService Thread两条线程相互配合完成界面的加载

五、小程序的路由

1.初始化 --》新页面入栈

2.打开新页面 --》新页面入栈

3.页面重定向 --》当前页面出栈，新页面入栈

4.页面返回 --》页面不断出栈，直到目标返回页，新页面入栈

4.Tab切换 --》页面全部出栈，只留下新的Tab页面

5.重加载--》页面全部出栈，只留下新的页面

六、小程序的事件流

注意冒泡机制

七、小程序开发组件

建议参考微信开放平台去浏览

八、小程序开发API

主要包括八个模块

1. 网络
2. 媒体
3. 文件
4. 数据缓存
5. 位置
6. 设备
7. 界面
8. 开放接口

建议去参考微信开发平台小程序开发之API，具体了解每个部分的作用。

九、微信开放功能

1.登录授权

2.微信支付

3.模板消息

4.转发分享

5.打开APP

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

• project.config.json：项目的配置文件，例如是否开启https校验
• App.json：底部tab菜单（tab字段）、小程序所有页面的顶部背景颜色，文字颜色定义（window）、小程序所有页面路径（pages字段）
• App.js：设置一些全局性的基础数据
• App.wxss：公共样式、引入iconfont等
• Pages：里面包含具体一个个页面
• index.json: 配置当前页面标题和引入的组件等
• index.wxml：页面布局结构
• index.wxss ：页面样式表
• index.js: 页面的逻辑，请求和数据处理等

十一：请谈谈wxml与标准的html的异同？

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

十二：请谈谈WXSS和CSS的异同？

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

十三：你是怎样封装微信小程序的数据请求？

• 在根目录下创建utils目录及api.js和apiConfig.js文件
• 在apiConfig.js封装基础的get，post和put，upload等请求方法，设置请求体，带上token和异常处理等
• 在api.js中引用apiConfig.js封装好的请求方法，根据页面数据请求的urls，设置对应的方法并导出
• 在具体页面中导入

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

1. 给标签添加data-属性来传递值，然后通过e.currentTarget.datase或onload的param参数获取。注：data-名称不能有大写字母、不可以存放对象
2. 设置id的方法表示来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值
3. 在navigator中添加参数数值
4. 页面跳转或重定向时，使用url带参数传递数据
5. 使用组件模板template传递参数
6. 使用缓存传递参数
7. 使用数据库传递参数

十五：哪些方法来提高微信小程序的应用速度

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

十六：微信小程序的原理？

1. Javascript 的代码是运行在微信App中的，因此一写h5技术的应用需要微信APP提供对应的API支持
2. wxml微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html标签是无法使用的；
3. wxss具有css的大部分特性，但并不是所有都支持没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可直接使用import导入）
4.  微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通多对数据的更改来实现。
5. 小程序功能分为webview和APPservice，webview主要用来展示UI，appservice用来处理业务逻辑、数据及接口调用，他们在两个进程中进行，通过系统层JABridge实现通信，实现UI的渲染、时间处理。

十七：小程序调用后台接口遇到哪些问题？

1. 数据的大小限制，超过范围会直接导致整个小程序崩溃，除非重启小程序。
2. 小程序不可以直接渲染文章内容这类型的html文本，显示需借助插件

注：插件渲染会导致页面加载变慢，建议在后台对文章内容的html进行过滤，后台直接处理批量替换p标签div标签为view标签。然后其他的标签让插件来做。

十八：bindtap和catchtap的区别？

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

十九：简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别？

1. 打开新页面：wx.navigateTo
2. 页面的重定向：wx.redirectTo
3. 页面返回：wx.navigateBack
4. Tab切换：wx.switchTab
5. 从启动：wx.reLaunch

二十：小程序的声明周期函数

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

二十一：小程序onPageScroll方法的使用注意什么？

由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData(),尽量减少setData（）的使用频次。

二十二：小程序视图渲染结束回调？

使用setData（data，callback），在callback回调方法中添加后续操作代码。

二十三：小程序是那种事件对象的属性列表？

基础事件（baseEvent）：

1. type ：事件类型
2. timeStamp：事件生成时的时间戳
3. target：出发事件的组件的属性集合
4. currentTarget：当前组件的一些属性集合

自定义事件（CustomEvent）：

detail

触摸事件（TouchEvent）：

touches
changedTouches

二十四：小程序对wx：if 和hidden 使用的理解?

1. wx:if有更高的切换消耗
2. .hidden有更好的初始渲染消耗

因此，如果需要频繁切换的情境下，用hidden更好，如果在运行时条件不大可能改变则wx：if较好。