曹政：微信小程序的盛宴，你真的准备好了？

小程序=通过微信实现其他APP功能

逻辑上=不直接打开APP，通过微信打开APP

到这里，
就觉得自己有病了。

如果厂商只开发小程序=将一部分运作权交给腾讯
厂商有病or抢占微信人流量
——跟公众号逻辑多像啊？

反正最终，我们都会多一个入口……
问题是，现在的入口已经很多了，小程序的出现只是分流而已

最后一句话：最讨厌这种什么都没突破，却非要牛逼吹上天的玩意儿。

最近圈内最火的莫过于微信小程序了，大家仿佛又一个微信淘金时代的到来，不管这个金矿有没有真金，先对这块地闹个清楚明白总没有错。大伙们已经趋之若鹜了，我抱着吃不着葡萄说葡萄酸的心理泼凉水总是不厚道的，还是撒点清凉油清醒一下，做好面对各种坑的准备，再真刀真枪干起来吧。

小程序这个名称最精妙的地方就在这个"小"字，小龙不愧为程序员出身的典范，即便坐拥大中华区第一大app，大胆引入新东西的同时依然保持着低调，而真实的原因，是：小程序真的是很小，很小，很小。

其中，第一个小，就是使用场景范围的小。Facebook的React Native和Taobao的Weex的火爆，让很多人着迷，但是国内众多app，也都只敢低调的玩耍，像微信这样大张旗鼓的将这项技术引入进来的，实属罕见！谁让大水果掌管着半壁江山呢，此类技术搭建的app能否通过大水果的审核，真的只是一个碰运气的事情，心情不好将企鹅一干人等下线也不是不可能的事情。这其中其实是有一个默契的，井水和河水，别犯太过分，如果微信小程序只是低调的上一些辅助性的产品，上一些类似插件的小物件，大水果还是会睁一只眼闭一只眼的。你要是胆敢把一个精灵宝可梦直接塞进来，然后动不动来通过微信上个新，彻底绕开我大苹果，应该会是格杀勿论的吧。

第二个小，是功能性能体验的小。虽然现在移动设备的配置越来越高，性能越来越好，但是这项技术的本质决定了，性能只能在H5和真正的Native之间。为了使用Native的良好体验，小程序抛弃了一些H5的灵活性，支持的功能越多，性能只会下降。而功能本身受限于微信小程序渲染引擎的支撑能力，Native功能也只能在受限的范围内使用，需要更加高级的功能，只能等待微信发版升级小程序引擎。从此，一些业务需求业务变更，用微信小程序就可以直接上新了，棒棒哒，涉及到技术新特性的，我们就等着微信小程序引擎升级就好了，just wait。涉及到微信小程序引擎bug的，大家也等着升级修复就好了。

了解了这两个小，我们再回过头来看"小程序"这个名称的精妙。yy小龙的心声：小伙伴们你们先玩一下，功能有1234567，先将就着用，能满足你们80％的需求，剩下的8910功能，wait我，也别催我，我要保证质量。但是互联网公司的产品，虽然微信已经做到极致，但是毕竟还是互联网公司，大家还是要容忍一定程度的bug存在，bug可大可小，可能只是展现问题，可能是性能问题，等待微信发版即可。毕竟人家说过了，是个小程序，别闹太大，放低期望失望就会少很多了，毕竟以现在的能力，做做真正的小程序还是绰绰有余的。

我已经不用微信了，目前我的业务来源基本脱离了中国境内客户，但是毕竟曾经也和某些人一起创业过，一起打工奋斗过中国的互联网市场，也算是有很多的心得体会，最近被这个消息刷屏了，所以难免也吐槽一下它的优劣，当然是我个人看来，不代表未来就是这样，这只是我的一个思考和见解。

对我来说，微信在中国已经对人们的生活影响到哪种层次，这个真的和我毫无关系，我也不会因为我自己不用微信，或者少用微信而受影响，我用它的时候一般就是看看信用卡和一些业余爱好圈子朋友的活动，便于参与和及时了解而已。目前我主要社交工具（境内）还是QQ，也许是年龄层次在那，也许是圈子就在那，微信对我的社交并没有什么太多的价值。

虽然如此，我还是对小程序有一些自己的想法的，我从5个角度去看一下这个微信小程序，我是这么认为的。

1. 针对小微、初创企业而言：
毕竟有巨人支持，有微信APP的支持，有巨人TX的API，会让开发者等门槛降低很多，学习成本，制作成本，推广成本，运营成本都会降低很多，这既是机遇，又是挑战，因为门槛降低。所以会涌现出一大批的浑水摸鱼捞市场的人和公司，势必会带来未来无法预计的新的挑战，当然前提还必须微信把控好质量。

企业跟着小程序的步伐走，势必需要做一些战略上的改变，这也会涉及到人员裁剪，招聘，企业内部的协作，部门分工，培训等系列问题，能否走好开发小程序的战略步伐，是企业需要解决的问题。不能单单就只是从一个开发App转换到开发微信程序那么简单的角度看问题，作为企业，内部问题是非常多的，同时也会影响当本地化的一些问题。企业能否走好这一步，不仅要做好抉择，也要有一个良好的生态体系。

另一方面这也给很多企业带来了迷茫和抉择，拿融资，拿市场，谈合作，是否要被微信牵着鼻子走我才能生存？我是不是要放弃很多所谓的『创造』，跟着微信的步伐走，我才能在中国境内有市场？

2. 针对前端开发和设计师而言：
让业务来源都在中国境内的开发者或者设计师或小公司越来越觉得和越来越感受到这种现实，不靠你微信我在中国做互联网我就得死？我一定得为你微信做开发？我做安卓做苹果我做网站我就落伍我就跟不上时代潮流？非要被你微信牵着鼻子走？你未来啥时候一句话或者一个小接口封杀，数千数万个人开发者和小企业都得任你摆布！其实小程序这种东西没有那么所谓的新鲜，只是换了一个微信之父将它神化了而已。

