曹政:微信小程序的盛宴,你真的准备好了?

今天下午,我才第一次认真的把微信小程序的平台文档和测试范例看了一下。

别往下看,猜猜我最关心的是看哪部分?

是信息模板发送的条款。

曹政:微信小程序的盛宴,你真的准备好了?

好吧,从头说起,微信小程序内测的消息一出来,业内就轰动了,请恕我先吐个槽,我觉得微信内测找的那些合作方不太对,按照业务规模排序的一些巨头,当然他们业务量大,应该有优先权,但是他们动作迟缓,公司决策缓慢,你给他们接口,两个月可能都得不到真正有效的反馈,还不如给一些有活力的创业公司,保证俩礼拜啥都鼓捣出来了。

对于大部分从业者,都认为微信小程序会成为一个新的分发市场,微信将成为与安卓,谷歌平行的操作系统;当然,也有少部分人不以为然,比如说,他们认为,当年最早做开放接口,试图打造操作系统的社交网络Facebook,如今平台何在?

这个扒扒历史,Facebook是最早把开放接口平台做完善的社交网络,也是最早以好友时间线为核心的社交网络平台,而且在当时也是形成了一股极为重要的风气,社交游戏成为一种流行,国内跟风的也很多,Zynga上市更是其中的高潮,但后来问题来了,社交游戏,对原本熟人社交的伤害极大,为了游戏获利的好友关系已经丧失了原来的意义;而时间线也被各种社交游戏的分享所污染。之后Facebook 也开始逐渐着力整顿这一块,而社交游戏的热潮也快速退却,直到现在,近乎销声匿迹。

我们说,微信不是很多游戏也有社交功能么?和当年Facebook开放的社交接口相比,其实早就不可同日而语。 存在社交功能的游戏,和以社交为核心的游戏,还是很大不同的。(顺便偷偷说一句,中国互联网社交游戏当年风靡的核心诉求是什么,知道么?是暧昧。嗯,这就不展开了。Facebook最初得以快速发展的核心用户诉求,其实也是暧昧,你信不信。)

以前我记得有篇文章提到过,我找不到是哪一篇了,和巨头,大平台合作,要能站在对方角度思考,并理解他们的诉求和目标,理解他们的担心和忧虑,这样你才能找准自己的定位,以及正确的合作姿势。

和微信合作也是如此,今年的实际内容其实很简单,罗嗦这些,是希望读者,从历史来体会和思考,微信平台的担忧是什么,我告诉你们,是朋友圈时间线的污染。

前几天,我去当面请教俞军,俞军说了一句很经典的点评,微信的成就,来自于控制。那么我的理解,朋友圈,时间线的控制,是这里特别重要的一块,当然还有消息发送的控制。 一旦失去控制,平台就会失去一切。这绝对是张小龙的噩梦。更多微信小程序解读:www.yangfenzi.com/tag/xiaochengxu

所以,任何,将核心模式和用户获取能力,完全建立在信息分享上的应用,对不起,我肯定的告诉你,没有可能获得微信的平台支持,就算短期你可以绕过审核上线,一旦做大必然被关停。不论是公众号,服务号,还是小程序。这一点,所有在微信平台的开发者,务必要牢记。

当然,不是说不可以做分享,但分享必须基于用户主动,自发,无激励,无诱导,无暗示,无混淆的方式。除了分享,消息发送也是如此,用户必须明确自己的行为,会收到什么消息,必须明确,这个消息是自己行为的反馈,(比如付款确认消息,订单完成消息等)。凡是脱离这一基础的,即便侥幸你能绕过审核,一旦做大,未来也会被微信干掉。

所以,几点结论

第一,不要过度指望流量红利,第一批上线的应用会有流量红利,但不会很多,微信也不会允许你滥用平台流量资源。

第二,不要试图做病毒式营销,即便你的玩法很受用户喜欢,一旦被朋友圈刷屏,杀无赦。这样的例子我不用讲,太多太多。

第三,理解微信平台的运营思路,比纯粹通过字面理解条款重要,条款是随时可以变更的,而且解释权在微信。

第四,市场空间还是有的,但跟APP市场还是会有一些区别。不要顾此失彼。

第五,是否有新的市场机会,需要一点想象力。

有想法要开脑洞的,欢迎留言或发信。

第六,不论你做什么业务,记住,学会控制是非常重要的一种能力,所谓控制,就是不要为利益,欲望所驱使,失去对真正价值的尊重。

【文/曹政  “caoz 的梦呓”(微信号:caozsay)】

氧分子网(www.yangfenzi.com)是关注互联网生态圈的科技新媒体

·氧分子网http://www.yangfenzi.com)延伸阅读:

➤ 和菜头:作为大自然的微信,小程序是微信里的AppStore

