小程序踩坑日记

1,847 阅读1分钟

一、image图片显示问题

1、缓存上一次图片问题

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

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

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

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

wxml

image.png

wxss

image.png

二、关于环境变量

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

image.png 其中,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+,如果需要支持,需要在开发者工具-详情-本地设置,勾选增强编译。目前的新版本应该都是核心编译,跟文档有出入。

image.png

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

image.png

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

image.png

windows:

image.png

对比官网的编译设置

image.png

可以看出,--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

六、文本中包含换行符

image.png

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

image.png

七、导航栏胶囊颜色

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

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

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

image.png