微信小程序开发总结与心得(一)

不念不忘少年蓝@ 2022-04-23 12:44 629阅读 0赞

> [Fundebug][]专注于JavaScript、**微信小程序**、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。

### 0 前言 ###

--------------------

最近的工作重心一直在小程序，也开发了几个小程序，对小程序开发的流程及相关技术相对比较熟悉，在开发过程中也总结了一些心得经验、了解一些小程序文档上没有的东西、踩了一些坑。所以想着写篇文章记录下来，并借此将小程序开发的相关知识进行梳理，方便以后参考，也作为自己工作的阶段性总结。同时也希望可以通过文章，结识更多朋友，多交流，互相学习，共同进步。另文章若有不对之处，还望指出与不吝赐教。

### 1 微信小程序基本知识与概念 ###

--------------------

微信小程序开发，入门算是非常简单，只要看官文文档即可[小程序简易教程][Link 1]。如何申请小程序账号，如何开发自己第一个小程序，如何发布，这一系列hello world操作官方文档都有手把手教学。小程序开发的每个步骤，提供的能力文档里都有，个人觉得，做小程序开发，有事没事都看下文档，因为小程序更新比较快速，同时一些细小的能力我们可能会漏掉，所以多看文档。

1.1 简单说下目录结构和app.json

--------------------

文件目录结构很灵活

先来看看小程序项目的文件目录结构

![文件目录结构][1]

除了app.json必须位于根目录下，其他文件随意，并且都可以删。并且页面文件可以放到如何位置，只要在app.json中的pages中配置了就可以。可以说是很灵活。你还可以多个页面放在同个文件夹下(我相信你不会这样做的，何必糟蹋自己呢)。

![1 1][]

接下来简单介绍下各个文件:

全局配置文件app.json

对于一个小程序项目而言，最重要的文件是app.json，它也是开发工具识别一个文件夹是否为小程序项目的标识。当使用开发者工具创建一个项目是，如果选择的是空文件夹，它会创建一个新的项目。如果是一个有文件的文件夹，它会看该文件夹中是否有app.jon文件，如果有，则它会认为是一个小程序项目，则会打开该项目，如果文件夹中没有app.json文件，则提示无法创建项目。

![1 2][]

app.json必须放置于项目的根目录下，它是小程序项目的全局配置文件。在小程序代码包准备完成进行启动后（下文会详细介绍小程序从用户点击打开小程序到小程序销毁的整个过程），会先读取app.json文件，进行小程序的初试化，比如初始化整个小程序外框样式，获取首页页面地址等。

> 其实小程序就是微信提供的一个容器，各个页面就在这个容器里加载运行销毁

下面介绍下小程序的全局配置选项:

> **注意：**
> 
>  *  所有配置项key必须使用双引号括起来，value值为字符串类型的也必须使用双引号，不支持单引号
>  *  因为小程序功能迭代非常迅速，基础库版本更新也很快，所以下面的介绍是截止目前的最新版本库2.4.0

*  ### pages ###

"pages": [
            "pages/index/index",
            "pages/log/log"
        ]
    复制代码

在app.json中，pages选项是必须配置的。该配置项注册了小程序所有页面的地址，其中每一项都是页面的 **路径+文件名** 。配置的字符串其实就是每个页面wxml路径，去掉.wxml后缀。因为框架会自动去寻找路径下.json、.js、.wxml、.wxss四个文件进行整合。也就意味着.json、.js、.wxss这三个文件的文件名必须要和.wxml的一致，否则不生效。所以一个页面至少必须得有.wxml文件。

> 总结：
> 
>  *  页面的.json、.js、.wxss文件必须与.wxml文件同名，否则不生效
>  *  每个页面都必须pages下注册，没有注册的页面，如果不访问，编译能通过，一旦试图访问该页面则会报错
>  *  可以通过在pages下添加一个选项快速新建一个页面，开发工具会自动生成对应的文件

*  ### window ###

"window":{
        "enablePullDownRefresh": ture,
        "navigationStyle": "custom"
      }
    复制代码

该配置项用于配置小程序的全局外观样式，具体请查阅文档。这里重点提一下两个比较实用的

>     //去掉默认的导航栏，轻松实现全面屏
>     "navigationStyle": "custom" , 
>     //开启自带的下拉刷新，减少自己写样式
>     "enablePullDownRefresh": ture, 
>     复制代码

*  ### tabBar ###

该选项可以让我们轻松实现导航栏tab效果，不过有个不足就是跳转可操作性非常低。就是每个tab只能跳当前小程序页面，不同跳到其他小程序。如果需要跳到其他小程序，还需自己封装个组件。

*  networkTimeout

这是网络请求超时时间，可以设置不同类型请求的超时时间，比如wx.request、wx.uploadFile等。其实很多时候我们都会忽略这个选项，小程序默认是60s超时，但我们应该手动设置更低的值，因为我们的接口一般都会在10s内完成请求（如果超过10s，那你是时候优化了），所以如果网络或者服务器出问题了，那么会让用户等60s，最后还是失败，这对用户很不友好，还不如提前告诉用户，现在出问题了，请稍后再试。