前端和设计师们该做什么该学什么还是应该踏踏实实，微信小程序只是让你多了一个发挥你技能，多了一个给你创造财富，创造就业机遇的工具而已。不要被这一个所谓的平台而束缚了自己的思想和初衷，API始终是别人的东西，是一个封闭的培训，你只有开阔眼界，才能驾驭自己的未来，而不是把自己的前端开发未来依托在别人的API上。

何为改变生活？加班正常上班下班睡觉吃饭都拿着微信，对现实互不理睬就叫改变生活？有些东西只是让生活方便了一些而已，比如查信用卡，交话费，买东西，约炮，各种网络诈骗，这些都是更加便捷的生活。

我觉得所谓的改变生活，是针对不同的个人而言，你可以高高兴兴上班，高高兴兴自由职业，用一些互联网便捷的工具，节约下来时间让自己有时间和家人，和爱人有时间谈天说地，有时间做自己喜欢的各种事情和没做过的事情，旅游，摄影，游戏，探险，给自己身心带来更加多的憧憬和调整，这才叫改变生活。生活是自己活得有生命力有意义，对自己的未来和现实更有憧憬和现实感，而不是啥都可以在互联网上便捷的完成，快速，就叫改变生活。它只是生活的一部分，是改变生活的一个工具。

你应该感谢你又多了一个技能训练渠道和就业创业，赚钱渠道，同时也应该感谢微信小程序也创造了无数人和小微企业的迷茫期和动荡期，给你自己的未来选择多了一个机会。

做互联网要善于发现和利用机遇，有自己的远见去抉择，也是对自己未来负责。不要放弃这些新机遇，去尝试，但是任何时候不要被所谓的『红海，蓝海』打乱自己的节奏，被牵着鼻子走，永远只能被束缚，无法创造真正自己想要的东西。

3. 针对服务型的一些机构或者企业而言：
或许真的短时间内会出现很多：前端开发3天培训即上岗，中国的新蓝海，微信小程序培训+就业保证高薪，7天玩转微信小程序等等鱼龙混杂的培训机构。它们没错，想要生存就得赚钱，抓住机遇就狠狠干。

正因为那么多鱼龙混杂的培训机构，越来越多的人，只会越来越多的问『知乎』，我未来该去哪个培训机构？学习什么技能好就业？怎么又高薪？我需要学多久？学习方向是怎样的？越来越多的人被牵着鼻子走，没有了自己的胆识和思想，开口就问。

短期内或许小程序培训会是一个非常火热的市场，但是，长期看来，大家有必要对自己的未来复杂，是否应该踏踏实实学好基本功，踏踏实实面试，找工作，踏踏实实获得自己应得的薪水？这个是自己需要选择的。或许未来的市场会更加混乱，或许，会有更多机遇，但是凡事都有两面性，别以为有了机遇就有了未来，这需要远见和判断力，需要试错。

4. 针对个人(手机)用户而言：
就拿我自己来说，使用web，我可以看到清晰的网址和https的证书信息，对于一些有交易的入口，我能够有自己的判断力，避免被钓鱼。

使用APP，我对APP开发者的品牌，公司都有明确的认知，是否能放心的使用这个APP作为一些支付手段，或者购买需求渠道，这个我也是能够看到的。

对于微信内部的小程序而言，或许以上两点我不能很直接的看到，这会给我很多担忧，现在互联网基本上是透明的，用户隐私和安全已经成为了非常重要的东西，我非常看重自己的安全和隐私，所以门槛太低的小程序，对安全和隐私还是一个非常大的考验，对我而言，我一般不会用自己没把握的小程序进行支付。就算是通过了微信认证，它认证过的很多企业有很多也是浑水摸鱼的，只要市场有空缺，有机遇，这种想快速捞金的企业就一定存在。

我并不喜欢用什么都打开微信，然后搜索或者直接使用小程序，我更喜欢一步到位，看Twitter，看微博，用美拍，用有道翻译，一次点击，完成我的常用操作。对于我生活中经常会用的APP，我更喜欢下载下来使用，快速，安全。

当然每个人的手机的使用习惯不同，我只是说我的而已，你的呢？会不会有和我类似的想法？

5. 针对全球用户，境外的一些企业而言：
微信确实在全球扩张上也下了一些功夫，不过毕竟生活环境不一样，相对于一些互联网的圈子的全球用户，微信影响力远不如中国境内。就像脸书和推特，他们在全球的影响力和在国内的影响力也是不一样的。

“本地化”的产品和服务是关键, 微信如果要想在其全球扩张战略取得成功，腾讯可能需要更多的本地化微信战略，这意味着：第一，以当地的市场和需求进一步改善微信的功能; 其次，进一步加强其品牌的传播，并有西方当地政府的帮助; 第三，继续发挥潜在的海外用户的口碑; 最后，与其他领先的社交网络建立更多的伙伴关系。这必将需要时间，精力，金钱，耐心。大多数中国企业仍然处于国际化的开端，未来的预期还是要交给市场来验证，我们不知道微信是否未来能占有更多的全球市场。转眼看，微信的小程序，还不能够波及到全球的应用市场。

中国的应用程序会面临的西方国家的严格监管和安全挑战，我看过一些外媒文章，对于腾讯进军印度等国家，褒贬不一，也有很多人说中国的应用缺乏创新意识，也存在大量的安全和质量隐患。这是大家有目共睹的事实，我们和国外确实存在很大的技术和质量上的差距。更何况是一个APP内的小程序，是否能拿到当地运营牌照，这也是一个很大的未知数。因此总的说来，微信小程序对于全球的APP市场来说，影响是比较小的，甚至对于一些境外的互联网圈子，这种影响可以忽略不计。因为本身微信这个产品还没有完成它全球扩张的目标。

