云裂变营销网

标题: 微信小程序从需求设计到开发上线全过程 [打印本页]
作者: 匿名    时间: 2023-3-10 10:30
标题: 微信小程序从需求设计到开发上线全过程
希望通过分享我的这段微信小程序开发经历，可以给想要学习或者正在学习小程序的同学带来一些启发和帮助。
0x00 为什么做

首先我们要想清楚为什么要开发一个微信小程序，背景是什么？都有什么功能？可以带来什么价值？这很重要，只有想的够清楚才能做的更顺利。
这个目标可以是想通过实战开发微信小程序提升自己的编码能力，也可以是希望自己的微信小程序给别人带来便利的同时增加一个收入渠道。
至于我开发的微信小程序，通过下面这篇文章大概就能了解它诞生的背景、具有的功能和价值了。
0x01 做之前的准备

想清楚价值，确定开发小程序的目标之后，还需要学习掌握一些前置知识和技能，否则小程序开发只能停留在设想阶段。
最后，你需要熟悉微信开发文档，微信官方通过这个文档帮助开发者快速全面的了解小程序前端开发的方方面面。
0x02 怎么做

下面以我开发的微信小程序“蜘蛛007”为例，详细给大家介绍我的设计思路以及开发历程。
一、首先，我确定了“蜘蛛007”要实现的功能
一键查询你的手机号码在哪些App和网站平台上注册过账号。

二、根据确定的需求，设计数据库、表的结构和关系
t_platform表，存储“蜘蛛007”支持查询的App和网站平台的基本信息，比如支持查询百度，会存储百度的名称，图标、开发者、访问链接等信息

微信小程序从需求设计到开发上线全过程-1.jpg
t_class表，存储平台的分类，将平台分为视频播放、音乐电台、拍摄美化等多种类型，平台和平台类型通过id进行关联

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

三、根据确定的需求，开发后端api
写传入手机号开始查询api路由
  1. package routers
  3. import (
  4.         "github.com/gin-gonic/gin"
  5.         v1 "github.com/ririkizzu/spiderman/routers/api/v1"
  6. )
  8. func InitRouter(env string) *gin.Engine {
  9.         gin.SetMode(env)
  11.         r := gin.New()
  12.         r.Use(gin.Logger())
  13.         r.Use(gin.Recovery())
  15.         //手机号注册查询
  16.         register := r.Group("/api/register")
  17.         {
  18.                 register.POST("/scan", v1.RegisterScan)
  19.         }
  21.         return r
  22. }
复制代码
写手机号查询的service逻辑
  1. package v1
  3. import (
  4.         "encoding/json"
  5.         "github.com/gin-gonic/gin"
  6.         "github.com/ririkizzu/spiderman/pkg/e"
  7.         "github.com/ririkizzu/spiderman/serializers"
  8.         "net/http"
  9. )
  11. func RegisterScan(c *gin.Context) {
  12.         code := e.SUCCESS
  14.         requestParam := &serializers.RegisterScanRequest{}
  16.         err := c.ShouldBind(requestParam)
  17.         if err != nil {
  18.                 code = e.INVALID_PARAMS
  19.                 c.JSON(http.StatusOK, gin.H{
  20.                         "code": code,
  21.                         "msg":  e.GetMsg(code),
  22.                         "data": false,
  23.                 })
  24.                 return
  25.         }
  27.         //具体的查询逻辑省略掉了，大概就是把每个平台的查询都写成了一个插件，通过新增插件的方式去适配查询更多的平台
  28.         ...
  30.         c.JSON(http.StatusOK, gin.H{
  31.                 "code": code,
  32.                 "msg":  e.GetMsg(code),
  33.                 "data": data,
  34.         })
  35.         return
  36. }
复制代码
四、根据确定的需求，开发小程序前端页面，联动后端api进行查询并返回数据
首页让用户输入手机号，点击“一键查询”按钮后调用scanRequest函数去请求后端查询api
wxml：
  1. <view class="index">
  2.   <view class="head">
  3.     <view class="title">
  4.       <image src="../../images/spider.png" mode="widthFix" />
  6.       <text>一键查询你的手机号码在哪些App和网站平台上注册过账号</text>
  7.     </view>
  8.   </view>
  10.   <view class="body">
  11.     <input type="number" placeholder="请输入手机号" maxlength="11" value="{{phoneNum}}" bindinput="inputHandle" />
  13.     <button class="scan" type="primary" style="width: 650rpx;" bindtap="scanRequest">一键查询</button>
  14.   </view>
  15. </view>
复制代码
js：
  1. scanRequest: function () {
  2.   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}$/
  3.   if (this.data.phoneNum == '') {
  4.     wx.showToast({
  5.       title: '请输入手机号',
  6.       icon: 'none'
  7.     })
  8.   } else if (!regex.test(this.data.phoneNum)) {
  9.     wx.showToast({
  10.       title: '手机号非法，请重新输入',
  11.       icon: 'none'
  12.     })
  13.   } else {
  14.     if (app.globalData.credit >= 5) {
  15.       this.registerScan()
  16.     } else {
  17.       wx.showToast({
  18.         title: '积分不足，可前往签到得积分',
  19.         icon: 'error'
  20.       })
  21.     }
  22.   }
  23. }
复制代码
后端完成查询后返回结果，小程序端对结果进行渲染展示
wxml：
  1. <view class="register">
  2.   <view class="head">
  3.     <view class="title">
  4.       <view class="number">
  5.         <image src="../../images/iphone.png" mode="widthFix" />
  7.         <text>{{phoneNum}}</text>
  8.       </view>
  10.       <view class="summary">
  11.         <text>查询到 {{summaryCount}} 条结果</text>
  12.       </view>
  14.       <view class="credit-summary">
  15.         <text>本次消耗5积分 剩余{{credit}}积分</text>
  16.       </view>
  17.     </view>
  18.   </view>
  20.   <view class="body">
  21.     <view class="info-list">
  22.       <block wx:for="{{infoList}}" wx:key="id">
  23.         <view class="info-item" id="{{item.id}}">
  24.           <view class="info-img">
  25.             <image src="{{item.icon}}" mode="widthFix" />
  26.           </view>
  28.           <view class="info-detail">
  29.             <view class="info-name">
  30.               <text>{{item.name}}</text>
  31.               <view class="item-name-tag">
  32.                 <block wx:for="{{item.tag}}" wx:key="index">
  33.                   <view class="item-name-tag-item">
  34.                     <text>{{item}}</text>
  35.                   </view>
  36.                 </block>
  37.               </view>
  38.             </view>
  40.             <view class="info-desc">
  41.               <text>{{item.desc}}</text>
  42.             </view>
  43.           </view>
  44.         </view>
  45.       </block>
  46.     </view>
  47.   </view>
  48. </view>
复制代码
五、发布上线
后端api服务我部署在微信云托管上，不用再去关注服务器、数据库等环境搭建和维护，省去了不少事。
微信小程序端的发布我这里也不再赘述了，可以参考小程序协同工作和发布。
0x03 最后

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



欢迎光临 云裂变营销网 (https://www.yunliebian.com/yingxiao/) Powered by Discuz! X3.4