互联域名注册官网_微信小程序开发指引

微信小程序自2017年1月9日正式上线以来，引起了广泛关注。微信团队也在不断更新小程序。微信小程序的优势非常明显。小程序触及了PC网页、公众号、H5、APP无法触及的地方。它们不需要安装，用完就跑的理念可以满足用户的需求并节省手机内存。从小程序业主的角度来看，其开发成本大大降低，同时可以利用微信强大的流量入口，这也降低了推广难度。总的来说，微信小程序是一种更好地连接用户和服务的全新方式，并且可以在微信中轻松获取和传播，提供良好的用户体验。

1 小程序开发前的准备

小程序使用了与React、Weex相同的解析技术。开发人员可以编写一组程序在多个客户端上运行。同时相比公众号、微商城有着更好的原生体验。申请全面开放后，企业、政府、媒体、其他组织或个人等开发者均可申请注册小程序。小程序与微信的订阅号、服务号、企业号是并行系统，具有独立的注册和发布流程。

1.1 小程序接入流程

接入小程序主要有4个步骤。

（1）小程序注册：在微信公众平台官网首页（）进行注册并提交注册信息，填写主体信息和管理员信息。

（2）完善小程序信息：完善小程序的名称、头像、服务范围等基本信息，开发前需要绑定开发者并获取APPID，保证程序可以通过测试扫描手机上的二维码。

（3）开发小程序：下载并安装微信开发者工具。微信官方提供了完整的开发框架。开发者可以根据微信开发文档来开发和调试小程序。

（4）代码审核和发布：小程序开发完成后，不能直接发布。代码和开发配置信息需要提交审核。完成后，仍然可以发布。

1.2 微信Web开发者工具

微信官方的开发工具称为 Web Tools，小程序前端开发框架是微信官方提供的框架。微信Web开发工具是一个基于系统层的框架。由于它不在浏览器中运行，所以一些方法如Step by step加载HTML、CSS、JS，然后返回数据，最后渲染页面并显示在浏览器中。用户总是需要等待很长时间，这大大降低了用户体验。相比之下，小程序的两个线程： 和 会同时加载，并行，甚至更早执行。当视图线程加载完毕后，通知会使用该方法将准备好的数据返回给视图线程。小程序的这种优化策略可以减少用户的等待时间，加快小程序的响应速度。

微信Web开发者工具不同于H5的开发工具+浏览器模式预览模式。而是基于自己的开发者工具，可以实现同步本地文件+开发调试+编译预览+上传+发布等一整套流程。同时，小程序开发了自己的一套WXML标签语言和WXSS样式语言，而不是直接使用标准的HTML5+CSS3。同时提供了很多原生APP组件。以前需要在HTML5中模拟的功能，可以通过直接调用小程序中的组件来实现。

2 结构及核心技术

2.1 框架

2.1.1 小程序文件结构

使用微信Web开发工具新建一个项目，框架会自动生成一个描述整体程序的APP和描述多个页面的页面文件。完整的小程序主要包括：

入口文件：app.js

全局样式：app.wxss

全局配置：app.json

将页面安装文件夹划分到pages下。每页有4个文件，分别是：

视图层：wxml文件、wxss文件；

逻辑层：js文件json文件（页面配置，非必须）

(1)app.js是控制小程序逻辑的脚本文件。是小程序的配置文件，负责小程序的全局配置。 app.wxss是一个全局样式表，其范围是项目的每个页面

（2）wxml是一种类似于xm格式的语言，具有数据绑定、条件染色、列表染色自定义模板、事件回调和外部引用等功能。页面结构主要是使用基础组件构建的。

wxss和css格式的语言类似。它们用于描述wxml的组件样式。 page.wxss的优先级高于app;json。同时，微信为小程序新增了尺寸单位rpx。 rpx可以根据屏幕宽度进行自适应。 rpx其实就是系统级的rem（将页面按比例分成750份Irpx=/750）

