首先先在微信公众平台上注册小程序个人账号。然后下载微信web开发者工具，新建小程序项目，如下图所示：

下面是小程序项目公有目录与私有目录的工程结构了解

命名带有app前缀的一般都是主目录也就是公有目录，一般包含三个文件，app.json、app.wxss、app.js(不能去修改他们的命名)

然后就是需要我们去开发的需求界面，几乎每个界面都是一个私有目录。一般都包含四个文件，*.js,*.wxml,*.wxss,*.json。

接下来，让我们手写新建一个自己的第一个小程序demo

app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。如下图所示：

其中，pages属性中谁写在第一行，谁就是首页。

wxss文件进行样式配置

wxml文件具体页面呈现

在小程序中的数据绑定形式主要是{{ }}

wxss样式文件的使用

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。

与 CSS 相比，WXSS 扩展的特性有：

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

1、小程序的wxss文件的尺度单位主要是rpx（

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

小程序app的生命周期

App() 函数用来注册一个小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。

App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

关闭小程序（基础库版本1.1.0开始支持）： 当用户从扫一扫、转发等入口(为, )进入小程序，且没有置顶小程序的情况下退出，小程序会被销毁。

小程序运行机制在基础库版本 1.4.0 有所改变： 上一条关闭逻辑在新版本已不适用。

小程序初始化完成时触发，全局只触发一次。

小程序启动，或从后台进入前台显示时触发。

小程序从前台进入后台时触发。

小程序发生脚本错误，或者 api 调用失败时触发。

基础库 1.9.90 开始支持，低版本需做。

小程序要打开的页面不存在时触发。

开发者可以在 onPageNotFound 回调中进行重定向处理，但必须在回调中同步处理，异步处理（例如 setTimeout 异步执行）无效。

1. 如果开发者没有添加 onPageNotFound 监听，当跳转页面不存在时，将推入微信客户端原生的页面不存在提示页面。
2. 如果 onPageNotFound 回调中又重定向到另一个不存在的页面，将推入微信客户端原生的页面不存在提示页面，并且不再回调 onPageNotFound。

• 通过 getApp() 获取实例之后，不要私自调用生命周期函数。

2、因为要在手机端远程调试，所以还需要appid。在小程序微信官方后台找到appid

3、在app.js上分别打上断点。打开调试器。在手机上调试的时候，重开小程序，点击vConsole进入调试模式。

私有页面的生命周期以及导航

Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

Object 内容在页面加载时会进行一次深拷贝，需考虑数据大小对页面加载的开销

data 是页面第一次渲染使用的初始数据。

页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

渲染层可以通过  对数据进行绑定。

生命周期的触发以及页面的路由方式

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

页面显示/切入前台时触发。

页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

监听用户下拉刷新事件。

• 可以通过触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，可以停止当前页面的下拉刷新。

监听用户上拉触底事件。

• 在触发距离内滑动期间，本事件只会被触发一次。

监听用户滑动页面事件。

注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

此事件需要 return 一个 Object，用于自定义转发内容，返回内容如下：

基础库 1.9.0 开始支持，低版本需做。

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入，当事件被触发时，就会执行 Page 中定义的事件处理函数。

基础库 1.2.0 开始支持，低版本需做。

到当前页面的路径，类型为String。

setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。

1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2. 仅支持设置可 JSON 化的数据。
3. 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
4. 请不要把 data 中任何一项的 value 设为 undefined ，否则这一项将不被设置并可能遗留一些潜在问题。

以下内容你不需要立马完全弄明白，不过以后它会有帮助。

下图说明了 Page 实例的生命周期。

wxs模块讲解--页面引用

在wxs.wxml文件上创建相应内容

在内部去引用另一个wxs

小程序模板在外部页面的引用

“”“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”

“”“”“”“”“”“”

“”“”“”“”“”“”

“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”“”

“”“”“”“”“”“”

“”“”“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”

——“”“”“”“”“”“”“”“”“”

“”“”“”“”“”“”“”“”“”“”“”“”

“”“”“”→“”→“”→“”“”