➤ 池建强:微信小程序,仅仅是 Web App 么?

➤ 微信应用号小程序内侧:微信是一个操作系统、一个AppStore吗?

➤ 我所感知的、几款过亿美金APP的创业法则

➤ 王冠雄:APP推广不只烧钱,这四大招你也可以有!

➤ 杀死那个App:后应用时代来临,语音交互是未来趋势

分享给您的好友:

您可能还喜欢…

7 Responses

  1. 一个庸俗的人,一个无益于人民的人,一个脱离了高级趣味的人说道:

    小程序=通过微信实现其他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的时间还比较多,毕竟很多朋友都在上面聊天。微信相对来说只是越用越寂寞的工具社交工具而已,用多了就厌了。确实国内很多人都不会有我这种观念,毕竟非手机控很少。

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

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

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

  2. 待我代码编成,娶你为妻可好说道:

    我认为,根据张小龙所描述的微信应用号的出发点来看,对于企业/商家来说最后还是只能做导流,而不是把所有服务装在微信应用号里。对于用户可以得到一部分的便捷。最大的受益者还是微信。
    5/关于“应用号”
    张小龙大大在说应用号时说了这样四句话。
    1.关于给谁做:很多服务和功能用户需要的频次很低,还会在手机上有推送,其实没必要。
    2.关于给谁做:开发一个APP的成本很高,很多小的商户或者企业承担不起,也没必要。
    3.关于做成什么样子:应用会静静的呆在那里,你需要的时候就去用。
    4.关于放在哪:公众号之中也可以插入服务之类的,但是体验不好,用户也不好找。
    具体就不解析了,大家自行理解。

    从第一点看出,应用号主要针对的是那些必要但是低频的服务。
    从第二点看出,应用号可以降低提供服务的成本,而且从RN技术的稳定性及性能来看,更多的是简单不复杂的功能服务。
    从第三点看出,应用号不提供类似推送的服务,是要由用户发起的,不会骚扰用户。
    从第四点看出,应用号会单独做一个入口,尽量减少层级,应该会在发现里做一个入口,同时在聊天列表里的公众号增加采用滑动点选进入方法。

    对于商家来说
    这里伤害企业/商家/创业者的是第三点。微信希望的是应用更多的作为一个工具在用户想要的时候用,而不能更多的占据用户的时间。就像系统里的计算器/播放器一样的感觉。而企业们希望的是从微信中得到流量。一个是希望这个服务安安静静的在那里,不要整天吵着要用户用;一个是希望用户用的越多越好。不矛盾吗?所以这里看出一个结论,微信希望企业商家创业者们来帮微信开发、运营、维护这些计算器们,增加用户对微信的黏度,但却不愿意分享流量,别说用户关系了。有没有一种帮别人做嫁衣的感觉?
    另外,由于和native交互是由微信来做的,有兼容性bug只能提交等微信修复。iOS/Android系统更新了也只能依赖于微信的适配速度和兼容,版本改动更替的时候微信也并不会来测试你的小程序能不能正常运行。就相当于多了一个层级。
    所以我认为企业不能把全部服务寄生在微信应用号里,还是要从微信中导流转化成自己的流量。

    对于用户来说
    本质上不会减少用户的使用空间,只是在桌面上看不见了。使用的空间移到了微信里。每打开一个小程序,会去云端下载小程序对应的代码文件并缓存到手机里。(如果不缓存显然没次都要下载消耗流量并且打开很慢,体验太差)。微信变得更加臃肿。并没有实质上的差别。同时从稳定性和性能考虑,应用只能使用微信规定的控件,UI会大同小异,没有原生App的多样化,体验会接近原生App,优于H5。
    账户系统都采用微信账号省去了分开注册的麻烦,这一点是杀手锏。对应的支付也只能使用微信支付,类似的服务被绑架是肯定的。

    对于微信
    不需要自己去copy别人的产品,让商家们来帮微信提供服务和功能,运维的钱都省了。即使有爆款产品,谈得拢的收购,谈不拢自己copy过来,强制下架就行了。 有了无数这些小程序,微信的生态进一步得到了夯实,城墙变得越来越坚固。如果用户习惯了从微信里使用小程序,微信就不再是一个聊天工具,而是一个App Store。对于微信来说,真正的赢家。这不是终点,信息和服务的获取和感知和使用,应该是越来越简洁。
    曾经有人(包括我)以为互联网入口很重要,但是对于一定体量的公司来说,互联网入口根本就不重要。
    真正重要的是信息和服务本身,包括信息和服务的获取和感知和使用的方式能不能带来和增加价值。
    在这一点上,腾迅是落后的。qq用户多又怎么样?还能进一步找到什么把用户数据变现的途径,解决不了隐私问题,就变不了现?微信小应用能不能成功的关键在于后台,不在于前面的ui。

    想吐槽一下某些教育专家,意想天开。一个工程师的培养不知道需要多少钱、多少时间才能培养出来。尤其是IT行业,技术变化现在是以半年甚至季度为周期,而且一个小方向上,不知道存在多少种激烈竞争的技术。

    RIA(Rich Internet Applications)丰富互联网程序,具有高度互动性、丰富用户体验以及功能强大的客户端。(转自百度百科)

    对于在IT、互联网开发圈子浸泡了五到十年以上的老鸟们来说,相信RIA这个概念不会陌生。但这个概念已经多年无人提了,原因有二:一是随着后来AJAX技术变成主流,针对flash、flex、silverlight而提出的RIA概念被大大弱化(什么RIA嘛,网页本来不就应该是这样的吗?);二是现在已经是移动互联网时代了,RIA已经是上个时代的事情了(那班聊RIA的老鬼头发已经掉得差不多了吧?)。

    回顾我99年开始“上网冲浪”时候的经历,那时刚好遇到以asp,php等能够开发B/S软件的语言开始流行的第一波互联网行情(新浪搜狐中华网网易上市了,之后第一个互联网泡泡破了)。之后互联网技术有了几次升级:
    B/S逐渐代替C/S,asp、php、jsp等技术开始流行,并逐步分化成三大阵营:dot net、java、php
    html的差体验逐步被诟病以及flash的流行(还有html5标准的难产),RIA的概念被提出。随后当时的Macromedia公司推出了flex语言,小伙了一把;后续微软相同理念的silverlight跟进。
    随着ajax流行,xhtml+ajax成为事实的主流,flex和silverlight成为过渡产物;随后各种基于xhtml+css+javascript的前端框架如jquery,extjs,yui等百花齐放。接近(甚至优于)client程序的体验变得理所当然,RIA的概念慢慢少有人提起。
    扁平化设计流行,越来越多优秀的前端框架,UI框架百花齐放,开发人员角色出现“前端”与“后端”的分离,h5标准的尘埃落定以及各路浏览器持续跟进,后端技术更多基于python,ruby,javascript,groovy等脚本语言的技术,“页游”的出现并吸引大量族群。。。至此,web前端已经无所不能。

    对标一下移动互联网时代,大致也有这么几次技术升级:
    以安卓和IOS为代表的操作系统开始流行,意味着移动端智能化时代来临;运行于移动端操作系统的app让C/S架构成为主流。
    随着h5标准的成熟,逐步有些应用场景从app转移到了浏览器,B/S架构开始冒泡,但与PC端互联网历程不同的是基于浏览器的B/S架构应用依然只是星星之火。
    h5真正火的助推器是微信。微信这个超级app代替了浏览器,在他的公众平台生态下,h5应用百花齐放。这段其实开发圈分化出了两种论调两种阵营,一种是“app已死,h5将一统天下”;另一种是“h5体验差的硬伤注定代替不了app”。
    今年9月21号,微信在千呼万唤中推出了“小程序”。他虽然借鉴了h5和javascript的前端开发语言,但确是一套完全封闭的技术体系。小程序比起服务号、h5应用具有更佳的用户体验,这是不是又一个RIA?

    历史何其相似,小程序会不会成为另一个flex或silverlight?拭目以待!

    首先你需要有下面的工具啦

    Mac电脑
    微信web开发者工具.app
    WebStorm / 其他编程器 或 IDE,最好可以支持重命名
    首先,我们需要右键微信web开发者工具.app,然后显示包的内容,在 Contents/Resources/app.nw下面的内容即是我们的代码,拷贝出来啦:

    简单的说明一下:

    app/ 目录下放置了app的代码
    modified_modules/ 即一些修改后的模块
    node_modules/ 地球人都知道
    package.json 呵呵,你一定是知道的,配置了NW相关的内容
    在modified_modules目录下有两个子模块:

    anyproxy,从名字就可以看起来这是一个代理模块
    weinre,远程调试工具
    IDE
    我们已经知道了这是一个NodeWebkit封装的Web应用了。

    在package.json中的"main": "app/html/index.html",,即定义了这个APP的入口是这个index.html,而不是别的文件。

    很顺利的我们看到了他们调用的文件了:

    这里面有一个init方法,看来他就是NodeWebkit相关的入口了。用WebStorm的shift + f6 RENAME 这些变量好十几次,终于看到了下面的代码了:

    这是一个React应用,还好我一年多以前学得不错。扫视了一下代码,终于看到了这一句:

    直接跳转到ContainController.js,跳转到render方法,找到了这个:

    果然Main里面就是大入口了

    对应的就是下面这个界面了:

    edit 就是编辑器及其相关的事项

    detail就是项目的配置

    补充一下咯,其中的编辑环境是基于Monaco

    WeAPP运行机制
    慢慢的就探索到了打包,其运行时的过程。由于我并没有拿到内测资格,所以我只好边看边猜测一下。

    在之前的文章中,我们提到了两点很有意思的东西:wxml和wxss,这两个文件会被分别转换,即wxml -> html,wxss -> css。对应的有几个不同的transform:

    transWxmlToJs
    transWxssToCss
    transConfigToPf
    transWxmlToHtml
    transManager
    这里的PF指代的是PageFrame的意思,pageFrame有一个对应的模板文件:

    这种风格一看就是生成字符串Replace的,然后他们写了一个名为wcc以及一个名为wcsc的工具。

    wcc用于转转wxml中的自定义tag为virtual_dom

    wcsc,我观察到的现象是它为转换wxss为css

    这样的话,我们就可以理解为微信小应用有点类似于 Virtual Dom + WebView,毕竟上面有个WAWebView文件 ,还有一个webviewSDK文件 。

    当然无论是React + WebView,或者Vue + WebView都不重要,现在有了 WA + WebView了,哈哈。

    WeApp采用的是如下图所示的提交方式,所以:

    你在本地写的WeApp都会被提交到微信服务器,然后打包,上传到服务器,交给CDN——毕竟为了分发。

    上传的过程大致如下:

    APP会被打包成以日期命名 + .wx文件

    IDE会检测包的大小,并提示:代码包大小为 xx kb,超过限制 xx kb,请删除文件后重试。这个xx好像是1024,所以APP的大小是1M。

    APP将会上传到 https://servicewechat.com/wxa-dev/commitsource/?appid=xx&user-version=&user-desc=xx

    「微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License买了好多年。所以,我觉得他的IDE真不如我这个付费好用。

    而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」。微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了。

    如果我们放任下去,未来的Web世界令人堪忧。

    好了,废话说完了,本文只是一个Demo的介绍。文章太长不想看,可以直接看Demo哈哈:

    GitHub: https://github.com/phodal/weapp-webdemo
    预览:http://weapp.phodal.com/

    真实世界下的MINA三基本元素

    「微信小程序」的背后运行的是一个名为MINA框架。在之前的几篇文章里,我们介绍得差不多了。现在让我们来作介绍pipeline:

    Transform wxml和wxss

    当我们修改完WXML、WXSS的时候,我们需要重新编译项目才能在浏览器上看到效果。这时候后台就会执行一些transform动作:

    wcc来转换wxml为一个genrateFun,执行这个方法将会得到一个virtual dom

    wxss就会转换wxss为css——这一点有待商榷。

    wcc和wxss,可以从vendor目录下获取到,在“微信web开发者工具”下敲入help,你就会得到下面的东东:

    运行openVendor(),你就会得到上面的wcss、wxss、WAService.js、WAWebview.js四个文件了。

    Transform js文件

    对于js文件来说,则是一个拼装的过程,如下是我们的app.js文件:

    它在转换后会变成:

    我假装你已经知道这是什么了,反正我也不想、也不会解释了~~。同理于:

    至于它是如何replace或者apend到html中,我就不作解释了。

    MINA如何运行?

    为了运行一个Page,我们需要有一个virtual dom,即用wcc转换后的函数,如:

    然后在我们的html中加一个script,如

    就会凑发这个事件了。我简单的拆分了WXWebview.js得到了几个功能组件:

    define.js,这里就是定义AMD模块化的地方

    exparser.js,用于转换WXML标签到HTML标签

    exparser-behvaior.js,定义不同标签的一些行为

    mobile.js,应该是一个事件库,好像我并不关心。

    page.js,核心代码,即Page、App的定义所在。

    report.js,你所说的一切都能够用作为你的呈堂证供。

    virtual_dom.js,一个virtual dom实现结合wcc使用,里面应该还有component.css,也可能是叫weui

    wa-wx.js,定义微信各种API以及WebView和Native的地方,和下面的WX有冲突。

    wx.js,同上,但是略有不同。

    wxJSBridge.js,Weixin JS Bridge

    于是,我就用上面的组件来定义不同的位置好了。当我们触发自定义的generateFuncReady事件时,将由virtual_dom.js来接管这次Render:

    因此,这里就是负责DOM初始化的地方了,这里得到的Dom结果是这样的:

    而我们写的wxml是这样的:

    很明显view会被转换为wx-view,text会被转换为wx-text等等,以此类推。这个转换是在virtual dom.js中调用的,调用的方法就是exparser。

    遗憾的是我现在困在 data初始化上面了~~,这里面有两套不同的事件系统,有一些困扰。其中有一个是:WeixinJSBridge、还有一个是app engine中的事件系统,两个好像不能互调。。。

    使用WebStorm开发

    在浏览器上运行之前,我们需要简单的mock一些方法,如:

    window.webkit.messageHandlers.invokeHandler.postMessage

    window.webkit.messageHandlers.publishHandler.postMessage

    WeixinJSCore.publishHandler

    WeixinJSCore..invokeHandler

    然后把 config.json中的一些内容变成__wxConfig,如:

    如这里我们的appname是哈哈哈哈哈哈哈——我家在福建。

    然后在我们的html中引入各个js文件,啦啦。

    我们还需要一个自动化的glup脚本来watch wxml和wxss的修改

  3. 夏火火说道:

    【应用号】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

  4. 客官不关注一发说道:

    开发微信小程序入门前

    2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅。个大新闻、论坛都在讨论这个事情。

    作为互联网的一猿,我们怎能不紧跟时代的脚步。于是第二天上午也对微信发布的“小程序” 进一步的做了相关了解。

    很多人问我这是什么?

    我一般回答:这是未来。

    安装教程

    关于使用教程网上已经有非常多的教程了,我在这里也不过多赘述,就简单的介绍一下。

    想要快速的学习及开发微信的“小程序”(虽然它还没正式发布)我们首先需要一个“微信web开发着工具”这么一个软件,windows版与Mac版都有。注意,是0.9及以上的版本,0.7版本无法运行。

    Mac版下载地址:wechat_web_devtools_0.9.092100.dmg
    windows下载地址:wechat_web_devtools_0.9.092100_x64.exe

    Mac的安装方式很简单,与普通应用的安装方式一样。
    打开下载好用dmg文件
    把"微信web开发者工具"拖进Application就算是安装完成了
    依次打开"系统便好设置"->"安全与隐私"->"点按锁按钮以进行更改"->选择"任何来源"
    根据提示点"是"、"打开" 然后就可以正常的打开应用了

    先用自己的开发者账号扫一下二维码登陆“微信开web发者工具”,登陆成功后会出现一下界面

    (我已经添加过了,所以不用在意这些细节)

    点击“添加项目”

    这是会提示输入AppId、项目名称、及项目地址, 如下图

    什么是AppID?

    注意:这里的App ID不是原来开发者帐号的那个App ID。

    众所周知,腾讯只给发了200个开发者账号,那像咱们这种没有资格的怎么办?

    我们是猿诶,在不影响他人利益的情况下当然选择破解。

    题外话:

    听说开发者帐号已经吵到300万了,不知道是真的还是假的!

    每个用户只能有20个“小程序”
    “小程序”不能打开第三方应用
    每个应用开发完后打包提交给微信进行审核
    应用是在微信的服务器的
    无法独立出一个独立的应用,只能在微信上使用
    然后点"添加项目"就完成了一个项目的创建。

    破解方法

    windows与mac的破解方法基本相同,这里只以mac为例
    先关闭开发者工具

    下载这两个JS文件,分别替换各个目录中的文件

    文件1: createstep.js
    文件2: projectStores.js

    替换的路径

    createstep.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/components/create/createstep.js
    projectStores.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/stroes/projectStores.js
    替换完后启动应用,然后输入App ID(随便输入一个就行了)然后项目名、路径等。

    这样就可以真正进入开发界面了。

    注意:按照网上的教程需要重新启动一下“微信web开发者工具”原因可能是使用某些功能的时候会提示AppId未注册。

    网上有一个微信Demo,也不知道是不是微信官方的,里边有大量的例子。

    demo下载:demo.zip

    这是一个比较全的demo,包含了大部份功能,及微信所开放的api。

    点击关闭退出到项目选择页面,然后选择“添加应用”与上面方法相同,注意,“项目路径”选择刚刚所下载的“Demo” 让后启动,就可以体验大量demo了。

    写一个hello world!

    一般有三个文件:

    .wxml 相当于html与xml的结合体
    .js 就是js文件
    .wxss 某种css吧
    需要注意的是目前小应用暂时不支持其他插件比如jQuery啥的。

    选择"编辑"选项卡, 打开/pages/index/index.wxml

    是不是很熟悉,就是html与xml的结合 先不做修改。然后打开 /pages/index/index.js

    在Page函数里的 data 对象里的 motto的值改成Hello Dudulu

    bindViewTap 这个方法是绑定的跳转,如果你设置了userInfo的nickName的值,它将会显示在页面正中央,当你点击"nickName"的时候,它路由跳转到/pages/logs/logs.wxml了

    改完后回到"调式"选项卡,点击"重启"就可以刷新刚刚所修改的文本了。

    运行效果:

    这里有一个错误,github上已经有修复改错误的方法了,还需要替换一个文件:

    文件3: asdebug.js
    替换目录: /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/weapp/appservice/asdebug.js

    就可解决以上报错的问题。

    已经有大神把微信的官方文档给抓取下来了, 文档地址: http://notedown.cn/weixin/component

    尾巴

    咱们这种破解方式显然是不行的,我觉得微信可能会封掉这种方法,所以大家赶紧。

    我说它是未来,这个大家自己体会,这次我们不能再错过了。

    为了将真实的DOM转换为Virtual DOM,我们需要将DOM以一定的形式保存下来,如MINA的:

    <map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>

    又或者是React中的:
    当然我们也可以自己实现一个比较简单的DOM转为Virtual DOM,如将
    转换为接近原生的

    原生的Parser
    我会假装你已经知道了浏览器相关的很多细节,我也假装我已经对这些细节很清晰。下图一份Webkit浏览器的早期架构图:
    如果我们使用JS实现一个将WXML将换为DOM JSON,我们就需要间接通过JavaScript Engine(即JSCore )来转换这个JSON文件。当有大量的DOM的时候,这就不是一件轻松的事了。所以,在WCC的生成代码里对DOM的数量限制为16000。

    我们可以用原生的接口来将WX DOM转换为JSON,但是我们没有办法用原生的接口来将DOM JSON转换DOM——毕竟我们还有大量的数据和绑定函数。

    而这一点对于混合应用来说,就特别有帮助:

    如果这个插件可以用在Cordova上,那么它将改善混合应用的性能。

    数据绑定
    当我们触发了generateFunc方法的时候:

    我们调用下面的方法去初始化我们的DOM,并把数据传输进去:

    函数绑定
    MINA的函数绑定机制是由函数名来决定的,如:

    对于其他类型的绑定则是:

    PS:我突然就不想看这个if else经过minify以后的代码了,太恶心了。。。

    如,我们的wxml:

    <map longitude="23.099994" latitude="113.324520" markers="{{markers}}" covers="{{covers}}" style="width: 375px; height: 200px;"></map>
    我们的propKey是bindtap,我们的propValue是bindViewTap,随后我们就会根据当前的函数名去创建相应的事件。

  5. 呆小鼠说道:

    【应用号】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页面了。

  6. 不跑马拉松的摄影师不是好城续猿说道:

    程序的本质就是将给到滴滴、点评这些被腾讯投资业务的“特权能力”中的一部分,通过标准化的接口,给到普通开发者。具体来说,微信小程序提供丰富的框架组件和API接口供开发者调用,包含:界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。操作系统给App开发者提供的能力微信基本都有提供,只不过其开发语言是基于JS和H5的,并且控制权限和能力范围与操作系统还有差距,因此是“小程序”而不是“应用”。

    对于用户来说,不下载和安装App这个听上去挺有吸引力,事实上我们手机里安装的大部分App被打开的次数也很少,它们长期处于休眠状态,大家都是懒人,手机存储空间也有限,微信的优势是“顺手”,用户每天打开微信许多次,如果能通过微信小程序顺便解决,干嘛去安装App?微信支付没有自己的App,但在移动支付市场份额快速崛起,就体现出顺手的优势,微信支付之后也不大可能开发自己的App,它就是一个小程序。

    别忘了小程序的“小”

    微信公众平台之前一直是在做不同的“号”,订阅号、服务号、企业号。微信将“号”这个概念带到了整个互联网行业,头条号、网易号、百家号、直达号……这一次,微信公众平台反而没有用“应用号”这个名字,因为微信有自知之明,“小程序”的关键在于“小”。

    跟滴滴打车一起接入微信的,还有大众点评、京东、58这些应用。尽管我本人是它们的忠实用户,但却从来不在微信里面使用它们。为什么?因为这些应用的功能和交互比滴滴复杂太多,安装其App才能用,才好用。大家都在微信有入口,效果却完全不同,这就表明微信的能力距离操作系统还是有很大差距的。正如其名,“微信小程序”更适合“小”程序,比如打车、理财、媒体这样的弱功能、弱平台、弱交互,重服务、重内容、重社交的应用。

    互联网开发者,做的事情大抵可分三类,为用户提供功能、内容和服务,或者三者兼而有之。工具类App如墨迹天气、美图秀秀、清理大师在做功能;媒体和娱乐属性的App在做内容;O2O、电商、金融之类的平台在做服务。

    微信订阅号和服务号分别承载了内容和服务,这是微信公众号最核心的两大能力。“小程序”更适合提供内容和服务为主、但又需要功能性的小应用,比如服务相对单一的O2O应用如连咖啡、出门问问,再比如在内容之外还希望提供简单功能的。但对功能和交互要求很多的,如美图秀秀,京东商城,大众点评这些“大”应用,是不适合微信小程序的。

    小程序只是一个小升级

    微信公众平台面向开发者提供开放能力之后,就已有许多小程序的雏形。不懂开发的可以给订阅号加一个自定义菜单,这就是一个小程序。懂开发的还可以基于订阅号和服务号开发更多功能,顺丰速运、中国移动、招商银行、广州公安之类的服务型App功能已经很丰富,这些也是小程序,正是因为微信开放其能力,形成了一个庞大的“微信开发者生态”。

    “微信公众平台小程序”不算一个新的东西,只不过是对之前开放能力的一个升级而已。一方面,开放的能力更多了,交互可以更丰富,功能可以更强大,看看滴滴打车等腾讯系业务的体验就知道了;另一方面,有了小程序概念之后,用户可根据需求去找应用,而不是像过去先关注某个号再使用有限的功能,使用应用的方式也不再是跟“号”聊天,而是跟常规App的体验类似。

    微信订阅号、服务号,都没有类似于排行榜、导航首页这样的中心化分发方式,倡导去中心化的微信不做这些东西。然而,做小程序之后,微信很可能会上线小程序分发平台,就是类似于AppStore的东西。“挟用户以令开发者”是微信的能力所在,没有几个开发者会忽视微信的用户导入能力。小程序对开发者来说最核心的吸引力就在于其用户生态,以及腾讯鉴权的基础能力,如支付、地图、ID等。有想法可先基于微信先开发“小程序”来实现一个小目标,验证自己的想法;已有App的开发者,则可开发微信小程序将用户导入到自己的App。

    小程序的先天缺陷是什么?

    有人说,微信就是一个操作系统,看上去是,实际上还差得远。

    小程序看上去有操作系统的所有接口,但是别忘了,小程序是基于微信的,微信虽是超级App,但依然是操作系统上的一个App。微信小程序跟原生App一样流畅,从技术上来说这是不可能的,因为小程序实现同样功能,会多一层计算,从计算角度来看必然会降低效率,不论是处理器还是内存还是耗电。微信现在就算只是聊天,用久了也会卡,它已经成为大多数用户手机中的耗电和空间大户,如果再承载臃肿的功能型计算,会有多卡?会有多耗电?会有多吃内存?这意味着小程序注定不适合完成复杂的任务,也不适合高频App比如音乐播放器。

    还有,原生App在个性化的功能和交互方式上,在面向操作系统的底层性能优化,对离线数据的支持,都会比微信小程序更强大,因此大型游戏、美图秀秀、高德地图这类App是不可能通过微信小程序来实现的。正如其名,微信小程序更适合那些使用频率低、功能相对少、且有内容和服务属性的的“小程序”,所以说微信会颠覆AppStore,会与操作系统竞争,还是有些夸张了。

    一定比轻应用更加强大

    三年前,人们就在说“轻应用”这个概念,不少浏览器都尝试推出过“轻应用”,即基于H5的所见即所得的WEB App,然而却没有一个成功的。理论上WEB APP可移植极强,开发门槛低,对用户来说所见即所得,为什么没有成功呢?核心原因有三点,一是用户习惯问题,用户通过浏览器过去是浏览网页现在是消费内容,没有通过浏览器做更多事情的习惯;二是产品体验问题,浏览器基于H5提供的轻应用在底层能力上很弱,而且都要联网使用,体验很差;三是开发者态度问题,浏览器对开发者的吸引能力还不够,大家不支持,不去开发轻应用,最终形成恶性循环。

    现在微信小程序会重蹈覆辙吗?不会。微信小程序不是H5应用,而是嵌入在微信中的本地应用,看上去没有安装,实际上用户添加之后就会在微信里面实现“本地化”,在使用体验上会在WEB App之上,原生App之下。更重要的是微信对用户和开发者的吸引力比任何一个浏览器甚至各大浏览器加起来都要大,用户为了省事顺手使用,开发者为了用户积极开发,会形成一个正循环。

    在小程序之前微信就已形成介于Native App和Web App之间的“微信应用生态”,内容的生产、传播与消费在微信实现,还可在微信实现服务的提供、共享、获取。而这一切与浏览器、与搜索引擎、与豌豆荚什么的没关系,这些都曾被视作不同时代的入口。微信绕过了这些入口,成为一个黑洞,将内容和服务都吸引过去,将用户和开发者吸引过去。现在做“小程序”只是锦上添花而已,不会对应用生态又什么本质改变。

    微信APP即微信公众账号,对APP提供者来说这是一个门槛极低,容易到达数亿真实用户且确保用户黏性的分发平台;对用户来说,这是一种前所未有及其简单的应用使用方式;对腾讯来说,将形成微信APP市场,通过微信APP付费订阅和APP内收费实现商业化,而微信APP及微信APP内搜索,将让微信有机会成为移动互联网的一种搜索入口。

    这段话将“微信APP”换成“小程序”一样有效。

    微信每一个动作都会被行业关注,且几乎每一次都会被高估,比如微信企业号就曾被高估,微信上线“朋友阅读的原创文章”小功能,有人说这是要干掉百度的节奏,今天这个功能已经下架了。微信小程序真的只是一个小程序而已,说它要取代AppStore显然是高估了,不过,长期来说,开放更多能力给开发者将巩固和丰富“微信应用生态”也是必然,虽然这个生态在小程序之前早已存在。

    开发微信小程序入门前

    2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅。个大新闻、论坛都在讨论这个事情。

    作为互联网的一猿,我们怎能不紧跟时代的脚步。于是第二天上午也对微信发布的“小程序” 进一步的做了相关了解。

    很多人问我这是什么?

    我一般回答:这是未来。

    安装教程

    关于使用教程网上已经有非常多的教程了,我在这里也不过多赘述,就简单的介绍一下。

    想要快速的学习及开发微信的“小程序”(虽然它还没正式发布)我们首先需要一个“微信web开发着工具”这么一个软件,windows版与Mac版都有。注意,是0.9及以上的版本,0.7版本无法运行。

    Mac版下载地址:wechat_web_devtools_0.9.092100.dmg windows下载地址:wechat_web_devtools_0.9.092100_x64.exe

    Mac的安装方式很简单,与普通应用的安装方式一样。
    打开下载好用dmg文件
    把"微信web开发者工具"拖进Application就算是安装完成了
    依次打开"系统便好设置"->"安全与隐私"->"点按锁按钮以进行更改"->选择"任何来源"
    根据提示点"是"、"打开" 然后就可以正常的打开应用

    先用自己的开发者账号扫一下二维码登陆“微信开web发者工具”,登陆成功后会出现一下界面:

    (我已经添加过了,所以不用在意这些细节)

    点击“添加项目”

    这是会提示输入AppId、项目名称、及项目地址, 如下图

    什么是AppID?

    注意:这里的App ID不是原来开发者帐号的那个App ID。

    众所周知,腾讯只给发了200个开发者账号,那像咱们这种没有资格的怎么办?

    我们是猿诶,在不影响他人利益的情况下当然选择破解。

    题外话:

    听说开发者帐号已经吵到300万了,不知道是真的还是假的!

    每个用户只能有20个“小程序”
    “小程序”不能打开第三方应用
    每个应用开发完后打包提交给微信进行审核
    应用是在微信的服务器的
    无法独立出一个独立的应用,只能在微信上使用
    然后点"添加项目"就完成了一个项目的创建。

    破解方法

    windows与mac的破解方法基本相同,这里只以mac为例
    先关闭开发者工具

    下载这两个JS文件,分别替换各个目录中的文件

    文件1: createstep.js 文件2: projectStores.js

    替换的路径

    createstep.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/components/create/createstep.js
    projectStores.js -> /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/stroes/projectStores.js
    替换完后启动应用,然后输入App ID(随便输入一个就行了)然后项目名、路径等。

    这样就可以真正进入开发界面了。

    注意:按照网上的教程需要重新启动一下“微信web开发者工具”原因可能是使用某些功能的时候会提示AppId未注册。

    网上有一个微信Demo,也不知道是不是微信官方的,里边有大量的例子。

    demo下载:demo.zip

    这是一个比较全的demo,包含了大部份功能,及微信所开放的api。

    点击关闭退出到项目选择页面,然后选择“添加应用”与上面方法相同,注意,“项目路径”选择刚刚所下载的“Demo” 让后启动,就可以体验大量demo了。

    写一个hello world!

    一般有三个文件:

    .wxml 相当于html与xml的结合体
    .js 就是js文件
    .wxss 某种css吧
    需要注意的是目前小应用暂时不支持其他插件比如jQuery啥的。

    选择"编辑"选项卡, 打开/pages/index/index.wxml
    是不是很熟悉,就是html与xml的结合 先不做修改。然后打开 /pages/index/index.js

    在Page函数里的 data 对象里的 motto的值改成Hello Dudulu

    bindViewTap 这个方法是绑定的跳转,如果你设置了userInfo的nickName的值,它将会显示在页面正中央,当你点击"nickName"的时候,它路由跳转到/pages/logs/logs.wxml了

    改完后回到"调式"选项卡,点击"重启"就可以刷新刚刚所修改的文本了。

    运行效果:

    这里有一个错误,github上已经有修复改错误的方法了,还需要替换一个文件:

    文件3: asdebug.js
    替换目录: /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/weapp/appservice/asdebug.js

    就可解决以上报错的问题。

  7. why not vue说道:

    如何优雅的使用 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 就完事了….

    注意

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>