微信小程序登高日记

编辑：宝哥软件园来源：互联网时间：2021-12-11

新天龙八部

角色扮演 | 1.85G

评分

立即下载

这家公司是小程序的新手。30天。我从开始就没有放弃过。

虽然小程序发布快一年了，但是爬坑的兄弟大多都踩过坑。而我一直停留在《你好世界》的学习阶段。一旦没有项目，只有项目才是实践学习的基础；第二，刚出来的时候，坑总是很多。爬坑总是痛苦而快乐的。

不管有多少借口，产品项目都需要拍在桌子前面，只好投降。不要动你的袖子，只管去做。

微信小程序爬坑日记(图1)

初识小程序

微信推出小程序，想实现“开箱即用”的用户体验。消除下载和安装应用程序的繁琐过程。听起来像是谷歌推出的PWA，但PWA在中国流行起来还需要一段时间。小程序借助微信用户，植入成本低，容易被用户接受。

小程序的代码风格实际上与Vue非常相似。对于习惯Vue开发模式的同学来说，入门没有太大问题。

小程序不支持前端主流框架，如Vue、Angular、React、jQuery等。而小程序有自己的编写Dom的方式，不同于我们通常在web上编写HTML的方式。但是CSS3，那些东西没怎么变。尽管文件名已更改为()。wxss)

在这个项目中，我们使用webpack作为打包工具，将代码编译成符合小程序的代码目录规范，并使用微信-mina-loader插件。实际开发和Vue下的开发习惯是一样的。Babel完成了从ES6到ES5的转换，sass的编译，压缩和转换等等，所有这些都放到了webpack中。

不支持dom操作

窗口和文档对象不能在小程序脚本中使用，因此dom无法操作。如果要操作节点，可以使用wx.createSelectorQuery()

此外，数据驱动开发模式与Vue相同，只是编写方式有所改变(vue: v-if，applet :Wx3360IF)

rpx布局

RPX(响应像素)3360可以根据屏幕宽度自适应。指定的屏幕宽度为750rpx。比如在iPhone6上，屏幕宽度是375px，有750个物理像素，那么750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。

设计师可以用iPhone6作为设计稿的基准，基本上用rpx代替px。但是在一些表单或者提示页面中，在设计稿上使用rpx会让小屏手机看起来小一点，提示页面可以根据weui用px来实现。

路由层级

WX.navigateto(对象)保留当前页面，跳转到应用程序中的某个页面，使用wx.navigateBack返回到原始页面。

关闭当前页面并跳转到应用程序中的一个页面。

切换标签(对象)跳转到标签栏页面并关闭所有其他非标签栏页面。

关闭所有页面，并在应用程序中打开一个页面。

小程序一次只能打开五页。当打开五个页面时，wx.navigateTo无法正常打开新页面。请避免多级交互，或者使用wx.redirctTo重定向。

tabBar底部导航栏

tabBar是一个数组。至少配置2个，最多配置5个，选项卡数组按顺序排序。

页面滚动到顶部

基本库1.4.0支持

wx . page rollto({ scrolltop : 0//滚动到页面的目标位置(单位px)})

图片资源，CSS中的背景图片

本地资源的图像(在开发目录中)不能在CSS中用作背景图像。您可以使用网络图片资源，或base64，或使用图像标签。TabBar图标资源可以使用本地资源。

unionid与openid的区别

每个用户在每个小程序中都有一个唯一的openid。如果想在多个微信官方账号小程序中共享用户信息，统一识别用户，需要使用unionid。要想获得uniond，需要注册微信开放平台，将需要共享的小程序绑定到微信官方账号(不超过10个，10个以上申请认证称为第三平台)。

textarea在滚动页面中的bug

文本区域、地图和其他组件由客户端创建。

原生组件，它的层级是最高的。如果有遇到定位元素的话。永远在最上面，盖不住。

请勿在 scroll-view、swiper、picker-view、movable-view 中使用 textarea 组件
CSS动画对textarea无效

项目场景：页面底部固定了一个按钮（position:fixed), 页面滚动时，textarea总是在按钮上面，点击按钮就点到了textarea

可以设置网络请求的超时时间

app.js中配置

"networkTimeout": {  "request": 10000 // 10秒}

window配置

navigationBarTextStyle 导航栏标题颜色仅支持black/white状态栏，导航条，标题，窗口背景色支持纯色，不支持渐变色

参数问题

url中添加参数，如url?a=1&b=2,onLoad(options) options.query.a, options.query.b可获取到
扫描小程序码进页面，如果想获取小程序码url中所带的参数，可通过options.scene获取，不过需要对二维码中的scene值进行转换decodeURIComponent(options.scene), 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟，开发工具模拟时的 scene 的参数值需要进行 urlencode (启动参数：scene=n%3D1001) 实际为scene=n=1001，参数n=1001

image标签图片

image默认width: 300px, height: 225px, lazy-load懒加载只对page与scroll-view下的image有效mode缩放模式，mode="widthFix"比较常用(宽度不变，高度自动变化，保持原图宽高比不变)

小程序可以监听小程序的关闭后，但是无法阻断

场景：想在小程序退出时弹出个提示框，并阻止关闭（暂时无法实现）

小程序码

小程序码(葵花码)有几种方式，只有发布过小程序才可正常显示小程序码

小程序第一次提交的审核时间较后面的长

第一次提交审核一般1天到2天。所以为了能准点上线，建议先上一次临时的版本(放一个提示页面都可以)，过了第一次审核发布再说。日常提交审核，2-3小时就可以。

频繁地setData会造成性能问题

频繁地setData操作，会出现卡顿，操作反馈延迟严重，甚至有可能闪退。

场景：原计划用countUp做数字动画，原理就是频繁地改变数字值，setData操作，渲染到模版上。

ES6转ES5，小程序检测目录中的js文件(极少)

项目中用了webpack进行ES6转ES5，所以关闭了微信小程序的ES6转ES5功能。这个坑就比较隐蔽了，测试的时候在5S真机上报js错误，发现有个js(使用了ES6，没有转ES5)文件没有使用，微信小程序会去检测目录中的js文件，如果关闭了微信自带的ES6转ES5，检测到目录中js文件不兼容ES5，就报错。这个Bug只在5S真机里出现过，5C都正常。如果开启了微信开发工具中的ES6转ES5，则会自动帮你完成转化工作，不会出现类似问题。

分享些小程序开发比较常用的第三方库