我的业务来源一般没有中国境内客户，就我的圈子来说，微信发展的好坏，微信对中国的市场的影响，根本没法影响到我的客户的开发与设计需求，从而不会影响我平时的设计和开发方向。

小程序,HTML5应用，HTML5游戏，在国外其实很多平台都已经进入了成熟的阶段，甚至有些平台已经成为红海了，微信只是换了一个角度，在中国境内神化了『小程序』这个概念。它实质上还是一个工具而已，并非所谓的颠覆。国外很多市场，根本不会受到微信这一个APP的影响，甚至很多老外其实根本不会去用它，我的客户大多都通过email, 平台，个人网站，在线聊天直接沟通。

当然这只是说我的客户，仅此针对我的互联网圈子而言，而不是大家的，也不代表大家的境外客户都是这样。

它是一个机遇，同时也是一个挑战，对于国内很多企业和个人来说，或许也会带来很多影响，但是这不会是作为APP，作为前端开发的颠覆。小程序只是拥有TX自己的API，便捷了开发和设计，便捷了分流推广，也提供了更多的变现渠道，它会影响一部分人和公司，但是绝不会是全部，就拿我来说，我基本每周登录微信只有最多1个小时。登录QQ的时间还比较多，毕竟很多朋友都在上面聊天。微信相对来说只是越用越寂寞的工具社交工具而已，用多了就厌了。确实国内很多人都不会有我这种观念，毕竟非手机控很少。

放开自己的眼光，去选择如何面对这一个小程序的机遇和挑战，是否去试错，是否去为它创造一些东西，还是跟风，一定得自己做出抉择，才是比较现实的，我们每个人工作其实是为了更好的生活，过自己想要的生活，不能总是被社会上一波又一波的新玩意儿弄乱了自己原本的脚步，每件事只要迈出第一步，都可以改变，你可以迷茫，可以听取意见，但是不能永远没有自己的想法。

大结论：也就是说。微信小程序对我而言没有一点影响，我就看看而已，留给大伙去慢慢发现吧，我去看动漫咯！！

差不多到此吧，微信小程序是一个新机遇，新工具，需要的人和企业，都要学会利用和抓住，就算它可能会成为短期的一个红海，或者也会成为中国长期的红海，未来谁也无法预测，自己还是要有自己的远见，去选择，去抉择。不要被牵着鼻子走，任何事物都有很明显的两面性，不要忽略。我觉得做互联网，做开发，做设计，还是要敢于试错，去创造，如果大家离开了微信就不能生活，就不能工作，那这还叫生活吗？

【应用号】IDE + 破解 + Demo ←github 下载（【小程序】IDE + 破解 + Demo）【下载之后更新当前版本 0.9.092300，进去的时候点击无appid就可以了，不过demo还是能参考的
按照里面的说明下载并安装，安装好0.7 以及0.9 这两个版本，然后先打开0.7版本进行扫码登录，然后关掉0.7的程序，再打开0.9程序。随便输入id 以及 名字 。然后找个文件夹来放文件这样就可以测试了。

一、看了开发文档，就小试写了个超级简单的demo,效果图如下：
app.js是小程序的脚本代码，可以理解成入口，这个文件监听并处理小程序的生命周期函数、声明全局变量
app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。*注意该文件不可添加任何注释。
app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则

二、下面是四个要点:xxx.js 自个的理解就是数据源，同时还负责定义一些方法，里面可以调用生命周期方法:
xxx.wxml 页面结构文件，就是mvc里面的v（视图），跟前端的html差不多，微信进行了一些封装
xxx.wxss 样式表文件，这个跟前端的css文件差别不大（非必须）
xxx.json 配置文件，页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json中的默认配置 页面中有Page对象，管理着每个页面的生命周期，比如onLoad，onReady，onShow，onHide，onUnload，你还可以在data中自定义内容，然后再xx.wxml中通过key去读取data 中的内容。

微信正式开放内测“小程序”，不开发APP的日子真的来了？

微信正式开放内测“小程序”，不开发APP的日子真的来了？

从内测邀请函透露的信息来看，小程序可以帮助开发者快速的开发小程序，使得程序可以在微信内被便捷地获取和传播。

小程序的推出也并非一蹴而就，早在2016年1月的微信公开课上，微信之父张小龙就透露微信即将推出应用号。

根据张小龙的描述，应用号的形态大致为：“一种新的公众号形态，这种形态下面用户关注了一个公众号，就像安装了一个APP一样。他要找这个公众号的时候就像找一个APP，在平时这个号不会向用户发东西的，所以APP就会很安静的存在那里，等用户需要的时候找到它就好了。

彼时，张小龙还称应用号的推出可以尝试做到让更多的APP有一种更轻量的形态，但是又更好使用的一种形态来存在，它将是一种新的公众号形态。

如今，小程序开启内测之后，张小龙认为它真正实现了应用“触手可及”的梦想，应用将无处不在，随时可用，但又无需安装下载。

为什么推出小程序？

考虑到小程序对整个APP市场的影响，毫无疑问会对现有的APP生态带来一定的冲击。但是，之所以推出小程序，最直接的原因可能是为了构建和扩充微信生态链，让微信更具开放性。

如我们所知，目前微信公众号分为三类：

• 服务号，连接人和商品，目前很多电商企业，以及在微信端提供产品和服务的企业都用服务号。

• 订阅号，微信官方的定位是阅读，连接人和资讯的。以媒体、政府等机构使用居多。

• 企业号，企业号其实更是内部OA的集成，把OA搬到微信端。

但从很多商家和企业的反馈来看，服务号没有达到微信团队预期的效果。张小龙此前曾在演讲中提到：微信的本意并不是要做成一个只是传播内容的平台，而是要做一个提供服务的平台所以微信团队专门拆出了服务号，但服务号以提供服务为主，只基于一个诉求。

