前言

我最近的工作重点是小型程序。我还开发了几个小程序。我对小型程序的开发过程和相关技术比较熟悉。在开发过程中，我还总结了一些小程序文档的经验和理解。事情不在那里，有些坑已经踩到了。因此，我想写一篇文章进行记录，并以此来整理有关小程序开发的知识，以供将来参考，并作为我工作的分阶段总结。同时，我希望通过文章，我可以结识更多的朋友，交流更多的东西，互相学习，共同进步。另外，如果这篇文章有什么问题，我希望指出来并给我建议。

1微信小程序的基本知识和概念

微信小程序的开发，入门非常简单，只需查看官方文档即可获得小程序的简单教程。如何申请一个小程序帐户，如何开发您的第一个小程序，如何发布，这一系列官方的hello world操作文档都有动手操作说明。在提供的功能文档中提供了迷你程序开发的每个步骤。我个人认为，如果您正在做小程序开发，则可以阅读文档，因为小程序的更新相对较快，同时我们可能会错过一些小的功能，因此请阅读更多文档。

1.1只需谈论目录结构和app.json

文件目录结构非常灵活

首先让我们看一下applet项目的文件目录结构

文件目录结构

除了app.json必须位于根目录之外，其他文件都是免费的并且可以删除。只要在app.json中的页面中进行配置，就可以放置页面文件的位置。可以说是非常灵活的。您还可以将多个页面放在同一个文件夹中（我相信您不会这样做，为什么还要麻烦自己）。

微信小程序开发

接下来简要介绍每个文件：

全局配置文件app.json

对于小程序项目，最重要的文件是app.json，这也是开发工具的标识符，用于识别文件夹是否为小程序项目。使用开发人员工具创建项目时微信小程序开发，如果选择一个空文件夹，它将创建一个新项目。如果它是一个包含文件的文件夹，它将查看该文件夹中是否有一个app.jon文件。如果存在，它将视为一个小程序项目并打开该项目。如果文件夹File中没有app.json，则会提示您无法创建项目。

微信小程序开发

app.json必须放置在项目的根目录中，它是applet项目的全局配置文件。在准备好启动小程序代码包之后（下面将详细描述从用户单击以打开小程序到破坏小程序的小程序的整个过程），将首先读取app.json文件，小程序将进行初始化，例如初始化整个applet的框架样式，获取主页地址等。

实际上，小程序是微信提供的容器，每个页面都在该容器中加载，运行和销毁

以下描述了小程序的全局配置选项：

注意：

"pages": [

"pages/index/index",

"pages/log/log"

]

复制代码

在app.json中，必须配置pages选项。此配置项注册小应用程序所有页面的地址，每个地址都是页面的路径+文件名。配置的字符串实际上是每个页面的wxml路径，.wxml后缀已删除。因为该框架会在集成路径下自动找到四个文件.json，.js，.wxml和.wxss。这意味着.json，.js和.wxss这三个文件的文件名必须与.wxml的文件名相同，否则它们将无效。因此，页面必须至少具有.wxml文件。

摘要：

"window":{

"enablePullDownRefresh": ture,

"navigationStyle": "custom"

}

复制代码

此配置项用于配置applet的全局外观，有关详细信息，请参阅文档。这是两个更实用的。

//去掉默认的导航栏，轻松实现全面屏

"navigationStyle": "custom" ,

//开启自带的下拉刷新，减少自己写样式

"enablePullDownRefresh": ture,

复制代码

此选项使我们可以轻松实现导航栏的选项卡效果，但缺点是跳转的可操作性很低。也就是说，每个选项卡只能跳到当前小程序页面，而不能跳到其他小程序。如果需要跳转到其他小程序，则需要自己打包组件。

这是网络请求超时时间。您可以为不同类型的请求设置超时期限，例如wx.request，wx.uploadFile等。实际上，很多时候我们将忽略此选项。小程序默认为60秒超时，但是我们应该手动设置一个较低的值，因为我们的界面通常会在10秒内完成请求（如果超过10秒，则您有时间进行优化），因此，如果网络或在服务器上，将允许用户等待60秒，最后失败。这对用户非常不友好。最好事先告知用户现在有问题，请稍后再试。

前一段时间，由于公司服务器网关的小问题，一些请求无法连接，并且发生了大量连接超时。通过以前添加的错误信息收集插件（这是一个性能优化，将在下面进行讨论），我看到许多接口返回超时60s。让用户等待60秒或失败是不友好的。因此，超时时间通常设置为15s-30s。

是否打开调试功能，将其打开后，您可以查看更多调试信息，这便于查找问题。您可以考虑在开发阶段将其打开。

这与插件一起使用，因为微信小程序插件有很多限制，并且插件中提供的api非常有限。 wx.login和wx.requestPayment不能在插件中使用。如果需要获取用户信息并付款，则还必须实现插件提供的功能。启用小程序的插件功能后，必须将此选项设置为true

小程序插件必须安装在微信小程序中，小程序只能激活一个插件。启用小型程序的插件功能时，必须将此选项设置为true

