微信小程序从需求设计到开发上线全过程

2023-03-05 16:07| 来源: 网络整理| 查看: 265

希望通过分享我的这段微信小程序开发经历，可以给想要学习或者正在学习小程序的同学带来一些启发和帮助。

0x00 为什么做

首先我们要想清楚为什么要开发一个微信小程序，背景是什么？都有什么功能？可以带来什么价值？这很重要，只有想的够清楚才能做的更顺利。

这个目标可以是想通过实战开发微信小程序提升自己的编码能力，也可以是希望自己的微信小程序给别人带来便利的同时增加一个收入渠道。

至于我开发的微信小程序，通过下面这篇文章大概就能了解它诞生的背景、具有的功能和价值了。

0x01 做之前的准备

想清楚价值，确定开发小程序的目标之后，还需要学习掌握一些前置知识和技能，否则小程序开发只能停留在设想阶段。

你需要有一定的产品设计能力，可以不会画多好看的PRD，但是需要多思考琢磨如何让用户交互更友好，页面展示、跳转更符合逻辑习惯，功能模块能把握重点、有想要传递的信息主题。通过试用别人的小程序，思考他设计背后的逻辑和目的，是快速提高产品设计能力的一个好办法。你需要有一定的数据库基础，微信小程序提供的服务不可避免会涉及到数据的增删查改，而做到这些需要掌握基础SQL语法，懂得数据库、表的设计，这也是一个后端开发必备的技能。你需要有一定的Web后端开发能力，微信小程序是前端的一种展现形式，调用后端api提供具体服务，这也是典型的前后端分离架构。Web后端我推荐使用golang的gin框架进行开发，中文文档齐全，简单易用。golang和gin框架的学习推荐Go 编程基础和跟煎鱼学 Go。你需要有一定的JavaScript、CSS等前端基础，虽然微信小程序有自己的wxml、wxss语法，但是如果有这些前端基础上手起来会很快，前端我不擅长也不准备去花时间学习，所以给不了太多建议，我开发的小程序也是直接用微信原生完成的。

最后，你需要熟悉微信开发文档，微信官方通过这个文档帮助开发者快速全面的了解小程序前端开发的方方面面。

0x02 怎么做

下面以我开发的微信小程序“蜘蛛007”为例，详细给大家介绍我的设计思路以及开发历程。

一、首先，我确定了“蜘蛛007”要实现的功能

一键查询你的手机号码在哪些App和网站平台上注册过账号。

二、根据确定的需求，设计数据库、表的结构和关系

t_platform表，存储“蜘蛛007”支持查询的App和网站平台的基本信息，比如支持查询百度，会存储百度的名称，图标、开发者、访问链接等信息

t_class表，存储平台的分类，将平台分为视频播放、音乐电台、拍摄美化等多种类型，平台和平台类型通过id进行关联

三、根据确定的需求，开发后端api

写传入手机号开始查询api路由

package routers import ( "github.com/gin-gonic/gin" v1 "github.com/ririkizzu/spiderman/routers/api/v1" ) func InitRouter(env string) *gin.Engine { gin.SetMode(env) r := gin.New() r.Use(gin.Logger()) r.Use(gin.Recovery()) //手机号注册查询 register := r.Group("/api/register") { register.POST("/scan", v1.RegisterScan) } return r }

写手机号查询的service逻辑

package v1 import ( "encoding/json" "github.com/gin-gonic/gin" "github.com/ririkizzu/spiderman/pkg/e" "github.com/ririkizzu/spiderman/serializers" "net/http" ) func RegisterScan(c *gin.Context) { code := e.SUCCESS requestParam := &serializers.RegisterScanRequest{} err := c.ShouldBind(requestParam) if err != nil { code = e.INVALID_PARAMS c.JSON(http.StatusOK, gin.H{ "code": code, "msg": e.GetMsg(code), "data": false, }) return } //具体的查询逻辑省略掉了，大概就是把每个平台的查询都写成了一个插件，通过新增插件的方式去适配查询更多的平台 ... c.JSON(http.StatusOK, gin.H{ "code": code, "msg": e.GetMsg(code), "data": data, }) return }

四、根据确定的需求，开发小程序前端页面，联动后端api进行查询并返回数据

首页让用户输入手机号，点击“一键查询”按钮后调用scanRequest函数去请求后端查询api

wxml：

一键查询你的手机号码在哪些App和网站平台上注册过账号一键查询

js：

scanRequest: function () { const regex = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/ if (this.data.phoneNum == '') { wx.showToast({ title: '请输入手机号', icon: 'none' }) } else if (!regex.test(this.data.phoneNum)) { wx.showToast({ title: '手机号非法，请重新输入', icon: 'none' }) } else { if (app.globalData.credit >= 5) { this.registerScan() } else { wx.showToast({ title: '积分不足，可前往签到得积分', icon: 'error' }) } } }

后端完成查询后返回结果，小程序端对结果进行渲染展示

wxml：

{{phoneNum}} 查询到 {{summaryCount}} 条结果本次消耗5积分剩余{{credit}}积分 {{item.name}} {{item}} {{item.desc}}

五、发布上线

后端api服务我部署在微信云托管上，不用再去关注服务器、数据库等环境搭建和维护，省去了不少事。

微信小程序端的发布我这里也不再赘述了，可以参考小程序协同工作和发布。

0x03 最后

如果有任何想要交流的问题或者疑问，可以通过微信小程序“蜘蛛007”的在线客服联系我。

没错，客服是我。

【本文地址】

公司简介

联系我们