前段时间由于公司服务器网关出现了点小问题，导致有些请求连接不上，出现大量连接超时。通过之前添加的错误信息收集插件(这个是性能优化，下文有讲到)看到了很多接口返回time-out 60s。让用户等了60s还是失败，这不友好。所以这个超时时间一般设置15s-30s比较好。

*  ### debug ###

是否开启debug功能，开启后查看更多的调试信息，方便定位问题，开发阶段可以考虑开启

*  ### functionalPages ###

这个是结合插件使用的，因为微信小程序插件有很大限制，插件里提供的api很有限，wx.login 和 wx.requestPayment 在插件中不能使用，如果需要获取用户信息和进行支付，就必须通过插件提供的功能也实现。当你的小程序下的插件启用了插件功能也时，必须设置该选项为true

> 小程序插件必须挂载在一个微信小程序中，一个小程序也只能开通一个插件。当你小程序开通的插件启用了插件功能也时，必须设置该选项为true

*  ### plugins ###

"plugins": {
            "myPlugin": {
                "version": "1.0.0",
                "provider": "wxidxxxxxxxxxxxxxxxx"
            }
        }
    复制代码

当小程序使用了插件就必须在这里声明引入。小程序自身开通的小程序不能在本身应用

*  ### navigateToMiniProgramAppIdList ###

"navigateToMiniProgramAppIdList": [
            "wxe5f52902cf4de896"
        ]
    复制代码

之前小程序之间只要是关联了通过公众号就可以相互跳转，如今微信做出了限制，要这个这里配置好需要跳转的小程序，上限为10个，还必须写死，不支持配置。所以当小程序有跳转到其他小程序，一定要配好这个，否则无法跳转。

*  ### usingComponents ###

"usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
      }
    复制代码

使用自定义组件或者插件提供的组件前，必须先在这里声明

1.2 小程序启动与生命周期

--------------------

下面来说说小程序从用户点击打开到销毁的整个过程。用图说话更清晰，特地画了个流程图：

![1 3][]

> 小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。 假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

上面的流程图包含了所有内容，但毕竟文字有限，接下来详细说下几个点。

1.  小程序会先检测本地是否有代码包，然后先使用本地代码包进行小程序启动，再异步去检测远端版本。这就是小程序的离线能力，相对于H5，这是优点，能加快小程序启动速度。
2.  当本地有小程序代码包时，会异步去请求远端是否有最新版本。有则下载到本地，但该次的启动还是会用之前的代码。所以当我们发布了最新的版本，需要用户两次冷启动，才能使用到最新版本。如果想要用户一次冷启动就可以使用到最新版本，可以使用小程序提供的版本更新API[更新][Link 2]。代码如下，只要在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 开发工具

--------------------

对于小程序开发工具，还没有一款让开发者满意的工具，至少我不满意，哈哈哈！微信提供的[微信开发者工具][Link 3]。除了编译器不行外，其他都还行。但由于开发工具、ios、android三个平台运行小程序的内核不同。所以有时会出现开发工具上没问题，真机有问题的情况，特别是样式，可以通过在开发工具中设置**上传代码时样式自动补全**来解决大多数问题。另外微信开发者工具提供了真机调试功能，该功能对真机调试非常方便

还有就是可以自定义编译条件

![1 4][]

可以模拟任意场景值、设置页面参数、模拟更新等。基本满足了所有的调试。不过还有一些效果，开发工具和真机可能会不同，所以还是需要在真机上确认。

1.4 测试-审核-上线的那些事

--------------------

服务器域名request合法域名每个月只能修改5次。所以不应该每次请求一个新域名就添加一次。在开发阶段，在微信开发者工具上勾上不校验合法域名，真机上需要开启调试模式，就可以先不配置合法域名的情况下请求任何域名甚至ip地址。待开发完成了，再一次性配置所有合法域名，在微信开发者工具上取消不校验合法域名，真机上关闭调试模式，然后开始测试。

使用体验版+线上环境的接口，这就是和线上环境一模一样的，所以在发布前，使用体验版+线上环境过一遍。如果没问题，发布以后也就没问题了。

小程序二维码只要发布了线上版本调用生成小程序二维码接口才能成功返回二维码。而且二维码识别是线上版本，所以还未发布的小程序是无法生成二维码的。

线上版本有个版本回退功能，这里有个坑，就是版本回退以后，退回的版本需要重新审核才能发布

![1 5][]

还有设置体验版时可以设置指定路径和参数，这样很方便测试

![1 6][]

未完待续.......

## ##

[Fundebug]: https://www.fundebug.com/
[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2F
[1]: https://user-gold-cdn.xitu.io/2018/11/24/167415fc118011b6?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 1]: https://user-gold-cdn.xitu.io/2018/11/24/1674604e98d20455?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 2]: https://user-gold-cdn.xitu.io/2018/11/24/167416707e35856d?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 3]: https://user-gold-cdn.xitu.io/2018/11/24/167464f2be3a20fd?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fupdate%2Fwx.getUpdateManager.html
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fdevtools%2Fdevtools.html
[1 4]: https://user-gold-cdn.xitu.io/2018/11/25/16746844422539b1?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 5]: https://user-gold-cdn.xitu.io/2018/11/25/167469c237578983?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[1 6]: https://user-gold-cdn.xitu.io/2018/11/25/167469d83147ee45?imageView2/0/w/1280/h/960/format/webp/ignore-error/1