又一个小程序,VSCOM

当时写的那个VSCOM,并没有真正的需求分析+概要设计+数据库设计+详细设计,所以整体的框架真的好乱好乱,后来又慢慢的加上了其他功能又引入了大量的第三方库,可以说是已经到了自己都读不懂的地步了,虽然寒假里就计划重新写一个VSCOM,加上自己懒癌发作一直拖阿拖,所以有了VSCOM小程序的想法。

#体验

扫描小程序码或者搜索「VSCOM」体验。

Screen Shot 2017-08-19 at 15.56.43.png

#为什么会想到小程序版

因为VSCOM真的并没有多少人使用!同学还都是在我的鼓励 (bī pò) 下,偶尔上传几张VSCO照片算是扩充一下数据库顺便找找BUG。另外,发现PC端的网页已经很少有人使用了,大部分人都以手机为社交中心。

其实,总结下来就一句话:小程序开发其实容易,交不起Apple每年$99的开发者。

#VSCOM的数据

虽然数据库的字段命名千疮百孔,最后还是妥协重新写了一套接口重新整理了一下数据,这时候才知道当时为什么命名有那么随意... 然而当时用户注册的时候没有考虑那么多,小程序的VSCOM只能使用用户授权的方式登录,暂时不能登录PC版本的用户(概要设计真的很重要!!!)。

#VSCOM一些功能

1.以瀑布流的样式显示图片,详细页显示图片,作者,滤镜,参数,GPS坐标地图和like

图片使用上拉更多的方式,每次加载10张图片。点击底部的按钮可以进入个人管理页面上传VSCO图片

点击某张照片后,可以查看某张照片的详细参数页面,详细页显示图片,作者,滤镜,参数,GPS坐标地图和like数量,如果你喜欢这张照片,可以点击like(当然,这个操作不可撤销)。

vacom_1.jpg

因为每张照片的平均大小都在2~5M左右,所以数据加载的时候加载的压缩过的照片,如果想要保存某张图片可以点击图片加载大图,长按大图图片就可以保存咯。

vacom_3.jpg

2.支持按用户浏览和按滤镜名称浏览

在详细页面,点击用户名就可以查看该用户名下的所有VSCO照片,点击滤镜名称可以查看该滤镜下的所有VSCO照片。

vacom_2.jpg

3.上传VSCO照片

点击底部的添加按钮(需要用户授权)可以上传VSCO照片,每次上传限制为1张。

vscom_4.jpg

因为VSCOM的由衷就是收集优秀的VSCO照片,所以只能上传经过VSCO处理过的带有VSCO滤镜的照片,其他照片是无法上传到VSCOM的。

4.管理我的VSCOM

点击底部的我的按钮进入我的视图页面,在这里可以管理(删除)上传的所有照片。

vscom_5.jpg

5.分享VSCO照片

当然,你可以将图片页面、滤镜页面、用户页面分享给其他微信好友。

#中间遇到的坑

1.审核的坑

小程序开发起来其实很容易,所以用了两上午+两下午就完成了所有的部分,然后激动的就去提交审核了,随后腾讯也是很愉快的拒绝了,说是小程序简介不规范:

Jietu20170822-183302.jpg

改好了简介再次审核又被拒绝了,这次竟然是不允许用户自行上传照片...

Jietu20170822-183307.jpg

不能上传照片那VSCOM还能干什么...那那些云相册什么的是怎么通过审核的,后来把上传按钮文字改成了添加,又去审核了几次,结果竟然通过了。

2.安卓端和iOS端显示不一致

这个应该是小程序的BUG,个人页面中本来是显示的圆形头像,代码中也有border-radius:100px;然而一开始安卓和iOS都显示圆形的头像,后来iOS就一直显示正方形的头像,改了好几遍也没有找到到底是哪里的问题,最后直接把头像用PS切成圆的了...

3.地图显示问题

一开始计划使用小程序中的地图组件显示,所以将数据库中的坐标进行了坐标转换,转换成了腾讯地图支持的坐标系,后来发现小程序的地图组件标记点有概率不显示的BUG,所以放弃了小程序的地图组件改用了原来的百度静态地图。

#最后

以后写程序还是要规划好做好分析再写,要不然移植什么的实在是太麻烦了。

新版本的微信开发者工具看着真的好舒服。

Screen Shot 2017-08-19 at 16.00.48.png

#EOF

Tags: 小程序
11 条评论
  1. 新头像 666@(大拇指)

    1. @chempeng@(捂嘴笑)

    2. @chempeng@(捂嘴笑)

  2. dalao:小程序?分分鐘的@(滑稽)

    1. @悠然中间其实还是遇到了好多坑@(不高兴)

  3. 看介绍似乎很不错。@(呵呵)

    1. @Mist@(笑眼)

  4. 厉害。。。添加 不等于 上传。没毛病

    1. @晴和君对啊哈哈哈哈~

  5. Alm Alm

    写的真漂亮,我去看下@(哈哈)

    1. @Alm@(笑眼) 欢迎光临~

Leave a Comment