可以为独立定义的页面设置一些属性，以满足实际需要。 json可以设置一些个性化的配置。当重新安装工具或者更换电脑时，只要导入相同的代码包，开发工具就会自动恢复到原来的状态。开发本项目时的个性化设置JS文件主要用于用户交互、响应用户点击等，在小程序中，通过JS脚本响应用户操作。

2.1.2 了解小程序框架

微信小程序开发是基于框架的。从软件设计的角度来看，框架是一种可重用的软件架构解决方案，它规定了应用架构，明确了软件架构中各层之间的关系以及层内组件之间的关系。持久关系、责任分配和控制过程由一组实例之间协作的接口、抽象类和方法来表示。是指特定应用领域的应用系统的部分设计和实现子系统的总体结构。

小程序开发框架的核心是响应式数据绑定系统。分为视图层（View）和逻辑层（APP）。小程序开发工具提供了视图层描述语言WXML和WXSS，以及基于其的逻辑层框架，在视图层和逻辑层之间建立了数据传输和事件系统。 ，让开发者轻松专注于数据和逻辑。处理事务逻辑的地方称为逻辑层。在微信小程序中，所有js脚本文件的集合构成了逻辑层。逻辑层和视图层相互配合完成数据处理和接收事件反馈。框架的视图层采用WXML和WXSS编写，通过组件的方式展示。至于小程序本身，.wxml 文件和.wxss 文件的集合构成了视图层。逻辑层处理完数据后，会发送到视图层与用户交互，并接收用户向视图层的反馈。视图层以给定的样式显示数据，并将事件反馈给逻辑层。数据呈现是通过组件来执行的。视图的基本构建块是组件。

2.2 相关组件

微信提供了一系列基础组件，可以组合起来开发小程序。这里有一些更有特色的组件。

2.2 相关组件

微信提供了一系列基础组件，可以组合起来开发小程序。以下是一些更有特色的组件：

（1）类似，它是布局中最基本的组件。任何复杂的布局都可以通过嵌套组件来实现。它是一个块级容器组件。默认值：block，即盒子模型。在布局过程中，一般都是推荐：Flex如何写

(2)是多行输入框。与HTML不同的是，它的值需要赋给value属性，而不是用标签包裹起来。它是一个自闭合标签，CSS 动画对组件无效。

(3)是页面链接，与HTML中的超链接标签相同。主要是控制页面跳转。链接的内容可以是文字、文字或图片，点击内容即可跳转到页面。

(4)主要用于绘制图形。它是一个无色透明的区域，没有绘图能力。它只是一个图形容器，需要调整相关的应用程序编程接口（API）来完成实际的绘图任务。

2.3API及其配置

2.3.1 域名配置

基于小程序提供的组件，开发者可以根据需要设计UI界面。但小程序的部分功能依赖于框架提供的API。使用API​​时，必须先配置小程序的服务器域名。每个小程序都需要设置域名进行通信。小程序可以通过网络与指定域名进行通信。目前支持HTTPS()、上传文件()、下载文件()和通信。

(1)( )：实现小程序与开发者服务器数据交互方法的功能是发起HTTPS请求。小程序中只能使用HTTPS请求，不能使用HTTP请求。一个微信小程序同时只能有5个请求。网络请求连接；

(2)：该方式是客户端主动向服务器发起请求，服务器通过返回数据进行响应，达到通信的目的。这种方法的缺点是服务器无法主动向客户端发送消息。因此，要实现服务器和客户端的即时通信，只能采用轮询的方式，而且消息很长。为了传输少量的数据，会占用大量的带宽。针对这种情况，开发者可以通过小程序提供的相关API来创建。服务器和浏览器只需要通过HTTP协议进行握手动作，然后建立单独的传输控制协议（TCP）通信通道进行数据传输。传输，实现长连接以达到通信的目的。

源无线互联网技术

原标题：微信小程序开发研究

作者吴思义讲解张玉厚冰云