【圆方-微信小程序系列一】微信小程序开发简介

本章介绍了开发微信小程序所需的准备工作，以及微信小程序的发布流程。最后简单介绍一下第三方平台微信小程序开发和普通小程序开发的区别。

1. 微信小程序简介 1.1.小程序技术发展史

小程序并不是一个凭空出现的概念。当微信逐渐成为移动Web的重要入口时，微信就有了相关的JS API。

下面的代码使用预览图像

WeixinJSBridge.invoke('imagePreview', { current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641', urls: [ // 所有图片的URL列表，数组格式 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg', 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg' ] }, function(res) { console.log(res.err_msg) })

上面的代码是调用微信原生组件浏览图片的JS API。与引入额外的JS图片预览组件库相比，这种调用方式非常简洁高效。

事实上，微信官方从未向外界曝光过此类呼吁。此类API最初是为腾讯内部的一些业务使用提供的。许多外部开发者发现后，纷纷效仿并使用，并逐渐成为微信网页上的事实。标准。 2015年初，微信发布了一套完整的网页开发工具包，名为JS-SDK，开放了拍照、录音、语音识别、二维码、地图、支付、分享、优惠券等数十个API。面向所有网页开发者，让所有开发者都可以利用微信原生的能力，完成以前不可能或者很难做到的事情。

1.2.小程序和普通Web开发的区别

小程序的主要开发语言是。与普通的Web开发相比，小程序的开发非常相似。对于前端开发者来说，从Web开发迁移到小程序开发的成本并不高，但两者还是有一些区别的。

网页开发渲染线程和脚本线程是互斥的，这就是为什么长期脚本运行可能会导致页面无响应的原因。在小程序中，两者是分开的，运行在不同的线程中。 Web开发人员可以使用各种浏览器公开的DOM API来选择和操作DOM。前面说过，小程序的逻辑层和渲染层是分离的。逻辑层运行在应用程序中，没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。这种差异导致一些前端开发非常熟悉的库，比如 等，无法在小程序中运行。同时环境也不同，所以有些npm包无法在小程序中运行。

Web开发者需要面对的环境是各种各样的浏览器。在PC端需要面对IE、QQ浏览器等，在移动端则需要面对各种浏览器，以及iOS、系统。在开发小程序的过程中，我们需要面对iOS和微信客户端两大操作系统，以及辅助开发的小程序开发者工具。小程序的三大运行环境也各有不同。

详细介绍可以查看微信官网文档。大致意思是：为了方便在APP内与APP进行一系列的交互方式，微信开发了一套SDK方法。为了让这个系统更加完善，单独开发了一套SDK方法。编译好的模板用于调用这些SDK。至于双线程渲染，其余的优化只是辅助性的。

2. 开发者工具介绍

俗话说，工欲善其事，必先利其器。熟练使用开发者工具可以节省大量的开发和调试时间。

以下是开发人员工具的预览，您可以自行下载并安装。下载地址

2.1.界面介绍登录页面

在登录页面，您可以使用微信扫描二维码登录开发者工具。开发者工具将使用该微信账号的信息来开发和调试小程序。

项目清单

成功登录后，您将看到现有项目和代码片段的列表。

在项目列表中，您可以选择公众号网页调试，进入公众号网页调试模式。

新项目

满足以下条件即可在本地创建小程序项目：

需要有小程序；如果没有，您可以选择申请测试号。

您登录的微信号需要是开发者；

您需要选择一个空目录，或者选择的非空目录中存在app.json或..json。选择空目录时，可以选择是否在该目录下生成简单工程。

打开多个项目

该工具支持同时打开多个项目。每次打开项目时，都会在新窗口中打开。入口如下：

从项目选择页面打开项目。在项目窗口中，您可以通过菜单栏中的“项目”->“查看所有项目”打开项目选择页面。

从菜单栏最近打开的项目列表中打开的项目在新窗口中打开

新项目