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

希望经过度享我的这段微信小法式开辟履历，可以给想要进修大概正在进修小法式的同学带来一些启发和帮助。
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路由

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”的在线客服联系我。
没错，客服是我。