本篇文章已授权微信公众号 guolin_blog （郭霖）独家发布

博客地址：flutterall.com

可能有些奇怪，为什么开头一张图片？留心的同学也许发现了，作词、作曲、编曲，全部都是一个人。有人说，别想赚李荣浩一分钱。玩笑罢了。

先奉上我的小程序

捷径大全
识图君

这篇博客讲了什么?

很多开发者，都写过客户端。但是又有多少同时写过线上运行的后台？又有多少人真正去了解过后台？去了解过SSL？去申请过证书？很多时候，大多停留在Demo的程度罢了。至少，我在学习写微信小程序之前，没有去真正写过线上运营的后台。这篇博客，就是来告诉你如何去从零打造你的跨客服端运行的微信小程序，同时打通你的后台能力。以小程序为动力，去了解一门新的，Android以外的一门新的知识。小程序全流程以及连同后台，成功上线。不依赖任何三方后台。如果你想了解小程序、了解后台的入门知识，想入门全栈，以及前端与后端如何打通，这篇博客不二之选。

涉及知识点概论

小程序注册与申请
小程序入门
小程序强制性的HTTPS申请与配置
域名申请与配置
后台服务器申请与配置
后台框架选择
后台数据库选择
more…

小程序

注册与申请

这块相关知识，官方的申请指南还是比较友好的。我们可以申请个人小程序，一步步来就好了。注册传送门

入门

说实话，我个人不是特别喜欢官方的文档，我更青睐于三方的文档。为什么这么说？好久没有写过H5相关东东了，对CSS、JavaScript啥的，忘得差不多了。不过感谢小程序、感谢自己，又让我拾起来了这些知识。这里我推荐的是：W3Cschool，这里能够快速搜索到相关API，相关知识点。

除此之外，如果你对CSS不是特别了解，这里还有很多的CSS相关的知识。

我特别喜欢他的搜索功能，搜索的还是比较快，比较准确的。比如，很多CSS不会的在这里直接就可以搜索到满意的答案。

这不是广告，是资源，是我这段空余时间学习的总结。就跟当年学习Web时，老师也推荐过给我W3Cschool一样。

我对小程序的感觉概论

页面基本构成

wxml和wxss构成了绚丽的页面
js驱动UI变更渲染
json保存一些配置

可以看到各个文件各司其职，分工明确。可以这么说，小程序本质是一个MVVM框架，是基于数据驱动的，就跟React和Vue差不多。

生命周期

小程序跟我们的Android相同的是也有生命周期，类似的页面加载（onLoad）、准备（onReady）、显示（onShow）、隐藏（onHidden）…，学过Android的对这些还是比较好理解的。

UI

一些原生UI，如：text、image、button 啥的，都有的。稍微有点耐心，学习起来还是比较快的。布局这块怎么说呢，了解过CSS、H5的应该知道的，他的布局是写在CSS中的，也就是WXSS中的。多写写、多看看，百度、Google走起来，还是可以的。我就是这么过来的额。

数据渲染

小程序中，数据渲染更多类似于下面这样：

wxml

<text>{{nickName}}</text>

this.setData({nickName:'非常6+1'
})

这样就完成了数据的渲染，其他的啥的，也是类似的套路。so easy ！

路由

Android里面打开新页面startActivity，数据携带可以使用intent以及其他。小程序里，使用wx.navigateTo('/pages/main/main?params=666') 打开新页面，获取数据使用onLoad: function(options)生命周期的options.params就可获取传递的值。就是这么简单。

####网络请求
小程序发起网络请求，给我们提供了十分简洁的API，只需要使用：

wx.request({url:'www.baidu.com',success:function(res){console.log(res.data)}
})

就可以发送一个GET请求了。不过为了安全，小程序支持的域名必须要使用HTTPS协议。这也就意味着，我们要申请SSL证书。一步一步来。

其他

了解了这些简单的概论知识，后面再看文档就简单了许多了。期待你完成你的第一个小程序。

小程序这块差不多了后，就搞起域名吧，这是个大头。

域名

小程序如果要与后台进行HTTP数据传输必须配置：

购买域名

我是在万网上购买的域名