小程序，实际上就是微信基于服务号的基础上对提高企业服务能力的一次尝试。

由此，小程序、订阅号、服务号、企业号形成了并行的微信生态四大体系。

小程序可以做什么？

小程序既然已经开始内测，那么它究竟可以做什么？

根据微信团队的说法，小程序可以借助微信联合登录，和开发者已有的 APP 后台的用户数据进行打通，但不会支持小程序和 APP 直接的跳转。

总体来看，小程序的重心会首先体现在开发者层面，向开发者开放多种服务及支撑能力，主要包括以下功能点：

视图容器：视图(View)、滚动视图、Swiper
基础内容：图标、文本、进度条
表单组件：按钮、表单等等
操作反馈
导航
媒体组件：音频、图片、视频
地图位置服务
画布
文件操作能力
网络：上传下载能力、WebSocket
数据：数据缓存能力
位置：获取位置、查看位置
设备：网络状态、系统信息、重力感应、罗盘
界面：设置导航条、导航、动画、绘图等等
开放接口：登录，包括签名加密，用户信息、微信支付、模板消息
为APP生态做减法？

张小龙和微信团队一直强调的产品观是：好产品应该是用完即走，微信应该是给用户提供便利，而非浪费时间。希望用户在微信里看到的都是自己愿意看到的东西，也希望用户能够留出来更多的时间去做其他的事情。

所以微信正在尝试做减法，为微信用户提供一个类似APP模式的账号一样，不主动推出骚扰用户，用户需要的时候在去找这个应用号。

传统APP发展到今天已经过于笨重，作为一个独立的APP产品来说或许感受不到这点，而作为用户来说，APP之间的重叠区域越来越重。不同的APP除了能够提供自己独有的特色服务外，基本的能力都差不多，支付功能，消息推送，语音，扫码…

从理论上来讲，如果有一个APP拥有足够多的能力，且用户量足够大的话，其他APP只需要使用它的能力，然后提供自己特色的服务是一种可行的方案。从微信目前连接的用户和信息体量来看，无疑是一个合适的载体。

有应用开发者称微信应用号的推出会一定程度上降低APP的推广成本，使APP和微信用户互通，获得稳固的用户和流量。

但同时也有分析称会革新手机APP应用市场，会带来手机APP卸载量上升，使更多的单一流量寄生在微信生态上，为APP独立发展带来不确定性。

微信正式开放内测“小程序”，不开发APP的日子真的来了？

苹果在担心什么？

在一张流传的朋友圈截图中，马化腾称对于该小程序的命名，苹果曾有不让叫应用号的限制，这不禁让人联想到，微信做小程序是否会切走各大终端厂商和应用市场的份额。

苹果这么做也有其理由，在iPhone销量持续下滑的情况之下，早前库克在接受《华盛顿邮报》采访时就表示，应用市场的收入将成为苹果下一个增长极。

微信推出小程序，毫无疑问会影响到App Store的下载量，尤其是在用户基数如此庞大的中国市场。

事实上，不只是苹果，微信小程序的推出对现有的分发以及下载渠道都必然有所波及，这可能会大大加深应用渠道商的危机感。

微信团队似乎也察觉到市场上的声音，今天早上便回复称微信推出小程序，并非想要做应用分发市场，而是给一些优质服务提供一个开放的平台，意欲解除分发渠道商的顾虑。

根据第三方机构 Trustdata 的统计，2015 年用户平均每天打开微信超过 19 次，比淘宝多出了3倍之多，微信实际已经成为了目前用户基础最大并且活跃度最高的应用。

如今，小程序的到来，是否意味着分发渠道商的苦日子要来了？不开发APP的日子还会远吗？

赶紧出来吧，引流用户下载app的多
Mac测试可用，Windows测试可用

下载开发工具，并安装（注意：一定要安装0.9版本）
打开『微信Web开发者工具』的程序目录
Windows：使用资源管理器查看
Mac：右键点击图标，选择『显示包内容』
进入程序目录后，替换以下文件（只需要替换0.9版本里的，0.7版本用来登陆）：

Windows：
package.nwappdistcomponentscreatecreatestep.js
package.nwappdiststroesprojectStores.js 或 package.nwappdiststoresprojectStores.js （0.9.092300之后版本）
package.nwappdistweappappserviceasdebug.js
Mac：
/Resources/app.nw/app/dist/components/create/createstep.js
/Resources/app.nw/app/dist/stroes/projectStores.js 或 /Resources/app.nw/app/dist/stroes/projectStores.js （0.9.092300之后版本）
/Resources/app.nw/app/dist/weapp/appservice/asdebug.js
替换的文件点击这里下载

Good luck

项目创建

运行『微信Web开发者工具』
通过微信扫描二维码
创建项目
AppID：选【无AppId】
项目名称：随便填
本地开发目录：选择一个目录
点击「添加项目」
打开项目
开始写代码
Good luck
Demo运行

创建项目
打开项目所在目录
下载「Demo源代码」并解压覆盖
打开项目
Good luck
常见问题（仅真对破解版）

找不到所要替换的文件
问题原因：开发工具版本不正确，老版本不支持
解决方案：确保下载的程序版本在0.9.092100以上
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://1709827360.appservice.open.weixin.qq.com/appservice
问题原因：通常是由于系统设置了代理如Shadowsocks等。
解决方案：关闭代理，或者依次点击工具栏“动作”-"设置"，选择“不使用任何代理，勾选后直连网络”。
修复asdebug.js报错
问题原因：TypeError: Cannot read property ‘MaxRequestConcurrent’ of undefined
解决方案：替换 /Resources/app.nw/app/dist/weapp/appservice/asdebug.js
扫码登录失败
问题原因：please bind your wechat account to the appid first
解决方案：先使用0.7版本的进行扫码登陆，登陆成功后，再用0.9的版本打开就直接进入了。
0.7版本地址：http://dldir1.qq.com/WechatWebDev/release/0.7.0/wechat_web_devtools_0.7.0.dmg
mac版本升级到0.9.092300后，asdebug.js报错
问题原因：TypeError: Cannot read property ‘MaxRequestConcurrent’ of undefined
解决方案：替换 /Resources/app.nw/app/dist/weapp/appservice/asdebug.js

