小程序到底是个啥?十分钟教你从小白到大神(伪)!

今日凌晨引爆互联网的小程序是个啥,有多火就不介绍了,文章已经满天飞了。

“知其然不知其所以然”不是互联网精神,废话不多说,直接上干货。

直白的说,实现一个小程序需要三个东西:

一个看得过去的页面(也就是大家看到的小程序,文档中称之为“视图层”)

一个实现用户对页面“点点点”响应的“处理器”(暂且这么称呼吧,文档中称之为“逻辑层”)

还有一个是提供数据支撑的来源(页面总得显示东西吧,文档中称之为API,或者请求)。

他们之间的关系大概是这样的:

页面要显示内容,问“处理器”要,处理器说好的,我给你向数据库请求去,数据库给了“处理器”一堆数据,“处理器”处理分析一下,返回给页面,显示出来。简单画了个图:


大概这么个意思


视图层:

怎么显示视图层呢,小程序借鉴了HTML的标记语言,看上去好高端,其实就是这么一个东西:


蓝色的叫标签,这是让后面的计算机知道你这是个啥,它对应的文件是wxml格式(和平时看到的.html一个意思)

红色的是要显示内容的样式,它对应的文件是.wxss(跟网页里面的css一样)

绿色的是“事件”(就是让计算机知道你干了啥),bindtap是手指点击了屏幕事件的表达方法。

因为页面里有好多内容,计算机要知道哪个样式显示给谁,你点的是什么地方,所以给他们都起了名字,也就是引号里面的那些汉语拼音。

这么一句话写完了,你的手机上就会显示“你看到的内容”几个字,具体是什么样子的、点了会有什么反应,这就是后面处理器(逻辑层)要干的活了。

如果要深入学习视图层的知识,可以学习HTML、CSS这两种语言,他俩永远都是在一起出现的。这个超级简单,时间充裕的话两天,甚至一天就可以弄明白,推荐一本书:

Head First HTML与CSS

有点小贵,对于小白来说是一本非常好的教材,讲的非常细,虽然很厚,但是浏览起来其实很快。

逻辑层:

逻辑层是处理前面显示给用户的内容的,主要通过JavaScript这种语言来实现。大家不要怕语言,他其实也非常简单,原理大概是这样(还是以刚才的显示内容为例):


看上去乱码七遭,又是冒号又是大括号的,其实梳理一下很简单:绿色的是刚才视图层里对点击这个操作绑定的名字,冒号在js里面的意思和咱们说话一样,

野蛮人诺基亚:开启功能

意思就是开启功能这个事是野蛮人诺基亚说的。

紫色的function是功能的意思,后面的括号和大括号简单来说就是固定搭配,他们三个永远在一起。大括号里面的内容是具体的功能。

敲黑板:为了方便解释,我用了汉字表达,真正的编程语言不是酱婶儿的。

逻辑层这样就实现了,要详细学习JavaScript这门语言,推荐两本书:

JavaScript_DOM编程艺术第二版(中文)

Head First HTML5 Programming(中文版)

这两本书都浅显易懂,学起来不费劲,小白到入门耗时大概1-2天。

这里再多逼逼两个标点符号:等号和点。

这俩标点和数学里不一样,在程序里你可以把它们读成:“是”和“的”

举例:

A = 3 的读法是:A是3

A.B    的读法是:A的B(“野蛮人诺基亚.胳膊.长度”的意思是“野蛮人诺基亚的胳膊的长度”)

这样再看到这俩标点符号的时候就不会蒙了~


数据请求

第三部分数据请求,专业的说法叫API,分为两种:请求微信内置的和请求外部服务器的。

1.微信给内置了好多API,并且给了直接请求的语法,比如获取个人信息、获取用户地理位置等等(体验小程序的时候应该看到过提示框:XXX想要获取你的个人信息,同不同意?)这个就是在请求数据了。

2.请求外部服务器的,就是通过你的小程序,向外部的服务器打招呼,拿数据。这个地方涉及到一个词:

接口

这个词在生活中看到觉得很平常,比如USB接口、耳机接口,然而一旦到了编程语言,大部分人立马蒙逼!

其实他们是一样的。你把服务器看成一个笔记本电脑,你要想从电脑里拷贝文件,是不是得通过USB接口插入U盘区里面复制?服务器同样的,只不过他的接口是一个网址的形式(当然还有其他的形式)。这个接口可以干俩活:一个是从服务器拿出数据,叫GET;另一个是向服务器里面放数据,叫POST。

举个例子,百度地图提供免费的数据接口(百度地图API),他的调用就可以用网址的形式

http://api.map.baidu.com/place/v2/search?query=美食region=北京&ak={您的密钥}

前面一堆不管他,问号以后的部分是你要的东西:query是你要的关键词,这里我们要“美食”;region是范围,我们要北京市的;最后面的AK是你的密钥,需要向百度申请,相当于你的账号吧。整句话的意思是:百度地图你好,我想要北京市的美食数据,这是我的密钥。百度收到以后就会发给你他的数据,你就可以使用了。

多讲一句:正常情况下网址里面的“?”是不会对你要访问的地址产生任何影响的。比如你在地址栏输入网址  “http://www.baidu.com” 和输入  “http://www.baidu.com?我是野蛮人诺基亚”  出来的结果是一样的。

作为小白,也只能调用别人的API了,自己服务器开发能力几乎为零,就不介绍了,见谅!

收工

这样下来,三个层次的内容都有了了解,小程序的原理大家也应该比较清楚了。

本人也是小白起家,学艺不精,如果有什么地方表述错误的,恳请大家指正!

想继续深入学习小程序的话,就要仔细阅读开发文档,进行深入研究了。


最后PS一下,之所以推荐以上几本书,一个是因为内容确实不错,另一个是网上有电子版(盗版可耻,链接就不发给大家了,鼓励大家购买正版~~)

小程序文档的解读各种网课上有很多课程,大家跟着学,一两天的时间就能理清,稍微实操一下,不出一周,就可以开发自己的小程序了!




然而并没有什么卵用,个人不能申请小程序,必须有公司或者组织资质。

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

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,569评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,319评论 25 707
  • 在我们日常生活中,我们都会经常听到,‘’我这都是为你好‘’,可是这句话就有两个意思了,一个你是真的为她好吗?一个是...
    台一DDM路静娟阅读 388评论 0 1
  • #白马声慢,我自手书# 一年前,我就想和你告白了。 宝玉在第一次见到黛玉的时候就说“这个妹妹我曾经见过的”。你知道...
    我想要颗橙子阅读 127评论 0 0