可以看到top顶级域名才9元/年。可以购买一个玩玩。购买后，你就可以在你的域名列表中查看到你的域名了。

域名解析

官网的域名解析还是比较友好的，一步步来是没问题的。阿里域名解析

SSL证书

要知道SSL证书是要钱的，看看：

好可拍，好可怕。不急，有免费的。

喜出望外有木有，趁着免费赶紧买几个，我买了10几个~~ 下一步就是给域名添加上SSL证书了。阿里云SSL证书控制台

到这里，你的HTTPS打造完成，不过要等一会，因为SSL生效，以及同步到微信支持确认是HTTPS需要一段时间。我那个时候等了半天。

备案

这里是重点，在微信上配置的HTTPS域名需要网上备案的。不过阿里给了我们备案的方式，至于如何，在阿里的控制台上可以找到。这里不再赘述了。一定要备案！！！

服务端

申请与部署ECS云服务器
选择服务端框架并开发

申请ECS云服务器

一家亲，我这里仍然选择阿里的ECS云服务器。我当时买的是学生套餐，大概RMB140/年，现在应该也有适当的优惠，也可以去看看其他家的。购买的时候选择系统镜像的时候，推荐使用CentOS，系统版本的话，我这里选择的7.3

这里附上鸿洋和郭霖之前的关于购买云服务器的指南。我这里购买部署完毕后，并没有立即安装Tomcat，后面会说明为什么没有安装。不过， Xfpt 和 Xshell 还是要安装的，以后肯定会用到的。 ##服务端框架服务端框架，推荐使用 SpringBoot ,只要你会Java，了解注解一些简单知识，拿过来就可使用了。一个简单的GET请求，下面几行代码就可以搞定了：

@Controller
@EnableAutoConfiguration
public class SampleController {@RequestMapping("/")@ResponseBodyString home() {return "Hello World!";}
}

Spring Boot的一些优点

划重点， 内嵌Tomcat。这也是我刚才说，为什么不用安装Tomcat的原因之一。
使用Spring Boot你只需要Just Run

Spring Boot从根本上感觉就是融合了许多的库，这样我们就可以快速开发部署我们的项目。而且支持Maven依赖，自由化定制你所需要的。作为Android开发者，对Maven应该很了解吧。
可独立运行的Spring项目，基于Spring Boot的项目，只需要 java -jar xx.jar类，就可以直接运行。比如：

你只需执行java -jar myserver.jar，你的项目就可以跑起来了，然后…

就是这么简单。
IDE ：使用IntelliJ IDEA，Android Studio就是基于这个复制过来的，所有这么友好的开发工具，毫无抵抗力。
Sring Boot JPA 引用别文：JPA顾名思义就是Java Persistence API的意思，是JDK 5.0注解或XML描述对象－关系表的映射关系，并将运行期的实体对象持久化到数据库中。说白了就是原生支持数据库，对于MySQL数据库支持的非常好。

Spring Boot 配置到服务器

这个不用配置，你只需要将编译好的jar包使用 Xftp 工具扔到你的云服务上，然后使用 Xshell 执行java -jar xxx.jar命令后，这个项目就在运行了。这个时候怎么发请求呢？简单，将上面的localhost换成你的ECS云服务器的公网地址（例如：115.239.210.27/hello）即可。

对HTTP协议了解的孩子，这个应该不难理解。可以看看这篇短小精悍文章，了解下HTTP协议。。

打通域名与IP地址

为什么要打通？因为微信小程序的网络配置是不支持直接填IP地址的。所有我们需要进行域名解析。假设我们购买的域名是：www.baidu.com，我们的服务器公网地址是115.239.210.27，那么如何完成域名到公网地址的映射关系？也就是域名解析DNS。这里提供万网域名解析图文视频指南。可以说很贴心了。这一步完成后，我们原来是使用115.239.210.27/hello访问，现在就可以使用http://www.baidu.com/hello访问了。还不能使用https访问。

配置HTTPS

微信小程序的域名必须是HTTPS协议

在最前面我是在阿里购买的免费的SSL证书，这里就是使用到的地方。在这里配置好，部署到云服务上后，就可以使用https://www.baidu.com/hello访问了。

到这里，服务端的框架选择以及配置大都讲完了。下面我们来说下数据库。