"plugins": {

"myPlugin": {

"version": "1.0.0",

"provider": "wxidxxxxxxxxxxxxxxxx"

}

}

复制代码

当小程序使用插件时，必须在此处声明它。小应用程序本身打开的小应用程序本身无法应用

"navigateToMiniProgramAppIdList": [

"wxe5f52902cf4de896"

]

复制代码

以前，小程序可以相互跳转，只要它们通过官方帐户关联即可。现在微信已经有了限制。如果在此处配置，则需要跳转的小程序数量限制为10，并且必须进行硬编码。不支持配置。因此，当该小程序跳转到其他小程序时，必须配备该小程序，否则无法进行跳转。

"usingComponents": {

"hello-component": "plugin://myPlugin/hello-component"

}

复制代码

在使用自定义组件或插件提供的组件之前，必须先在此处声明

1.2小程序启动和生命周期

让我们讨论从用户单击以打开小程序到销毁小程序的整个过程。使用图片说话更清晰，并绘制流程图：

微信小程序开发

启动小程序有两种情况，一种是“冷启动”，另一种是“热启动”。如果用户已经打开了一个小程序，然后在一定时间段内再次打开了该小程序，则此时无需重新启动，只需将背景状态下的小程序切换到前台即可，此过程是热启动；冷启动是指用户，如果第一次打开该小应用程序或在被微信破坏后再次打开该小应用程序，则该小应用程序需要重新加载并启动。

上面的流程图包含所有内容，但是在所有文本都受限制之后，让我们详细讨论接下来的几点。

小程序将首先检测本地是否有代码包，然后使用本地代码包启动小程序，然后异步检测远程版本。这是小程序的脱机功能。与H5相比，这是一个优势，可以加快applet的启动速度。当本地有一个小的程序代码包时，它将异步请求对端是否具有最新版本。如果有，它将在本地下载，但是以前的代码仍将用于此启动。因此，当我们发布最新版本时，用户需要先冷启动两次，然后才能使用最新版本。如果希望用户在冷启动的情况下使用最新版本，则可以使用小程序提供的版本更新API更新。代码如下，只要将以下代码添加到app.js的onShow函数中，每次更新小程序时，都会提示用户更新小程序。但是，每次更新此提醒时，都会在一定程度上影响用户体验。如果您组合后端配置并在每次进入时都读取配置，则可以根据需要更新版本。例如，如果必须更新用户才能使用它，请使用强制更新。对于某些次要版本，您无需使用此强制更新。

if (wx.canIUse('getUpdateManager')) {

//检测是否有版本更新

var updateManager = wx.getUpdateManager()

updateManager.onCheckForUpdate(function (res) {

// 请求完新版本信息的回调，有更新

if (res.hasUpdate) {

wx.showLoading({

title: '检测到新版本',

})

}

})

updateManager.onUpdateReady(function () {

wx.hideLoading();

wx.showModal({

title: '更新提示',

content: '新版本已经准备好，是否重启应用？',

success: function (res) {

if (res.confirm) {

//清楚本地缓存

try {

wx.clearStorageSync()

} catch (e) {

// Do something when catch error

}

// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启

updateManager.applyUpdate()

}

}

})

})

updateManager.onUpdateFailed(function () {

// 新的版本下载失败

console.log('新版本下载失败');

})

}

复制代码

1.3开发工具

对于小程序开发工具，没有人能满足开发人员的需求，至少我不满意，哈哈哈！微信提供的微信开发者工具。除了编译器不好之外，其他一切都很好。但是，由于开发工具，ios和android平台的缘故，用于运行applet的内核有所不同。因此，有时候在某些情况下开发工具没有问题，而实际的机器尤其是样式存在问题。通过在开发工具中上载代码时设置样式的自动完成，可以解决大多数问题。另外，微信开发者工具提供了实设备调试功能，对于实设备调试非常方便

还可以自定义编译条件

微信小程序开发

您可以模拟任何场景值，设置页面参数，模拟更新等。基本上可以满足所有调试要求。但是，有一些影响，开发工具和真实机器可能有所不同，因此您仍然需要在真实机器上进行确认。

1.4项测试-评论-在线内容

服务器域名请求合法域名每月只能修改5次。因此，不应在每次请求新域名时都添加它。在开发阶段，请检查微信开发者工具不验证合法域名。需要在真实计算机上打开调试模式，并且您可以在不配置合法域名的情况下请求任何域名甚至IP地址。开发完成后，一次配置所有合法域名，在微信开发人员工具上取消对合法域名的不验证，关闭真实计算机上的调试模式，然后开始测试。

使用体验版本+在线环境界面，该界面与在线环境完全相同，因此在发布之前，请使用体验版本+在线环境进行浏览。如果没有问题，则发布后不会有问题。

仅当发布了在线版本并调用了用于生成小程序QR码的界面时，才能成功返回小程序的QR码。而且，QR码识别是在线版本，因此尚未发布的小程序无法生成QR码。

在线版本具有版本回滚功能。这里有一个坑。回退版本后，需要检查返回的版本才能发布

微信小程序开发

设置试用版时，还可以设置指定的路径和参数，非常方便测试

微信小程序开发

待续...