小秃僧

新生代农民工，一枚准毕业的大四学生，热爱前端开发，做个有态度、有思想、有价值的公众号。

好久不更新了，再更新已是打工人！

我将分享用云开发技术开发的校园跑腿微信小程序的源码（已开源）。

源码下载地址（也可以点击“阅读原文”进行下载）：

github.com/yangxiaohan…

接下来，我教大家怎么部署上线这个校园跑腿微信小程序，拥有属于自己的一个跑腿平台。

上线完成就可以正式运营啦。至于功能是怎么实现的，懂代码的同学可以看源代码（只想部署上线运营的同学可不看代码），有很详细的代码注释，很容易看得懂。

本来是想要一边写代码一边写教程的，但是时间不允许，所以只能讲部署上线的过程。

小程序端实现的功能有：发布跑腿需求、发布闲置物品信息、支持多个学校多个校区、跑腿员交接单押金、平台订单抽成、自由接单、发送短信、计算跑腿线路和预计时间、支持定位和搜索地址（也可手动输入）、跑腿员佣金和速度排行榜、评价跑腿员、查看评价等等功能，具体可以搜索“优我帮”小程序查看效果（该团队已经在运营）

Cms后台管理端实现的功能有：（如下图）

先看看几个大概的部分小程序界面：

该微信小程序开发技术大概涉及微信支付、vant组件、腾讯地图sdk（实现定位、线路计算）、发送短信、推送微信订阅消息、云数据库（增删改查、事务、索引、聚合查询）、实时监听数据变化、flex页面布局、云函数等等 。

以下是部署上线项目的超级详细步骤

（一步一步跟着走）

部署上线步骤

第1、材料准备（注册小程序、开通微信支付）

一张个体户或者公司的营业执照（某宝300元左右就可以代办，三到四天就可以下证，推荐代办个体户）

拿到营业执照后，用营业执照去微信公众平台（mp.weixin.qq.com）注册一个企业级的微信小程序（按照提示注册就行，注册类型必须选个体户或者公司，因为选个人注册的微信小程序无法使用微信支付，还有微信小程序的服务类目选择“教育信息服务”，不要选游戏类目。）

注册完后登录微信公众平台去进行微信认证（微信认证要交300元认证费，发票类型推荐选电子发票，付款后一会儿会有工作人员打电话核实认证信息）

微信认证完成之后，点击左边菜单栏的“微信支付”，再点击“关联更多商户号”,

再点击“成为商家”（按照提示注册就行），注册商户号（收钱用的账户，用户付款会先到这个账户，然后过一天后会自动提现到你的银行卡），填写注册信息的时候，类目推荐选零售/百货店类型的，这个无需许可证

然后提交注册商户号申请后，等待审核（大概一个小时以内就审核完成）。

