如何入门小程序开发

2018-11-01 15:13:29 浏览数 (1)

在上一篇教程中，我们教大家使用微信官方Demo快速搭建了一个小相册，并学会了如何安装开发者工具，如何创建小程序，如何做服务端配置。并利用腾讯云COS实现相册上传下载功能。

这次教程中，我们将教大家快速入门小程序开发，以Hello World不同的Level为例，了解小程序基本配置，学习小程序整体开发框架，最终完成开发到发布流程。

Hello World - 入门

在第一阶段，我们不需要了解小程序历史和技术细节，您只需要跟随我们完成基本的Hello World例子即可。

第一步

参考上一篇教程，下载微信开发者工具，并根据自己对应的操作系统进行安装。

第二步

打开微信开发者工具，选择新建小程序项目，我们先不需理解AppID的概念，新建项目时选择或使用测试号：小程序系统会给你分配测试账号，并取消勾选“建立普通快速启动模板”的选项，然后点击确定，如图。

15409575199151540957519915

第三步

在根目录下创建app.json，然后填入如下代码。

代码语言：txt复制
{

  "pages": ["pages/index/index"]

}
15409576916771540957691677

在根目录下新建pages目录，然后在pages目录下新建index目录，接着在index目录下创建index.wxml，然后填入以下代码。

代码语言：txt复制
<text>Hello World</text>
15409578243621540957824362

然后点击菜单栏的项目—保存，系统会自动创建index.js、index.json、index.wxss等目录文件，并进行编译，最终我们将看到小程序已经显示我们编写的代码Hello World文件。

15409578973521540957897352

恭喜你，已经你已经成功开发出你的第一个小程序啦！这时，你在尝试修改修改index.wxml中的hello world，然后保存，看看会发生什么？

15409580550091540958055009

Hello World - 小程序代码组成

在进阶实验前，我们先讲讲小程序的历史及上一步中配置文件的含义。

历史

从技术的维度看，小程序并非凭空冒出来的一个概念。2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、语音识别、二维码等几十个API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情了。

但是在内部测试中，微信团队发现一些复杂的页面会有白屏的问题，例如页面加载了大量的 CSS 或者是 JavaScript 文件，这些文件的执行时间占用了大量的 UI 线程，除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在页面切换的生硬和点击的迟滞感。微信面临的问题是如何设计一个比较好的系统，使得所有开发者在微信中都能获得比较好的体验。微信团队需要一个快速的加载、更强大的能力、原生的体验、易用且安全的微信数据开放、高效和简单的开发的系统，而这一系统就是本文中需要详细阐述的小程序。

配置文件含义

在上一步中，我们创建了一个app.json文件，还创建了一个index.wxml文件，系统还为我们创建了index.js、index.json、index.wxss等目录文件，接下来，将为大家阐述着几个文件到底是干什么的。为了更直观的展现。我们还是以Hello world为例。

第一步 - json文件

打开刚才的开发工具编辑器，然后在根目录下找到app.json文件，双击打开代码，然后用下面的代码进行替换。

代码语言：txt复制
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}
15409615344351540961534435

我们看到，当前界面发生了很大的变化，标题栏由原来的黑色变为了白色，在头部多了一个名为WeChat的字符，然后，我们更改navigationBarTitleText内的字符，将WeChat改为自己想设定的字符，我这里改为你自己想设定的字符，然后将原本的navigationBarBackgroundColor内部的#fff改为#ddd，然后保存，看看会发生什么。

15409619003471540961900347

我们注意到，开发者工具刷新后，顶部的bar的文字由原来的Wechat变为了你自定义的字符，bar的颜色也发生了变化。

现在明白了吗？JSON文件在小程序代码中扮演静态配置的作用，在小程序运行之前就决定了小程序一些表现，需要注意的是小程序是无法在运行过程中去动态更新JSON 配置文件从而发生对应的变化的。

第二步 - wxml文件

打开入门中创建的index.wxml文件，使用下面的代码替换原有的代码。

代码语言：txt复制
<text>当前时间：{{time}}</text>

然后在打开系统创建的index.js文件，找到data: {}行，然后在大括号之间填入下面的代码，如图。

代码语言：txt复制
time: (new Date()).toString()
15409625799711540962579971

接着，我们按下保存键，看看会发生什么。

15409626128541540962612854

我们看到系统自动将{{time}}变成了当前的时间，那这里是如何实现的呢？原来，在小程序中，我们可以说使用JavaScript代码来通过Dom接口来完成界面的实时更新，WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。我们在index.js定义了当前时间的变量，然后通过WXML中的{{time}}去获取其中的变量。怎么样，大概明白WXML是干什么的了嘛？没明白？没事，我们进行在进行一个实验。

