小程序代码构成
#小程序代码构成在上一章中,我们通过开发者工具快速创建了一个QuickStart项目。你可以留意到这个项目里边生成了不同类型的文件:
.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件接下来我们分别看看这4种文件的作用。
#JSON配置JSON是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个app.json和project.config.json,此外在pages/logs目录下还有一个logs.json,我们依次来说明一下它们的用途。
#小程序配置app.jsonapp.json是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。QuickStart项目里边的app.json配置内容如下:
{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#fff","navigationBarTitleText":"Weixin","navigationBarTextStyle":"black"}}我们简单说一下这个配置各个项的含义:
pages字段——用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段——定义小程序所有页面的顶部背景颜色,文字颜色定义等。其他配置项细节可以参考文档小程序的配置app.json。
#工具配置project.config.json通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档开发者工具的配置。
#页面配置page.json这里的page.json其实用来表示pages/logs目录下的logs.json这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调,那么你可以在app.json里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块,因此我们提供了page.json,让开发者可以独立定义每个页面的一些属性,例如刚刚说的顶部颜色、是否允许下拉刷新等等。
其他配置项细节可以参考文档页面配置。
#JSON语法这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中{},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写JSON的时候,忘了给Key值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如JavaScript中的undefined。
数字,包含浮点数和整数字符串,需要包裹在双引号中Bool值,true或者false数组,需要包裹在方括号中[]对象,需要包裹在大括号中{}Null还需要注意的是JSON文件中无法使用注释,试图添加注释将会引发报错。
#WXML模板从事过网页编程的人知道,网页编程采用的是HTML+CSS+JS这样的组合,其中HTML是用来描述当前这个页面的结构,CSS用来描述页面的样子,JS通常是用来处理这个页面和用户的交互。
同样道理,在小程序中也有同样的角色,其中WXML充当的就是类似HTML的角色。打开pages/index/index.wxml,你会看到以下的内容:
获取头像昵称{{userInfo.nickName}}{{motto}}和HTML非常相似,WXML由标签、属性等等构成。但是也有很多不一样的地方,我们来一一阐述一下:
标签名字有点不一样
往往写HTML的时候,经常会用到的标签是div,p,span,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。换个思路,既然大家都需要这些组件,为什么我们不能把这些常用的组件包装起来,大大提高我们的开发效率。
从上边的例子可以看到,小程序的WXML用的标签是view,button,text等等,这些标签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力。
更多详细的组件讲述参考下个章节小程序的能力
多了一些wx:if这样的属性以及{{}}这样的表达式
在网页的一般开发流程中,我们通常会通过JS操作DOM(对应HTML的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS会记录一些状态到JS变量里边,同时通过DOMAPI操控DOM的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了MVVM的开发模式(例如React,Vue),提倡把渲染和逻辑分离。简单来说就是不要再让JS直接操控DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
小程序的框架也是用到了这个思路,如果你需要把一个HelloWorld的字符串显示在界面上。
WXML是这么写:
{{msg}}JS只需要管理状态即可:
this.setData({msg:"HelloWorld"})通过{{}}的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要if/else,for等控制能力,在小程序里边,这些控制能力都用wx:开头的属性来表达。
更详细的文档可以参考WXML
#WXSS样式WXSS具有CSS大部分的特性,小程序在WXSS也做了一些扩充和修改。
新增了尺寸单位。在写CSS样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位rpx,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
提供了全局的样式和局部样式。和前边app.json,page.json的概念相同,你可以写一个app.wxss作为全局样式,会作用于当前小程序的所有页面,局部页面样式page.wxss仅对当前页面生效。
此外WXSS仅支持部分CSS选择器
更详细的文档可以参考WXSS。
#JS逻辑交互一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写JS脚本文件来处理用户的操作。
{{msg}}点击我点击button按钮的时候,我们希望把界面上msg显示成"HelloWorld",于是我们在button上声明一个属性:bindtap,在JS文件里边声明了clickMe方法来响应这次点击操作:
Page({clickMe:function(){this.setData({msg:"HelloWorld"})}})响应用户的操作就是这么简单,更详细的事件可以参考文档WXML-事件。
此外你还可以在JS中调用小程序提供的丰富的API,利用这些API可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的QuickStart例子中,在pages/index/index.js就调用了wx.getUserInfo获取微信用户的头像和昵称,最后通过setData把获取到的信息显示到界面上。更多API可以参考文档小程序的API。
通过这个章节,你了解了小程序涉及到的文件类型以及对应的角色,在下个章节中,我们把这一章所涉及到的文件通过“小程序的框架”给“串”起来,让他们都工作起来。
人工智能(机器学习)学习之路推荐
目录一、人工智能(机器学习)学习之路推荐——Python二、纯小白——计算机小白三、计算机小白——计算机语言(Python)小白四、计算机语言小白——算法小白五、算法小白——人生方向定位六、人生定位——机器学习大师七、推荐书单一、人工智能(机器学习)学习之路推荐——Python虽然自己学过C,但是自己曾从事python后端开发、python算法工程师岗位、Python(机器学习)讲师,所以本篇文章主要通过python来介绍机器学习的路线。当然,前期的机器学习基础的推荐,是不会分语言的。
二、纯小白——计算机小白如果你是完完全全的纯小白,并且只会计算机这三个字。
个人推荐你可以看看《计算机科学导论》(专业书籍个人推荐看纸质书,一是支持正版;二是电子书不利于观看书的全貌;三是电子书不方便做笔记),看完之后你应该明白计算机的相关知识,如计算机网络、数据结构与算法、数据库、文件存储过程、计算机语言。如果看完《计算机科学导论》你对不仅仅对人工智能感兴趣,还对计算机本身感兴趣,可以看看下面几本书。你可以看看《计算机:一部历史》,可以作为你的计算机发展史的普及读物。你可以看看《网络是怎样连接的》——计算机网络,恩,说的简单点就是看完本书,你应该能知道WiFi的实现原理。你可以看看《计算机组成原理》——恩,看完你能明白你的计算机工作的原理,如计算机的五大组成部分为控制器、运算器、存储器、输入设备、输出设备。你可以看看《数据结构与算法》——如果没有编程基础,跳过。有C/C++的基础,可以看看大学的教材《数据结构与算法-C/C++语言》;如果你有Python的基础,可以看看《数据结构与算法-Python描述》,就是总之对应语言的数据结构与算法书籍即可。多说一嘴,可能有同学问:老师,买哪一本《计算机科学导论》。我会回答你:哪一本都行,因为书籍能出现在市面上,就有他出现的理由,你买去看就行了。没必要挑三拣四,虽然我不得不承认市面上真的有一些写的可能不太好的书(我自己看过几本),但这都是个例。
三、计算机小白——计算机语言(Python)小白看完《计算机科学导论》,相信你对计算机应该有了一定的了解。如果你不只是想成为最强王者,这个时候你应该入手一门计算机语言了。C、C++、Java、Python、R、Go、PHP、JavaScript,很多很多,他们各有优缺点,你自己仔细甄选。但是Python毫无疑问是最简单的,又由于本人从事Python开发,我介绍下你如何快速入门Python。
首先你可以看看这两位老师的博客:或,期间你可以穿插我接下来讲的书籍互补,但是你必须的看完博客第一篇——Python入门,之后再去看其他书籍,因为你需要使用Pycharm,而不是其他IDE编辑Python代码。学Python可以看我博客:Python从入门到放弃https://www.cnblogs.com/nickchen121/p/10718112.html第一本书应该是《Python从入门到实践》,这本书很浅显,但很适合小白,看完你可以去美国开个披萨店了。后面三个项目,不推荐做。第二本书应该是《笨方法学Python3》,很适合小白查漏补缺基础知识点。第三本书应该是《Python核心编程》,厚厚的一本书,更多的是接轨未来的项目,选看部分章节。第四本书应该是《流畅的Python》,如果你看完那位老师的Python面向对象高级的时候,可以看这本书,否则慎入,他会让你质疑自己是否学过python。第五本书《编写高质量Python代码的59个有效方法》,书名就可以看出,他能教会你什么。第六本书《改善Python程序的91个建议》,这个也不多说,干就对了,否则你代码写完只有你自己才看得懂了。四、计算机语言小白——算法小白本篇文章主要以Python举例,相信你现在对Python已经应用自如了,这个时候,你就需要补充算法知识,提高你的逻辑思维了。
首先你可以看看《数据结构与算法——Python描述》这本书,由于是中文的,相对友好,看完你最起码得知道线性表、链表、堆、栈、哈希表、二叉树、图之间的区别,然后一些简单的算法。数据结构与算法可以看我博客:数据结构与算法-Python/C-十七岁的有德-博客园