第一章：一文了解小程序

知晓云

于 2019-10-10 11:12:34 发布

阅读量666

点赞数 1

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/cloud_minapp/article/details/102476667

版权

微信小程序专栏收录该内容

33 篇文章 1 订阅

订阅专栏

小程序到底是什么？

顾名思义，「小程序」本质上与我们平常经常使用的 App 和操作系统一样，都是一段电脑程序。你可以将小程序理解为「运行在微信上的 app」。

与普通的 App 不同的是，小程序的语言使用网页前端的技术栈，并且使用 JavaScript 运行环境，相当于是一个浏览器。

但是，小程序也并非是单纯的 HTML5。与普通的 HTML5 不同的是，小程序具有高级的硬件处理接口（例如蓝牙、重力感应等），同时运行环境也更接近原生应用，效率更高。

正因体积小，小程序才可以做到「即开即用」——对于用户感知来说，小程序几乎是点击后等待一两秒，就可以使用，就像是打开网页链接一样，使用后，用户甚至不需要额外管理小程序。

除了使用层面本身的良好体验，由因为小程序是直接集成于微信中的，所以它还可以配合微信完成传统 App 和 HTML 5 无法达成的功能。

例如，分享卡片可以携带相应微信群信息，当用户从微信群进入小程序，开发者可以了解到用户从哪一个群进入小程序。

小程序是如何发展起来的？

在 2016 年 9 月，有部分开发者收到了微信的邀请，尝试新的「小程序」平台，引发大量关注。

在此前，张小龙曾在公开场合宣布，微信将会推出「应用号」平台。外界普遍猜测，「小程序」即此前张小龙所提到的「应用号」。

直到 2016 年 11 月，小程序平台宣布公测，所有符合资格的组织都可以注册小程序帐户。此次公测正式引爆公众对小程序的热情，许多企业连夜注册小程序帐户，希望可以尽快尝试这个新平台。

2017 年 1 月 9 日，小程序正式开放使用。截止今日，市面上已有不计其数的微信小程序。微信用户也已经逐渐习惯使用小程序，小程序变为他们的「微信生活」中，不可或缺的一部分。

一、小程序有什么特点？

在前面，我们提到：小程序既不是网页，也不是 App，它是一种融合了网页和 App 两者特点的新应用形态。

相比较于 App 和网页，小程序具体拥有以下特点：

随时加载，随时使用
拥有强大接口和能力
易学、易开发

二、了解小程序开发语言

今天的教程，我们将不讨论有关小程序开发的具体内容，我们将会为大家带来更基础的一些东西，帮助大家在未来快速上手开发小程序。

1. 视图描述语言

你在小程序中看到的文字、图片、按钮等，都被称做「视觉组件」。

在小程序中，想要控制这些视觉组件，我们需要使用到 WXML、WXSS 两种语言。如果你不了解它们，你可能会认为「微信创造了新的编程语言」。

但实际上，WXML 和 WXSS 都是从以往就有的语言演变的。

1） WXML

WXML 的全称是微信标记语言（WeiXin Marked Language），从名字中我们就知道，它其实是由 XML 和 HTML 演变而来的。

WXML 的作用是描述小程序页面中应该有什么视觉元素。它的语法并不复杂。最简单的 WXML 代码如下所示：

<text>Hello World</text>

它的意义是，在小程序页面中显示 Hello World 的文字（text）。

2） WXSS

WXSS 的全称是微信样式表（WeiXin Style Sheet），它的?语法与 CSS 没有什么区别。

它的作用是，定义页面中的元素的样式是怎样的。?例如：

text{
  color: red;
}

它的意思是，将 WXML 中元素的字体颜色（color）修改为红色（red）。

3） WXML 与 WXSS 协同使用

将 WXML 和 WXSS 放在一起用，我们就可以自由控制小程序中的视觉元素展示方式、样式了。

如果你有一组元素需要使用同样的样式，或是有一个特定的元素需要使用某个格式，那么你可以使用类（Class）和 ID 特性。

使用类，你可以针对一组同类视觉元素，修改样式。例如，我们希望将小程序中的所有用户名都显示为红色，我们可以这样写：

<!-- WXML -->
<text>知晓程序</text>
 
/* WXSS */
.username{
  color: red;
}

2. 逻辑语言

通过视图层，用户就可以与小程序产生交互。但小程序的逻辑处理（包括网络数据交互、运算、逻辑判断等），都需要用 JavaScript（JS）语言写成的代码完成。

我们先从页面逻辑入手，编写简单的 Hello World 程序来接触 JS 代码。

Page({
  onLaunch(){
    console.log('Hello World!')
  }
})

运行它，我们就可以在控制台中看到结果了。

只需简单几行代码，就是一个完整的小程序 JS 程序。调用 JS 函数很简单，只需要写函数的名字，并在后面括号中附带参数，就可以调用。

函数名(参数 1, 参数 2, …)

有关于小程序开发的三种语言 WXML、WXSS 和 JS 的简单介绍到这里。

请注意，本篇只是对这些语言语法的基础讲解。虽然本教程会在未来的课程中教授更深层次的内容，但同时我们也建议，没有前端开发基础的同学，可以先去学习一些基础的前端开发。

开发前准备

工欲善其事，必先利其器。在正式开发小程序之前，我们还需要做一些准备工作。

一、开发者工具

首先，我们就来初步认识小程序的开发环境和必备软件：「微信 Web 开发者工具」。

二、下载、安装开发者工具

