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

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

image

博客地址:flutterall.com

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

先奉上我的小程序

  • 捷径大全


    捷径大全
  • 识图君

识图君

这篇博客讲了什么?

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

涉及知识点概论

  • 小程序注册与申请

  • 小程序入门

  • 小程序强制性的HTTPS申请与配置

  • 域名申请与配置

  • 后台服务器申请与配置

  • 后台框架选择

  • 后台数据库选择

  • more...

小程序

注册与申请

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

入门

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

image

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

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

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

我对小程序的感觉概论

页面基本构成

image
  • 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>
  • js
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数据传输必须配置:
小程序reqeust配置

购买域名

我是在万网上购买的域名
image

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

域名解析

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

SSL证书

要知道SSL证书是要钱的,看看:
image

好可拍,好可怕。不急,有免费的。
image

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

image

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

备案

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

服务端

  • 申请与部署ECS云服务器

  • 选择服务端框架并开发

申请ECS云服务器

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

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

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

Spring Boot的一些优点

  • 划重点, 内嵌Tomcat。这也是我刚才说,为什么不用安装Tomcat的原因之一。

  • 使用Spring Boot你只需要Just Run
    image

    Spring Boot从根本上感觉就是融合了许多的库,这样我们就可以快速开发部署我们的项目。而且支持Maven依赖,自由化定制你所需要的。作为Android开发者,对Maven应该很了解吧。

  • 可独立运行的Spring项目,基于Spring Boot的项目,只需要 java -jar xx.jar类,就可以直接运行。 比如:

    image

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

    image

    就是这么简单。

  • 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)即可。

image

对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协议

image

在最前面我是在阿里购买的免费的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
    image
  • 使用 跟GreenADO一样,没有任何的SQL语句。 大概下面这样,就创建了一个string_config表:
    image

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

安装MySql

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

  • 推荐使用 Navicat Premium 管理MySQL。
    image

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

推荐

  • Sring Boot 在云服务器上可以配置为开机启动,防止意外情况。

  • 一定要先安装调试好MYSQL,否则在IDE与MYSQL沟通连接的时候,会出错,抛出数据库连接异常等等问题。

可以先使用Navicat 调试好db后再连接数据库

  • 写小程序的时候,多尝试,举一反三。多看看Github上面的Demo。

到这里,我们介绍了小程序SSL域名Spring BootMySql等等。真的不敢想象,我竟然把这些都聊了一遍~~

共勉

  • 尝试Android以外的程序开发模式及语言,会让自己有新的感悟。就比如:JS的弱类型语言,配合xml等等,使得自己的视野更加开阔了。

  • 微信小程序让我由衷感受到了跨平台的力量,牛皮,但是也有不足。这两天,又看了看Flutter,感觉又有活了。

  • 以前对于服务端大都处在Demo的阶段,这段时间的学习与实践,效果还是比较明显的。所以,我认为,Demo是起点,实战才是提升自己的利器。

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

  • 打通了任督二脉(前后端)后,有时候看事情的感觉与角度都不同了。当然,一山更比一山高,还有更多的实用知识等待着你我探索。

  • 空余时间不能让自己闲着。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,080评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,422评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,630评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,554评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,662评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,856评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,014评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,752评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,212评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,347评论 4 331
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,973评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2 349

推荐阅读更多精彩内容