微信小程序快速开发,两周内从创意到上线

文 | 徐佳义

最近,抽空编写了「小打卡」小程序。该产品主要是针对每日早起、健身、阅读等习惯,进行打卡记录和分享,帮助用户养成好习惯。

目前,这款小程序支持许多打卡有关的功能。特别在此记录分享一下开发过程中所用到的工具和开发心得。

一个微信小程序需要经过产品功能构思、模块划分、原型设计、UI 设计、前端开发、后端开发、接口联调、测试上线等开发阶段,之后便可推向市场,进入用户的视野。

在开发之前,你需要有对整个开发阶段有全局认识,清楚在各阶段的工作重点。

此外,还需要借助现成的一些优质工具或代码等资源,高效快速开发出小程序,实现你的创意。

本文不会手把手教你编写代码,而是讲述在整个产品开发阶段,前后端开发的一些要点。本文旨在提供一些能让你事半功倍、快速开发小程序的相关资源和心得。

1. 前端开发

1.1 根据你构思的产品的相关功能,采用「百度脑图」来规范化产品的功能模块

去粗取精,将与产品功能相关的想法进行梳理。

产生一个产品 idea 后,我的一般做法是尽快记录到备忘录。随后,围绕这个产品的功能、市场、特色、使用流程等,发散其它想法,并不断补充到备忘录上。

随着记录越多,产品也变得越来越复杂,这个时候,采用脑图工具,借鉴 app 的设计概念,对备忘录上的功能和流程方面的记录重新梳理。

这个过程,我们需要确定整个产品的模块划分,以及各个模块下的小功能,剥离出相同的功能。

如下图,这是早期小打卡的功能模块划分。只保留了我认为必不可少的功能,产品的第一屏我准备放置四个平级的主页面,每个主页面又包含相应的次级页面和功能。

1.2 根据功能模块设计,完成产品的原型图

借助简单的原型设计工具,以较低的成本,将创意可视化。

这一步的工作,需要你简单了解一下现在小程序开发中可用到的 UI 组件。

在小程序官方文档的组件这部分内容中,详细介绍了小程序提供的视图容器、表单、媒体、导航等组件。在动手之前,你至少要弄明白这些组件长啥样子。

刚开始在设计你的小程序时,先别瞎折腾华丽的界面,应该尽量参考官方已有的组件来设计你的产品,保证功能优先。

这样,你可以暂时跳过 UI 设计这个阶段,还能在编写前端代码的阶段复用官方提供的组件和代码,最多进行稍微改动。

此外,这些所谓的 UI 组件应用很广泛,在各类 app 上基本都能见到。在「墨刀」这个在线原型设计网站上,你可以用拖拽的方式,设计你的小程序界面。

1.3 编写前端代码

使用两个工具搭配,更高效地开发。

工欲善其事,必先利其器。小程序的前端部分的开发,可以使用官方 IDE,搭配白鹭 Egret Wing。

  • 前者可让你方便地预览、实机调试、公开部署
  • 后者则弥补了官方 IDE 在编辑代码方面的不足,提供了 Page 模板创建、代码补全,以及代码实时预览功能

1.4 仔细查阅官方文档,弄懂小程序提供的相关组件和 API

对比小程序的能力,仔细地分析你的产品,思考怎么组织小程序的组件和 API,去实现你的功能和页面。

前端开发阶段,虽说只是编写界面展示的代码,但你得先搞清楚小程序的基本骨架、配置、逻辑、视图及样式之间的联系。

简单说来,小程序包含一个描述整体程序的 app 和多个描述各自页面的 page

这里的 app 是指放在根目录的 app.jsapp.jsonapp.wxss 这三个文件,他们主要负责全局性的逻辑、配置及样式。

pages 则是你即将编写的多个页面。多个 pages 之间可以通过官方提供的导航功能进行跳转。

每个 page 页面由 page.jspage.jsonpage.wxmlpage.wxss 四个文件组成,其中 WXML 页面类似 HTML 文件,主要负责页面的结构。