Spring Boot JPA (MySQL数据库)

在Spring Boot中使用数据库，真的是太简单了。如果你了解使用过 GreenDAO，就更容易上手了。

添加MySQL数据库驱动依赖包

<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId>
</dependency>

配置 Spring Boot
使用跟GreenADO一样，没有任何的SQL语句。大概下面这样，就创建了一个string_config表：

这里有个Sping Boot JPA入门，或许是你需要的。

安装MySql

CentOS 7 安装MySQL 注意，在阿里云的CentOS中，你需要关闭防火墙。否则可能导致外部无法访问连接到你的远程数据库。

推荐使用 Navicat Premium 管理MySQL。

界面简单易操作，不过需要激活。不过这里有…自己看吧。你懂的~~软件安装指南。

共勉

尝试Android以外的程序开发模式及语言，会让自己有新的感悟。就比如：JS的弱类型语言，配合xml等等，使得自己的视野更加开阔了。
微信小程序让我由衷感受到了跨平台的力量，牛皮，但是也有不足。这两天，又看了看Flutter，感觉又有活了。
以前对于服务端大都处在Demo的阶段，这段时间的学习与实践，效果还是比较明显的。所以，我认为，Demo是起点，实战才是提升自己的利器。

PS：我的Server一直在后台运行着，当然，小程序一直可以使用。还有，我这边服务端是基于Spring Boot的，所以也跟后端的哥们聊着学习的。

打通了任督二脉（前后端）后，有时候看事情的感觉与角度都不同了。当然，一山更比一山高，还有更多的实用知识等待着你我探索。
空余时间不能让自己闲着。

由小程序开始打通你的全栈之门相关推荐

微信小程序多图片上传全栈实战
本篇教程技术栈:springBoot(Java后端)+ 微信小程序.完整的图片上传教程. 页面截图,点击图片右上角按钮可以删除图片. 1.图片上传需要使用wx.uploadFile(Object o ...
微信小程序实现线上线下全渠道精准运营
从支付宝推出余额宝.花呗等功能大幅培养用户理财习惯,到微信支付通过微信红包打通"朋友圈",微信支付和支付宝的擂台之战从未平息,面对10亿交易笔数到20亿的跨越,较量已经从扫码支付延 ...
微信小程序怎么打通视频号？只差一个自定义版交易组件
今年以来视频号成为了腾讯新宠,现在视频号日活逼近6亿,早已全面超过快手的3.47亿,并有望在短期内追上抖音.而这样的用户规模,抖音走了6年,视频号只走了2年.木鱼小铺(www.muyu007.cn)相 ...
小程序源码：首发全DIY强大微信朋友圈截图制作生成小程序
这是一款朋友圈截图制作的一款小程序源码主要的特点是DIY,之前小编发布过朋友圈截图的小程序不管之前那款小程序只能生成点赞数量,无法获取用户名等等但是这一款就不一样了,这一款刚刚也说了特点是DIY ...
sublime福音：微信小程序组件及API补全插件
微信自带的编辑器操作起来各种不顺手,调试的时候需要用到,但是编辑的时候还是用自己熟悉的编辑器好一点. 将文件目录导入到sublime,在sublime编辑保存后,回到小程序开发工具刷新页面即可. 下面 ...
api 微信小程序组件库colorui_2020最全微信小程序UI组件库合集
概述 " 这可能是2020年最全的UI组件集合了,希望对你有帮助,如果觉得好,别忘了给小编给点点赞鼓励! 微信小程序实用UI组件库合集第一款官方WeUI组件库 " 地址: ht ...
小程序使用vant-dialog组件内容出不来_微信官方小程序同构新方案Kbone全解析
导语 | 本文是Kbone作者june在云加社区微信群中的分享整理总结而成(编辑:尾尾).同时,june将出席11月16日的TWeb腾讯前端技术大会,欢迎现场交流. 大家好,我是来自腾讯微信小程序团队 ...
关于微信小程序的多选和全选实现
效果简述今天实现了一个小程序版的仿后端管理界面的多选和全选checkbox,大致思路如下实现 wxml  <checkbox-group bindch ...
小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...

由小程序开始打通你的全栈之门