微信小程序

Demo文件结构浏览

今天整个朋友圈都被“小程序”刷屏了,晚上在公众号看到 某位大神 破解了应用号开发的 IDE并放出demo供大家 玩耍;于是赶紧下载,按照步骤登录了好几次都不行,没办法,先来分析一下整个demo的结构吧;

1、demo目录结构

 微信小程序

 

整个demo的目录结构如上图(win下tree命令直接获取的,仅包括目录,没有列出文件名称);

目录中image 下为png图片,可定是图片资源了,通篇浏览会发现在暂且不考虑;

其他的文件类型有 .js, json, wxss, wxml;

整个demo的根目录下有文件名为app的js,json,和wxss三个文件;打开文件可以推断其功能:

App.js :脚本文件

 微信小程序

内容如上,有类似于生命周期的标记可以判断js文件类似于Android开发的java功能,实现具体的逻辑控制;

App.json 文件,姑且叫做配置文件

 微信小程序

App.json中包含如上的一些信息,浏览目录我们可以断定,pages 属性下的json数组为demo中的各个不同的页面,每一个元素对应目录下都有对应的js,json,wxss,和wxml文件,应该是一个完整的页面;window,tabbar,networktimout根据名称和子属性就能推断出是整个应用的配置信息;

虽然还没运行程序,但是这两行的功能简直不要太明显;

App.wxss 样式文件;

 微信小程序

内容和语法跟css 一样一样的(难道是  微信css的缩写吗);

因为没有运行起来,所以具体什么效果还不能确定;

Wxml:根目录下没有app.wxml文件,但是在其他的page对应的目录中有,随便打开一个看一下不出意料的是视图定义的文件;文件格式跟xml基本相同(现在没发现不同);牛逼的微信把css改成了wxss,把xml也改成了wxml,为啥js和json不改名叫wxjs,wxjson。

 

Generate.sh文件;

 微信小程序

如图,在page\api\目录下有个有个generate.sh文件,刚开始不知道干啥的,后来打开一个目录一比较,发现规律了

 微信小程序

 

总结:

本节对demo中目录结构进行浏览和推测,大概分析了 应用号 应用包含哪些类型文件和其对应的功能;最终我们可以得出结论,跟Android开发还是比较类似的,对于开发过Android的同学来说应该能很快上手;

更详细的等拿到开发文档再继续吧;

 

网上已经有教程了!!!

https://my.oschina.net/wwnick/blog/750055

微信小程序

上一篇:CSS3 仿微信聊天小气泡


下一篇:创建周期性计划任务cron