记一次小程序开发过程

原创 2017年01月03日 14:08:35

写在前面

前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质、HTTPS、审核。

先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过、什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快。

至于为什么现在选择开发小程序,原因很简单,尝尝鲜!

学习

虽然很早就听说小程序要出来了,但是在我的潜意识中,小程序不过是一个被微信优化、限制、规范过的WebApp。

果然下载完开发工具一看,起码从表面来看确实就是一个“轻量级、功能非常不强大”的前端框架。典型的JS/CSS/HTML结构,微信非得重新取个名字也没办法,逼格还是得有的。

记一次小程序开发过程

然后去看了下官网文档,真的是吃了一惊,文档少的可怜,不是说不全面,而是确实微信就提供了这么多原生功能。很多常用的JS组件全都没有,看样子之后很多地方都需要自己实现。

大概浏览了一遍,开发逻辑基本和常规前端无异,如果遇到大工程,可以用glup或者grant等工具。

设计

用demo写了几句话之后大概明白了语法规则,然后就开始思考做个什么。

一时半会想不到做什么,就把之前做的一个跑车展示软件拿出来再做一遍吧。

这是当时在iOS和安卓上做完的效果:

记一次小程序开发过程

品牌列表

记一次小程序开发过程

车型浏览

所以整体软件结构非常简单,一个品牌列表页,一个左右滑动的详情页。当然由于微信小程序的限制,不能外链,不能加iframe视频,因此图集、视频功能取消。

整个小程序唯一的互动就是点赞。点赞数会记录到服务器统计,同时在本地也保存一下,因此不是真正意义上做到用户点赞。

为什么?因为没有申请小程序appid,无法真正获取用户信息。

开发

首页列表的开发非常简单,思路是:

1.请求服务器数据列表

2.用for标签渲染出每个item

3.为每个item添加点击事件,OK

代码非常简单,一句请求、一句页面跳转。

记一次小程序开发过程

首页开发

在页面布局上,虽说是CSS,但是感觉还是不如CSS好用,还是遇到了很多未解之谜。尤其在我的设计里需要悬浮、百分比设计,结果总是出现莫名的bug,最后不得已固定了像素。

然后就是详情页,好在微信提供了一个类似banner广告的组建Swiper,功能可以说是异常地不强大!

自定义性非常糟糕,万幸地是提供了一个滑动change事件。

再后面就是去写每一个item的布局,费了好大劲,总是发现微信的image组建底部会出现空白,无论改变margin还是padding都没用,不得已全部改成view。

记一次小程序开发过程

详情页

UI全部写完后就要实现应用唯一一个互动功能:点赞。

1.向服务器发起请求,点赞+1

2.本地记录被点赞的汽车id

3.swiper滑动时刷新是否点赞

在这里遇到了一个大坑,可能是小弟愚昧,微信竟然没有提供元素获取的方法,没有jQuery的seletor,也没有HTML原生的getElement,导致我都不知道怎么去获取按钮。希望懂的朋友留言交流一下,谢谢。

最后不得已留了两个按钮,一个点赞,一个已点赞,根据状态隐藏。

写在结尾

第一个功能非常简单的小程序就做完了,要说有什么用,没什么用,自己玩的开心就行了。当然这也是一个学习的过程,后面肯定要开发并发布更多的小程序,也会去接一些小程序开发外包。

作为一名开发者,微信小程序的开发体验让我很失望,远远不如前端。但是作为一名产品,我却很开心,小程序提供了大量机遇,可以用最简单的方式实现非常多的功能。

如果你也想研究、开发小程序,如果你也喜欢研发产品,欢迎联系灯灯。

img_0043

后续我也会继续发布我小程序开发的学习进度。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Iframe 用法浅析

解释成“浏览器中的浏览器“很是恰当 用于设置文本或图形的浮动图文框或容器。BORDER设定围绕图文框的边缘宽度FRAMEBODER设置边框是不否为3维(0=否,1=是)HEIGHT,WIDTH设质边框...

“画中画”效果--谈IFRAME标签的使用

作者:秋实    文章来源:天极网页陶吧 纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕...

java程序开发过程中会话管理的技巧

有效安全用户的会话状态对Web应用程序来说至关重要。如淘宝的网上交易系统。因为在同一时间可能有数以千计的用户在使用这个系统。为此服务器必须要知道当用户在浏览不同网页查询并选购商品时,哪些商品是属于哪个...

用一个例子来说明程序开发过程中的粒度和弹性控制

前言 弹性和粒度是程序开发中的两个重要概念,对这两个方面的控制直接决定一个程序员所能控制的程序的规模.如果粒度太粗,则会倒至模块自身规模太大难以维护.如果粒度太细则模块在复用的时候就会很繁琐. 一...

IOS: RoadMapIOS 应用程序开发过程

P30 应用程序开发过程     尽管应用程序开发看上去难,但是我们还是可以把这个过程浓缩成几个简单的步骤。下面的这些步骤将帮助你开始并指导你正确的开发你的第一个应用程序。 构思     每一个伟大...

从SQL SERVER数据库生产网站静态页面的程序开发过程

学校网站一直受攻击,由于服务器上存在两套系统,一是教务管理系统,一是后开发的CMS系统。由于时间比较紧,采取了最简单的判断方法,假定攻击是从CMS系统中漏洞进入的,那么让CMS生产的全部是HTML页面...

TODO:小程序开发过程之体验者

小程序开发过程,先下载开发者并安装开发者工具,现在腾讯开放测试了,普通用户也可以登录开发者工具,如图普通用户登录为调试类型,但是只能建立无AppID的项目...

Python学习笔记(二)Pytho解释器和程序开发、执行过程

Python程序编写支持交互式和执行文件两种,python程序执行过程是现将代码转变成字节码,再发送给虚拟机解释执行。Python开发中,还包含一些优化基本执行模块的优化系统,试图提高Python的运...

【公开源代码】详述多用户博客程序开发过程-step by step(2)-【会员系统(注册)】

 本程序没有做前期策划,我的想法是在程序的编写过程逐渐形成,当然这是非常错误的做法。总体目标是做一个自由、轻松,面向专业人士的多用户精品博客。 经过短暂的考虑,决定第一阶段先编写会员系...
  • yh3000
  • yh3000
  • 2014年07月07日 20:08
  • 1091

【公开源代码】详述多用户博客程序开发过程-step by step(3)-【会员系统(登录)】

会员登录多数代码与会员注册神似,只是把INSERT语句改成了SELECT语句,接触一个称作超级全局变量的新知识,就这么简单。 对之前的注册界面做小小的修改,就完成了登录界面...
  • yh3000
  • yh3000
  • 2014年07月10日 10:35
  • 530
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:记一次小程序开发过程
举报原因:
原因补充:

(最多只允许输入30个字)