2天入门小程序开发

前言

当前的前端业务正在向多端发展，开发小程序和许多跨平台架构（ReactNative、Weex、Flutter）已逐渐成为大公司的必要选择。作为前端从业者，除了传统的web开发工具集，我们还需要掌握一定的跨端开发能力，以适应技术趋势的发展。在这里，我将通过一个简单的例子展示微信小程序的基本开发过程。

小程序开发概述

小程序的优点和缺点

作为一个有一定学习门槛的新平台，小程序必须给我们带来一些好处，才能说服程序员咬紧牙关。

小程序首先是一个半原生平台。他们可以通过微信app作为中间层调用一些本地接口。你能想象只使用js扫描二维码吗？通过调用微信小程序封装的api，开发者可以轻松使用一些常见功能，如地图定位、搜索等，并可以通过使用小程序的各种内置组件直接让用户获得类似的本地体验，而无需担心Android和IOS系统下的兼容性问题。

微信是中国最具全国性的app。小程序作为微信之子，自然具有引流的属性，更贴近用户。很难想象用户会专门为一些非常简单的需求下载app。然而，h5在使用智能手机的原生功能方面存在先天缺陷，它也不适合微应用场景。小程序具有灵活性和可移植性，可以立即使用或丢失。小程序的功能通常可以满足大多数公司的需求。作为微信生态系统的重要组成部分，小程序拥有自己的用户认证、微信支付等重要门户，易于访问，大大降低了开发成本。

所有优点和缺点都与特定的应用场景有关。小程序的缺点是什么？

与传统的js开发不同，小程序使用双线程架构。小程序的逻辑部分和呈现部分分为两个线程。两者之间的状态和UI同步有一定的成本。在某些极端情况下，存在性能瓶颈（例如超长列表的状态刷新）。同时，由于其体积小，不可能实现非常复杂的功能。普通微信小程序的主包大小不能超过2M，即使采用分包策略，打包量也将在线。

依赖微信意味着它必然会受到官方微信平台的诸多限制，在获取用户信息方面受到严格限制。许多易于使用的api仅对微信本身或一些大型工厂开放，普通开发者无法调用它们（个人注册的小程序甚至无法使用webView），开发的灵活性非常有限（作者建议Flutter，它也将在未来发布，以享受原生体验并避免跨平台兼容性）。

小道消息，让我们进入实战。

准备开发环境并了解项目结构

首先，下载。目前，它只支持macOS和Windows系统。下载后，安装，打开开发人员工具，并创建一个新项目。此时，填写AppId。我们可以直接选择并单击测试编号进入下一步。如果我们想开发自己的在线小程序，我们需要在微信公众平台上注册小程序ID并填写AppId：

形象

创建新项目后，您将获得以下界面，这是小程序的默认项目。您可以先体验代码：

编辑器面板

微信小程序开发基于js（现在也支持TypeScript）。代码组织与Vue非常相似，开发过程与标准前端工作流类似，即js+html+css。然而，在微信小程序中，微信使用wxml文件替换html文件，使用wxss替换css文件，分别控制小程序的文档流和相应样式。让我们首先观察以下项目的目录结构：

项目结构

以app开头的文件是项目的入口文件，必须位于项目的根目录中。app。js是项目和app的代码逻辑条目。json用于放置项目的公共配置。这两个文件必须存在。app。wxss控制项目的公共样式，并且是可选的。项目配置。json是项目和站点地图的配置文件。json用于配置微信是否可以对小程序及其页面进行索引。

让我们首先查看app。js文件：

//app.js

app({

onLaunch（选项）