审核通过后微信扫码登录微信支付平台（pay.weixin.qq.com），点击“产品中心”，点击“AppID账号管理”，再点击‘关联AppID‘，输入之前我们用营业执照注册好的微信小程序的AppID（微信小程序的AppID可以登录微信公众平台（[https://mp.weixin.…](mp.weixin.qq.com），再点击左边菜单栏的“开发管理”，再点击'开发设置'就可以看到了微信小程序的AppID了。）)

AppID就像我们的身份证号一样，每个人都有一个不同的身份证号，每一个微信小程序也是有一个不同的AppID。

输入关联后，记得登录微信公众平台（

mp.weixin.qq.com）去确认关联

关联成功后，再登录微信支付平台（pay.weixin.qq.com），再点击“我的产品”，点击JSAPI支付，点击开通即可

第2、微信小程序开发者工具的安装和导入源码

下载微信小程序开发工具

下载链接：developers.weixin.qq.com/miniprogram…

我们点击下载windows64稳定版的开发工具！

下载成功后，点击下载好的安装程序，按提示正常安装开发工具就行（如果这一步不懂的，欢迎私聊我）

打开安装好的开发工具后是这样的：

填写好AppID和选择小程序云开发，然后点击“新建”，打开后，是这个样子的：

以下是微信小程序开发工具的基本介绍（示例）：

到这一步，我们先暂停，先去下载源代码，复制这个网址（github.com/yangxiaohan…

下载源码后，先解压，解压之后打开如下图：

这就是源代码了。

接着，我们开始在微信开发者工具导入源码，首先点击微信开发者工具左上角的“项目”，再点击“导入项目”，选择刚刚我们下载好的那个源码，导入即可

第3、改app.js和app.json文件

点击app.js文件，更换环境ID（环境ID可以点击左上角的“云开发”，再点击右上角的“设置”，就可以看到了）

接着，点击app.json文件，更新顶部导航栏的文字（可以是微信小程序的名称）

第4、申请财经新闻api和更换appkey

先去极速数据官网（www.jisuapi.com）注册一个账号，然后实名认证。

实名认证成功后，申请新闻api

申请成功后，查看appkey，点击“账户管理”，再点击“基本资料”，就可以看到appkey了

复制appkey，在微信开发者工具，找到并点击index.js文件，更换appkey即可

第5、申请腾讯地图获得key并更换key

先去腾讯位置服务官网注册一个账号（lbs.qq.com），然后登录

接着创建应用，创建应用成功后，点击“添加key”，

然后填信息，微信小程序要勾选，webserviceAPI也要勾选，然后域名白名单留空就行。添加成功后就可以看到key了

接着，我们开始更换key，在微信小程序开发者工具找到并打开mai.js、qu.js、song.js三个文件，一一更换其中的key即可

第6、申请短信模板和更改短信配置

我们先去腾讯云注册一个账号，注册成功后登录进去，先做企业认证

企业认证成功之后，搜索“短信”，点击进入短信控制台，

进入之后，点击“国内短信”，再点击“签名管理”，创建签名，填写信息即可。

接着创建正文模板，短信内容分别填这三个：

1、您的订单已被跑腿员{1}接单，正在配送，请耐心等待。打开小程序请点击https://xxxxxx（这个短连接换成您生成的短连接，短链接有效期最好为一年）

2、有客户在催您哦，火速配送，辛苦您啦。打开小程序请点击https://xxxxxx

3、您好！您的跑腿订单已送达，请及时确认，打开小程序请点击https://xxxxxx

这三条短信模板都审核通过后，都会有短信模板的ID号，是区别短信的唯一号。

接着，我们在微信开发者工具找到cloudfunctions文件夹下面的cui、cui_kehu、sms三个文件夹，然后找到对应的index.js文件，更换其中的短信配置，

这个cui文件夹下面的index.js文件的短信模板ID放的是催跑腿员的短信模板，也就是对应上面的第2条短信的模板ID。

cui_kehu文件夹下的index.js的短信配置对应的是第3条，sms文件夹下的index.js的短信配置对应的是第1条

一一更换即可

他们的AppID和AppKey都是一样的，那这个AppID和Appkey在哪里看呢。

在“应用列表”这里可以看到，可以点击进入就可以看到AppID和Appkey了，复制填入就行，（如果还没有应用，可以创建）

接着，我们可以购买短信条数，一般一条短信0.05元，做完企业认证一般都会送100条，如果觉得不够用，可以在这个“套餐包管理”购买短信条数

第7、申请订阅消息模板和更改订阅消息配置

我们首先登录微信公众平台，然后点击左边菜单栏的“订阅消息”，再点击“公共模板库”，搜索订单支付成功通知，选用即可

选用成功之后，就可以看到有个模板ID，点击详情

我们回到微信开发者工具，我们在cloudfunctions文件夹下的paysuc文件夹下的index.js文件的参数要跟模板的参数一一对应，比如模板的是thing2，那代码就得是thing2，不能乱填哦。

第8、更改云函数的环境ID并部署云函数

我们在微信开发者工具中，可以看到有个叫cloudfunctions文件夹，这个文件夹都是存放云函数的，比如pay文件夹，就是pay云函数

每个云函数下都有个index.js文件，我们需要一一更改index.js文件里面的env环境ID（index.js有这个env的都得更换，没有可以不换。）

全部更换完成之后，我们记得点击右上角的“文件”，再点击“保存文件”。

一定一定一定要记得先保存文件！！！

保存成功之后，我们开始部署云函数，我们先右击cloudfunctions文件夹，看看当前环境是否已经有环境了，如果有，可以开始部署云函数了。如果没有，是空的，我们得重新启动该项目。（重启该项目的方法可以点击左上角的“项目”，再点击“重新打开此项目”即可完成重启）

上图是有环境的样子，下面开始部署云函数。

比如我们要部署add_pingjia云函数，我们可以右击add_pingjia文件夹，再点击"上传并部署：云端安装依赖（不上传node_modules）"即可

一个一个上传部署就可以了。

第9、开通cms数据管理后台和建数据库表

我们在微信开发者工具中，点击左上角的“云开发”，再点击“更多”，再点击“内容管理”，再点击“开通”，接着设置账号密码，然后等待5分钟左右就开通完成。

开通完成后，复制访问地址到浏览器登录，登录进去，点击“创建新项目”，项目名可以填“数据管理后台”，项目ID可以填“123456”，然后创建即可

创建成功点击进去如下图：

我们点击“内容模型”，再点击导入模型，导入的文件是在下载回来的xiaoyuan_paotui.json这个文件，直接把这个文件导入进来就可以了，

接着，我们继续回到微信开发者工具，点击左上角的“云开发”，再点击“数据库”，就会出现一个我们刚刚导入的数据库表。

但这些数据库表还不够，我们还要再新建user、second、publish、order、history这五个数据库表，那怎么建立呢？

其实很简单，比如我们要建user表，点击加号，输入user表名，再点击确定即可。看如下图：

其他表也类似这样建，一一建好就行。

建完所有表之后，我们要改表的权限。怎么改呢？

改权限如下图，改为所有人可读，仅创建者可读写

除了wx-ext....开头的集合不用改权限以外，其他集合（数据库表）都要一一手动更改权限如上图。

接下来，为了优化数据库的查询速度，我们给一些经常查询的数据库表加索引，那怎么加索引呢？

比如要给order表添加category字段的索引，先点击order表，再点击“索引管理”，再点击“添加索引”，填入字段信息即可，如下图：

添加索引就这么简单！

接着我们还要像上面那样的方法给publish表添加state字段、category字段的索引，一个一个加进去即可

runner表添加pass字段的索引

second表添加choose_campus字段的索引

加完即可。

第10、在微信开发者工具配置微信支付

能看到这里的，说明你离成功不远了，加油！！！

我们继续回到微信开发者工具，同样点击左上角的“云开发”，再点击右上角的“设置”，点击“其他设置”，再点击“添加商户号”，选择商户号

添加后，系统会向商户管理员发送商户绑定及 JSAPI 授权请求，一天仅能发起一次，微信记得同意授权即可

第11、更改部分图片

能看到这里的，说明你离成功只有2%啦

图片放在images文件夹里面是会占用源码的体积的，而且小程序源码的体积限制不能超过2M，所以为了节省源码的体积，使用了网络地址形式的图片。

但这个网络图片的浏览是有权限的，我的网络地址图片你们是访问不了的，也就是无法正常显示的，所以只能改回你们自己的网络地址图片。

云开发已经提供一个存储空间给我们了，我们只需要上传图片到上面，就可以拿到图片的网络地址了，那图片去哪里要呢，又要怎么上传呢？

很简单！

我们可以先去阿里矢量图库（www.iconfont.cn）下载自己想要的图片，然后再上传到云开发提供给我们的存储空间。

复制阿里矢量图官网去浏览器打开，可以搜索自己想要的类型图标，然后下载下来，然后开始上传，点击存储，再点击上传文件，如下图：

上传成功之后，点击刚刚上传的文件名称，右边弹出一个显示，可以看到有个下载链接，这个就是图片的网络地址

拿到图片的网络地址之后，就可以去替换掉微信小程序对应的图片。

比如我要换掉“我的”页面的修改资料的图片，就可以点击“my”文件夹下的my.wxml，我们就可以按照上面的方式换掉即可。（其他页面无法显示的图片都要换掉，自己不喜欢的图片也可以换掉）

（这一步如果不会，可以私聊我）

替换掉之后，记得保存！！！

点击左上角的“文件”，再点击保存

一定一定要记得保存！！！

第12、最后一步，上传代码提交审核。

能看到这里的，说明你离成功只有1%啦

按照上述方法无误操作后，就可以点击顶部的“编译”，正常编译，没有报错任何信息，也就是没有标红。就可以点击右上角的“上传”，

上传会填写版本信息，可以写第一版，

上传成功后，我们登录微信公众平台去把刚刚上传的代码提交审核。

登录进来，我们点击版本管理，就可以看到我们刚刚上传上来的开发版代码，我们选为体验版并且提交审核。

提交审核需要填写一些信息，正常填写就行。

提交后等待审核。

一般审核需要一个小时左右，审核通过就可以发布，发布成功就可以微信搜索使用啦。

就是这么简单！

nice，哪一步不懂的，可以私聊我

wx: yxh1168888

欢迎关注公众号“小秃僧”