当前位置 & &
& 程序员的这108个笑话 你都看得懂吗？
程序员的这108个笑话 你都看得懂吗？
22:04:26&&出处：&&
编辑：上方文Q &&)
让小伙伴们也看看：
阅读更多：
好文共享：
首页上一页
文章内容导航第1页 1-54
文章观点支持
当前平均分：0(0 次打分)
[03-26][03-11][02-12][02-11][02-09][02-09][01-12][12-31][12-30][12-24]
登录驱动之家
没有帐号？
用合作网站帐户直接登录Web前端：11个让你代码整洁的原则
发表于 08:54|
来源w3cplus|
摘要：写Web页面就像我们建设房子一样，地基牢固，房子才不会倒。同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗？
写Web页面就像我们建设房子一样，地基牢固，房子才不会倒。同样的，我们制作Web页面也一样，一个良好的HTML结构是制作一个美丽的网站的开始，同样的，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们做到了这一点吗？我们一起来看一张图片：
上图展示了两段代码，我想大家都只会喜欢第一种，我们先不说其语义，至少他的结构让我们看上去清爽，而第二种呢？一看就是糟糕的代码的代码，让人讨厌的代码。那么要怎么样才能写出一个好的代码，整洁的代码呢？下面我们就从以下十二个方面一起来学习，只要大家以后在写代码的时候能坚持下面的十二个原则，保准你的代码质量能上去，而且你写的代码会人见人爱。
一、DOCTYPE的声明
如果我们想做好一件事情，首先要知道我们有哪些权利去做，就如&DOCTYPE&的声明，我们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说现在的HTML5都提供了严格版本或者过渡版本，这些都能很好的支持我们写的代码：
由于我们现在的布局不需要table布局也能做出很好的布局，那么我们就可以考虑不使用过渡型而使用严格型的&DOCTYPE&，为了向后兼容，我建议使用HTML5的声明模式：
&!DOCTYPE HTML&
&html lang=&en-US&&
如果想了解更多这方面的知识，可以点击：
二、字符集和编码字符
在每个页面的开始中，我们都在&head&中设置了字符集，我们这里都是使用&UTF-8&
&charset=&UTF-8&&&
而且我们在平时写页面中时，时常会碰到&&&这样的符号，那么我们不应该直接在页面这样写&&&:
&我们应该在代码中使用字符编码来实现，比如说&&&我们在代码中应该使用&&&来代替他。
如果想了解更多这方面的知识，可以点击：
三、正确的代码缩进
在页面编辑中，代码的缩进有没有正确，他不会影响你网站的任何功能，但要是你没有一个规范的缩进原则，让读你代码的人是非常的生气，所以说正确的代码缩进可以增强你的代码可读性。标准程序的缩进应该是一个制表符（或几个空格），形像一点的我们来看下文章开头那张图，或者一起来看下面展示的这张图，你看后就知道以后自己的代码要怎么样书写才让人看了爽：
不用说，大家都喜欢下面的那种代码吧。这只是一个人的习惯问题，不过建议从开始做好，利人利已。有关于这方面的介绍，大家还可以参考：。
四、外链你的CSS样式和Javascript脚本
页面中写入CSS样式有很多种方法，有些直接将样式放入页面的&&head&&中，这将是一个很不好的习惯，因为这样不仅会搞乱我们的标记，而且这些样式只适合这一个HTML页面。所以我们需要将CSS单独提出，保存在外部，这样后面的页面也可以链接到这些样式，如果你页面需要修改，我们也只需要修改样式文件就可以。正如下图所示：
上面我们所说的只是样式，其实javascript脚本也和CSS样式是同一样的道理。图文并说，我最终想表达的意思是&在制作web页面中，尽量将你的CSS样式和javascript脚本单独放在一个文件中，然后通过链接的方式引用这些文件，这样做的最大好处是，方便你的样式和脚本的管理与修改。&
五、正确的标签嵌套
我们在写HTML时总是需要标签的层级嵌套来帮我们完成HTML的书写，但这些HTML的嵌套是有一定的规则的，如果要细说的话，我们可能要用几个章节来描述，那么我今天这里要说的是，我们在写HTML时不应该犯以下这样的超级错误：
上图的结构我们是常见的，比如说首页的标题，那么我们就应该注意了，不能把&&h1&&放在&&a&&标签中，换句话说，就是不能么块元素和在行内元素中。上面只是一个例子，只是希望大家在平时的制作中不应该犯这样的超级错误。
六、删除不必要的标签
首先我们一起来看一个实例的截图：
上图明显是一个导航菜单的制作，在上图的实例中：有一个&div#topNav&包住了列表&ul#bigBarNavigation&，而&div&和&ul&列表都是块元素，加上&div&此处用来包&ul&根本就没有起到任何作用。虽然&div&的出现给我们制作web页面带来了极大的好处，但我们也没有必要到处这样的乱用，不知道大家平时有没有注意这样的细节呢？我是犯这样的错误，如果你也有过这样的经历，那么从今天开始，从现在开始，我们一起努力来改正这样的错误。
有关于如何正确的使用标签，大家感兴趣的话可以点击：
七、使用更好的命名
这里所说的命名就是给你的页面中相关元素定义类名或者是ID名，很多同学都有这栗的习惯，比如说有一个元素字体是红色的，给他加上&red&,甚至布局都写&left-sidebar&等，但是你有没有想过，如果这个元素定义了&red&后，过几天客户要求使用&蓝色&呢？或者又说，那时的&left-sidebar&边栏此时不想放在左边了，而是想放在右边，那么这样一来我们前面的命名可以说是一点意义都没有了，正如下面的一个图所示：
那么定义一个好的名就很得要了，不但自己能看懂你的代码，而且别人也能轻松读懂你的代码，比如说一个好的类名和ID名&mainNav&、&subNav&、&footer&等，他能描述所包含的事情。不好的呢，比如前面所说的。
如果想了解更多这方面的知识，可以点击：
八、离开版本的CSS
我们在设计菜单时，有时要求所有菜单选项的文本全部大写，大家平时是不是直接在HTML标签中就将他们设置成大写状态呢？如果是的话，我觉得不好，如果为了将来具有更好的扩展性，我们不应该在HTML就将他们设置为全部大写，更好的解决方法是通过CSS来实现：
九、定义&body&的类名或ID名
大家平时制作web页面时不知道有没有碰到这样的问题，就是整站下来，使用了相同的布局和结构，换句话说，你在页面的布局上使用了相同的结构，相同的类名，但是突然你的上级主管说应客户的需求，有一个页面的布局需要边栏和主内容对换一下。此时你又不想为了改变一下布局而修改整个页面的结构，此时有一个很好的解决办法，就是在你的这个页面中的&&body&&中定义一个特殊的类名或ID名，这样来你就可以轻松的达到你所要的需求。这样的使用，不知道大家使用过没有：
给&&body&&定义独特的类和ID名称是非常强大的，不仅仅是为了像上面一样帮你改变布局，最主要的是有时他能帮你实现页面中的某一部分达到特殊效果，而又不影响其它页面的效果。为什么有这样的功能，不用我说我想大家都是知道的。因为每个页面的内容都是&&body&&的后代元素。
如果想了解更多这方面的知识，可以点击：
十、验证你的代码
人不免会出错，我们编写代码的时候也是一样的，你有时候总会小写或多写，比如说忘了关闭你的元素标签，不记得写上元素必须的属性，虽然有一些错误不会给你带来什么灾难性的后果，但也不免会给你带来你无法意估的错误。所以建议您写完代码的时候去验证你一下你的代码。验证后的代码总是比不验证的代码强：
为一有效的验证你的代码，我们可以使用相关的工具或者浏览器的插件来帮助我们完成。如果你的代码没有任何错误，W3C验证工具会在你们面前呈现绿色的文字，这样让你是无比的激动人心，因为再次证明了你写的代码经得起W3Ｃ的标准。
如果想了解更多这方面的知识，可以点击：
十一、逻辑顺序
这是一个很少见的错误情况，因为我想大家写页面都不会把逻辑顺序打乱，换句话说，如果可能的话，让你的网站具有一个先后逻辑顺序是最好的，比如说先写页头，在写页体，最后写页脚。当然有时也会碰到特殊情况，如何页脚部分在于我们代码的边栏以上，这可能是因为它最适合你的网站设计需求，这样或许是可以理解的，但是如果你有别的方式实现，我们都应该把页脚是放在一个页面的最后，然后在通过特定的技术让它达到你的设计需求：
上面我们一起讨论了多个如何让你开始写一个整洁的HTML代码。从一个项目的开始，这一切都是非常容易的，但是如果需要你去修复一个现有的代码，那多少都会有一定的难度。上面说这么多主要是告诉您将要如何学习编写一个良好的、整洁的HTML代码，并且一直坚持这样的编写。希望读完这篇文章后，在你的下一个项目中，能从头开始，坚持写一个整洁的HTML代码。
英文来自：
译文出自：
（责任编辑：张红月）
推荐阅读相关主题：
网友评论有（0）
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章只有程序员能看懂的十个笑话（你都看懂了多少？） | Hello world!小组 | 果壳网 科技有意思
130007人加入此小组
1某程序员退休后决定练习书法，于是重金购买文房四宝。一日，饭后突生雅兴，一番研墨拟纸，并点上上好檀香。定神片刻，泼墨挥毫，郑重地写下一行字：hello world！不是程序员体会不到hello world的伟大2一个女人让他的程序员丈夫去商店买东西：你去附近的商店买些面包，如果有鸡蛋的话，买6个回来，这个丈夫买了6个面包回来，他的妻子大吃一惊：你为什么买了6个面包？！ 程序员丈夫回答：因为他们有鸡蛋。3“咚咚咚”“谁？”过了很久……“Java” 4.为什么程序员总是分不清万圣节和圣诞节？因为 Oct 31 == Dec 25。 这是懂八进制和十进制的人5.十个顶尖软件工程师参加培训管理人员的课程。老师提出了这样一个问题：“假如你供职的公司是为航空电子设备提供软件的。有一天你乘飞机出差，当你上了飞机后你发现一个牌子上写着这个飞机用的是你的团队开发的Beta版软件，你会下飞机吗？” 九个软件工程师举了手。老师看着第十个问道：“你为什么愿意留在飞机上？”这人回答说：“如果是我的团队写的这个软件，飞机根本无法起飞，根本谈不上坠毁。” 6为什么程序员喜爱UNIX:unzip, strip, touch, finger, grep, mount, fsck, more, yes, fsck, fsck, fsck, umount, sleep 7程序员最讨厌康熙的哪个儿子？ 答：胤禩。因为他是八阿哥。加强版程序员最喜欢七阿哥，因为他弟八阿哥。。。8.程序员A：“哥们儿，最近手头紧，借点钱？” 程序员B：“成啊，要多少？” 程序员A：“一千行不？” 程序员B：“咱俩谁跟谁！给你凑个整，这一千零二十四，拿去吧。”9.——我是程序员。——哦，程先生！——客气了，叫我序员就好。10有两个程序员钓鱼，其中一个钓到一条美人鱼，这个美人鱼上半身是美女，下半身是鱼，于是这个程序员 就吧她放了，另一个问他：Why，他回答说：没有API
+ 加入我的果篮
应用数学专业
引用 的话：俺收集的程序员冷笑话集锦在你的博客里再闯到知乎看到这条，笑死了
运动无极限小组管理员，科幻爱好者
7程序员最讨厌康熙的哪个儿子？ 答：胤禩。 因为他是八阿哥。加强版 程序员最喜欢七阿哥，因为他弟八阿哥。。。这个不懂。。。。
的话：7程序员最讨厌康熙的哪个儿子？ 答：胤禩。 因为他是八阿哥。 加强版 程序员最喜欢七阿哥，因为他弟八阿哥。。。这个不懂。。。。八阿哥 == bug
运动无极限小组管理员，科幻爱好者
的话：八阿哥 == bug哈哈哈。懂了。
运动无极限小组管理员，科幻爱好者
的话：八阿哥 == bug加强版又是什么意思。。。。他第？
的话：加强版又是什么意思。。。。他第？debug啊。。。
9的笑点在哪？
电子工程专业
的话：9的笑点在哪？好像没笑点，不过没看懂第6个
勘查技术与工程专业，编程爱好者
呃……API……
运动无极限小组管理员，科幻爱好者
的话：debug啊。。。·········哈哈哈。
9的笑点也没找到啊
的话：好像没笑点，不过没看懂第6个联系性情组
我认为是这样的~~~~~~~~~~~~分隔线~~~~~~~~~~~~壮哉我大羊驼帝国
的话：联系性情组
我认为是这样的~~~~~~~~~~~~分隔线~~~~~~~~~~~~壮哉我大羊驼帝国嘿嘿，对滴，6的笑点就是unix命令组成的一系列“房事”过程。，，
的话：嘿嘿，对滴，6的笑点就是unix命令组成的一系列“房事”过程。，，这个6太有喜感了，话说fsck是啥啊从来没用过。。。
的话：这个6太有喜感了，话说fsck是啥啊从来没用过。。。使用Fsck命令修复损坏的分区
电子工程专业
的话：嘿嘿，对滴，6的笑点就是unix命令组成的一系列“房事”过程。，，好冷。。
的话：7程序员最讨厌康熙的哪个儿子？ 答：胤禩。 因为他是八阿哥。 加强版 程序员最喜欢七阿哥，因为他弟八阿哥。。。这个不懂。。。。bugdebug
算法工程师，黑白纵横小组管理员
补一个：一程序员好不容易要到PLMM电话，发短信“Hello world”，没有回信，再发“test”，还是没有回应，只好发“ping”
八阿哥好好笑耶，还是弟八阿哥，哈哈哈第6条看不懂第9条为什么要叫“序员”啊，多个“程”字又怎么了？第10条看了也笑了，虽然不大懂
的话： 补一个：一程序员好不容易要到PLMM电话，发短信“Hello world”，没有回信，再发“test”，还是没有回应，只好发“ping”补得也很精品，哈哈哈
API 很重要...
DIYer,摄影爱好者，物理迷
#10……你一定没看过那个漫画
空间信息与数字技术专业
如果是程序员，应该从0开始数呀
的话：补一个：一程序员好不容易要到PLMM电话，发短信“Hello world”，没有回信，再发“test”，还是没有回应，只好发“ping”对方回复“100% LOST”
第三个没理解.... 能有人帮忙解释一个么?
语言爱好者
的话：第三个没理解.... 能有人帮忙解释一个么?就是讽刺Java效率低啊
语言爱好者
的话：第三个没理解.... 能有人帮忙解释一个么?就是讽刺Java效率低啊
的话：7程序员最讨厌康熙的哪个儿子？答：胤禩。因为他是八阿哥。加强版程序员最喜欢七阿哥，因为他弟八阿哥。。。这个不懂。。。。bug debug
10，其实api还是有的，只是那个不常用。。。
的话：10，其实api还是有的，只是那个不常用。。。好邪恶的回复……
的话：加强版又是什么意思。。。。他第？程序员最喜欢的是他的bug.就是别人的bug跟青春豆长在他人脸上一个意思
我要好好学习发扬第8个……
第二个什么意思
的话：第二个什么意思判定，他老婆想的是如果有鸡蛋的话就买六个鸡蛋回来，程序员想的是：如果有鸡蛋，就买六个。买六个什么呢，面包啊！前面只定义面包了。
的话：判定，他老婆想的是如果有鸡蛋的话就买六个鸡蛋回来，程序员想的是：如果有鸡蛋，就买六个。买六个什么呢，面包啊！前面只定义面包了。哈哈 懂了
的话：如果是程序员，应该从0开始数呀 搞信息学竞赛的表示pascal爱从几开始数都行（好吧虽然我搞应用都是用C++或java比赛才用pascal）
俺收集的程序员冷笑话集锦
看懂2^x(x≠0)个了
引用 的话： 补一个：一程序员好不容易要到PLMM电话，发短信“Hello world”，没有回信，再发“test”，还是没有回应，只好发“ping”目前我qq联系别人一般就是先ping一下。。。。。。。
引用 的话：7程序员最讨厌康熙的哪个儿子？ 答：胤禩。 因为他是八阿哥。 加强版 程序员最喜欢七阿哥，因为他弟八阿哥。。。 这个不懂。。。。DEBUG 吧~~
运动无极限小组管理员，科幻爱好者
引用 的话：DEBUG 吧~~谢谢啦！
第10条笑死了。。。。。。。。。。。。。。。
应用数学专业
引用 的话：俺收集的程序员冷笑话集锦在你的博客里再闯到知乎看到这条，笑死了
建筑学专业，分形艺术小组管理员
引用 的话：在你的博客里再闯到知乎看到这条，笑死了不对，你才是c系的，你全家都是c系的
建筑学专业，分形艺术小组管理员
引用 的话：在你的博客里再闯到知乎看到这条，笑死了另外重大草甸就是，看不到还写什么！（像我就从来不写注释）
引用 的话：7程序员最讨厌康熙的哪个儿子？ 答：胤禩。 因为他是八阿哥。 加强版 程序员最喜欢七阿哥，因为他弟八阿哥。。。 这个不懂。。。。bug
引用 的话：这个6太有喜感了，话说fsck是啥啊从来没用过。。。和谐和谐，把S改成U。那个UNZIP在英语有解拉链的意思
引用 的话：在你的博客里再闯到知乎看到这条，笑死了哈哈哈 ，
这个。。。新人问下
老程序员不看注释吗?
引用 的话：哈哈哈 ， 这个。。。新人问下 老程序员不看注释吗?我觉得有可能是计算机将斜线后字符吞掉了
(C)2017果壳网&&&&京ICP证100430号&&&&京网文[-239号&&&&新出发京零字东150005号&&&&
违法和不良信息举报邮箱：&&&&举报电话：从零开始带你撸一个小程序9 months ago假如你之前了解过React/Vue任意一个框架的话，应该会看到很多他们的影子：//React
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { secondsElapsed: 0 };
this.setState(prevState =& ({
secondsElapsed: prevState.secondsElapsed + 1
componentDidMount() {
this.interval = setInterval(() =& this.tick(), 1000);
componentWillUnmount() {
clearInterval(this.interval);
render() {
return React.createElement(
"Seconds Elapsed: ",
this.state.secondsElapsed
var vm = new Vue({
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
mounted: function () {
console.log('mounted!')
updated: function () {
console.log('updated!')
destroyed: function () {
console.log('destroyed!')
每一个小程序都会有一个app.json的配置文件，这里面其实有很多好玩的地方：{
"pages":[//小程序包含的页面
"pages/index/index",//页面路径
"pages/logs/logs"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2f3b53",//标题栏背景色（这也许是小程序和移动端Web应用最大的不同了）
"navigationBarTitleText": "Weather",//标题栏文字
"navigationBarTextStyle":"white"//标题栏文字颜色
"tabBar": {//配置小程序选项卡，是的，你不需要写多余的导航栏代码，只需要配置一段JSON即可
"selectedColor":"#73d0f4", //Tab栏选中文字的颜色
"list": [{//选项卡列表，最多可以配置5项
"pagePath": "pages/index/index",//对应页面地址
"iconPath": "assets/images/home_n.png",//Tab选项卡默认图标
"selectedIconPath": "assets/images/home.png",//Tab选中后的图标
"text": "首页"//Tab文字
"pagePath": "pages/logs/logs",
"iconPath": "assets/images/box_n.png",
"selectedIconPath": "assets/images/box.png",
"text": "日志"
你可以在quick start项目的基础上把app.json文件修改成如上内容，当然你也可以参考自己折腾一会儿。另外补充一下，Tab栏的图标当然不是凭空变出来的，你可以在或者其他类似的网站下载你需要的图标，具体风格可以参考微信底部导航，需要注意的是你要为每个图标准备两个文件，一个默认显示，一个在选中时显示。制作这样图标文件的最简单办法是在PS中打开图标文件，选择图像-&调整-&去色并另存为。小程序的所有页面一般都被保存在pages文件夹里，每一个独立的页面也有自己的文件夹，每个页面都包含自己的js/json/wxml/wxss文件，不管每个文件里有没有内容，你创建的页面只要一次调试编译之后这四个文件都会自动生成。.js和.json文件可以延伸刚刚介绍过的app.js/app.json文件的概念，页面的这两个文件分别储存每个独立页面的逻辑和配置信息。可以理解为.html的阉割版，用来编写小程序页面的内容。可以理解为.css的阉割版，用来设计小程序页面的样式。接下来我们再动手写几行代码，首先把pages/index/index.wxml改写成如下内容:&!--index.wxml--&
&!--view是wxml中最基本的一种视图容器，你可以把它理解为div一类的东西--&
&view class="container"&
&!--bindtap类似于vue里的v-on:click，用于处理页面元素的事件绑定，待会儿我们会在index.js里看到一个bindViewTap的方法--&
bindtap="bindViewTap" class="userinfo"&
&!--{{userInfo.avatarUrl}}这类的双花括号和vue简直是一模一样了，用来显示js中的变量，当然也可以包含一些简单的运算和逻辑判断，image你就理解为img标签好了--&
&image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"&&/image&
&!--text可以理解为p标签，当然只是为了方便理解，上述所有的view/image/text等都是小程序预置的界面组件--&
&text class="userinfo-nickname"&{{userInfo.nickName}}&/text&
&!--wx:if完全可以理解为vue当中的v-if，哈哈，其实不如去学学vue吧，weather是一个对象变量，可以用点来访问其属性值--&
&view wx:if="{{weather.location}}" class="weather"&
&text class="city"&{{weather.location.name}}&/text&
&text class="condition"&{{weather.now.text}}&/text&
&text class="temp"&{{weather.now.temperature}} ℃&/text&
接下来在index.wxss的底部添加下列内容，我承认我偷懒了，你可以稍微花点功夫认真设计一下你小程序的外观样式：.weather {
margin-top: 50px;
display: flex;
flex-direction: column;
.city,.condition,.temp {
width:100%;
margin-top: 10px;
wxss支持不完全的css选择器，引入了名为rpx的尺寸单位等，有关wxss具体可以查看最后到了重头戏，让我们打开index.js，将其改写为如下内容：//index.js
//获取应用实例
var app = getApp()
userInfo: {},
//这里新增了一个weather变量
weather: {}
//事件处理函数，这就是刚刚在index.wxml当中绑定的事件函数
bindViewTap: function() {
//将函数的内容改写为我们自定义的一个方法
this.getLocation()
//这个自定义方法调用了wx.getLocation和wx.request两个小程序API，用来获取用户位置信息并从远程服务器请求相关天气数据
getLocation: function () {
//示例中有很多这样that = this的代码，但我发现最新的开发者工具是支持ES6的，你完全可以用autobinding一类的语法糖来避免这些冗余的绑定代码
var that = this
//这是小程序的一个API，用来获取用户的地理位置
wx.getLocation({
type: 'wgs84',
success: function(res) {
var latitude = res.latitude
var longitude = res.longitude
//wx.request用来发起向远程服务器的请求
wx.request({
//wx.request访问的远程网址必须是https，这里使用的是很棒的心知天气的API，可以免费注册
url: '/v3/weather/now.json?key=xxxxxxxxxxx&location='+latitude+':'+longitude,
success: function(res) {
console.log(res.data.results[0])
//setData方法可以理解为React当中的setState方法，用来修改我们在开头定义的weather变量，你不能直接通过data.weather来修改，那样的操作会破坏数据绑定
that.setData({
weather:res.data.results[0]
//onLoad是页面的一个生命周期函数，类似于App对象中的，小程序的页面和应用对象都有一系列相关的生命周期函数
onLoad: function () {
console.log('onLoad')
//这里再啰嗦一下，因为对象中的方法this默认指向undefined，所以我们需要手动指定this，这段代码还可以写成：
* app.getUserInfo(function(userInfo){
//更新数据
this.setData({
userInfo:userInfo
* }.bind(this))
* 或者使用es6写成：
* app.getUserInfo((userInfo) =& {
this.setData({
userInfo:userInfo
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
//that.getLocation()
示例中使用的API来自，你可以免费注册并将API地址中的key=xxxxxxxxxxx替换为你自己的key.另外要注意的一点是，如果你注册并填写了小程序的AppID，还需要在小程序的设置中填写request请求的合法域名，否则在调试时会报错，而没有填写AppID的小程序则不受这个限制。之后记得保存所有的文件，刷新小程序页面，我们的天气示例小程序就大功告成啦，现在点击你的微信头像，就可以获取你所在地区的天气信息啦。如果你注册了小程序，还可以切换到【项目】选项卡，点击预览并通过微信扫码进行真机调试：到这里我们的教程就告一段落啦，如果你对小程序很感兴趣，可以自己进行更深入的尝试和学习，还有很多在普通网页中无法访问的有意思的API可以玩。本教程示例代码：更多有关小程序的资源请访问：而我个人以为学小程序还不如学学或者，又或者踏踏实实地学编程。风头过后，小程序离改变世界还有着遥不可及的距离。有任何好的建议或意见以及对小程序的任何观点看法欢迎在评论区参与讨论。赞赏2 人赞赏294收藏分享举报文章被以下专栏收录良心干货、暖心教程、真心分享推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&有关前端开发的干货分享、教程指引。\n欢迎关注，欢迎投稿。&,&permission&:&COLUMN_PUBLIC&,&memberId&:1866974,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&良心干货、暖心教程、真心分享&,&urlToken&:&icode&,&id&:18572,&imagePath&:&1a8fcada9ebb.jpeg&,&slug&:&icode&,&applyReason&:&0&,&name&:&从零学习前端开发&,&title&:&从零学习前端开发&,&url&:&https:\u002F\\u002Ficode&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:15316,&avatar&:{&id&:&1a8fcada9ebb&,&template&:&https:\u002F\\u002F{id}_{size}.jpeg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002F1a8fcada9ebb_l.jpeg&,&articlesCount&:79},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-5e3ae6f62c45da_r.png&,&lastUpdated&:,&imagePath&:&v2-5e3ae6f62c45da.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[,13512],&summary&:&微信推出小程序已经有些天了，相信同学们或多或少都把玩体验过小程序了。今天从零学习前端开发专栏就手把手带你，从零开始撸一个小程序。\u003Cb\u003EP.S.\u003C\u002Fb\u003E正式开始前先声明，本教程示例仅供前端萌新学习体验，闲杂人等可以退散啦。小程序的注册（可跳过）小程序是面向企…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T02:43:39+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2165000,&withContent&:false,&slug&:,&bigTitleImage&:true,&title&:&从零开始带你撸一个小程序&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:18572,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-5e3ae6f62c45da_r.png&,&author&:{&bio&:&少刷知乎多看书&,&isFollowing&:false,&hash&:&83a3b10a446f936a77f07f78870b5eec&,&uid&:96,&isOrg&:false,&slug&:&yubolun&,&isFollowed&:false,&description&:&我已委托“维权骑士”（）为我的文章进行维权行动。&,&name&:&余博伦&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fyubolun&,&avatar&:{&id&:&v2-06d97a62e029d46d754eb716bc81b231&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:1866974,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:527924}],&title&:&从零开始带你撸一个小程序&,&author&:&yubolun&,&content&:&\u003Cblockquote\u003E微信推出小程序已经有些天了，相信同学们或多或少都把玩体验过小程序了。今天从零学习前端开发专栏就手把手带你，从零开始撸一个小程序。\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cb\u003EP.S.\u003C\u002Fb\u003E正式开始前先声明，本教程示例仅供前端萌新学习体验，闲杂人等可以退散啦。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-74e3b93c64fc2cdbad7fecf_b.png\& data-rawwidth=\&736\& data-rawheight=\&584\& class=\&origin_image zh-lightbox-thumb\& width=\&736\& data-original=\&https:\u002F\\u002Fv2-74e3b93c64fc2cdbad7fecf_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='736'%20height='584'&&\u002Fsvg&\& data-rawwidth=\&736\& data-rawheight=\&584\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&736\& data-original=\&https:\u002F\\u002Fv2-74e3b93c64fc2cdbad7fecf_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-74e3b93c64fc2cdbad7fecf_b.png\&\u003E\u003Ch2\u003E小程序的注册（可跳过）\u003C\u002Fh2\u003E\u003Cp\u003E小程序是面向企业、政府、媒体等其他组织开放注册的，注册时必须提供相应的主体信息，所以假如你是不代表任何组织没注册过任何公司的独立开发者，就可以直接跳过这一步啦，虽然不注册就很遗憾的不能在真机体验调试自己写的小程序，不过最重要的是学习知识不是么？\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-ee3f1ebc1b457f58bec6f_b.png\& data-rawwidth=\&1176\& data-rawheight=\&524\& class=\&origin_image zh-lightbox-thumb\& width=\&1176\& data-original=\&https:\u002F\\u002Fv2-ee3f1ebc1b457f58bec6f_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1176'%20height='524'&&\u002Fsvg&\& data-rawwidth=\&1176\& data-rawheight=\&524\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1176\& data-original=\&https:\u002F\\u002Fv2-ee3f1ebc1b457f58bec6f_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-ee3f1ebc1b457f58bec6f_b.png\&\u003E\u003Cp\u003E给有条件的同学的传送门：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fintroduction\u002Findex.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小程序注册图文教程\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E如果你之前有玩过微信公众号的话，注册和配置流程其实都大同小异。\u003C\u002Fp\u003E\u003Ch2\u003E小程序本地开发环境搭建\u003C\u002Fh2\u003E\u003Cp\u003E小程序使用微信Web开发者工具作为IDE。微信Web开发者工具是微信官方使用\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fnwjs.io\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ENW.js\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E开发的一个跨平台桌面端应用，好坏先不做评价，至少能用。虽然现在小程序已经有了一些第三方的开发工具，有更多Hack以及更少的限制，但为了教程的简洁这里就不再赘述，有兴趣的同学可以自己去玩玩看。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fdevtools\u002Fdownload.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E微信Web开发者工具下载\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cem\u003E第三方小程序开发工具\u003C\u002Fem\u003E\u003C\u002Fp\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\\u002Fcn\u002Fgithub\u002Fegret-docs\u002FWing\u002Fupdate\u002Fupdate320\u002Findex.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EEgret Wing 3.2.x 支持微信小程序实时预览的IDE)\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003Cli\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fchemzqm\u002Fwept\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EWEPT 一个微信小程序实时运行环境\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003Cp\u003E微信Web开发者工具的安装更是简单，不停点下一步就好了。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-d22f43b8dcc975d3cb02ffcc945cca09_b.png\& data-rawwidth=\&499\& data-rawheight=\&354\& class=\&origin_image zh-lightbox-thumb\& width=\&499\& data-original=\&https:\u002F\\u002Fv2-d22f43b8dcc975d3cb02ffcc945cca09_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='499'%20height='354'&&\u002Fsvg&\& data-rawwidth=\&499\& data-rawheight=\&354\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&499\& data-original=\&https:\u002F\\u002Fv2-d22f43b8dcc975d3cb02ffcc945cca09_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-d22f43b8dcc975d3cb02ffcc945cca09_b.png\&\u003E\u003Ch2\u003E创建小程序项目\u003C\u002Fh2\u003E\u003Cp\u003E按照微信官方\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E简易教程\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E的指引，创建一个新的小程序项目。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-2e1e6713daa3e6f3ea8121_b.png\& data-rawwidth=\&596\& data-rawheight=\&478\& class=\&origin_image zh-lightbox-thumb\& width=\&596\& data-original=\&https:\u002F\\u002Fv2-2e1e6713daa3e6f3ea8121_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='596'%20height='478'&&\u002Fsvg&\& data-rawwidth=\&596\& data-rawheight=\&478\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&596\& data-original=\&https:\u002F\\u002Fv2-2e1e6713daa3e6f3ea8121_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-2e1e6713daa3e6f3ea8121_b.png\&\u003E\u003Cp\u003E我们需要打开微信Web开发者工具，扫码登陆，选择开发本地小程序，然后点击新建项目，填入你的小程序AppID，项目名称，目录等等。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-ffc8acc85dceed_b.png\& data-rawwidth=\&593\& data-rawheight=\&466\& class=\&origin_image zh-lightbox-thumb\& width=\&593\& data-original=\&https:\u002F\\u002Fv2-ffc8acc85dceed_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='593'%20height='466'&&\u002Fsvg&\& data-rawwidth=\&593\& data-rawheight=\&466\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&593\& data-original=\&https:\u002F\\u002Fv2-ffc8acc85dceed_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-ffc8acc85dceed_b.png\&\u003E\u003Cp\u003E其实不管你有没有注册小程序，为了方便调试最好都选择无AppID，如果选择无AppID一些API的返回都是本地模拟的，并且没有请求远程服务器的域名限制，反而方便你开发调试。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-1a7fa03be8_b.png\& data-rawwidth=\&586\& data-rawheight=\&467\& class=\&origin_image zh-lightbox-thumb\& width=\&586\& data-original=\&https:\u002F\\u002Fv2-1a7fa03be8_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='586'%20height='467'&&\u002Fsvg&\& data-rawwidth=\&586\& data-rawheight=\&467\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&586\& data-original=\&https:\u002F\\u002Fv2-1a7fa03be8_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-1a7fa03be8_b.png\&\u003E\u003Cp\u003E创建项目的时候我们可以勾选创建quick start项目，来当作我们编写代码的模板，其实这个quick start项目的代码就是微信官方的简易教程中的示例代码，当然如果你有心的话，也可以手动跟着教程把代码敲一遍。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-6d86ebd254fc192d1a9a02fae5359876_b.png\& data-rawwidth=\&583\& data-rawheight=\&461\& class=\&origin_image zh-lightbox-thumb\& width=\&583\& data-original=\&https:\u002F\\u002Fv2-6d86ebd254fc192d1a9a02fae5359876_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='583'%20height='461'&&\u002Fsvg&\& data-rawwidth=\&583\& data-rawheight=\&461\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&583\& data-original=\&https:\u002F\\u002Fv2-6d86ebd254fc192d1a9a02fae5359876_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-6d86ebd254fc192d1a9a02fae5359876_b.png\&\u003E\u003Ch2\u003E开发者工具简介\u003C\u002Fh2\u003E\u003Cp\u003E创建好项目并打开之后，我们会看到一个类似或者其实根本就是Chrome打开开发者工具并启用移动端模拟的界面。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-c1c3e34e899e2c58dc2a21fe9de50678_b.png\& data-rawwidth=\&1919\& data-rawheight=\&1079\& class=\&origin_image zh-lightbox-thumb\& width=\&1919\& data-original=\&https:\u002F\\u002Fv2-c1c3e34e899e2c58dc2a21fe9de50678_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1919'%20height='1079'&&\u002Fsvg&\& data-rawwidth=\&1919\& data-rawheight=\&1079\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1919\& data-original=\&https:\u002F\\u002Fv2-c1c3e34e899e2c58dc2a21fe9de50678_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-c1c3e34e899e2c58dc2a21fe9de50678_b.png\&\u003E\u003Cp\u003E左边有3个选项卡【编辑】【调试】【项目】，开发的过程中大多数时间里我们都是在【编辑】【调试】之间来回切。\u003C\u002Fp\u003E\u003Cp\u003E切换到【编辑】选项卡，我们就能看到小程序项目目录以及代码编辑界面。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-71b80a772d2cdc7fcd3db_b.png\& data-rawwidth=\&1919\& data-rawheight=\&1079\& class=\&origin_image zh-lightbox-thumb\& width=\&1919\& data-original=\&https:\u002F\\u002Fv2-71b80a772d2cdc7fcd3db_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1919'%20height='1079'&&\u002Fsvg&\& data-rawwidth=\&1919\& data-rawheight=\&1079\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1919\& data-original=\&https:\u002F\\u002Fv2-71b80a772d2cdc7fcd3db_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-71b80a772d2cdc7fcd3db_b.png\&\u003E\u003Ch2\u003E小程序示例开发\u003C\u002Fh2\u003E\u003Cp\u003E接下来我们会在quick start项目代码的基础上开发一个获取用户位置并显示天气的小程序，一边学习理解小程序的框架设计，一边尝试动手编写代码。\u003C\u002Fp\u003E\u003Cp\u003E首先每一个小程序都需要声明一个\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fframework\u002Fapp-service\u002Fapp.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003EApp对象\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002Fapp.js\u003C\u002Fspan\u003E\n\u003Cspan class=\&nx\&\u003EApp\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EonLaunch\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F调用API从本地缓存中获取数据\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Elogs\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ewx\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EgetStorageSync\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'logs'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E||\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Elogs\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eunshift\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nb\&\u003EDate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Enow\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E())\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ewx\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsetStorageSync\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'logs'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Elogs\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EgetUserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ecb\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ethat\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Eif\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EglobalData\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EuserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E){\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Etypeof\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecb\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&function\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecb\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EglobalData\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EuserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Eelse\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F调用登录接口\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ewx\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elogin\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Esuccess\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ewx\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EgetUserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Esuccess\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ethat\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EglobalData\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EuserInfo\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eres\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EuserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Etypeof\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecb\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E==\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&function\&\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&&\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecb\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ethat\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EglobalData\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EuserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E});\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EglobalData\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EuserInfo\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&kc\&\u003Enull\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E假如你之前了解过React\u002FVue任意一个框架的话，应该会看到很多他们的影子：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c1\&\u003E\u002F\u002FReact\u003C\u002Fspan\u003E\n\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ETimer\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econstructor\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kr\&\u003Esuper\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eprops\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estate\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EsecondsElapsed\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E0\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E};\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003Etick\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsetState\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EprevState\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EsecondsElapsed\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EprevState\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsecondsElapsed\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}));\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EcomponentDidMount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Einterval\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EsetInterval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(()\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=&\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Etick\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(),\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003EC\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003EcomponentWillUnmount\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EclearInterval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Einterval\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EcreateElement\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&div\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&kc\&\u003Enull\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&Seconds Elapsed: \&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Estate\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EsecondsElapsed\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&c1\&\u003E\u002F\u002FVue\u003C\u002Fspan\u003E\n\u003Cspan class=\&kd\&\u003Evar\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Evm\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Enew\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EVue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E({\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edata\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ea\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&mi\&\u003E1\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Ecreated\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c1\&\u003E\u002F\u002F `this` 指向 vm 实例\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'a is: '\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E+\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ea\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Emounted\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'mounted!'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Eupdated\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'updated!'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Edestroyed\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&kd\&\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Econsole\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Elog\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E'destroyed!'\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E})\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E每一个小程序都会有一个app.json的配置文件，这里面其实有很多好玩的地方：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-json\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&pages\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:[\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F小程序包含的页面\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&pages\u002Findex\u002Findex\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F页面路径\u003C\u002Fspan\u003E\n
\u003Cspan class=\&s2\&\u003E\&pages\u002Flogs\u002Flogs\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E],\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&window\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&backgroundTextStyle\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&light\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&navigationBarBackgroundColor\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&#2f3b53\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F标题栏背景色（这也许是小程序和移动端Web应用最大的不同了）\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&navigationBarTitleText\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&Weather\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F标题栏文字\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&navigationBarTextStyle\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&white\&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F标题栏文字颜色\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&tabBar\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F配置小程序选项卡，是的，你不需要写多余的导航栏代码，只需要配置一段JSON即可\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&selectedColor\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E\u003Cspan class=\&s2\&\u003E\&#73d0f4\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E\u002F\u002FTab栏选中文字的颜色\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&list\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E[{\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F选项卡列表，最多可以配置5项\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&pagePath\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&pages\u002Findex\u002Findex\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002F对应页面地址\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&iconPath\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&assets\u002Fimages\u002Fhome_n.png\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002FTab选项卡默认图标\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&selectedIconPath\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&assets\u002Fimages\u002Fhome.png\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002FTab选中后的图标\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&text\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&首页\&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002F\u002FTab文字\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E},\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&pagePath\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&pages\u002Flogs\u002Flogs\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&iconPath\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&assets\u002Fimages\u002Fbox_n.png\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&selectedIconPath\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&assets\u002Fimages\u002Fbox.png\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nt\&\u003E\&text\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&s2\&\u003E\&日志\&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}]\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E你可以在quick start项目的基础上把app.json文件修改成如上内容，当然你也可以参考\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fframework\u002Fconfig.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E官方配置文档\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E自己折腾一会儿。\u003C\u002Fp\u003E\u003Cp\u003E另外补充一下，Tab栏的图标当然不是凭空变出来的，你可以在\u003Ca href=\&http:\u002F\\u002F?target=http%3A\u002F\u002Fwww.easyicon.net\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Eeasyicon\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E或者其他类似的网站下载你需要的图标，具体风格可以参考微信底部导航，需要注意的是你要为每个图标准备两个文件，一个默认显示，一个在选中时显示。\u003C\u002Fp\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\\u002Fv2-7c236f2d69efd0601034_b.png\& data-rawwidth=\&1920\& data-rawheight=\&1080\& class=\&origin_image zh-lightbox-thumb\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-7c236f2d69efd0601034_r.png\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1920'%20height='1080'&&\u002Fsvg&\& data-rawwidth=\&1920\& data-rawheight=\&1080\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1920\& data-original=\&https:\u002F\\u002Fv2-7c236f2d69efd0601034_r.png\& data-actualsrc=\&https:\u002F\\u002Fv2-7c236f2d69efd0601034_b.png\&\u003E\u003Cp\u003E制作这样图标文件的最简单办法是在PS中打开图标文件，选择图像-&调整-&去色并另存为。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fframework\u002Fapp-service\u002Fpage.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E小程序页面\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Cp\u003E小程序的所有页面一般都被保存在pages文件夹里，每一个独立的页面也有自己的文件夹，每个页面都包含自己的js\u002Fjson\u002Fwxml\u002Fwxss文件，不管每个文件里有没有内容，你创建的页面只要一次调试编译之后这四个文件都会自动生成。\u003C\u002Fp\u003E\u003Cp\u003E.js和.json文件可以延伸刚刚介绍过的app.js\u002Fapp.json文件的概念，页面的这两个文件分别储存每个独立页面的逻辑和配置信息。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fframework\u002Fview\u002Fwxml\u002F\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E.wxml\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E可以理解为.html的阉割版，用来编写小程序页面的内容。\u003C\u002Fp\u003E\u003Cp\u003E\u003Ca href=\&http:\u002F\\u002F?target=https%3A\u002F\u002Fmp.\u002Fdebug\u002Fwxadoc\u002Fdev\u002Fframework\u002Fview\u002Fwxss.html\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E.wxss\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E可以理解为.css的阉割版，用来设计小程序页面的样式。\u003C\u002Fp\u003E\u003Cp\u003E接下来我们再动手写几行代码，首先把pages\u002Findex\u002Findex.wxml改写成如下内容:\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-html\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&c\&\u003E&!--index.wxml--&\u003C\u002Fspan\u003E\n\u003Cspan class=\&c\&\u003E&!--view是wxml中最基本的一种视图容器，你可以把它理解为div一类的东西--&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eview\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&container\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--bindtap类似于vue里的v-on:click，用于处理页面元素的事件绑定，待会儿我们会在index.js里看到一个bindViewTap的方法--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eview\u003C\u002Fspan\u003E
\u003Cspan class=\&na\&\u003Ebindtap\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&bindViewTap\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&userinfo\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--{{userInfo.avatarUrl}}这类的双花括号和vue简直是一模一样了，用来显示js中的变量，当然也可以包含一些简单的运算和逻辑判断，image你就理解为img标签好了--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eimage\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&userinfo-avatar\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Esrc\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&{{userInfo.avatarUrl}}\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ebackground-size\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&cover\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eimage\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--text可以理解为p标签，当然只是为了方便理解，上述所有的view\u002Fimage\u002Ftext等都是小程序预置的界面组件--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&userinfo-nickname\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E{{userInfo.nickName}}\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eview\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&c\&\u003E&!--wx:if完全可以理解为vue当中的v-if，哈哈，其实不如去学学vue吧，weather是一个对象变量，可以用点来访问其属性值--&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eview\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Ewx:if\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&{{weather.location}}\&\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&weather\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&city\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E{{weather.location.name}}\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&condition\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E{{weather.now.text}}\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E \u003Cspan class=\&na\&\u003Eclass\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s\&\u003E\&temp\&\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E{{weather.now.temperature}} ℃\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Etext\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eview\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E&\u002F\u003C\u002Fspan\u003E\u003Cspan class=\&nt\&\u003Eview\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E接下来在index.wxss的底部添加下列内容，我承认我偷懒了，你可以稍微花点功夫认真设计一下你小程序的外观样式：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-css\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&nc\&\u003E.weather\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Emargin-top\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002F}