simplify the life

微信小程序开发初体验

最近因为工作需要入门了一下小程序,边入门也边在思考小程序的应用场景,“用完即走” 四个字一直浮现在脑海。正好最近在学驾照,因为以前一直对车不感冒,所以连奔驰都不认识,正好做个车标速查的小程序,非常符合 “用完即走” 的理念

最终源码点击 这里(附小程序码),车标信息数据来自 车标网

因为小程序是国产的,所以 文档 是比较友好的,基本上花个半天看下就可以入门了。在一个初学者的角度,谈谈对小程序的感受

首先,小程序这个东西出现的用意是非常好的,依托于微信,自带社交、支付等,非常适合传播,比如斗地主这样的小程序(小游戏),分享到群,然后开玩,用完即走,非常之爽

然后,小程序的运行本身不依托于浏览器,没有 dom 的概念,在性能上,也比 h5 流畅了不少

可以说,小程序这个东西,还是非常有前途的

然后来说说开发这个 车标速查 小程序时候踩的一些坑吧:

  • index 页面右侧有个 a-z 的导航,如果是 web 端,用锚点即可解决,但是小程序没法用锚点,正确的解决方案是用 scroll-view 组件,而且需要设置 height 属性(程序中设置 scroll-view 的 height 属性为 100%),并且父节点需要设置 height 属性为 100%(程序中设置 page 标签的 height 为 100%)本来还想做导航到指定区域时候的 active,但是不好做,遂放弃
  • 小程序没有 div p 等标签,只能用它自带的 组件,可以把 view 组件当作是 web 开发时候的 div
  • 因为我抓取的页面,有直接抓取 html 代码,那么就有个问题,如何在小程序中插入 html 代码?如果是 web 开发,innerHTML 即可,但是小程序没有 dom,可以用 wxParse,其实就是把 html 转换为了小程序语言的组件(没有看过具体实现,我觉得应该就是先转为抽象语法树(Abstract syntax tree),然后替换)
  • 有个地方想用到类似 Vue 的 filter 功能,小程序中可以用 wxs 实现,同时貌似发现小程序 {{}} 中居然不能运算?只能基础赋值?(小程序其实自带了富文本组件 rich-text,但是不好用)
  • 小程序中有专门的 css 叫做 wxss,它建议用单位 rpx,规定屏幕宽为 750rpx。建议用 iPhone6 做设计稿,375px,然后设计稿一般是双倍,也就是 750px,那么 1px 就对应 1rpx 了,直接按照设计稿来就好了
  • app.js 有个勾子叫做 onLaunch,在小程序启动的时候会触发,这让小程序看起来更像是 app,因为类似 Vue 这样的 web app 并没有这样的勾子
  • 如果点击右上角要能够分享,必须要写 onShareAppMessage,而这个函数会在转发的时候触发。这点设计不是很能理解,我的观点是这个配置应该放在 xx.json 里面,而不是放在类似这样的勾子函数里
  • project.config.json 不需要自己去写,而是改变微信开发者工具里的一些配置后,会自动更新,类似 Alfred workflow 开发时候的 info.plist 文件
  • 最后说到发布,貌似一个账号只能发布一个小程序/公众号?之前账号注册了一个公众号,现在不能添加小程序了,只能再注册一个账号了

接下去计划用 mpvue 来改写这个简单的小程序

posted on   lessfish  阅读(1450)  评论(0编辑  收藏  举报

编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天:
2015-07-30 浏览器缓存机制浅析

导航

统计信息

点击右上角即可分享
微信分享提示