不过比起 HTML,WXML 更加简单,你的布局基本上是在使用 <view><text> 标签,以及其它官方文档上说明的其他标签。

需要注意查看官方文档中,有关组件这部分的内容。

1.5 结合的相关代码,编写产品的前端界面

对照原型设计,使用 WXML 和样式组件,把你的产品界面写出来。

搭建产品界面这一步,不得不提 weui-wxss 这个官方开源的样式库

这个库封装了很多实用的组件,比如图片上传、消息提示、日期选择、tab 选项卡等组件,你只需要复制相应代码到你的项目就能使用,这也是让你尽量参考微信已有组件来设计原型图的原因。

这样做还有个好处,就是能让界面风格和微信尽量统一,保持一致。

另外,官方 demo 代码包含了官方组件和 API 在小程序的中的示例,值得开发者借鉴使用。

总结

这一部分主要是小程序前端界面的开发流程,对于没有后端开发基础和经验的用户,想写一个没有数据交互的产品,基本可以实践了——当然,别忘了写好页面逻辑、测试修复好 bug 再上线。

对于有后端开发经验的朋友来说,可以继续往下看。

下面,我会聊聊关于怎么快速进行后端开发的内容,当然也会尽可能地结合已有的资源或代码。

2. 后端开发

2.1 根据已完成的前端代码,编写接口文档

小程序通过 page.js 中设置数据的改变,带来界面相应的变化。你需要和服务器端程序约定好数据交互的格式。

完成前端的界面以后,你就完成了静态界面的编写。

在微信小程序中,改变 page.js 文件中定义 data 对象下某个属性的值,会引起视图层 page.wxml 文件中,相应值的改变。

简而言之,如果需要改变界面上的内容,比如不同的用户显示不同的昵称,我们只需要在 page.js 这样定义 data 对象数据:

page.xml 中你可以这样使用这个数据:

在通过网络请求后可以通过 setData() 函数来改变数据:

执行这个函数操作后,你所看到的界面内容也随之改变。

因此,在写后端代码之前,我们可以先捋一捋各个页面或者功能需要发生变化的数据,并且决定好哪些数据需要从服务器获取。

我们通过撰写接口文档,让前后端遵循这个规定,进行数据交互。

下图是我的「小打卡」小程序的接口示例:

使用过小打卡的用户都知道,在创建打卡的时候,可以在推荐列表中直接选择某个习惯,我之后会根据大家的习惯使用频次,来更新这个推荐的习惯。

所以,我先通过文档,约定这个数据的请求方式、请求链接、请求时所带的参数,以及返回的数据格式

首先在 pagedata 对象中定义这个属性 habitList,在小程序中向服务器发送网络请求并获取返回的数据后,通过 setData() 更新 data 对象下定义的 habitList 的值。

之后,推荐列表的内容将自动呈现在界面上。代码如下:

我们通过 API 文档规范约定小程序中某个页面、操作所需发送的数据,以及从服务端返回的数据格式等。

这样做,无论对于独立开发或团队协作开发,都大有裨益。

我们可以利用相关的网站或服务完成这项工作,也可以自行编写文档,目的都是约定好前后端数据的输入输出格式。

在开发过程中,还需根据你的实际情况,补充完善 API 接口文档。

需要注意的是,并非所有数据都会在视图层显示。这些非显性的数据逻辑,也需要在接口文档中去定义。

这个阶段的工作,直接会影响数据表设计阶段。所以在设计数据表之前,尽量把你的小程序的各种操作的逻辑代码写好,整理出你需要服务器端提供的各项数据。

2.2 根据接口文档和前端代码,设计所需的数据表

数据库设计请参考各类书籍和相应的设计规范。这部分一言难尽啊!

2.3. 根据接口文档数据表,确定后端的控制器、数据模型划分,利用 wafer 编写后端代码