【应用号】IDE + 破解 + Demo ←github 下载（【小程序】IDE + 破解 + Demo）【下载之后更新当前版本 0.9.092300，进去的时候点击无appid就可以了，不过demo还是能参考的
按照里面的说明下载并安装，安装好0.7 以及0.9 这两个版本，然后先打开0.7版本进行扫码登录，然后关掉0.7的程序，再打开0.9程序。随便输入id 以及 名字 。然后找个文件夹来放文件这样就可以测试了。

一、看了开发文档，就小试写了个超级简单的demo,效果图如下：
app.js是小程序的脚本代码，可以理解成入口，这个文件监听并处理小程序的生命周期函数、声明全局变量
app.json是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。*注意该文件不可添加任何注释。
app.wxss是整个小程序的公共样式表。我们可以在页面组件的class属性上直接使用app.wxss中声明的样式规则

二、下面是四个要点:xxx.js 自个的理解就是数据源，同时还负责定义一些方法，里面可以调用生命周期方法:
xxx.wxml 页面结构文件，就是mvc里面的v（视图），跟前端的html差不多，微信进行了一些封装
xxx.wxss 样式表文件，这个跟前端的css文件差别不大（非必须）
xxx.json 配置文件，页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json中的默认配置 页面中有Page对象，管理着每个页面的生命周期，比如onLoad，onReady，onShow，onHide，onUnload，你还可以在data中自定义内容，然后再xx.wxml中通过key去读取data 中的内容。

。微信做平台的想法不是凭空冒出来的，他借鉴了美国非常有名的社交公司非丝不可的开放平台战略，当年苹果想把非丝不可作为应用内置到手机里，于是找马克扎克伯格谈判，马克就想利用苹果手机把开放平台战略带入移动互联网，要求苹果给他更多的权限，结果苹果没同意，于是非丝不可自己做了一部手机，结果失败了，苹果找到非丝不可的对手推特合作，以后非丝不可不得不同意苹果的条件。。。。。微信平台小应用的好处是应用开发难度小，而且不会占用系统空间。。。。。但是会因为权限带来问题。。。。。。。比如你授权给微信拍照功能，那微信内的小应用是否获得相同权限，如果获得相同权限，有人故意在里面放木马偷录你的声音，或者偷偷拍照怎么办？或者冒充微信要读取你的通讯录。。。。就算要求小应用也要获得用户授权才能打开摄像头，用户也可能认为是微信提出的要求而点确认。。。。。

比较有动力转的是技术好（这种人好奇心强学习能力不错）的和技术不好的（客户端开发太多了，混不下去了）。
然后有一批人转了，这些人在前端岗位都混得不错，毕竟市场需求大，而且多多少少有客户端基础，所以各种公司抢着要。
剩下的客户端开发也会混得不错，因为培训机构大概都全力培训前端了吧，再加上有一批也转去前端了，虽然岗位也会因为很多公司转向前端而减少，但相对来说短时间还会“增加”（僧减少粥不变），留下来的客户端开发又开始在招聘网站上蹦跶。
（1） 接下来如果微信小程序很给力，取代了大多数原生app，此时客户端岗位开始减少，中高端客户端开发停止蹦跶，要么提升客户端开发技术，要么转前端后台，低端开发就会比较惨了，错过了前一次机会，现在转可能来不及了，但是不转也没什么前景，客户端开发的牛人实在有点多（相对于那时的市场来说）。（2）如果微信小程序不给力，那对于没转的来说有大概率升职加薪。

单说前端技术对App开发的支持程度,那么React Native比微信小程序支持的功能要多很多，可不一样还是没法取代Native开发吗？至少几年内Android和iOS开发是没问题的。

看了一下微信小程序的API，支持的功能基本是微信提供的原生能力，那么请问，微信提供的能力能满足千千万万的应用功能吗？比如说拍照美图功能、彩虹码识别功能、美团的外卖功能、甚至其他涉及到硬件调用、多点触控、3D游戏等功能，很明显不可能。

甚至我猜想微信小程序可能就不是类似RN的原理，而仅仅是提供并规范了web调微信原生代码的能力（比如通过JSBridge），由于没有内测，仅猜测，也请大家指正。

不过，微信这个生态圈确实强大，小程序也能满足一些基本功能，可能会给一些小公司或个人创业者一些机会。

从map组件说起

在今天公布的开发文档里，我们知道使用一个地图组件的时候是这样子的：

<map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
在之前的文件里，我们提到过这个文件是wxml文件，然后我们要用wxcc将其转换为virtual dom中的方法，如：

./wcc -d map.xml
它就会返回一个js的方法，如：

