一、image图片显示问题

1、缓存上一次图片问题

上周测试的小伙伴提了一个bug，首屏列表数据返回了正常的图片的url，页面也正常显示了。如图：

当切换列表的筛选条件，接口返回的是图片url是一堆脏数据时，如图片所示：在开发者工具上，如果返回无效的url，会显示默认图片，这是产品需要的结果。（因为我自己会做一个兜底的设计，如果后端返回的是一个无效的url，会显示底层的默认图片。）
但是在真机上，依然会显示上一屏的图片，而不是默认图。（绝望....）
在官网上有看到这样子的一段话：我就猜测，会不会是因为脏数据，没有加http协议的原因，我就统一处理了图片显示

// 处理图片二次渲染时，缓存上一次图片问题
  if (url.indexOf("https://") == -1) {
    url = `https://${url}`
  }

然后，神奇的解决了。（我人还是懵的）
有哪位大神知道原因，欢迎留言告知。（求知ing...）
补充：
前面有提到一个图片的兜底设计，其实就是把正常需要的展示的图片，改成绝对定位，然后在这个image标签之前再多加一个image标签，显示默认图片。可能大家疑惑为什么不直接在js判断？鉴于公司的原因，我们会有很多图片是无效图，但是是一个完整的，正常的带有http协议的url，此时，页面上会空白，UI界面不太友好。所以才这么设计。

wxml

wxss

二、关于环境变量

开发时，可能会需要区分环境，或者查看小程序的appid，通过__wxConfig可以查看。（文档在哪里，我也不知道）

其中，envVersion分为：

develop：开发版
trial：体验版
release：正式版

三、关于小程序迁移，分享路径重置

需求：因为主体迁移，我们公司更换了小程序主体，所以需要从旧主体的小程序更换到新的小程序上。在更换过程中，如果再次打开旧的小程序分享的页面，需要默认提示跳转至新的小程序。
对于这个需求，因为分享的页面比较多，不能在每个页面的分享方法下写，更希望是在app.js统一操作，所以我又去翻了小程序的官方文档，在API下找到了一个生命周期方法：wx.getEnterOptionsSync()。

不多说，直接上代码吧！

在app.js文件的onShow方法里进行全局设置

onShow: function () {
    // 调用生命周期方法
    let enterOption = wx.getEnterOptionsSync();
    // 获取打开页面的路径path与参数query（是个对象）
    let { path, query } = enterOption;
    // jointUrl方法，就是拼接页面的路径url与参数
    let url = jointUrl(path, query);
    let { envVersion, accountInfo } = __wxConfig;
    const { appId: appletAppId } = accountInfo ?? {};
     // YJYZ_AppId是旧版小程序
    if (appletAppId == YJYZ_AppId ) {
      // 全局配置跳转至新小程序
      wx.showModal({
        title: '升级啦',
        content: '请通过新的小程序进行访问',
        showCancel: false,
        success(res) {
          if (res.confirm) {
          // _appId 是指新的小程序的appid
            wx.navigateToMiniProgram({
              appId: _appId,
              path: url,
              envVersion,
            })
          }
        }
      })
      return
    }
    // 用户登录认证
    let token = wx.getStorageSync('access_token');
    let cityData = wx.getStorageSync("cityData");
    if (token) {
      this.globalData.authorization = token;
      this.globalData.userInfo = wx.getStorageSync('userInfo');
    }
    if (cityData) {
      this.globalData.cityData = cityData;
    }
    this.getTabbarData();
    this.clearCacheStorage();
  },

四、多行文本”全文收起“功能

平时业务需求中，经常会有多行文本”全文收起“功能的需求，一直没找到好的解决方案，最近在社区有看到好的帖子，结合具体业务，我经常了改造。具体可见另一篇文章哦~~~

传送门

五、ci发布问题

平时我们发布小程序体验版，都是使用开发者工具，但是微信官方还提供了一个方便编辑的发布工具CI。当我们需要增加一些开发功能时，如果使用开发者工具，只需要在开发者工具上勾选对应的选项，即可发布成功.而使用CI，都需要额外的命令配置。

1、npm构建

开发者工具上使用npm的步骤。但是，用ci不需要特别配置，运维的同事说，每次构建都是新的过程，代码重新下，依赖重新下，构建重新执行，上传重新执行，即可成功。

2、增强编译

小程序开发者工具默认不支持es6+，如果需要支持，需要在开发者工具-详情-本地设置，勾选增强编译。目前的新版本应该都是核心编译，跟文档有出入。

CI需要添加的命令行： --enable-es7 true

3、关于上传发布超过2M问题

上一次需求迭代时，运维同事使用CI发布，出现了超过2M的提示，但是我使用开发者工具发布没这个问题。错误提示如下：

20002 'Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: 80051, errmsg: source size 2092KB exceed max limit 2MB"}'\
(node:9065) UnhandledPromiseRejectionWarning: Error: Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: 80051, errmsg: source size 2092KB exceed max limit 2MB"}\
at Object.upload (/opt/node-v10.15.3/lib/node_modules/miniprogram-ci/dist/upload/upload.js:1:3590)\
at process._tickCallback (internal/process/next_tick.js:68:7)\
(node:9065) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)\
(node:9065) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

在社区有找到类似问题，说是ci包计算错误，没有压缩导致。所以添加了压缩命令：--enable-minify true。出现了新的报错，如下：

20002 'Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: -80054, errmsg: ./component/list-condition-search/list-condition-search.wxml:125:3: expect end-tag `input`., near `view`"}'\
(node:16627) UnhandledPromiseRejectionWarning: Error: Error: {"errCode":-1,"errMsg":"inner upload fail with errcode: -80054, errmsg: ./component/list-condition-search/list-condition-search.wxml:125:3: expect end-tag `input`., near `view`"}\
at Object.upload (/opt/node-v10.15.3/lib/node_modules/miniprogram-ci/dist/upload/upload.js:1:3590)\
at process._tickCallback (internal/process/next_tick.js:68:7)\
(node:16627) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)\
(node:16627) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

但是，可以肯定的是，我没的wxml代码没问题，所以怀疑是压缩出了问题。通过查看微信开发工具，默认勾选的压缩，如图:

MAC

windows:

对比官网的编译设置

可以看出，--enable-minify true是压缩了所有代码，而开发者工具，只是压缩了JS和WXSS，所以，就添加了换了这三行命令：

--enable-autoPrefixWXSS true \
--enable-minifyWXSS true \
--enable-minifyJS true \

经过测试，上传成功。

完整的可参考的命令：

miniprogram-ci \
          upload \
          --pp ./ \

          --pkp /opt/yjyz/workload-ci/miniprogram_pk/${BUSINESS_LINE}/private.${WX_APP_ID}.key \
          --appid ${WX_APP_ID} \
          --uv ${TAG} \
          -r 1 \
          --enable-es6 true \
          --enable-es7 true \
          --enable-autoPrefixWXSS true \
          --enable-minifyWXSS true \
          --enable-minifyJS true

六、文本中包含换行符

当使用view标签显示这段文本时，页面不会换行，可改用text标签。

七、导航栏胶囊颜色

使用自定义导航栏时，测试测到右上角胶囊的颜色有时候是白色，有时候跟背景色相近，如下所示：

胶囊白色的背景比较突兀，应该跟背景色一致。

排查文件可知，自定义navbar写的导航栏的背景色是白色，而对应页面的.json文件未配置，只要配置成白色即可：

小程序踩坑日记