人们常说程序员的生活枯燥为人刻板，其实这是你不懂程序员，代码之外，这些高智商的人幽默有趣，论坛常常是他们展现才华的地方，BLOG是他们分享技术的地方，BBS等地方有问题他门总是热心帮助解答，处理程序异常，修改程序错误等。

• 1、程序猿最烦两件事，第一件事是别人要他给自己的代码写文档，第二件呢？是别人的程序没有留下文档。
• 2、程序猿的读书历程：x 语言入门 —> x 语言应用实践 —> x 语言高阶编程 —> x 语言的科学与艺术 —> 编程之美 —> 编程之道 —> 编程之禅—> 颈椎病康复指南。
• 3、还没上大学的时候，高三暑假，跑到家那边的图书城想买传说中的C++的书，然后看到一本C#，我一看，嘿，这个++还写得挺艺术的，重叠起来了，于是把C#买了回来……
• 4、问：程序猿最讨厌康熙的哪个儿子。答：胤禩。因为他是八阿哥（bug）
• 5、有一天，程序猿们突然发现他们要涨的工资掉到井里啦！大家都很害怕，连忙一个吊着一个，从树上伸到井里去捞工资。正好他们摸到工资的时候，一个老程序员忽然兴奋的大叫：别蠢了，要涨的工资还好好的挂在天上呢！
• 6、诸葛亮是一个优秀的程序猿，每一个锦囊都是应对不同的case而编写的！但是优秀的程序猿也敌不过更优秀的bug！六出祈山，七进中原，鞠躬尽瘁，死而后已的诸葛亮只因为有一个错误的case-马谡，整个结构就被break了！
• 7、生活中程序猿的真实写照、一款游戏一包烟，一台电脑一下午。一盒泡面一壶水，一顿能管一整天。
• 8、程序猿要了3个孩子，分别取名叫Ctrl、Alt 和Delete，如果他们不听话，程序猿就只要同时敲他们一下就会好的…
• 9、宪法顶个球！中国的法律都是.txt文件，不是.exe文件。
• 10、同事说，他在写i++的时候总觉的自己写的是 我艹.........有木有同感？？？？
• 11、程序员，年二十有二，始从文，连考而不中。 遂习武，练武场上发一矢，中鼓吏，逐之出。 改学IT，自撰一函数，用之，堆栈溢出。
• 12、《桃花庵--程序员版》写字楼里写字间，写字间中程序员； 程序人员写程序，又将程序换酒钱； 酒醒只在屏前坐，酒醉还来屏下眠； 酒醉酒醒日复日，屏前屏下年复年； 但愿老死电脑间，不愿鞠躬老板前； 奔驰宝马贵者趣，公交自行程序员； 别人笑我太疯癫，我笑自己命太贱； 但见满街漂亮妹，哪个归得程序员；
• 13、有一天某程序员去买肉，要了一公斤， 拿到公平电子秤上一称："额。。怎么少了24克。。"
• 14、检验代码质量的唯一标准 = 代码review时骂的次数 / 代码review时间 。
• 15、杀一个程序员不需要用枪，改三次需求就可以了。
• 16、C++程序员看不起C 程序员， C 程序员看不起java程序员， java程序员看不起C#程序员，C#程序员看不起美工。周末了，美工带着妹子出去约会了，一群SX程序员还在加班。。。
• 17、问：如何生成一个随机的字符串？答：让新手退出VIM 。
• 18、"我给你出个脑筋急转弯，你说达芬奇密码的上面是什么？" "这。。太难了吧。。不知道。。。" "笨！达芬奇密码的上面就是达芬奇帐号啊，那达芬奇密码的下面是什么？""我。。。这。。。还是不知道。。。""是达芬奇验证码"。
• 20、程序员爱情观：爱情就是死循环，一旦执行就陷进去了；爱上一个人，就是内存泄漏--你永远释放不了；真正爱上一个人的时候，那就是常量限定，永远不会改变；女朋友就是私有变量，只有我这个类才能调用；情人就是指针用的时候一定要注意，要不然就带来巨大的灾难。
• 21、女同学们纷纷表示，这年头不找个程序员老公，还真是连节日低价购物权都没了。
• 22、Delphi象吉普车，什么路上都能开，却在啥路上也开不好；PB就象卡丁车，只能在固定线路上开，到室外就有些不稳；VC象跑车，你开得起却买不起，而且一旦发生故障，想修都找不到毛病在哪；Java象敞棚车，不管刮风下雨还是艳阳高照，都能照开不误；VB就是摩托车，骑的时间越长，你越痛恨它！
• 24、程序员的四大理想：南极有套房，澳大利亚有群羊，全世界电脑死光光，孩儿有个娘。
• 25、有一种崩溃叫密码输入有误；有一种惊慌叫做账号异地登陆；有一种感情叫隐身对其可见；有一种误会叫人机离线；有一种失落叫没有访问权限；有一种感情叫站点访问失败；有一种无奈叫bug无法复现。。。
• 26、黑体的锯齿，宋体的沧桑，崩溃的避头尾集。美工永远纠结于网站程序员的粗犷，就像MAC永远不懂PC的忧伤。。。。
• 27、程序猿追求MM不成，含泪追问:我在你眼里算什么？！MM答曰:真人版的windows优化大师……极客哥们莫伤心，小戴安慰递纸巾。
• 28、 据说有一位软件工程师，一位硬件工程师和一位项目经理同坐车参加研讨会。不幸在从盘山公路下山时坏在半路上了。于是两位工程师和一位经理就如何修车的问题展开了讨论。硬件工程师说："我可以用随身携带的瑞士军刀把车坏的部分拆下来，找出原因，排除故障。" 项目经理说："根据经营管理学，应该召开会议，根据问题现状写出需求报告，制订计划，编写日程安排，逐步逼近，alpha测试，beta1测试和beta2测试解决问题。" 软件工程说："咱们还是应该把车推回山顶再开下来，看看问题是否重复发生。"
• 29、【高效的程序员】当世界末日还有5分钟就要到来的时候。程序员: 让我们在这最后的时刻作些什么吧！女友: 那好,让我们在做最后一次吧！程序员: 那剩下的4分50秒做什么啊?
• 30、【开发时间】项目经理: 如果我再给你一个人,那可以什么时候可以完工？程序员: 3个月吧！项目经理: 那给两个呢？程序员: 1个月吧！项目经理: 那100呢？程序员: 1年吧！项目经理: 那10000呢？程序员: 那我将永远无法完成任务。
• 31、一个程序员对自己的未来很迷茫，于是去问上帝。"万能的上帝呀，请你告诉我，我的未来会怎样？"上帝说："我的孩子，你去问Lippman，他现在领导的程序员的队伍可能是地球上最大的"。于是他去问Lippman。Lippman说："程序员的未来就是驾驭程序员"。这个程序员对这个未来不满意，于是他又去问上帝。"万能的上帝呀，请你告诉我，我的未来会怎样？"。上帝说："我的孩子，你去问Gates，他现在所拥有的财产可能是地球上最多的"。于是他去问Gates。Gates说："程序员的未来就是榨取程序员"。这个程序员对这个未来不满意，于是他又去问上帝。"万能的上帝呀，请你告诉我，我的未来会怎样？"。上帝说："我的孩子，你去问侯捷，他写的计算机书的读者可能是地球上最多的"。于是他去问侯捷。侯捷说："程序员的未来就是诱惑程序员"。这个程序员对这个未来不满意，于是他又去问上帝。"万能的上帝呀，请你告诉我，我的未来会怎样？"。上帝摇摇头："唉，我的孩子，你还是别当程序员了"。
• 32、面试官："熟悉哪种语言"。应聘者："JAVA"。面试官："知道什么叫类么"。应聘者："我这人实在，工作努力，不知道什么叫累"。面试官："知道什么是包？"。应聘者："我这人实在 平常不带包 也不用公司准备了"。面试官："知道什么是接口吗？"。应聘者："我这个人工作认真。从来不找借口偷懒"。面试官："知道什么是继承么"。应聘者："我是孤儿没什么可以继承的"。面试官:"知道什么叫对象么？"。应聘者:"知道，不过我工作努力，上进心强，暂时还没有打算找对象。"。面试官："知道多态么？"。应聘者："知道，我很保守的。我认为让心爱的女人为了自已一时的快乐去堕胎是不道德的行为！请问这和C#有什么关系？"。
• 33、IT工程师=加班狂+程序员+测试工程师+实施工程师+网络工程师+电工+装卸工+搬运工+超人，有同感的转走。
• 34、 用一句话总结了HTML,CSS,JS的关系。HTML是名词，JS是动词，CSS是形容词和副词。
• 35、我是个程序猿，一天我坐在路边一边喝水一边苦苦检查bug。这时一个乞丐在我边上坐下了，开始要饭，我觉得可怜，就给了他1块钱，然后接着调试程序。他可能生意不好，就无聊的看看我在干什么，然后过了一会，他幽幽的说，这里少了个分号。。。分号。。。分号。。。
• 36、女友对程序员说："紫禁城占得地方好大呀！"程序员："杀死那个子进程……"
• 37、从前有个全国管理系统，是孙中山做的设计，老蒋做的实现，结果老毛写了个病毒，趁着日本黑客对系统做攻击的当口，拿到了管理员权限，把原来那批程序员给隔离了。老邓接手以后，重构代码，出了个2.0版，为了开发速度，遗留了一堆BUG没处理。人们纷纷质疑：是不是核心构架太单一，双核会不会好点？
• 38、一程序员家的水管坏了，他打电话叫来一个水管工修理。 水管工鼓捣了一个小时，终于把管子修好了，他递给程序员一张600元的帐单。 "600元！"程序员愤怒地说："我当程序员一天都赚不了这么多钱！" "是啊。"水管工平静地说，"我当程序员的时候也是。"
• 39、十年前，女："对不起，我不会喜欢你的，你不要再坚持了，就好比让 Linux 和 Windows 同时运行在一台PC机上，可能吗？"男生听后默默走开，十年后，在一次虚拟技术大会上，我听到一名虚拟技术开发程序员给我讲述了这个故事。
• 40、程序猿问程序媛："为什么要离开我，我做得还不够好吗？" 媛说："别傻了，我们根本就是两个世界里的人，就像在JS里永远都无法调用JAVA类一样，我们之间也是不可能的。" 猿沉默了很久，转身离开了。一个月之后，他在开源社区公布了dwr的完整代码。
• 41、【程序员被提bug之后的反应】1.怎么可能； 2.在我这是好的，不信你来看看； 3.真是奇怪，刚刚还好好的； 4.肯定是数据问题； 5.你清下缓存试试； 6.重启下电脑试试； 7.你装的什么版本的类库（jdk） 8.这谁写的代码； 9.尼玛怎么还在用360安全 浏览器 ； 10.用户不会像你这么操作的。
• 42、敲一夜代码，流两行老泪；用三种语言，唯四肢受罪 ； 待五更鸡鸣，遇骤雨初歇；遂登门而去，伫十里长亭；欲望穿泪眼，无如意郎君；借微薄助力，愿寻得佳偶；成比翼双鸟，乃畅想云端；卷情网之内，做爬虫抓取；为连理桂枝,容数据分析；思千里子规，助框广天地； 念茫茫人海，该如何寻觅？
• 43、早晨一女生抱着一堆书进了阅览室，结果警报响了，大妈让女生看看是哪本书把警报弄响了，那女生把书倒出来，准备一本一本的测。大妈见状急了，把书分成两份，第一份过了一下，响了。又把这一份分成两份接着测，三回就找到了，大妈用鄙视的眼神看着女生，仿佛在说O(n)和O(log2n)都分不清。
• 44、发现程序员经常熬夜有三个弊端：第一，记忆力越来越差；第二，数数经常会数错；第四，记忆力越来越差。
• 45、医院回来的程序猿一脸的苦逼样。程序媛：怎么了？程序猿：得了类风湿性关节炎了，我怕会遗传给下一代啊。程序媛：谁说类风湿性关节炎能遗传的？程序猿一脸诧异：类不是继承的吗？
• 46、知道JAVA程序员和C程序员的差别吗？食堂里，吃完饭就走的是JAVA程序员，吃完饭还要自己 收拾的那就是是C程序员。至于为什么会这样、大家都明白（因为JAVA自带垃圾回收机制、、、C需要手动释放内存）←这就是原因
• 47、计算机系的男同学追班里一女同学，结果此女总是躲躲闪闪。 男的看没戏，就另找了一个去追，结果这女的不满意了，质问这男的为啥抛弃她。 男的问："请教一个电脑问题，如果你点击一个程序，总是提示'没有响应'，怎么办？" 女的说："马上结束任务。" 男的："对，我也是这样想的。"
• 48、一个程序员的吐槽：即要被当做修电脑的，也要被当作做网站的；即要被当作杀毒的，也要被当作盗号的。我要告诉大家，其实我们只是写代码的。
• 49、如果一个足球界的人"猝死"了，会被怀疑和赌球有关；如果一个官员"猝死"了，会被怀疑和贪腐有关；如果一个农民"猝死"了，会被怀疑和拆迁有关；而如果一个程序员猝死了，那他真的猝死了。
• 50、老婆是操作系统，一但安装卸载十分麻烦；小秘是桌面，只要你有兴趣可以天天更换；情人是互联网,风光无限花钱不断；小姐是盗版软件，用时记着先杀毒。
• 51、前台美女三宝：你好，找谁，倒饮料。产品经理三宝：山寨，改版，再推倒。项目经理三宝：进度，流程，做报表。团队经理三宝：团建，开会，评绩效。程序员三宝：闷骚，加班，修电脑。
• 52、对于程序员来说、没老婆不悲催。悲催的是、没老婆、控制台还不停的提示你Error:could not find the object
• 53、假如生活欺骗了你，不要悲伤不要心急。《代码大全》会一直陪伴着你……
• 54、有时候真觉得有些事情如同char*一般，从开始就注定，无法改变。
• 55、洛阳亲友如相问，就说我在敲代码。
• 56、"如果你ctrl+alt+del，蹦出任务管理器，你从上到下扫一眼，所有的进程你都认识，知道他们是干什么的，并且知道关掉有什么后果，而且你还能从CPU和内存占用的数字跳动上清楚的知道电脑现在什么状态，那么你应该没有女朋友"...........你妹啊
• 57、用IE6的吃方便面都没有调料包，你知道不知道......
• 59、程序员换IDE相当于搬家，换主力语言相当于改嫁，换操作系统相当于参加FBI证人保护计划…
• 60、有两个程序员钓鱼，其中一个钓到一条美人鱼，这个美人鱼上半身是美女，下半身是鱼，于是这个程序员 就吧她放了，另一个问他：Why，他回答说：没有API
• 61、阿里小米皆自主，百度排名最公平；京东全网最低价，当当爱国很理性；用户体验看新浪，网易从来少愤青；豆瓣从来不约炮，人人分享高水平；从不抄袭数腾讯， 开放安全三六零。
• 62、编程夜当午，手握小滑鼠。谁知编程辛，行行皆"心"苦；头昏不觉晓，使劲揉眼角。夜夜太辛苦，睡眠知多少；
• 63、热火朝天的办公室，一精壮青年一边啃着馒头，一边看着眼前产品，愁眉紧锁的他陷入了沉思：产品下一步应该怎么走？如何保证代码质量？如何缩短项目时间？如何控制项目成本？一个个难题需要他思索，抉择。此时，传来项目经理的吆喝："程旭元，先别敲代码了！给我修下电脑……"
• 64、原来《人月神话》不是本奇幻小说！ 原来《代码大全》不是一堆开源代码！ 原来《鸟哥的Linux私房菜》不是教你做菜！ 原来《边城》不是教你写代码的！ 原来《深入浅出HTML》不是教你How to Make Love
• 65、文艺程序员写代码追求让别人看懂，普通程序员追求让自己看懂，2B程序员则追求让编译器能看懂；半年后看自己当初写的代码，文艺程序员不知道是自己写的但很容易看懂，普通程序员知道是自己写的但是不太容易看懂，2B程序员埋头看了半天后拍着桌子吼到："这是哪个SB写的程序！"
• 66、我真的想让这个世界变得更好，但是他们不给我源代码……