#微信小程序# 微信小程序-理论篇

-Start：关注本公众号后，可直接联系后台获取排版美化的详细文档！

-Hints：本篇文章所编纂的资料均来自网络，特此感谢参与奉献的有关人员。

微信小程序开发基础

1 Html与 Html5

2 CSS

3 JavaScript

4 JQuery

5 Bootstrap

微信小程序设计规范

-友好礼貌

1 重点突出

2 流程明确

-清晰明确

1 导航明确

2 减少等待

3 异常可控

-便捷优雅

1减少输入

2 避免误操作

3 利用接口提升性能

-统一稳定

不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式。统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。

-视觉规范

1字体规范

字体类型、大小、颜色

2 列表视觉

3 表单视觉

4 按钮视觉

5 图标使用

参考链接：

https://www.w3cschool.cn/weixinapp/weixinapp-design.html

微信小程序开发步骤

-微信小程序账号申请

-小程序AppID获取

-小程序开发工具部署

下载安装

https://www.w3cschool.cn/weixinapp/weixinapp-download.html

-小程序项目初始结构

1 pages 文件夹下有index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页

每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

Wxml:页面结构文件，模板文件

2 utils 存放js文件，支持公共函数

3 app.js是小程序的脚本代码。监听并处理小程序的生命周期函数、声明全局变量，调用微信原生 API、网络超时时间、底部tab

4 app.json 是小程序的全局配置。配置小程序的页面组成，窗口背景色，导航条样式，默认标题。注意该文件不可添加任何注释。

5 app.wxss 是小程序的公共样式表。页面组件的 class 属性可以直接使用 app.wxss 中声明的样式规则。

6 project.config.json 在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

7 sitemap.json 开发者可以通过sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。

参考链接：

https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

微信小程序运行过程

-小程序宿主环境

微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。

-渲染层和逻辑层

小程序的运行环境分成渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

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

-小程序运行流程

1 微信客户端打开小程序之前：把整个小程序的代码包下载到本地。

2 加载小程序的整体配置文件app.json:通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径.。写在 pages 字段的第一个页面就是这个小程序的首页

3 加载首页的相关文件，如配置文件json，模板文件wxml，样式文件wxss,逻辑文件js

4 按照小程序的生命周期函数进行运行：onLaunch初始化小程序，onShow,小程序启动后展示首页

5 整个小程序只有一个 App 实例，是全部页面共享的

6根据首页操作，进行次级页面的跳转。在生成次级页面时，会根据 page.json 配置生成一个界面，紧接着装载这个页面的 WXML 结构和 WXSS 样式，最后客户端会装载 page.js

7 按照页面的生命周期函数运行：data:获取页面的原始数据，onLoad 页面加载，onShow页面显示，onReady页面渲染

8 多数 API 的回调都是异步，需要处理好代码逻辑的异步问题。

 

微信小程序配置文件

-1 sitemap索引配置

 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。

-2 project.config.json开发配置

在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

-3 app.json 全局配置

对微信小程序进行全局配置

-4 page.json 页面配置

页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

 

微信小程序运行说明

-小程序运行环境

-小程序的运行平台

iOS（iPhone/iPad）微信客户端、Android 微信客户端、PC 微信客户端、Mac 微信客户端和用于调试的微信开发者工具。

-JavaScript支持情况

基于安全考虑，小程序中不支持动态执行 JS 代码，即：

-不支持使用 eval 执行 JS 代码

-不支持使用 newFunction 创建函数

-小程序运行机制

-前台/后台状态

小程序启动后，界面被展示给用户，此时小程序处于前台状态。

当用户点击右上角胶囊按钮关闭小程序，或者按了设备 Home 键离开微信时，小程序并没有完全终止运行，而是进入了后台状态，小程序还可以运行一小段时间。

当用户再次进入微信或再次打开小程序，小程序又会从后台进入前台。但如果用户很久没有再进入小程序，或者系统资源紧张，小程序可能被销毁，即完全终止运行。