在index.wxml文件中，添加下面的代码。

代码语言：txt复制
<view> {{a   b}}   {{c}} = d</view>
<view wx:if="{{c > 1}}"> True </view>

和刚才一样，在index.js内的data: {}行，插入以下代码。

代码语言：txt复制
time: (new Date()).toString(),
a: 1, b: 2, c:3
15409636501121540963650112

我们看到，系统已经将我们的a、b、c变量通过逻辑运算并渲染出来，同时，我们使用wx:if来判断数字c的值是否大于1，如果大于这展示True字符。

现在，大概明白WXML是干嘛的了嘛？我们先用官方文档说明下，WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。是不是有点看不懂，没关系，我这介绍下，WXML是一种类似HTML超文本标记语言，可以描述你小程序前端展示的长相，可以将你的代码转换为展示页面，后续配合WXSS及JavaScript脚本，可以写出非常漂亮的小程序。

第三步、wxss文件

现在，打开你的index.wxss文件，然后输入下面的代码。

代码语言：txt复制
/* pages/index/index.wxss */
.text-red{
  color: red
}
.text-blue{
  color: blue
}
.text-yellow{
  color: yellow
}

然后，打开index.wxml文件，使用下面的代码替换所有文件

代码语言：txt复制
<text class='text-red'>当前时间：{{time}}</text>
<view class='text-blue'> {{a   b}}   {{c}} = d</view>
<view class='text-yellow' wx:if="{{c > 1}}"> True </view>

保存后看看效果。

15409669424461540966942446

我们看到，原来显示为黑色的小程序的字变色为红色、蓝色、黄色。这里改变的颜色刚好与我们编辑index.wxss文件中指定的颜色相同。所以，你明白wxss文件是干什么的了嘛？对的，WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。

第四步、js文件

js文件使用我们已经在第二步中体验过了，小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。但是，严格的意义上来说，小程序中 JavaScript 的同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。

浏览器中的JavaScript 是由 ECMAScript 和 BOM（浏览器对象模型）以及 DOM（文档对象模型）组成的，Web前端开发者会很熟悉这两个对象模型，它使得开发者可以去操作浏览器的一些表现，比如修改URL、修改页面呈现、记录数据等等。

NodeJS中的JavaScript 是由 ECMAScript 和 NPM以及Native模块组成，NodeJS的开发者会非常熟悉 NPM 的包管理系统，通过各种拓展包来快速的实现一些功能，同时通过使用一些原生的模块例如 FS、HTTP、OS等等来拥有一些语言本身所不具有的能力。

小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。

明白了小程序中的 JavaScript 同浏览器以及NodeJS有所不同后，开发者还需要注意到另外一个问题，不同的平台的小程序的脚本执行环境也是有所区别的。

小程序目前可以运行在三大平台：

  • iOS平台，包括iOS9、iOS10、iOS11
  • Android平台
  • 小程序IDE

这种区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。截止到当前一共有七个版本的ECMAScript 标准，目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准，一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的，所以一些开发者会发现有些代码在旧的手机操作系统上出现一些语法错误。为了帮助开发者解决这类问题，小程序IDE提供语法转码工具帮助开发者，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在所有的环境都能得到很好的执行。开发者需要在项目设置中，勾选 ES6 转 ES5 开启此功能。

Hello World - 小程序的能力

在上一个步骤中，我们已经熟悉了小程序的组成及代码布局，这一步，我们将介绍小程序的部分能力，组件及API。和以前一样，我们通过Hello world来进行学习。

小程序的组件与API

我们打开小程序代码组成步骤中的index.wxml文件，然后在以前的代码中，加入下面的代码。

代码语言：txt复制
<camera device-position="front" flash="auto" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view class='text-red'>预览</view>
<image mode="widthFix" src="{{src}}"></image>

然后打开index.js文件，在page({后面加入下述代码，如图。

代码语言：txt复制
	takePhoto() {
		const ctx = wx.createCameraContext()
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				this.setData({
					src: res.tempImagePath
				})
			}
		})
	},
	error(e) {
		console.log(e.detail)
	}
})
15409691485521540969148552

然后，在你的根目录下创建一个名为app.js的文件，什么内容暂时都不要填写，保存。接下来，我们点击菜单栏的预览按钮，然后用手机扫描弹出的二维码，即可使用手机进行拍照，拍照弹出的照片将附在预览字符下方。

