微信小程序开发与实战（微课版）

后端程序员需要快速学习一下小程序开发，翻了下这本书，以下是一些关键知识点： # 小程序开发与传统网页开发的区别： 1、在普通网页中渲染线程和脚本线程是互斥的，而在小程序中二者不是互斥的。 2、普通网页可以操作DOM和BOM对象，小程序无法操作DOM和BOM对象（因为小程序的逻辑层运行在JSCore中），所以小程序在使用JS选择UI时，就没有父节点、子节点、ID选择器这些概念了。 3、普通网页需要适配各个浏览器，小程序需要考虑适配Windows或macOS环境的UI适配 # 小程序渲染机制知识点 1、基于双线程模型（渲染层、逻辑层，分别在不同线程中运行），与传统web的单线程模型有很大区别。 2、渲染层的界面使用web-view进行渲染，逻辑层采用JSCore线程运行JS脚本。（一个小程序存在多个页面，所以渲染层会存在多个web-view线程） 3、双线程通信是由微信客户端(Native)做中转，同时逻辑层发送网络请求也经由Native转发。 4、为了最快加载出整个页面，需要像 Web技术那样，有一份随时可更新的资源包放在云端，动态渲染界面。 5、数据驱动原理：通过 JS对象来表达 DOM树的结构（这棵 DOM树实际上就是WXML结构。WXML可以先转换成JS对象，再由JS对象渲染出真正的DOM树） 6、总结：在渲染层中，小程序的宿主环境会把 WXML转换成 JS对象，而 JS是运行在逻辑层的。当逻辑层的数据发生变化时，通过this.setData()方法把数据从逻辑层再传递到渲染层，经过对比前后的差异，把更改后的数据应用在原来的DOM树上，以此实现UI界面的渲染 # 程序和页面 1、小程序的宿主环境提供了 App()函数作为程序的构造方法，以此来注册一个程序的 App对象。构造方法App()需要声明在小程序项目的根目录下的app.js文件中，App实例也是一个单例对象，其构造方法接收一个对象参数，参数对象中可以声明小程序全局生命周期函数。 2、单个小程序由多个页面组成，每个页面分别由界面、配置、逻辑这3个部分构成。 3、业务逻辑要写到当前文件夹的page.js文件中，Page()方法也是要接收一个对象参数，参数对象的属性中除了要声明页面的生命周期函数与上方保持一致外，还可以声明事件方法和页面的初始化数据data属性 4、开发者不需要主动调用 Page()构造器中定义的生命周期方法，而是由微信客户端根据监听用户的操作而主动触发的，这样就避免了程序调用上的混乱。 ## 小程序的内置组件 1、组件就是对应用视图层的拆分，一个小程序的页面也可以被拆分成多个组件，组件是小程序页面的基本组成单元。 2、小程序的宿主环境提供了一系列的基础组件（小程序的内置组件） 3、组件是在 WXML模板文件中声明使用的（与 HTML语法相似），WXML模板文件遵循JSX(JavaScript XML)语法规范 4、组件标记的属性主要包含样式和事件绑定。也可以包括自定义的属性 ## 小程序的API 1、小程序提供的API按照功能主要分为几大类：网络、媒体、文件、数据缓存、位置、设备、界面、微信开放能力等 2、小程序API的约定 ● 小程序所有的API都必须挂载到名为wx的全局对象下。 ● 用于监听事件的API函数都是以wx.on* 开头。 ● API的Object参数一般由success、fail、complete 3个回调函数来接收接口调用的结果。 ● 在API中凡是以wx.set*和wx.get*开头的都是用于写入数据和获取数据的接口。 ● 如果没有特殊说明，大部分的API函数都是异步函数，并且都接收一个Object作为参数。 ## 小程序的事件处理 1、事件就是被控件所识别的操作 2、在小程序中，任何渲染层的行为事件都需要向开发者反馈（可能是用户主动触发，也可能是组件状态改变导致） 3、比如页面按钮点击事件，事件通过组件上绑定的bindtap属性触发，同时在用于页面构造的 Page()方法中声明对应的onBtnClick()方法来处理对应的事件 # 小程序应用能力 ## CSS布局 1、建议使用Flex弹性盒子布局。Flex弹性盒子布局提供了一种灵活的布局模型（使容器能通过改变里面项目的高宽、顺序来对可用空间实现最佳的填充，以方便适配不同大小的内容区域） 2、Flex不单是一个属性，它包含了一套新的属性集。属性集包括用于设置容器和用于设置项目两个部分 ## 界面交互反馈 1、常用的界面交互行为包括屏幕触摸反馈、弹框提示、界面滚动等 2、除了这种设置区域不同的触发样式外，还有常用的用户触发反馈效果（例如button组件设置loading属性，弹出 Toast提示框等效果） ## HTTPS网络通信 1、小程序通过宿主环境提供的wx.request()函数发起网络请求来实现从服务器拉取信息 2、小程序宿主环境要求request发起的网络请求必须是HTTPS请求，因此开发者服务器必须提供HTTPS服务的接口。 3、小程序request默认超时时间是60s。小程序项目根目录下的app.json中可以指定request的超时时间。 ## 本地数据缓存 1、小程序提供了读写本地数据缓存的接口，通过wx.getStorage/wx.getStorageSync读取本地缓存，通过wx.setStorage/wx.setStorageSync写数据到缓存，其中带有Sync后缀的接口表示是同步接口，执行完毕会立马返回 2、小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，宿主环境还对不同用户进行了缓存隔离，以避免用户间的数据隐私泄露 ## 全局配置文件（app.json） 1、涵盖了小程序的页面路径、窗口表现、底部tab栏、默认启动页、网络超时时间等几十项配置信息 2、pages属性用于配置小程序的所有页面路径，指定哪些页面可被显示 3、window属性用于配置小程序的窗口样式与表现，配置项包含小程序的状态栏、导航栏、标题、窗口背景颜色等 4、tabBar属性用于配置小程序底部tab栏的样式与表现 5、networkTimeout属性用于设置各类网络请求的超时时间 6、permission属性用于设置小程序相关接口权限 7、usingComponents属性用于全局声明自定义组件 8、entryPagePath属性用于配置小程序的默认启动路径，即小程序的默认首页 ## 页面配置文件 1、page.json就是当前页面的配置文件，用于对当前页面的窗口表现进行配置 2、page.json可以对当前页面的导航栏、窗口背景、下拉刷新、上拉触底、页面自定义组件等表现能力进行配置。页面的窗口配置在当前页面会覆盖app.json的window属性中的相同配置项。 ## sitemap配置文件 1、通过sitemap.json配置文件来配置小程序页面是否允许被微信索引

因为想做小程序，所以我马马虎虎看了这本书，大概对微信小程序有个了解，其实不少东西跟官方文档差不多，后续可能还要找些视频跟着实际操作才行。

因为想要做一个移动端的报表，而想到了小程序，也是从零开始看的，其从小程序的发展史，框架结构，宿主环境，开发工具，文档，模板渲染，mina框架，生命周期，内置容器，组件，生态API, 第三方组件集成，云开发部署等，等都做了基础的介绍，整个知识技能体系是完善的，个人很受用，后续想要深入哪个模块就再细究一下即可。很适合像我这样非专业选手。