我们可以到到 mp.weixin.qq.com 下载这个工具。由于官方文档不断在变化，所以地址随时有可能会变更。微信关注「知晓程序」公众号，回复「工具」，就可以随时获取最新的开发者工具下载地址。

在这里插入图片描述

下载好开发者工具之后，我们自然需要进行安装。macOS 与 Windows 两个版本的开发者工具安装方式有些许差异：

Windows 版下载好安装程序后，直接双击打开进入安装流程。安装完毕后，一般可在桌面即可启动开发者工具。
macOS 版下载好镜像文件后，直接拖动到「Application（应用程序）」文件夹中，在 LaunchPad 就可以启动开发者工具。

大家可以根据相应提示，安装、启动开发者工具。

三、新建小程序项目

安装完毕后，我们就可以在开发者工具中，新建小程序工程项目了。

如果是首次启动「微信 Web 开发者工具」，你需要使用微信号扫描二维码进行登录。在开发过程中，登录的微信号将会用于微信开放能力相关接口（例如，获取用户资料、发送模板消息等）的调试。

登录完成后，我们就进入项目类别选择的窗口。在这一步，我们选择「小程序项目」。
在这里插入图片描述

首次点击「小程序项目」时，开发者工具会直接要求我们新建一个小程序项目。

项目目录：在这个字段中为小程序工程选择一个文件夹，用于存放小程序项目的代码。
AppID：如果你已经有一个小程序的 AppID，可以在这里将它填入。如果还没有，可以选择下面的「点此体验」链接。
项目名称：为小程序项目起一个名字。这个名字只针对开发者工具中识别，不会影响小程序本身对外显示的名字。

确认无误，点击「确定」，就可以新建小程序项目。之后，我们就进入「微信 Web 开发者工具」的主界面。

使用开发者工具进行开发

「微信 Web 开发者工具」主要包含四个部分。

顶部为工具栏，可对开发者工具的帐户、窗口显示进行调整，或是执行编译、预览或上传小程序的操作。
左侧为模拟器，开发中的小程序代码，可以直接在预览区中查看模拟运行效果。
右侧上半部分为编辑器，可以在其中浏览小程序工程目录、直接编辑小程序代码。
右侧下半部分为调试器，小程序的运行结果、输出等信息，会在这部分进行显示。

在这里插入图片描述

开发者工具提供的功能、界面等都相对清晰、简单，我们只需要在代码编辑器写好代码，在模拟器就可以看到相应运行效果；如果运行出错，在调试器中，也能找到详细的错误信息。

四、小程序账号

我们已经了解如何使用开发者工具来开发小程序、管理小程序项目。此时，如果你还没有注册小程序，你只能在「预览」状态下新建小程序项目，一部分开发功能将无法使用。

那我们应该如何注册小程序帐户呢？注册的时候，需要留意哪些问题呢？在本文中，我们就来手把手教大家，如何注册一个小程序。

小程序注册流程，与公众号注册流程差不多。

你需要进入 mp.weixin.qq.com，点击右上角的「立即注册」链接，在「帐户类型」页面中，选择「小程序」。
在这里插入图片描述

点击「小程序」后，你需要填写邮箱、密码等帐户基本信息。它们用于你注册后登录小程序。

需要注意的是，已经绑定其他的公众号、小程序、个人号的邮箱，不能重新注册新的小程序。

也就是说，你在微信里与微信号绑定的邮箱，或是在公众平台注册公众号所用的邮箱，是不能用于注册小程序的。

在这里插入图片描述

提交后，填写的邮箱会收到一封确认注册邮件，你需要点击邮件中的确认链接，然后填写并验证小程序的主体信息。

填写主体信息的过程中，不同的主体，验证方式也有差异。

如果你是以个人身份进行注册，在「主体类型」一项，你需要点击「个人」。之后，你只需要在弹出的表单中填写资料、完成验证，就可以直接完成注册小程序。

需要注意的是，验证过程中，你需要验证你的手机号，并使用你自己的微信号扫码确认。
在这里插入图片描述

以组织身份注册时，你首先需要根据实际情况，在「主体类型」中选择适合的组织类型。之后，页面会根据你的选择，显示信息登记的表单。
在这里插入图片描述

对于企业来说，小程序可以选择不经过认证而完成注册。填入企业名称之后，页面会显示可用的注册方式，包括小额打款以及微信认证。

但是，未认证的小程序在开发者数量、可用能力方面，会与已通过认证的小程序会有一些差异。

在注册过程中，页面也会要求填写小程序管理员的信息。

与个人主体小程序注册流程一致，你同样需要提供自己的个人信息，也需要进行短信验证、扫码验证。注册完毕后，你就可以对小程序进行管理。

主体验证通过后，你就可以进入到小程序的后台。之后，你就可以根据页面提示，补充小程序的名称、标志，然后下载开发者工具，开始开发你的小程序。

访问「知晓云」（cloud.minapp.com），学习更对小程序开发课程

在这里插入图片描述

知晓云

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
第一章：一文了解小程序

小程序到底是什么？顾名思义，「小程序」本质上与我们平常经常使用的 App 和操作系统一样，都是一段电脑程序。你可以将小程序理解为「运行在微信上的 app」。与普通的 App 不同的是，小程序的语言使用网页前端的技术栈，并且使用 JavaScript 运行环境，相当于是一个浏览器。但是，小程序也并非是单纯的 HTML5。与普通的 HTML5 不同的是，小程序具有高级的硬件处理接口（例如蓝牙、重...
复制链接

扫一扫