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

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

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

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


# Roadmap

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

概览

目录结构

生命周期

路由

发起请求


# 疑问

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

🎇 小程序开发能否使用 npm 进行包管理?

可以

🎇 路由是否可以像 vue-router 一样省略 index

不可以,需要全路径

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

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

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

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

🎇 微信授权的问题

🎇 Component 如何使用 properties 中的 observer

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

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

🎇 如何路由传参

需要跳转的应用内非 tabBar 的页面路径后可以用 query 的形式传递参数,如 path?key=value&key2=value2
页面中也可以在 onLoad 事件中接受参数

1
2
3
4
5
Page({
onLoad: function(option){
console.log(option.query)
}
})

具体查看文档 wx.navigateTo(Object object) | 微信开放文档

🎇 事件如何绑定在按键上

可以

🎇 是否有组件 slot

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

🎇 组件间通信方法/事件

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

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

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

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

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

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

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

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


附:

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