小程序到底是什么?
顾名思义,「小程序」本质上与我们平常经常使用的 app 和操作系统一样,都是一段电脑程序。你可以将小程序理解为「运行在微信上的 app」。
与普通的 app 不同的是,小程序的语言使用网页前端的技术栈,并且使用 JavaScript 运行环境,相当于是一个浏览器。
但是,小程序也并非是单纯的 html 5。与普通的 html 5 不同的是,小程序具有高级的硬件处理接口(例如蓝牙、重力感应等),同时运行环境也更接近原生应用,效率更高。
正因体积小,小程序才可以做到「即开即用」——对于用户感知来说,小程序几乎是点击后等待一两秒,就可以使用,就像是打开网页链接一样,使用后,用户甚至不需要额外管理小程序。
除了使用层面本身的良好体验,由因为小程序是直接集成于微信中的,所以它还可以配合微信完成传统 app 和 HTML 5 无法达成的功能。
例如,分享卡片可以携带相应微信群信息,当用户从微信群进入小程序,开发者可以了解到用户从哪一个群进入小程序。
小程序是如何发展起来的?
在 2016 年 9 月,有部分开发者收到了微信的邀请,尝试新的「小程序」平台,引发大量关注。
在此前,张小龙曾在公开场合宣布,?微信将会推出「应用号」平台。外界普遍猜测,「小程序」即此前张小龙所提到的「应用号」。
直到 2016 年 11 月,小程序平台宣布公测,所有符合资格的组织都可以注册小程序帐户。此次公测正式引爆公众对小程序的热情,许多企业连夜注册小程序帐户,希望可以尽快尝试这个新平台。
2017 年 1 月 9 日,小程序正式开放使用。截止今日,市面上已有不计其数的微信小程序。微信用户也已经逐渐习惯使用小程序,小程序变为他们的「微信生活」中,不可或缺的一部分。
一、小程序有什么特点?
在前面,我们提到:小程序既不是网页,也不是 app,它是一种融合了网页和 app 两者特点的新应用形态。
相比较于 app 和网页,小程序具体拥有以下特点:
l 随时加载,随时使用
l 拥有强大接口和能力
l 易学、易开发
二、了解小程序开发语言
今天的教程,我们将不讨论有关小程序开发的具体内容,我们将会为大家带来更基础的一些东西,帮助大家在未来快速上手开发小程序。
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 中 <text> 元素的字体颜色(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 两个版本的开发者工具安装方式有些许差异:
l Windows 版下载好安装程序后,直接双击打开进入安装流程。安装完毕后,一般可在桌面即可启动开发者工具。
l macOS 版下载好镜像文件后,直接拖动到「Application(应用程序)」文件夹中,在 LaunchPad 就可以启动开发者工具。
大家可以根据相应提示,安装、启动开发者工具。
三、新建小程序项目
安装完毕后,我们就可以在开发者工具中,新建小程序工程项目了。
如果是首次启动「微信 Web 开发者工具」,你需要使用微信号扫描二维码进行登录。在开发过程中,登录的微信号将会用于微信开放能力相关接口(例如,获取用户资料、发送模板消息等)的调试。
登录完成后,我们就进入项目类别选择的窗口。在这一步,我们选择「小程序项目」。
首次点击「小程序项目」时,开发者工具会直接要求我们新建一个小程序项目。
l 项目目录:在这个字段中为小程序工程选择一个文件夹,用于存放小程序项目的代码。
l AppID:如果你已经有一个小程序的 AppID,可以在这里将它填入。如果还没有,可以选择下面的「点此体验」链接。
l 项目名称:为小程序项目起一个名字。这个名字只针对开发者工具中识别,不会影响小程序本身对外显示的名字。
确认无误,点击「确定」,就可以新建小程序项目。之后,我们就进入「微信 Web 开发者工具」的主界面。
使用开发者工具进行开发
「微信 Web 开发者工具」主要包含四个部分。
l 顶部为工具栏,可对开发者工具的帐户、窗口显示进行调整,或是执行编译、预览或上传小程序的操作。
l 左侧为模拟器,开发中的小程序代码,可以直接在预览区中查看模拟运行效果。
l 右侧上半部分为编辑器,可以在其中浏览小程序工程目录、直接编辑小程序代码。
l 右侧下半部分为调试器,小程序的运行结果、输出等信息,会在这部分进行显示。
开发者工具提供的功能、界面等都相对清晰、简单,我们只需要在代码编辑器写好代码,在模拟器就可以看到相应运行效果;如果运行出错,在调试器中,也能找到详细的错误信息。
资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com
四、小程序账号
我们已经了解如何使用开发者工具来开发小程序、管理小程序项目。?此时,如果你还没有注册小程序,你只能在「预览」状态下新建小程序项目,一部分开发功能将无法使用。
那我们应该如何注册小程序帐户呢?注册的时候,需要留意哪些问题呢?在本文中,我们就来手把手教大家,如何注册一个小程序。
小程序注册流程,与公众号注册流程差不多。
你需要进入 mp.weixin.qq.com,点击右上角的「立即注册」链接,在「帐户类型」页面中,选择「小程序」。
点击「小程序」后,你需要填写邮箱、密码等帐户基本信息。它们用于你注册后登录小程序。
需要注意的是,已经绑定其他的公众号、小程序、个人号的邮箱,不能重新注册新的小程序。
也就是说,你在微信里与微信号绑定的邮箱,或是在公众平台注册公众号所用的邮箱,是不能用于注册小程序的。
提交后,填写的邮箱会收到一封确认注册邮件,你需要点击邮件中的确认链接,然后填写并验证小程序的主体信息。
填写主体信息的过程中,不同的主体,验证方式也有差异。
如果你是以个人身份进行注册,在「主体类型」一项,你需要点击「个人」。之后,你只需要在弹出的表单中填写资料、完成验证,就可以直接完成注册小程序。
需要注意的是,验证过程中,你需要验证你的手机号,并使用你自己的微信号扫码确认。
以组织身份注册时,你首先需要根据实际情况,在「主体类型」中选择适合的组织类型。之后,页面会根据你的选择,显示信息登记的表单。
对于企业来说,小程序可以选择不经过认证而完成注册。填入企业名称之后,页面会显示可用的注册方式,包括小额打款以及微信认证。
但是,未认证的小程序在开发者数量、可用能力方面,会与已通过认证的小程序会有一些差异。
在注册过程中,页面也会要求填写小程序管理员的信息。
与个人主体小程序注册流程一致,你同样需要提供自己的个人信息,也需要进行短信验证、扫码验证。注册完毕后,你就可以对小程序进行管理。
主体验证通过后,你就可以进入到小程序的后台。之后,你就可以根据页面提示,补充小程序的名称、标志,然后下载开发者工具,开始开发你的小程序。