15409694945831540969494583

预览效果如图

我们看到，小程序已经能够正常拍照了。那么有同学有疑问了，这里的代码到底做了什么呢？接下来，我将对其解释。

组件

在上面的教程中，我们调用了下面这段代码。

代码语言：txt复制
<camera device-position="front" flash="auto" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view class='text-red'>预览</view>
<image mode="widthFix" src="{{src}}"></image>

先不管其他内容，我们主要看看<camera ....... </camera>中间代码的含义。我们看到我们定义了device-position、flash、binderror、style这几个属性。那么这几个属性到底是什么意思呢？我们可以看看官方组件文档，找到camera组件，会看到如下表的信息。

属性名

类型

默认值

说明

最低版本

mode

String

normal

有效值为 normal, scanCode

2.1.0

device-position

String

back

前置或后置，值为front, back

flash

String

auto

闪光灯，值为auto, on, off

bindstop

EventHandle

摄像头在非正常终止时触发，如退出后台等情况

binderror

EventHandle

用户不允许使用摄像头时触发

bindscancode

EventHandle

在成功识别到一维码时触发，仅在 mode="scanCode" 时生效

2.1.0

我们看到，表中刚好有我们定义的device-position、flash、binderror这几个内容，原来device-position我们设置的front是选择前置摄像头还是后置摄像头，binderror是显示用户不允许使用摄像头会触发的事件。flash是当前选择是否打开闪光灯，这里我们设置的是auto也就是自动状态。style我们可以暂时不用在意，这里指的是上一步中wxss应该写的内容，我们只是写在了wxml文件中。

我们看到，组件是小程序的一个很重要的功能，组件是小程序的基本组成单元，为了让开发者可以快速进行开发，小程序的宿主环境提供了一系列基础组件。我们刚才使用的camera组件，就是官方提供调用系统底层相机的组件。代码中所展示的button、view、image都是一种组件。

限于篇幅，我们不在本文展开所有组件的属性说明，请在使用时前往官方文档进行查阅相关组件说明https://developers.weixin.qq.com/miniprogram/dev/component/。

API

在上文中，我们其实已经调用了官方的api，不信？我们看看下面的代码。

代码语言：txt复制
takePhoto() {
		const ctx = wx.createCameraContext()
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				this.setData({
					src: res.tempImagePath
				})
			}
		})
	},
	error(e) {
		console.log(e.detail)
	}
})

熟悉吧，这段代码中，我们已经调用了微信官方给出的wx.createCameraContext()，API文件。关于此API的详细使用，可以参考官方API文档。

在这段代码中，我们首先使用const ctx = wx.createCameraContext()这段代码来将wx.createCameraContext()定义为ctx。然后使用ctx.takePhoto调用takePhoto方法进行拍照。关于takePhoto方法的使用，大家可以参考官方文档。我们在代码中定义了quality、success这两个函数。文档中指出，quality指定的是成像质量，我们选择high高质量。success是回调函数，最终存放我们的照片文件。这里存放的是tempImagePath照片文件的临时路径。

然后，我们在index.wxml的button调用index.js中的takePhoto函数。然后在image中调用scr变量做展示。

小程序发布

为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过审核的。建议先自行审核，自审完成之后，我们就可以对其进行上传啦。值得注意的是，如果你需要发布，请将这个小程序的AppID改为你在小程序管理页面注册的AppID，点击微信开发者工具的详情，然后修改AppID为你的AppID即可。

15409732532321540973253232

打开微信开发者工具，然就点击菜单栏的工具按钮，再点击上传按钮。

15409728909021540972890902

在新弹出的页面中，我们设置好版本号及项目备注。

15409729514451540972951445

然后点击上传即可。之后，请打开你微信公众平台小程序管理页面，对小程序进行审核发布。

15409733604701540973360470

之后的页面中，点击开发版本，然后再点击提交审核，审核通过后，你的小程序就可以上线了！

总结

在本章中，我们介绍了小程序的基本运行机制以及它所提供的各种能力，组合这些能力可以完成一个体验非常流畅的小程序。同时也介绍了编写完小程序之后，如何进行发布上线。当然，本文只是基础内容，后续将对每个组件及API做详细的介绍。喜欢的小伙伴请持续关注本专栏。腾讯云联合小程序给大家带来了小程序·云开发解决方案，为开发者提供完整的云端支持，弱化后端和运维操作，使用平台原生 API 进行核心业务开发，实现快速上线和迭代。欢迎免费使用！

json 微信 小程序 云上实践

0 人点赞