了解小程序

更新日期: 2019-07-12阅读: 2.2k标签: 小程序

小程序到底是什么?

顾名思义,「小程序」本质上与我们平常经常使用的 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  右侧下半部分为调试器,小程序的运行结果、输出等信息,会在这部分进行显示。

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

 

四、小程序账号

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

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

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

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

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

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

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

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

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

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

需要注意的是,验证过程中,你需要验证你的手机号,并使用你自己的微信号扫码确认。

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

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

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

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

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

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


链接: https://www.fly63.com/article/detial/5857

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序报错Do not have xx handler in current page的解决方法总汇

最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。

微信小程序-自动定位并将经纬度解析为具体地址

微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序UI组件、实用库、开发工具、服务端、Demo整理分享

小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等

微信小程序实现右侧菜单的功能效果

这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

微信小程序_实现动画旋转的多种方式

三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多

微信小程序Socket的实现_基于socket-io

在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!