今日凌晨引爆互联网的小程序是个啥,有多火就不介绍了,文章已经满天飞了。
“知其然不知其所以然”不是互联网精神,废话不多说,直接上干货。
直白的说,实现一个小程序需要三个东西:
一个看得过去的页面(也就是大家看到的小程序,文档中称之为“视图层”)
一个实现用户对页面“点点点”响应的“处理器”(暂且这么称呼吧,文档中称之为“逻辑层”)
还有一个是提供数据支撑的来源(页面总得显示东西吧,文档中称之为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一下,之所以推荐以上几本书,一个是因为内容确实不错,另一个是网上有电子版(盗版可耻,链接就不发给大家了,鼓励大家购买正版~~)
小程序文档的解读各种网课上有很多课程,大家跟着学,一两天的时间就能理清,稍微实操一下,不出一周,就可以开发自己的小程序了!
然而并没有什么卵用,个人不能申请小程序,必须有公司或者组织资质。