网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 网站建设 » 正文

从0开始搭建微信小程序(前后端)的全过程

2019-8-7 22:4:21 | 作者:老铁SEO | 0个评论 | 人浏览

  有段时间比较闲就尝试着做了一个微信小程序,一是为了锻炼自己独立部署一个前后端全链路系统的能力,二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐,那什么是优质的信息呢?我这里假设的是排行榜里越靠前的信息就越是优质的信息,于是就做了一个这几类信息的排行榜小程序,当然排行的信息不是我随便瞎编的,数据来源主要是豆瓣以及其他一些排行网站,希望排行数据是权威和客观的,能最大化的减少用户获取优质资源的成本。

  下面讲解的可能不会太详细,毕竟想呈现的是一个全过程,弄一个非常详细的图文教程反而显得有些冗长,有些详细操作过程需要读者自己去参照相关文档,有些文档链接也会给出。OK,准备好了吗?一起开始这趟快乐的旅程吧。

  工欲善其事,必先利其器。要做的事明确了,那怎么做呢?需要准备什么呢? 下面我将我涉及到的以等式的形式罗列出来:

  进入:微信公众平台, 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。

  有了账号后,我们就可以使用这个账号进行开发了,开发用的IDE是腾讯出品的微信开发者工具,进入:小程序开发工具,下载对应的版本安装即可。

  打开刚下载好的微信开发者工具,扫码登录、创建小程序项目。登录微信公众号平台,在开发-开发设置-开发者ID中找到你小程序的AppID并填入到项目设置里。

  小程序前端开发其实就是在腾讯的开发工具里,使用js语言,遵循腾讯小程序的开发文档规范进行代码编写。开发过程中可以编译、预览、真机调试等,可以使用各种插件,可以调用一些公共的api或者自己定义的后端接口,也可以使用腾讯提供的云函数。

  调用的后端接口需要是https开头的,并且需要在微信公众平台的开发-开发设置-服务器域名里配置好。

  开发完成后就可以准备上线了,首先在开发者工具里将写好的代码上传,点击上传,定义版本号和注释,再到微信公众平台的版本管理提交审核,待审核通过了就表示上线成功了,就可以在微信中搜索到你的小程序进行访问了。

  到这里,前端的工作就算是完成了,其实一般如果不涉及复杂数据处理的话,后端不是必需的,直接所有简单数据都存放在前端就行了。如果你的小程序是这样的话,那本文到这里就可以结束了。后面的你也不需要看了。如果你需要更灵活的交互,更复杂的逻辑,那后端接口则必不可少了。那更复杂的后端数据接口又是怎么完成的呢,跟着我继续往下走你就知道了。

  后端主要是提供给小程序数据接口,让小程序各个页面都能有排行榜数据展示,这里我提供的是http接口,返回的Json格式的字符串。使用的语言是Java,使用的框架是SpringBoot,将最终的java代码打包成war包部署在云主机上的web服务器Tomcat中,Tomcat就可以自动的将通过url过来的请求分发到我的程序代码的处理逻辑中,处理完请求拿到相应的数据则以Json字符串的格式返回。

  首先要存放后端程序代码,需要一台机器,自己的电脑虽然也可以,但是自己的电脑可不能保证24小时都开机且让外网能访问到,所以需要购买一台云服务器;其次,外网能访问到意味着需要一个公网IP,购买的云服务器会配套一个对应的IP地址。

  这里我使用的是腾讯云服务器,进入官网购买:腾讯云,选择服务器的配置,付款即可。

  基于经费预算以及实际需要(其实还是因为舍不得花钱)的考虑,我这里选择的是比较低配的机器:

  域名是用来映射到IP上,便于直接使用域名访问其绑定IP所在的服务器。虽然直接用IP和端口的形式也可以访问到我们购买的云服务器,但是一来IP不好记,二来微信不允许使用IP加端口形式的url。所以只能“慷慨解囊”购买一个域名了。

  域名可以在任意域名服务商购买,我为了方便也是直接在腾讯云上买的,购买链接:域名注册

  买好了域名,那这个域名怎么用呢,不和IP配套使用的域名是没有任何意义的域名。这里我们需要将这个域名或者其子域名绑定在我们需要对外提供服务的服务器所对应的IP上,也就是我刚刚购买的云服务器的IP上。

  在腾讯云后台的云解析里,点击你的域名添加记录,一般主要是添加A记录,也就是将域名绑定到IPv4地址上,可以添加多条,以主机记录区分各级的域名,@表示直接使用二级域名,其他的则表示使用三级或更多级的域名,挂在你自己二级域名以下的多级域名都归你管。

  为什么要域名备案呢?这个,普天之下莫非王土,互联网这块一亩三分地自然也是属于国家的,不能随随便便让你接入服务。要想在这块地开垦拓荒,不是不可以,只是需要向国家报备,接受监管。

  整个小程序的搭建过程,域名备案花的时间是最长的,花了十几二十天。进入备案页面:备案管理开始备案,详细的我就不多说了, 备案过程详情参考:网站备案 主要流程包括下面几个:

  (1) 办理幕布拍照 (2) 验证备案信息 (3) 填写主体信息 (4) 填写网站信息 (5) 上传材料 (6) 确认备案信息,提交初审 (7) 通过审核,完成备案

  为什么需要SSL证书呢?因为配置了SSL证书后可以让我们的url以https开头,这是微信小程序中要求的域名访问方式,以加密传输的方式更加安全。

  说是购买,其实你可以选择免费的证书“购买”,一样可以达到目的,只是没有付费的加密功能强,安全性自然弱了一等。不过这也阻拦不了我选择免费的,毕竟穷字当头。

  进入购买页面:SSL证书, 选择你要购买的证书的配置,下单付钱即可,将证书下载下来,后续配置web服务器用得着。

  经过了前面5个大步骤,这时我们的服务器具备了使用https协议通过域名访问的能力。接下来的工作就剩下开发我们的后端接口以及把后端程序代码部署到这台服务器上供小程序访问。

  安装这些工具就不细讲了,网上一大堆教程,而且要是不懂后端开发的,安装了这一套环境也没用,这里姑且假设读者也是懂一定的后端开发知识。

  下面列出最主要的一部分Java代码来说明后端程序是怎么提供的http接口:

  上面这段代码,就是其中的两个接口,一个是通过公共API获取豆瓣top250电影信息,一个是通过爬虫数据获取的华语top100电影信息。可以看到SpringBoot使用RestController注解表明此类处理http请求,并在每个RequestMapping对应的方法上都返回json格式的数据。

  RequestMapping注解的作用是为每个方法映射一个url。@RequestMapping注解可以作用在控制器类上,也可以作用在其下的某个方法上。当在类级别上添加@RequestMapping注解时,这个注解会应用到控制器的所有方法上。而方法上的@RequestMapping注解会对类级别上的@RequestMapping的声明进行补充。这就是上面最终的url是类加方法上的路径的原因,在本地测试的时候在浏览器里通过url:就可以获取到返回的数据。

  程序代码开发完成后,使用Maven构建项目并将代码打包成一个war包形式的文件,在target目录中可以找到该war包,后面会讲到这个war包的用途。

  排行榜数据是要具有一定的权威性,客观性的,所以当然不能我随便拿一些数据排列一下就成的,我自己又没有能力去统计这几类信息的相关排行,所以我就想到了拿来主义:从别人那里拿已经具备一定权威的数据。豆瓣有一些公共开源的api可以拿到我想要的部分数据,另外一些数据在其他各大排行榜网站上都有,但是没有现成的api把他们的数据提供给我,他们既然不给,那我只能自己去取了。

  我使用Python写了一些爬虫软件定期的爬取特定的排行榜网站上的数据,用这些数据更新我本地的静态数据,这样我的Java程序就可以拿到相对新的数据了。这里其实我还可以做得更好,但为了快速的上线,我来不及使用数据库落地这些爬取来的数据,这样有个不好的结果就是,每次服务重启的时候,有一段时间的数据不是最新的。这在我的可接受范围内,后面有时间再去解决这个问题吧。

  豆瓣的api示例:,通过这个url可以批量分页的拿到top电影榜的数据。

  python爬虫则使用的是urlopen,urllib.request.urlopen()函数是用于实现对目标url的访问,返回url对应的网页数据。再使用BeautifulSoup对网页数据进行解析,主要是遍历搜索文档树从而拿到自己想要的那部分数据。

  首先登录购买的那台云服务器,部署前先安装好环境,主要是安装JRE和Tomcat,安装好后还需要对Tomcat进行一番配置。

  安装Tomcat 需要提前安装好Tomcat。进Tomcat官网下载对应版本的Tomcat压缩包:Apache Tomcat,将下载好的压缩包拷贝至指定的目录并解压,我这里是拷贝到

  把我们之前购买并下载好的SSL证书配置在Tomcat中,具体配置过程参考:Tomcat 证书部署,或者参考官网文档:

  将我们之前用Maven打包好的war包拷贝到安装Tomcat的webapps目录下,如我这里下图的位置:

  为了方便,上面有些文件是在自己的电脑上下载好了,再通过FileZilla上传到云服务器上,我自己电脑和云服务器之间的其他文件传输也都是用的这个工具。

  随着Tomcat的配置以及部署成功,我们的后端接口就可以通过url访问到了。

  还有很多数据没准备好,后面有时间再优化优化。另外既然云服务器买都买了,怎么着也得充分的利用下,所以又在上面搭了一个个人博客,点下面我的博客链接看一下效果吧:

  前言现在微信小程序越来越火了,相信不少人都通过各种途径学习过微信小程序或者尝试开发,作者就是曾经由于兴趣了解开发过微信小程序,最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发...博文来自:BingeZha的博客

  博主是大四学生,毕业设计做的是微信小程序+java后台。陆陆续续经历了三个月(因为白天要实习又碰上过年玩了一阵子),从对微信小程序一无所知到完成毕设,碰到许多问题,在跟大家分享一下自己的经...博文来自:huige_666的博客

  个人做微信小程序必须考虑到工作量和资金的问题,这篇文章总结出一套针对个人切实可行的方案。本文章重点在抛砖引玉,而不是对各种细节的详细描述。读者可以根据文中提到的各种关键词,查阅相关资料方案包括在Ubu...博文来自:ziliwangmoe的博客

  部署环境:jdk1.7mysql5.6tomcat7centos6.51资料准备1)linux服务器,推荐使用阿里云,这里预算有限,所以使用了香港的低配服务器。2)域名,这里是在阿里云平台上申请的,没...博文来自:猫爷大数据学习笔记

  微信小程序后台开发前言开发环境开发流程项目整体结构接口开发项目部署ip映射Nginx反向代理gunicorn+super多进程开启服务+进程监控ssl证书小程序常用功能微信支付生成二维码推送消息测试黑...博文来自:北大虫师的博客

  社区里有一群canvas爱好者,比jsh5css,安静的小智,jeffer等同学他们在canvas方面都有着自己的学习心得和见解。但是极乐叔发现在小程序开发学习过程中还是有很多小伙伴折戟在canvas...博文来自:Dreawer微信小程序联盟

  一,项目介绍佐仓短视频是一个以java为后台编写的短视频类的微信小程序项目用户可以实现登录,注册,视频查看,视频上传,个人信息查看,头像上传等功能二,技术选型和效果预览本项目后端采用springboo...博文来自:的博客

  前段时间,我接触了微信的开发小程序,在开发过程中,我不得不承认微信小程序开发的简单粗暴,不多说,直接hight。微信小程序可以去公众平台下载。有64位和32位的。在这里我就不多哔哔了。下载完微信小程序...博文来自:zhongyouda的博客

  点击打开微信开发者工具点击小程序项目点击下面的加号新建小程序项目选择项目目录、点击小程序使用AppID,输入项目名称,点击确定...博文来自:weixin_44540455的博客

  下面以开发者工具自动生成的程序框架为例,对小程序的框架进行介绍。选择一个空的项目目录创建一个小程序项目,如下图:创建完成后我们看到如下目录结构:目录结构小程序包含一个描述整体程序的app和多个描述各自...博文来自:风口,差异化,单点突破,做到头部。

  作者:全栈生姜头,曾任亚信科技架构师,现任广州创河软件CTO,小程序NAMI开源框架发起人,有公众号“全栈生姜头”。责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件至chenqg#csdn....博文来自:小秋博客

  maker一下自己捣鼓的商品详情页,主要是选择商品类型的交互和样式,点击不同类型切换图片和文字,商品增加减少,还有商品预览图片(本地图片无法预览!!!)。。源码下载:博文来自:dKnightL的博客

  1、文件上传,使用springmvc一直不行,后来看到别人有一样的情况改成了serverlet就可以了2、因为要进行语音识别成文字,上传的语音文件是silk格式,需要用到讯飞的语音识别所以必须转成wa...博文来自:haiyang4988的博客

  微信小程序的本地调试和Java后台想必很多人刚接触微信小程序前后端一起测试,都不知道如何调试快速下手,就比如做微信支付的之后,你需要小程序的开发工具和你的JAVA或者PHP后台互相作用,一起调试。今...博文来自:鹿先森的博客

  微信小程序的后台搭建常用到腾讯云,包括云数据库与云服务器。博文来自:Joychen404的博客

  在去年的时候,参加过学校的一个创业活动,在团队决定做一个关于图书的微信小程序以后,我负责做微信小程序的后台程序,因为初次接触,决定选用较为简单的PHP作为后台语言,实现了微信小程序的一些基本功...博文来自:longjialin93528的博客

  webService学习(二)——调用自定义对象参数本文主要内容:1、如何通过idea进行webServiceClient的简单实现(不再使用wsimport的方式,其实是ide帮我们做了)2、在we...博文来自:止水的专栏

  最近在EasyDarwin开源群里,有不少用户私信需求,要做一种能够多端同屏的系统,细分下来有屏幕采集端和同屏端,屏幕采集端细想也就是一个低延时的流媒体音视频服务器,同屏端也就是一个低延时的播放器,负...博文来自:Babosa的专栏

  最近比较有空,大四出来实习几个月了,作为实习狗的我,被叫去研究Docker了,汗汗!Docker的三大核心概念:镜像、容器、仓库镜像:类似虚拟机的镜像、用俗话说就是安装文件。容器:类似一个轻量级的沙箱...博文来自:我走小路的博客

  扫二维码关注,获取更多技术分享本文承接之前发布的博客《微信支付V3微信公众号支付PHP教程/thinkPHP5公众号支付》必须阅读上篇文章后才可以阅读这篇文章。由于最近一段时间工作比较忙,博客更新比较...博文来自:Marswill

  读者要求:已经学过微信小程序的入门官方教程,即其简易教程。本文介绍了服务器端环境的搭建,以及微信登录+支付的程序示例,以及在实战中遇到的问题与解决方法。...博文来自:proteen的专栏

  上个学期末,关于部门布置的教务系统微信小程序制作的心得和总结。 关于这次微信小程序的制作,我所属的小组共有三人(一个负责微信小程序前端,一个ui,还有我负责java后端),当时我们三个人都一脸懵逼,因论坛

  文章首发于微信公众号《有三AI》【AI番外】今天说微信小程序开发,不能上线的AI,都是纸老虎训练好一个深度学习模型之后,必须要将其部署到生产环境当中,才能产生真正的价值,为更多的用户所体验。部署到线上...博文来自:hacker_long的专栏

  一、环境搭建相关环境软件:JDK1.8、IDEA、Gradle、MySQL、Redis、Navicat(可选,方便查看数据)简单介绍下用到的东西:编译器用的是IDEA(ps:比eclipse好用)关系...博文来自:一个千万开发人员中的程序员

  最近微信小程序异常火爆,很多人在学习,下面带着大家搭建下微信小程序的调试环境(client+server),并调试一套demo源码(JavaScript和node.js基础即可,微信推荐使用的语言,无...博文来自:a5582ddff的博客

  一、环境搭建参考教程:二、相关技术栈css:略javascript:略axios:一个...博文来自:一个千万开发人员中的程序员

  《微信小程序开发入门》专栏前面的文章主要介绍了小程序前端的开发,对于一个较复杂和完整功能的小程序都是需要后台的支撑的,比如数据的获取和存储、逻辑的处理等。后台的开发,可以选择PHP、Java、C#等,...博文来自:风口,差异化,单点突破,做到头部。

  关于微信小程序的界面编写的资料和书籍比比皆是,很容易找到。也就是说似乎大家都忙于处理表面的皮的技术的专研,但我一直好奇这层皮和后台服务器是如何通信交流的,如何实现信息交换。所以本文重点研究这部分知识。...博文来自:weixin_42473850的博客

  10分钟完成微信小程序开发部署发布图文教程(3元获取腾讯云服务器带小程序支持系统)c#、java、php等多语言解决方案源代码Wafer-快速构建具备弹性能力的微信小程序博文来自:wyx100的专栏

  官方微信开发者工具在11-09开始支持php后端语言开发,这对广大不熟悉nodejs的开发者是个重大利好,当然并不是说nodejs作为小程序后端不好,而是“世界上最好语言”可以快速开发上线,小程序即将...博文来自:github_33408275的博客

  微信小程序实际案例详解:页面搭建(附代码)自行部署腾讯云微信小程序后端开发...博文来自:Jack的嵌入式Linux工作室

  之前介绍过了如何在微信小程序中获取群openGId相关的流程,在这篇文章中我会使用php实现之前提到过的相关接口。解析encryptedData和iv的代码官方已经给出了php、nodejs等版本的实...博文来自:Dreawer微信小程序联盟

  使用开发工具的正确姿势微信提供的开发工具的编辑功能不是一般的水,写代码肯定不能用它,否则就是浪费生命.不说别的,连自动保存都没有,第一次写时写了一个多小时,后面下班直接关掉,也不弹出提示说没保存.然后...博文来自:hss01248的专栏

  一、首先准备下本地环境(本地就需要一个微信开发工具)1、首先得有一个微信小程序账号,登陆微信小程序首页:点击右上角立即注册。注册登陆后,首页填写一些小程序基本信息 ...博文来自:北风萧萧的博客

  2019年5月7日更新这是写的最新的一篇文章大家看这篇:界面比较丑,主要实现...博文来自:TANKING的技术博客

  「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试。可是小程序目前还在内测,首批只发放了200个内测资格(泪流满面)。本以为没有AppID这个月就与小程序无缘了,庆幸的是微信这...博文来自:x505240706的博客

  1、首先先注册微信公众平台-小程序账号,,立即注册,进入这个界面,接下来,就是设置邮箱,密码等,重点来了发现这样尽然成功了。注册账号是为了拿到AppI...博文来自:甄晓彬的博客

  dhnate678:推荐这篇文章,月份出的,已解决Wxss文件丢失的问题,我试过。

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:小程序部署  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。