小程序从前端到后端到演示的技术总结

算是拖了很久的一篇总结,明天就要回学校了,想了想还是不要把有些东西拖到开学后所以就动起手来。
前半段算是对假期对前半年的一个小的总结,如果你只关注小程序的相关内容的话可以直接跳过这里。2018的对我来说最重要的可能就是考研了,毕竟像我们这样的双非普通超级普通学校的学生不努力是没有办法,所以整个假期基本都在看高数啊,英语之类的,感觉进步很小也不像做出一个demo那样有成就感,不管怎么样还是希望自己坚持吧。


言归正传,因为年前参加了一个小程序的小型比赛,进行了诸多尝试,就想总结一波,其中若有问题欢迎大家跟我来讨论。
可能我的理解还很浅薄,我在进行小程序的编程中,感觉他跟开发网页有很多的共同点,基本上也是运用着前后端分离的办法,前端主要依赖于微信的开发者工具,主要是可以进行预览的功能,具体的编码我还是使用了我最喜欢的webstorm(当然可以使用:subline/vscode)装一些相应的插件就可以进行编码,这里我把我使用的webstorm的插件提供给大家(来源:github)感谢源作者的贡献,蛮好用的虽然format样式或者js的时候会出错不过问题不大。
感觉还是啰嗦了蛮久,想了一下怎么样来总结,先写一下我用到的一些技术,其次补充一些知识要点吧(emmmm此刻还记得的)


前端部分

  • 微信小程序的api接口
  • 样式有用到一些weiui
    说实话我不知道在这部分能说些什么,因为真的官方的文档内给了最完整最全面的内容,我就简单说一些可能不仔细看文档会遇到的问题吧

后端部分

  • nodejs
  • mongodb
  • java
    使用java做后台主要是应付学校作业的一个尝试,顺便也在这里总结下吧,因为发现很多人不太会有java作为小程序的后台?

部署部分

  • natapp

一些技术要点

1. 获取用户相关信息及维护session状态

这个是我一开始理解的一个难点,所以在这里就跟大家多说几句,可能很多人都认为微信小程序是没有必要维持session状态的,就像我们浏览器登录之后会维护的一个会话状态,这个理解首先就是错误的,试想:一个没有登录的用户就可以随意访问你后台的api这是多么恐怖的一件事情。微信官方当然也想到了这么一点所以提供非常完善的一套方案(详见腾讯云小程序的解决方案)当然穷苦的学生党没有使用那个,是自己维护的这个状态,具体内容如下:
####wx.login(OBJECT)

调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的 会话密钥(session_key)等。用户数据的加解密通讯需要依赖会话密钥完成。
注:调用 login 会引起登录态的刷新,之前的 sessionKey 可能会失效。

可能很多人都知道这个,但是都没有get到核心就像一开始的我也是一团污水,https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html 其实官方文档写的非常的清楚,按照我的理解梳理一遍:前端调用登录接口,并且向后端发送code,后端接收到后再向微信小程序的服务端发起请求,获取用户的唯一标识(openid) 及本次登录的会话密钥(session_key)这个就是我对官方登录时序图一个最通俗的最不严谨的理解了吧~

当然我们如果直接把session_key进行传递是非常不理智的,官方也有相应的要求,如下图

image.png

跟官方略有不同,我采用的是jsonwebtoken,根据openid在后台生成一段校验码传回前端来维持登录状态,每个子功能页面加载的时候都对我的jwt验证码进行校验,销毁的时间设置成跟session_key一样,自己的jwtSecret随意设置一下即可~

感觉我已经说清楚了,附上一些代码供给大家参考吧。


前端代码.png

后端代码1.png

后端代码2.png

ps:有时候会发生验证失败的问题,这很费解,希望有尝试过的朋友能一起交流一下

2. nodejs一些新get的插件吧

这里只写了这次完成小程序新get的一些插件,一些常用必备的什么express,fs,moment,path我就不多说了,虽然我后台还是使用的express框架,但是在学习途中顺便了解了一下koa,官方实例用的是这个也很便捷,有机会可以用用这个

  • nodemon
    修改后台代码后可以自己启动
  • jsonwebtokon 生成验证码的工具,之前说过不重复了
  • mongoose
    第一次使用mongodb作为数据库学习的,感觉还不错
  • axios
    发请求的工具

在windows下发请求传递中文时会出现编码问题,挺坑的纠结了很久一直以为是自己代码写的有问题,在ubuntu下就不会有这样的问题,解决的方式是let sign=encodeURI(req.query.sign);//转成URL编码即可 如果也遇到了这个问题可以尝试一下~

3.使用mongodb踩下的坑

说起这个内容感觉又是一段辛酸泪……在windows下使用这些的我就有些作死,不管是nodejs还是mongodb感觉还是跟mac或者ubuntu更搭配,可是为什么微信开发者工具没有ubuntu版呢,qaq穷苦人民买不起mac,如果你不使用windows就没必要看这个咯

  • window 安装MongoDB 出现的exception:connect failed 异常的问题
    说实话这个解答在网上有很多很多,当然大部分是坑就是了Orz,我这里可以成功使用的方法http://blog.csdn.net/rudy24/article/details/78300907,必须码住!

  • 使用的图形化界面NoSQLBooster for MongoDB方便好用值得拥有

  • mongoose使用
    第一次使用mongodb怎么说还是满坑的,不管是从一开始表的设计,还是后来在文档内进行查询,都是在给自己设坑,简单记录一下吧。

Mongose中,有三个比较重要的概念,分别是Schema、Model、Entity。它们的关系是:Schema生成Model,Model创造Document,Model和Document都可对数据库操作造成影响,但Model比Document更具操作性
Schema用于定义数据库的结构。类似创建表时的数据定义(不仅仅可以定义文档的结构和属性,还可以定义文档的实例方法、静态模型方法、复合索引等),每个Schema会映射到mongodb中的一个collection,Schema不具备操作数据库的能力
Model是由Schema编译而成的构造器,具有抽象属性和行为,可以对数据库进行增删查改。Model的每一个实例(instance)就是一个文档document
Document是由Model创建的实体,它的操作也会影响数据库

怎么说以上也都是我搬来的,具体操作的来理解的话,就是在nodejs中创建model,然后直接调用model进行查询非常便捷,看网上的一些教程大家都有说有点把nosql的数据库转化为关系型数据库处理的味道

demo1.png

查询操作.png

4.最后说一下部署使用的natapp(内网穿透)

非常的便捷和操作简单---->比起一些云来说吧,毕竟微信小程序要求必须要https协议且有域名下才能发送request请求,这对真机调试或者演示都十分不方便,有了natapp就很快的解决这个问题了具体操作大家看看官网的1分钟教程,我就不多说了~链接


差不多就这样了,之后想起来什么再补充吧~

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,580评论 18 139
  • 22年12月更新:个人网站关停,如果仍旧对旧教程有兴趣参考 Github 的markdown内容[https://...
    tangyefei阅读 35,159评论 22 257
  • Spring Boot 参考指南 介绍 转载自:https://www.gitbook.com/book/qbgb...
    毛宇鹏阅读 46,717评论 6 342
  • 前几天我加入了学校的轮滑社团,未曾请示爸妈就自己在淘宝上买了一双轮滑鞋,昨天和爸妈打电话,爸爸说担心你这么大...
    会飞di猪猪阅读 217评论 0 0
  • 我曾经因为一座城爱上了一个人,又因为一个人放弃了一座城,人和城我都没有再见到,后来我大病一场,忘记了那个人和那座城...
    深巷梨花阅读 299评论 0 0