小程序开发知识点

浅浅的花香味﹌ 2022-04-25 00:32 286阅读 0赞

> **小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大佬公司都在使用。**

1、浏览器、服务器、小程序之间模块组成  
（1）浏览器：ES、DOM、BOM  
（2）服务器：ES、native、npm  
（3）小程序：ES、小程序框架、专用api

2、小程序运行环境  
（1）开发环境  
IDE——nwjs  
（2）生产环境  
android——X5内核  
ios——JSC内核  
PS：平台不同，环境不同，兼容性也会有差异。因此，尽量多做真机测试。

3、（1）结构——WXML  
（2）样式——WXSS  
（3）数据逻辑——WXS、JS

4、<wxs>标签——将外部 / 内部wxs代码，打包成一个组件对象。  
用法：在标签内加入module="xxx"，xxx为组件对象，而代码块暴露出来的变量，将作为该对象的属性或方法。  
PS：除了module.exports外，不要用其他ES6语法。

5、在wxs代码块中，/\*为结束注释，后面的代码不会执行。

6、小程序框架——MINA框架

![Image 1][]

未标题-2.png

特点：  
（1）双线程  
（2）WXML、WXSS、WXS都在ui线程中运行  
（3）逻辑层通过page.setData(obj)方法，向视图层传递需要更新的数据

7、启动方式  
（1）冷启动——第一次启动、5分钟后再启动、两次警告后再启动（被微信销毁了）  
（2）热启动——5分钟内启动  
PS：若启动时，小程序有新版本，会异步加载内容，默认下次启动时替换为新版本，但是可以使用某api功能，达到立即替换为新版本。

8、资源加载流程

![Image 1][]

未标题-2.png

特点：  
（1）本地缓存  
（2）CDN内容分发网络  
（3）ajax

9、生命周期事件——程序生命周期、页面生命周期  
程序生命周期：  
（1）onLaunch：初始化完成  
（2）onHide：收起小程序到后台  
（3）onShow：展开小程序到前台（热启动）  
（4）onError：程序出错  
PS：globalData——全局数据  
页面生命周期：  
（1）onLoad：页面冷启动后，初次加载（只有一次）  
（2）onShow：每次切换页面，在之后的页面中触发  
（3）onReady：页面被首次切换到（每个页面只有一次）  
（4）onHide：每次切换页面，在之前的页面中触发  
（5）onUnload：关闭当前页  
PS：data——页面数据

![Image 1][]

QQ截图20190125011431.png

10、指令渲染写法（如wx: if或者wx: for）  
（1）单个渲染——直接在标签内部写  
（2）多个——用block包裹，在block写

11、wxml文件导入  
（1）<import/>——只导入目标文件中的模板，而间接的模板不会导入  
（2）<include/>——导入目标文件中，除了模板的全部内容，间接的模板也会导入

12、<text>支持转义字符

13、<rich-text>——通过html、css的方式，渲染出wxml、wxss的内容。

14、在app.json的pages数组中，写页面路径的同时，会在该位置自动生成相应系列文件。

15、存储数据  
视图层——dataset，自定义属性  
逻辑层——data对象

16、其他内容  
（1）project.config.json——保存环境配置，防止换电脑跑不了项目。  
（2）其他json——保存页面配置，而app.json负责整个小程序的配置（操盘手）。  
（3）js——应用级JS、页面级JS，分别具有应用级、页面级的生命周期事件。  
（4）utils文件夹——存放共用工具类，如常用的函数。

17、页面而言，除了基本的生命周期事件外，还具备丰富的交互事件，如上下拉、滚动、分享、tab切换。  
PS：若不设置分享函数，则右上角按钮中，菜单会没有转发功能。而且，分享函数可以返回一个对象，为分享窗口提供自定义标题、描述，以及带参的转发路径。

18、页面路由  
概念：以栈的形式，管理页面的历史记录。  
注意点：  
（1）重定向：前一个页面出栈。  
（2）tab切换、重新加载：之前所有页面出栈。  
（3）进栈onLoad，出栈onUnload。  
（4）栈存放页面数量，不能超过5个。

19、注意回调时，this指向会产生变化。  
解决措施：  
（1）私有变量保存this。  
（2）ES6语法。

20、逻辑层数据  
（1）this.data.xxx——只关注逻辑层，数据不传递到视图层。  
（2）this.setData(obj)——更改逻辑层的同时，会将数据传递到视图层，但是单次设置不要超过1M。

21、插值表达式（双花括号）  
（1）\{ \{ \}\}内部可以放入data中的变量，也可以是任何表达式。  
（2）安放位置：特性值、标签之间。

22、列表渲染时，没有设置key的话，会有警告。若是静态列表，无需强求，但强迫症例外。

23、模板管理：在pages文件夹下，新开一个template文件夹，存放不同类型的模板，便于管理。

24、标签组件  
学习方法：多看文档，对各组件的特性有大致了解。  
注意点：  
（1）input组件不能设置字体类型。

25、页面带参跳转  
（1）旧页面：在url中，拼接字符串。  
（2）新页面：onLoad()会接收一个装载参数的对象。

26、性能优化  
[https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html][https_developers.weixin.qq.com_miniprogram_dev_framework_performance_tips.html]

27、事件绑定  
（1）冒泡流（子到父）  
bind(xxx)——冒泡  
catch(xxx)——不冒泡  
（2）捕获流（父到子）  
capture-bind:xxx——捕获，再冒泡  
capture-catch:xxx——捕获到位后，停在该位置，不冒泡

28、自动预览  
开发者工具中，具备自动预览功能，让手机与电脑实时通讯，不必每次调试都要扫码，不过一定要先保存，再进行编译预览。

29、真机调试  
（1）与预览相比，真机调试提供详细的监控信息。  
（2）某些设备不支持部分API，因此真机调试更可靠。

30、WXSS不能获取本地资源，如background。

作者：简栋梁  
链接：https://www.jianshu.com/p/78d7bee23532

[Fundebug]: https://www.fundebug.com/
[Image 1]: 
[https_developers.weixin.qq.com_miniprogram_dev_framework_performance_tips.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html