wafer 是腾讯云开源小程序后端 PHP 套件,部署后可以轻松使用会话服务和信道服务。

授权登陆、获取用户身份信息这些功能虽然官方文档有提及,但是官方没有给出具体的后端实现代码。

腾讯云的 wafer 套件刚好满足了需求,后端可以直接部署使用。但是部署还是有点儿麻烦,更简单点你可以购买配套这个服务的腾讯云服务器。

若你希望自行部署,可以参考我的部署心得。部署后,其他具体的接口代码你需要结合设计好的数据表进行编写、调试。

后端代码编写后可以联调数据,记得完成前端小程序的网络请求、数据渲染及其他逻辑。接着,需要对产品的相关功能和逻辑的进行测试,修复相关 bug 后再上线产品。

开发小程序的过程中难免踩坑,解决办法是:

  • 多研究小程序官方文档、多研究小程序官方文档、多研究小程序官方文档
  • 多搜索相关的开发知识
  • 多阅读优质的小程序源代码
  • 多写多练,熟能生巧

当然,肯定还有很多优质的开源代码、工具等资源没有提及。欢迎大家在留言区补充!

原文链接:http://t.cn/RiGAmrX

往期精选文章

本文由知晓程序授权转载,关注微信号 zxcx0101,可获得以下内容和服务:

  • 在微信后台回复「1228」,获取全网首本《微信小程序入门指南》。
  • 在微信后台回复「加群」,加入「一起发现小程序」微信交流群。
  • 在微信后台回复任意关键词,还能获得相关小程序推荐,赶紧试试吧!

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-02-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

提高工作效率的几个小技巧

1374
来自专栏知晓程序

开发 | 减少一半工作量!有了这个「轮子」,小程序 UI 搭建超简单

前段时间,微信低调地推出了小程序「自定义组件」能力。这个能力允许开发者,根据实际需要创建自定义组件,并在小程序中使用。

923
来自专栏互联网数据官iCDO

15个常见的网站SEO问题及解决方案

引言:本文通过对15种网站SEO问题的描述从而介绍了相应的有效解决方案,使读者对困扰网站的SEO技术问题有更好的理解,以避免失去客户活造成业务损失。

793
来自专栏疯狂的小程序

新手初探小程序开发体会

得益于会react,会点jQuery,也会点vue,研究了一下小程序,发现这东西有好处也有坏处。

2065
来自专栏ytkah

如何通过iframe调用其他页面的内容

  我们在建站的时候经常会在页面出现同样的内容,比如公司简介之类的,这些东西很长,会减低网页的原创程度,相似度太高,对SE不是很友好。这时我们可以考虑把这部分内...

2684
来自专栏吉浦迅科技

OpenACC编译器也有免费午餐吃了!

今天,高性能编译器供应商Portland Group(已经被NVIDIA收购)宣布发布PGI Community Edition 版本。该版本最大的特点就是:免...

3137
来自专栏何俊林

FFmpeg开发(一)常用处理视频命令

前言:FFmpeg是做音视频开发的一个优秀的开源库,可以在不同平台下编译,能够实现视频采集、视频格式转化、视频截图、视频添加水印、视频切片、视频录制、视频推流、...

5456
来自专栏腾讯IVWEB团队的专栏

ESLint 可共享配置发布,团队自定义 ESLint 规则新鲜出炉

为了更好的统一团队的 JS 编程风格和代码质量。feflow 官方经过调研和探索,终于迎来了ESLint 的解决方案,最核心的理念是:基于 eslint:rec...

2810
来自专栏全栈工程师成长之路

浅谈PHP与MySQL开发

39115
来自专栏互联网数据官iCDO

智能分析工具PK:Tableau VS Google Data Studio

译者:吕东昊 审校:陈明艳 本文长度为3743字,预估阅读时间10分钟。 摘要:本文从数据连接器、数据处理、可视化等多个维度解析Tableau和 Googl...

3136

扫码关注云+社区