/*v0.7cc_20160919*/
var $gwxc
var $gaic={}
$gwx=function(path,global){
function _(a,b){b&&a.children.push(b);}
function _n(tag){$gwxc++;if($gwxc>=16000){throw ‘enough, dom limit exceeded, you don’t do stupid things, do you?’};return {tag:tag.substr(0,3)==’wx-‘?tag:’wx-‘+tag,attr:{},children:[]}}
function _s(scope,env,key){return typeof(scope[key])!=’undefined’?scope[key]:env[key]}
…
插播一句：上面有一个count，很有意思$gwxc > 16000，这个就是dom数的count。超了就来个异常：enough, dom limit exceeded, you don’t do stupid things, do you?，中文意思就是：你个愚蠢的人类，你是一个前端开发人员吗？

随后，在浏览器里调试一下：

JSON.stringify($gwx(‘map.wxml’)(‘test’))
在小程序中是要这样调用的：

document.dispatchEvent(new CustomEvent("generateFuncReady", {
detail: {
generateFunc: $gwx(‘map.wxml’)
}
}))
就会返回下面的结果：

{
"children": [
{
"attr": {
"covers": "",
"latitude": "113.324520",
"longitude": "23.099994",
"markers": "",
"style": "width: 375px; height: 200px;"
},
"children": [],
"tag": "wx-map"
}
],
"tag": "wx-page"
}
看来这个名为wx-map的标签就是微信下的map标签，它是wx-page的children。然后让我们在WAWebview中搜索一下，就会发现一个很有意思的代码:

{
is: "wx-map",
behaviors: ["wx-base", "wx-native"],
template: ‘<div id="map" style="width: 100%; height: 100%;"></div>’,
properties: {
latitude: {type: Number, reflectToAttribute: !0, observer: "latitudeChanged", value: 39.92},
longitude: {type: Number, reflectToAttribute: !0, observer: "longitudeChanged", value: 116.46},
scale: {type: Number, reflectToAttribute: !0, observer: "scaleChanged", scale: 16},
markers: {type: Array, value: [], reflectToAttribute: !1, observer: "markersChanged"},
covers: {type: Array, value: [], reflectToAttribute: !1, observer: "coversChanged"},
_mapId: {type: Number}
}
它的behaviors中有一句：wx-native，这莫非就是传说中的native组件：

顺便再看一个video是不是也是一样的：

{
is: "wx-video",
behaviors: ["wx-base", "wx-player", "wx-native"],
template: ‘<div class="container">n <video id="player" webkit-playsinline style="display: none;"></video>n <div id="default" class="bar" style="display: none;">n <div id="button" class$="button {{_buttonType}}"></div>n <div class="time currenttime" parse-text-content>{{_currentTime}}</div>n <div id="progress" class="progress">n <div id="ball" class="ball" style$="left: {{_progressLeft}}px;">n <div class="inner"></div>n </div>n <div class="inner" style$="width: {{_progressLength}}px;"></div>n </div>n <div class="time duration" parse-text-content>{{_duration}}</div>n <div id="fullscreen" class="fullscreen"></div>n </div>n </div>n <div id="fakebutton"></div>’,
properties: {
_videoId: {type: Number},
_progressLeft: {type: Number, value: -22},
_progressLength: {type: Number, value: 0}
}
好了，你那么聪明，我就这么说一半好了，剩下你自己去猜。

可以肯定的是：

map标签在开发的时候会变成HTML + CSS
map标签在微信上可以使用类似于Cordova的形式调用 Native组件
再接着说，virtual dom的事，回到示例代码里的map.js:

Page({
data: {
markers: [{
latitude: 23.099994,
longitude: 113.324520,
name: ‘T.I.T 创意园’,
desc: ‘我现在的位置’
}],
covers: [{
latitude: 23.099794,
longitude: 113.324520,
icaonPath: ‘../images/car.png’,
rotate: 10
}, {
latitude: 23.099298,
longitude: 113.324129,
iconPath: ‘../images/car.png’,
rotate: 90
}]
}
})
js里只放置了data，剩下的都是依据上面的值变动的observer，如：

_updatePosition
_hiddenChanged
latitudeChanged
longitudeChanged
scaleChanged
coversChanged
…
这种代码的感觉比React更进了一步的节奏，本来你还需要编码来观察state，现在只需要state变动了就可以了。。。23333….，你们这些程序员都会被fire的。

好了，这里差不多就这样了~~。

重新审视WXWebview.js

于是，我重新逛逛WXWebview.js，发现这个文件里面不只有component的内容，还有：

reportSDK
webviewSDK ??
virtual_dom
exparser
wx-components.js
wx-components.css
等等，你是不是已经猜到我在说什么了，上一篇中我们说到了PageFrame：

<!– percodes –>
<!–{{WAWebview}}–>
<!–{{reportSDK}}–>
<!–{{webviewSDK}}–>
<!–{{exparser}}–>
<!–{{components_js}}–>
<!–{{virtual_dom}}–>
<!–{{components_css}}–>
<!–{{allWXML}}–>
<!–{{eruda}}–>
<!–{{style}}–>
<!–{{currentstyle}}–>
<!–{{generateFunc}}–>
在之前的想法里，我觉得我必须要集齐上面的SDK，才能招唤中神龙。后来，我看到了这句：

isDev ? {
"<!–{{reportSDK}}–>": "reporter-sdk.js",
"<!–{{webviewSDK}}–>": "webview-sdk.js",
"<!–{{virtual_dom}}–>": "virtual_dom.js",
"<!–{{exparser}}–>": "exparser.js",
"<!–{{components_js}}–>": "wx-components.js",
"<!–{{components_css}}–>": "wx-components.css"
} : {"<!–{{WAWebview}}–>": "WAWebview.js"}
如果不是开发环境就使用WAWebview.js，在开发环境中使用使用xxSDK，那么生产环境是怎么回事？如果是在开发环境会去下载最新的SDK，好像不对~~，哈哈。。

我猜这部分，我需要一个内测id，才能猜出这个答案。

有意思的是，IDE会对比version.json，然后去获取最新的，用于预览？

{
"WAService.js": 2016092000,
"WAWebview.js": 2016092000,
"wcc": 2016092000,
"wcsc": 2016092000
}
上面已经解释清楚了WAWebview的功能了，那么WAService.js呢——就是封装那些API的，如downloadFile：

uploadFile: function (e) {
u("uploadFile", e, {url: "", filePath: "", name: ""}) && (0, s.invokeMethod)("uploadFile", e)
}, downloadFile: function (e) {
u("downloadFile", e, {url: ""}) && (0, s.invokeMethod)("downloadFile", e)
}
这一点上仍然相当有趣，在我们开发的时候仍然是WAWebview做了相当多的事，而它和WAService的打包是分离的。

那么，我们从理论上来说，只需要有WAWebview就可以Render页面了。

如何优雅的使用 phpStorm 开发工具

按照惯例依然是从百科上复制一条简介: PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具。PhpStorm可随时帮助用户对其编码进行调整，运行单元测试或者提供可视化debug功能和智能HTML/CSS/JavaScript/PHP编辑、代码质量分析、版本控制集成（SVN、GIT）、调试和测试等功能。另外，它还是跨平台。在Windows和MacOS下都可以使用。PhpStorm-让开发更智能，而不是更困难。

听说phpStorm 10支持php7呃

优点

跨平台。
对PHP支持refactor功能。
自动生成phpdoc的注释，非常方便进行大型编程。
内置支持Zencode。
生成类的继承关系图，如果有一个类，多次继承之后，可以通过这个功能查看他所有的父级关系。
支持代码重构，方便修改代码。
拥有本地历史记录功能（local history功能）。
方便的部署，可以直接将代码直接upload到服务器。
总之它很牛逼就是了，什么都能干
快捷键

phpStorm有非常非常多并且好用的的快捷键，我下面就举一些经常用的的快捷键演示，还有一些不常用的就不举例了，绝对能提高你开发的效力率…

(Windows与Mac类似，只要把command键换成ctrl)

查询相关

command + f 查找当前文件
command + r 查找替换
command + e 打开最近的文件
command + shift + o 快速查询文件
command + shift + f 关键字查找,更强大的查询器(机器不好的，最好还是先确定一下目录)
command + shift + r 高级替换
command + alt + b 找到当剪类的所有子类
alt + shift + c 查找最近修改的文件
alt + f7 直接查询选中的字符
ctrl + f7 文件中查询选中字符
command + 鼠标点击 跳到类或方法或变量等声明处
command + shift + tab 切换tab页文件
command + shift + +,- 展开或缩起
command + . 折叠或展开选中的代码

自动代码

alt + 回车 导入包，自动修正
command + n 快事为每个成员属性生成 getter 及 setter 方法
ctrl + i 快速生成插入魔术方法
ctrol + o 复写父类方法
command + alt + l 对当前文件进行格式化排版
command + d 复制当剪行
command + / // 注释
command + shift + / / / 注释
以command + n举个例子

我创建了一个Person类在/Entity/目录下,然后我设置一些私有的属性如下代码:

namespace Entity;

class Person
{
private $sign = ”;

private $name = ”;

private $age = 0;

private $work = ”;

private $sex = ‘女';
}
然后咱们使用command + n 在弹出来的窗口选择"PHPDoc Blocks…" 如下图:

再再弹出的窗口选择所有属性再点"OK":

namespace Entity;

/**
* Class Person
* @package Entity
*/
class Person
{
/**
* @var string
*/
private $sign = ”;

/**
* @var string
*/
private $name = ”;

/**
* @var int
*/
private $age = 0;

/**
* @var string
*/
private $work = ”;

/**
* @var string
*/
private $sex = ‘女';
}
然后它就对刚刚所选择属性加上了注释…… 是不是灰常神奇。

ok，咱们继续，再次使用command + n键选择Contructor…弹出需要进行传参赋值的属性:

/**
* Person constructor.
* @param string $sign
*/
public function __construct($sign)
{
$this->sign = $sign;
}
如果不选择的话将不需要对成员属性进行设置。

然后咱们再来看看其他功能，比如"Implement Methods…"这个是快速生成魔术方法。

通常咱们设置、获取一个成员属性时最好不要直接使用$person->name = $name 这种方式进行设置参数或取得参数值，建议是对每个属性都开放一个 getter 跟 setter 方法，这样可以很方便得对传进或传出去的值进行处理，这就是上面我为什么要把成员属性设置置为私有的原因之一

同样的command + n 选择"Getters and Stetters" 然后选择所有属性，它就会把所有的属性设置getter及setter方法，这里要注意的是Person的sign是唯一的，不可进行修改，所以咱们要把设置sign的方法去掉。注意: 最好setter方法设置完后返回当剪对象，这样的话咱们就可以连写了并且phpStorm的提示还相当友好下面有例子:

/**
* @return string
*/
public function getSign()
{
return $this->sign;
}

/**
* @return string
*/
public function getName()
{
return $this->name;
}

/**
* @param string $name
* @return $this
*/
public function setName($name)
{
$this->name = $name;

return $this;
}

/**
* @return int
*/
public function getAge()
{
return $this->age;
}

/**
* @param int $age
* @return $this
*/
public function setAge($age)
{
$this->age = $age;

return $this;
}

/**
* @return string
*/
public function getWork()
{
return $this->work;
}

/**
* @param string $work
* @return $this
*/
public function setWork($work)
{
$this->work = $work;

return $this;
}

/**
* @var string
*/
private $sex = ‘女';

/**
* @return string
*/
public function getSex()
{
return $this->sex;
}

/**
* @param string $sex
* @return $this
*/
public function setSex($sex)
{
$this->sex = $sex;

return $this;
}
连写的例子:

use EntityPerson;
$person = new Person();
$person->setName("蛋蛋")
->setAge(17)
->setWork(‘student’);
最后再演示一个快速复写被继承类的功能。咱们新建一个Man类，然后继承Person类，上面的Person类缺省是女性别，所以我们需要重写它并且加上"中国男人"。同样的使用command + n打开快捷窗口选择 "Override Methods…" 弹出来可被复写的方法:

然后咱们选择getSex跟setSex方法，然后确定，在Man方法下生成以下方法。

namespace Entity;

/**
* Class Man
* @package Entity
*/
class Man extends Person
{
/**
* @return string
*/
public function getSex()
{
return parent::getSex(); // TODO: Change the autogenerated stub
}

/**
* @param int $sex
* @return $this
*/
public function setSex($sex)
{
return parent::setSex($sex); // TODO: Change the autogenerated stub
}
}
咱们把return parent::getSex()跟return parent::setSex( $age )删除掉，不需要这样，然后改成如下模式。

/**
* @return string
*/
public function getSex()
{
if ( ! mb_strpos(parent::getSex(), "中国") )
return "中国".parent::getSex();
return parent::getSex();
}

/**
* @param int $sex
* @return $this
*/
public function setSex($sex)
{
if( ! mb_strpos($sex, "中国") )
$sex = "中国".$sex;
return parent::setSex($sex);
}
碉堡了有木有。

工具类等

看起来好多的样纸，我懒，不想讲可不可以？我就挑几个好不好？

连拉ssh 照着配就行了，很简单

composer 这个也很明了吧，不多说了，平时咱们都是通过命令行来实现的
vagrant 这个phpstorm 10集成了vagrant，介于咱们自己已经搭建好了自己的vagrant环境，就不使用phpstorm所集成的啦
参考: 《使用Virtual Box和Vagrant搭建开发环境》

Database 工具

phpStorm所集成的database工具十分强大，当然它还有单独的database工具叫做: DataGrip，当然需要独立购买，咱们phpStorm有集成，就使用它好啦哈哈….(咱们的PhpStorm可是花钱买的，请支持正版)

Database工具一般在右侧栏，如果没有的话搜一下就好了，多简单的事儿呀…

开始创建一个数据库连接吧…

选择如上图的那个"+"号，然后选择Data Source数据来源，再选择数据库类型，一般咱们都是使用mysql吧，这次咱们试试新的，比如SQLite

选择sqlite数据文件的地址，然后选择驱动，如果没有的话得先下载安装sqlite的驱动插件，这个很简单，在Driver下有提示，照做就是了…

咱们先看一下mysql的配制吧…

mysql的也非常简单，如果需要ssh/ssl连接的话，需要在SSH/SSL选项卡上配配地址入连接密码或sshkey…

配制好了，打开选择的数据库:

上图是连接的数据库的表及表字段信息… 来演示一下查询… 点击那"QL"样的dos窗口图标会弹出一个tab页，咱们可以在这里写sql语句。

咱们查询User表下的所有数据，可以看到会有相当提示，这是相当的好使啊…查询完成后在下面的Database Console上会有显示表数据，可对它进行修改，等等操作增加数据也可以。

快捷键command + alt + l不但对代码进行格式化，也sql语句也是非常有效的，如上图。

在"Database Console"栏上点"Output"选项卡可以查看sql语句执行的情况、记录及所消耗的时间等等信息…

command + 回车 执行sql语句或执行选中的sql语句
关于database工具的用法还有很多很多，我就不一一讲解了，大家可以自己慢慢去研究，真的非常好用

CVS 和 Git

command + k
command + shift + k
关于FTP的配制，由于我不推荐使用，所以这里就不多说啦！

都到这了，那咱们就说说在phpStorm上如何使用git工具吧

算了，还是举一个例子吧，配辣么多太累了，一会我看下有没有已经配好的，如果有的话一会拉出来截个图看看就行吧，反正现在svn用得也比较少了，还是git用得爽，分布式嘛，离线嘛，多好…关于svn -> git可以参考我之前写的一篇文章

《将代码库从Svn迁移Git》

从git服务器上把代码抓到本地

选择CVS -> Checkout from Version Control -> Git

在弹出的窗口输入自己的git仓库信息:

注意 conle 的时间如果没有设置你的github账号的话可能会提示你输入账号信息，咱们输入就行了。如果需要修改的话则在设置里面进行修改，咱们可以使用command + ,打开"Preferences" 然后找到"Version Control"选项目的"GitHub"进行设置，还有"Git"路径。

从mster创建分支

创建分支以通过命令行进行创建，咱们可以通过phpstrom的窗口进行创建，如下:

这个东西在右下角，"Git:master" 然后弹出上面窗口选择"New Branch" 然后输入新分支的名称就好了，它会自动切换到新分支下。

是不是超级简单呀…

提交代码至远程分支

当咱们修改完代码后，咱们需要把代码提交到远程分支上，使用快捷键command + k提交相当修改后的代码，双击文件可以进行对比。在"Commit Message"写上修改的东西然后点提交，这时就把代码提交到本地分支上了。

不使用快捷键的话，可以使用"CVS -> Commit Changes"提交，也会弹出下面窗口…



提交到本地分支后，咱们需要把代码推到远程分支上，所以需要使用快捷键: command + shif + k提交远程分支…



也可以使用"CVS -> Git -> Push"进行提交…效果是一样的

注意svn木有 command + shift + k这一步

合并分支

分并非常简单，只要选择需要合并的分支，然后merge就行了，如下图:

这样就合并完成，当然，如果有冲突的话会提交有冲突，并让你解决，如果没有的话就直接合并成功了…然后就可以push了……

Compare 是对合并的分支进行对比…

使用svn…

灰常抱歉，我电脑上木有找到相关Svn项目的代码，就不多说了…

安装插件

这里讲一个javascript 的安装，使用快捷键cmd + , 打开 Preferances

安装 JavaScript 插件

Languages & Frameworks -> Javascript -> Libraries

选择add需要的框架

安装symfony2插件，搜索插件，然后点install

然后重启phpStorm 就完事了….

注意

灰色＋波浪线: 变量未使用
黄色波浪线: 变量未名单词拼写问题
红色波浪线: 变量未定义
还有好多我就不一一举例了，可能是因为我代码写得太好，出错的东西比较少吧…
右边栏出现红色，这点是必须要杜绝的，好的代码不应该出现红色的任何提示…一旦出现一定要马上解决，好的代码不应该出现一个黄、红色的提示。