-冷启动与热启动

---冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。

---热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

-小程序销毁时机

通常，只有当小程序进入后台一定时间，或者系统资源占用过高，才会被销毁。

-启动场景分类

A. 保留上次的浏览状态。

B. relaunch 到指定页或首页

-退出状态

每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态，可以在这个回调函数中“保存”一些数据，下次启动时可以通过 exitState 获得这些已保存数据。

-小程序版本更新

-未启动时更新

开发者在管理后台发布新版本的小程序之后，如果某个用户本地有小程序的历史版本，此时打开的可能还是旧版本。微信客户端会有若干个时机去检查本地缓存的小程序有没有更新版本，如果有则会静默更新到新版本。总的来说，开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内下发新版本信息到用户。用户下次打开时会先更新最新版本再打开。

-启动时更新

小程序每次冷启动时，都会检查是否有更新版本，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。

如果需要马上应用最新版本，可以使用 wx.getUpdateManager API进行处理。

 

微信小程序原生接口

框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。

说明：

wx.on开头的API是监听某个事件发生的API接口，接受一个CALLBACK函数作为参数。当该事件触发时，会调用CALLBACK函数。

如未特殊约定，其他API接口都接受一个OBJECT作为参数。

OBJECT中可以指定success,fail,complete来接收接口调用结果。

参数名	类型	必填	说明
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

-原生接口的类型

网络API、媒体API、文件API、数据API、位置API、设备API、界面API、WXML节点信息 API 列表、微信开发接口

详细资料：https://www.w3cschool.cn/weixinapp/hpm41q8p.html

微信小程序重要概念

-小程序与普通网页开发的区别

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的 DOM API 和 BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。 

-Wxml与html的区别

1 html用到的标签是 div, p, span；wxml用到的标签是 view, button, text

2多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式在网页的一般开发流程中。小程序开发采用MVVM模式，提倡把渲染和逻辑分离。WXML 是这么写:{{msg}}JS 只需要管理状态即可:this.setData({msg: "HelloWorld" }) 通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

-TypeScript语言

TypeScript 是JavaScript 的超集，完全支持 JavaScript 语法，并且在 JavaScript 语法的基础上增加了静态类型变量和基于类的面向对象编程。

TypeScript 与JavaScript 两者的特性对比，主要表现为以下几点。

--TypeScript 是一个应用程序级的 JavaScript 开发语言。

    --TypeScript是JavaScript 的超集，可以编译成纯JavaScript。

    --TypeScript跨浏览器、跨操作系统、跨主机，且开源。

    --TypeScript始于 JavaScript，终于 JavaScript。遵循 JavaScript 的语法和语义，方便了无数的 JavaScript 开发者。

    --TypeScript可以重用现有的 JavaScript 代码，调用流行的JavaScript 库。

    --TypeScript可以编译成简洁、简单的 JavaScript 代码，在任意浏览器、Node.js 或任何兼容 ES3 的环境上运行。

    --TypeScript比JavaScript 更具开发效率，包括静态类型检查、基于符号的导航、语句自动完成、代码重构等。

    --TypeScript提供了类、模块和接口，更易于构建组件。

参考链接：https://blog.csdn.net/valada/article/details/79909244

 

-文件类型

wxml：微信小程序框架的标签语言，结合基础组件、事件系统，可以构建出页面结构

wxss：微信小程序的样式语言，用于描述wxml的组件样式

js：JavaScript

json：Json，配置文件，工具开发配置文件、小程序页面索引配置文件、项目应用配置文件、页面配置文件

wxs：微信小程序的脚本语言

-设计模式

--MVC

用户进行操作时，View接收用户的输入操作，传递给Controller进行业务逻辑处理，Model实现数据持久化，并将结果反馈给View

--MVP

完全切断View跟Model之间的联系，由Presenter充当桥梁

--MVVM

MVVM将“数据模型数据双向绑定”的思想作为核心。视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。即，ViewModel 是一个 View 信息的存储结构，ViewModel 和 View 上的信息是一一映射关系。

