『技术分享』—— 我的第一个微信小程序-趣闻

前言

我去年3月份写了一个小项目 快毕业了,撸一个小项目(趣闻) 作为自己的毕设项目,当时接触 Android 也才半年的时间,所以写的略简单,偏入门级别的,有兴趣的话可以 clone 看一下。趣闻

小程序 的火热程度我就不多说了,我之前对这个就蛮有兴趣的,于是花了大概5天的时间,完成了 学习-入门-写项目 这一套流程。作为前端 0 基础的我都这么快入门了,可想而知,微信小程序的封装是相当好的,基本上过一遍官方文档就可以进行编写了。

项目预览

话不多说,看一下项目的整体预览:建议在 wifi 进行查看

小程序预览.gif

整体的效果就是仿照之前的趣闻项目,基本的功能都是有的。其中包括四大模块:新闻、段子、历史上的今天和小爱同学。

后面对每个模块的特点进行说明。

新闻模块

这里先声明一下,因为该项目涉及到文娱信息,需要上传相关资格证,所以就上不了线。不过我个人对此并不是很在意,因为之前的 Android 项目已经经历过上线失败了。。。

而且这个小程序本身就是自己的练手项目,没有必要非得上线不可,达到目的不就行了,如果感兴趣的也是可以把项目 clone 下来预览一下的。

看一下预览图

新闻

功能:查看多种类型的实时新闻,点击新闻查看新闻里面的图片

这里因为个人小程序是不支持外链的,因此不能查看新闻的详情。如果确实想看新闻的详情,可以点击 url 便可复制到剪贴板上,粘贴到本地浏览器进行查看。

段子模块

段子

功能:查看最新的段子笑话,支持下拉刷新和上拉加载更多功能,并可以长按段子进行复制分享。

历史上的今天

历史上的今天

功能:查看历史上今天的所有相关事件列表,支持下拉刷新,点击单个事件,查看事件的详情介绍。

小爱同学

小爱同学

其实跟小爱同学没有任何关系 (快来欺负老实人)。。这里就是普通的机器人,不过可以智能记录上次的会话内容,比如,你跟他说 「我叫小爱」,接着你再问 「我叫什么」的时候回答出你上次记录的名字。

项目知识点

这里记录一下自己开发过程中遇到的对于我来说比较复杂的地方。

对 css 和 js 零基础的我,只能在使用过程根据需要进行查找对应的使用方法,也是蛮坎坷的。

布局

当然是使用 Flex 布局,介绍两篇好的文章 Flex1Flex2,讲的很详细,足够日常的开发使用了。我这里大概总结一下。

  • Flex-direction 决定元素的排列方式
  • Flex-wrap 决定元素如何换行
  • Flex-flow flex-direction 和 flex-wrap 的简写
  • Justify-content 元素在主轴上的对齐方式
  • Align-items 元素在交叉轴的对其方式
  • Flex-grow 当有多余空间时,元素的放大比例
  • flex-shrink 当空间不足时,元素的缩小比例
  • Flex-basis 元素在主轴上占据的空间
  • flex 是 grow shrink basis 的简写
  • Order 定义元素的排列顺序
  • Aligh-self 定义元素自身的对其方式

圆角和阴影

border-radius : 设置圆角

box-shadow: 设置圆角

文字的显示行数限制

  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

其他的就是官方文档的组件使用,很详细就不多说了。

总结

从学习到开发完一个小的项目一共用了4天的时间,不得不承认官方的文档很详细,当然也会有不少的坑,但是我相信这些坑,官方会慢慢维护和完善的。根据这几天的学习开发说说我自己的心得和感受。

学习来源

  • 官方文档 (毋庸置疑,有全面、又详细)
  • 某客学院的 vip 视频(有需要私聊发给你)
  • 菜鸟教程 (这个因为时间原因没看多少,但是干货还是蛮多的)

数据来源

数据同 趣闻 来源于 聚合数据,不过我最近也在学后端,买了服务器,写了接口,不过还有许多需要完善的,就没有用,而且也是为了仿照之前项目,就直接拿聚合接口使用了。

image-20180615145049660

不过很有趣的是,单单一个新闻的接口就已经请求了 50000+,而且聚合数据平台对免费用户设置了 100次/天/接口 的限制,为了能让项目正常运行,也是特定充了 VIP 进行续命,也是很无奈。迟早有一天我要把他的数据爬到自己的服务器!

优点

  • 入门快 (如果之前就开发前端的,毫无压力)
  • 官方文档详细
  • 编译快 (作为开发 Android 人员,开发五分钟,编译两小时实在受不了)
  • 调试方便 (自带模拟器本身就很强大,而且支持远程调试)
  • API 全面 (封装了大量的通用组件和接口,直接调用即可,开发者不用进行繁琐的逻辑判断)
  • 稳定 (官方也在持续维护中)

不足之处

  • 有些时候界面略微卡顿
  • input组件(类似于 EditText) 焦点不易控制
  • 不太适合负责的嵌套滑动,会卡顿
  • 封装太好对应的就是一些需要自定义的功能不太好实现
  • 个人小程序不支持外链
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,544评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,430评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,764评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,193评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,216评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,182评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,063评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,917评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,329评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,543评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,722评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,425评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,019评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,671评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,825评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,729评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,614评论 2 353

推荐阅读更多精彩内容