前段时间去了广州参加了关于「微信小程序」的技术沙龙整场下来收获颇多。实际上微信小程序刚刚发布出来的时候就关注弄了破解了的开发工具网站收录弄了破解了的开发工具跑了个官方的 Demo。
听完回来之后就想着挖个相关的坑正好看到手机上的 「ONE · 一个」。上网找到了 ONE 的接口打算搞一个仿照 ONE 官方 APP 的小程序最后就有了 weapp-one 这个项目。
关于小程序微信小程序不是 Web 也不是 Native尝试之后给我的感觉有点像是 weex。因为之前尝试 weex 的时候是下载一个 APP然后通过应用内扫码来运行对应的应用。这一点上小程序类似。
在沙龙上有位分享嘉宾有提到小程序实际上是在 Webview 之上再加上一层原生的组件。例如底部的 tabbar 以及顶部的 navbar 就是原生的。还有小程序的 map 组件是调用原生的 map 组件。
请求限制一开始就遇到了问题ONE 官方的接口是 http 的网站优化ONE 官方的接口是 http 的而且是 8000 这个端口。微信小程序对发送的请求有限制必须是 https（在本地开发可以用 http）而且不能带端口号。
所以我就使用了比较暴力的方法把开发工具中对应用来限制的代码给注释掉了反正只是用来体验一下小程序开发所以就无所谓了。
添加页面在小程序中添加页面都需要将路径添加到 app.json 中的 page 项中否则会找不到页面。与 Vue 类似每个小程序页面包含 page.jspage.wxmlpage.wxss分别对应脚本模板以及样式。
还可以添加一个 page.json 对页面进行单独配置比如配置 navigationBarTitleText 来改变导航上的文字显示诸如此类的对页面的窗口表现配置。
奇怪的组件view、text
在 wxml 里面写的是类似 HTML 的标签标准的 HTML 标签是无法使用的。只能使用微信小程序官方的组件组件对应有一些属性或事件可以调用。有类似于 <div> 的 <view> 组件基本上页面上的组件都会被<view> 包裹住。
然后文字方面是使用 <text>虽然直接显示文字也没什么问题。不过我还是把所有的文字都加上了 <text>标签。
image
说起组件微信小程序里最让我不爽的就是 <image> 这个组件了。给这个组件一个图片地址之后默认的样式不是图片的大小而是固定的 300px * 225px。与 HTML 中的 <img> 完全不同用起来有点不舒服。
<image> 组件还提供了不同显示方式的 mode不过用起来还是觉得怪怪的。
audio
音频播放的话有 <audio> 这个组件但是这个组件的样式好像是固定的类似于在网页也加上网易云音乐的外链那样。不过幸好有音频播放相关的 api 可以用这样就可以当用户触发某些操作的时候播放音频即可实现播放按钮点击后播放音频。
微信小程序在播放音频的时候开发工具上会出现对应的音乐栏可以对播放的音频进行播放/暂停。猜猜在真机上使用时会在通知栏出现音频控制。上面会显示音频的作者以及歌曲名称。但是在实际使用中有一点比较尴尬使用调用 api 的方式播放音频没有设置音频作者的选项。详情可以见
video
相较与 HTML5 中的 <video> 标签微信小程序中的 <video> 组件缺失了很多东西例如 loop 与 poster。也就是说无法在用户点击播放按钮前显示特定的图像只能是显示视频最开头。
<video> 组件同样有默认的尺寸 300px * 225px但没有 <image> 组件中的显示模式的设置。未全屏状态下在不同的分辨率上上下或者左右可能会存在黑边。
微信小程序中有特有的一个尺寸单位 —— rpx1rpx 表示屏幕宽度的 1/750 大小也就是说100% 宽度就是 750rpx。还有一个会被忽略的尺寸单位 —— rem与 Web 中的 rem 不同1rem 表示屏幕宽度的 1/20 大小。
在高度上使用 rpx 的话也会根据屏幕的宽度的大小而改变。我更倾向与宽度使用 rpx 而高度使用 rem不过其实比较喜欢用 px 来写样式这可能算是一个不好的习惯。
实现滑至最右切换页面在仿照 ONE 写微信小程序的时候遇到了一个问题使用滑块视图组件 <swiper> 去显示每日图文一共10个图文当滑动至最右时切换到选择往期列表的页面。如下图所示：