微信小程序学习开发日记 L00

最后更新：

发现我安装小程序开发者工具是18年的事情了，那个时候还没有开始学 vue，算是开始填早几年立的一个 📌Flag 吧。

当时是想给我们的烘焙工作室的公众号做一个配套的营销工具，所以在18年底有去了解，只不过后来只做了一个展示型网站 岁礼气球派对，后来又改版了好几次现在主营是派对布置，好了有点扯远了。

填坑的动力主要是业务驱动，因为现在正好有这个任务安排，在回顾2020也大概提到了。所以今天先开始概括一下没有开发过小程序的前端，对于小程序的一些疑问。

# Roadmap

学习路径会在学习和开发中不断调整，不同阶段会有不同的理解，以下只是现阶段我对于学习顺序先后的整理。

目录结构 👉 学习日记 L01 目录结构

路由跳转 👉 学习日记 L02 路由跳转

生命周期 👉 学习日记 L03 生命周期

网络请求 👉 学习日记 L04 网络请求

拉起授权 👉 学习日记 L05 拉起授权

组件分割

# 疑问

❓ 小程序开发到底是像 Vue 还是 React？

❓ 小程序开发能否使用 npm 进行包管理？

可以，npm 支持 | 微信开放文档

tips：在小程序中使用npm包前，需先构建 npm

❓ 尺寸单位 rpx 应该怎么去理解

正常来说，在网页端我们基本都是使用 px/em/rem 这类的常规单位，然后按照不同的设备尺寸去适配，但是小程序有一个 rpx 单位，可以根据屏幕宽度进行自适应，怎么去理解呢？
其实就是看设计稿，因为 rpx 默认屏幕宽为 750rpx ，所以如果UI给的设计稿为 750px 则 1rpx 趋近于 0.5px 或者 1pt 因为大部分设备 DPR = 2，如果设计稿是 375px 宽度的则 1：1 转换就可。一句话形容就是按照设计稿的宽度除以 750 再乘以 2 来计算。

❓ 小程序是否支持CSS预处理器

不支持，但是你可以自己处理成 .wxss，具体可以查看这篇文章： 📍在小程序中使用CSS预处理器

❓ Component 如何使用 properties 中的 observer

很简单就是在 properties 声明对外属性的时候增加一个 observer ，然后就和 VueJs 当中的 watch 一样使用了。

Component({
  properties: {
    attr: {
      type: String,
      value: '',
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
      }
    },
  }
})

然后 自定义组件 下也有一个 observers 参数的，可以监听 properties 和 data 的变化。具体查看 数据监听器 | 微信开放文档

❓ bindtap 绑定的函数怎么传入自定义参数

使用 dataset，例如：<view id="tapTest" data-hi="Weixin" bindtap="{{tapName}}"> Click me! </view>，具体可以看 事件 | 微信开放文档。是不是有点蠢….

❓ 事件如何绑定在按键上

使用 bindtap 等绑定事件 事件的使用方式

❓ 是否有组件 slot

有，组件提供一个 <slot> 节点，具体文档 组件模板和样式 | 微信开放文档

❓ 组件间通信方法/事件

类似 Vue 中的 $emit 方法， this.triggerEvent("myEventName", myEventDetail, myEventOption)，文档 组件间通信与事件 | 微信开放文档

❓ 双向绑定的 properties 属性变更父级没有同步改变

绑定 properties 的时候不要使用驼峰写法，请使用短横线命名(-分割)

❓ 双向绑定的变量在键盘唤起时不会更新长度改变

在安卓出现这个问题，但是iOS没有复现问题，在视图层直接使用 content.length，在唤起键盘时键入文字，不会实时改变 length 的数字，只有在收起键盘时才会更新。
解决办法: 不使用双向绑定，使用 bindinput 去监听改变手动去 setData 就可以了。

❓ 小程序iOS端不支持 Promise.finally()

Vue 项目中很多时候我都会写 Promise.finally() 来把一些成功失败都会执行的操作放在内部，但是小程序对于 Promise 的支持是不完全的，所以没办法使用 Promise.finally()

  1. 更新 [2021-04-06] - 小程序 v2.16.1 起开始支持 Promise.finally()，但是看开发者社区反馈 iOS 下会报错。

  2. 更新 [2021-11-25] - 现在iOS使用 Promise.finally() 已经不会报错了（基础库 v2.21.0），具体是哪一个版本修复的就不清楚了 😂

❓ 小程序开发工具的调试模式能不能热更新/局部刷新，每次重新编译好麻烦

不能，(当前版本v2.16.0)，现在每次改动都会重新编译一次，文件越多编译越慢，如果一直改动比较频繁的话的话，可以在开发者工具顶部的编译模式中添加编译模式选择指定页面以及参数信息，期待以后会支持局步热更新吧….

❓ 小程序 input 组件设置 letter-spacing 无效

暂时没办法，想着用间隔来实现验证码方块之类的效果，可是不行，官方虽然说可以，但实现不了，暂时增加了输入框宽度，然后 transform 偏移光标部分到可视区域外，然后使用多 view 标签 + CSS样式模拟激活光标和文字间距

❓ 图片内容自适应容器

<image mode="aspectFit"></image>，根据 mode 值来达到目标:

  • scaleToFill 对应 background-size:100% 100%
  • aspectFit 对应 background-size:cotain
  • aspectFill 对应 background-size:cover
  • 更多 image | 微信开放文档

❓ 复制到剪切板

wx.setClipboardData(Object object) 具体文档 wx.setClipboardData(Object object) | 微信开放文档，以及接口滥用示例 5.15.4 滥用操作剪切板接口 - 原则及相关说明 | 微信开放文档

❓ 自定义组件无法应用 app.wxss 中的样式

除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
修改一下组件的 addGlobalClass 选项就可以了。具体文档

Component({
  options: {
    addGlobalClass: true,
  }
})

❓ 每次运行都会出现“AppRoute的监听器可能导致内存泄漏”的警告

每次运行都会出现该提示： [Event] 21 listeners of event AppRoute have been added, possibly causing memory leak.

在 【项目】 - 【项目设置】 的 【本地设置】 中关闭 【自动运行体检评分】 就可以了，再点击编译这个警告提示就不会出现了

附：

微信开放文档 · 小程序
微信开发者代码管理