使用MVVM模式的好处

低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。

独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

可测试性。可以针对ViewModel来对界面(View)进行测试

参考资料：https://zhuanlan.zhihu.com/p/36141662

 

微信小程序性能优化

1微信团队推出的网页标准控件库，包括 sketch设计控件库和 Photoshop设计控件库，控件充分考虑了移动端页面的特点，能够保证其在移动端页面上的可用性和操作性能；

2微信团队推出的微信小程序接口，微信公共库，提供更加快捷的服务，对页面性能的提高有极大作用

3 微信web资源离线存储

通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

微信小程序常见问题

-不能直接操作 Page.data

避免在直接对Page.data 进行赋值修改，请使用 Page.setData 进行操作才能将数据同步到页面中进行渲染

-怎么获取用户输入

能够获取用户输入的组件，需要使用组件的属性bindchange将用户的输入内容同步到AppService

-为什么脚本内不能使用window对象

页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件

-为什么zepto/jquery无法使用

zepto/jquery会使用到window对象和document对象，所以无法使用。

-wx.navigateTo无法打开页面

一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo

-样式表不支持级联选择器

WXSS支持以.开始的类选择器。

-本地资源无法通过WXSS获取

background-image：可以使用网络图片，或者base64，或者使用标签

-如何修改窗口的背景色

使用page标签选择器，可以修改顶层节点的样式

-HTTPS 请求不成功

tls 仅支持 1.2 及以上版本

部分Android 机型需要 tls1.0 或者 tls1.1，所以请确保服务器的 tls 版本为 1.0、1.1、1.2

-网络请求的 referer

网络请求的referer 是不可以设置的，格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中{appid}为小程序的 appid，{version}为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本。

-为什么 map 组件总是在最上层

map、canvas、video、textarea是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置z-index为多少，都无法盖在原生组件上。 原生组件暂时还无法放在scroll-view上，也无法对原生组件设置css动画。

 

微信小程序功能限制

-微信小程序不提供的功能

    小程序在微信没有集中入口。

    微信不会推出小程序商店，也不会向用户推荐小程序。

    小程序没有订阅关系，没有粉丝，只有访问，只有访问量。

    小程序不能推送消息。

    小程序不能做游戏。

-微信小程序提供的功能

    提供小程序页概念：支持分享当前信息。

    对话分享：可以分享到对话，支持分享给单个好友及微信群。

    搜索查找：小程序可以被搜索，但微信会极力限制搜索能力，目前提供的搜索功能是用户可直接根据名称或品牌搜索小程序。

    公众号关联：在小程序与公众号为同一开发主体的前提下，提供小程序与微信公众号之间的关联。

    线下扫码：提供线下提示用户附近有哪些小程序存在的功能。用户可以通过线下扫码使用，这也是微信提倡的接入方式。

    小程序切换：小程序支持挂起状态，即多窗口概念，用户可以把小程序先挂起，然后做别的事情，在需要这个小程序的时候可以快速调用，回到最开始的状态。

    消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片，解决用户与小程序的沟通问题。

    历史列表：用户使用过的小程序会被放入列表，方便下次使用。

 

微信小程序参考资料

-微信小程序开发工具

https://www.w3cschool.cn/weixinapp/weixinapp-devtools.html

-微信小程序指南手册

https://www.w3cschool.cn/miniappbook/

-微信小游戏源码分享

https://www.w3cschool.cn/weixinapp/weixinapp-7wul2q3v.html

-微信小游戏开发文档

https://www.w3cschool.cn/wxagame/

-微信小程序腾讯云开发

https://www.w3cschool.cn/weixinapp/weixinapp-r1tk2r1g.html

-微信小程序云开发

https://www.w3cschool.cn/weixinapp/weixinapp-mvg538kd.html

 

公众号二维码

End：如果有兴趣了解量化交易、数据分析和互联网+的实用技术，欢迎关注本公众号