前言
微信小程序于今日内测了，一下子成为了程序员们的热门话题。本人以前是java程序员,前一段时间开始学习前端相关的知识，陆陆续续看了HTML，CSS，JS和Node(正在学习)，最近在工作中也开始从事一些前端工作(Flex开发)。小程序是否会成为微信公众平台开发的又一个成功产品，不得而知，但引起了我浓厚的兴趣:首先，它降低了开发简单APP的门槛，有丰富的API可以调用，其次，如果小程序的发布只需要微信官方的审核，而不用政府有关部门的审核，这将会大大节省繁琐的APP审核成本，不论时间还是金钱上。我也想趁此机会，跟深入的学习前端技术，所以写这一个入门教程，权当是笔记和分享，有不足的地方请多指教。
1 环境搭建
首先，安装微信小程序开发工具。由于是在内测阶段，所以没有内测资格的人只能使用破解的程序,地址:破解版。务必下载地址中的Demo，通过这个Demo，我们可以边看代码变学习微信小程序的开发。当然，你还需要是一个微信公众平台开发者，因为需要输入Appid进入工具
2 需要的知识
如果你是做前端开发的，请忽略这一节。如果你是菜鸟，那么你需要有基本的HTML，CSS和Javascript,Node的基础知识。真的只需要比较基础的知识，个人认为。
3 开发工具
屏幕快照 2016-09-23 12.07.16.png
这是进入开发工具看到的界面。左边纵向的工具条上部有三个选项：编辑、调试、项目。由于现在这个开发工具还不支持“项目”的一些功能，暂时忽略这个选项。
编辑页面和一般界面的编辑器没太大区别，左边是一个文件导航栏，右边是文本编辑界面。左下角可以有一个“编译”按钮，它可以编译修改的文件，然后reload项目，很方便的一个按钮。
屏幕快照 2016-09-23 12.19.00.png
这是调试界面，可能是直接把chrome的开发者工具(切换到移动设备模式的)拿过来用了，基本一模一样。左边是页面预览，右边是开发者工具栏，从事前端的同学应该很熟悉。它的左下角同样有一些便捷的按钮，在预览界面的顶部，还可以选择设备型号和网络模式。
我们先运行个小程序看看。首先把之前下的Demo导入到开发工具中，然后这个项目会自动启动。在调试界面，可以在右边的console标签下看到App打印的日志。
屏幕快照 2016-09-23 13.53.07.png
看一下日志内容，很容易知道App的启动是通过WAService这个js，这应该是微信开发的框架代码，有兴趣的可以研究一下它的源码。其中的信息如“onLaunch have been invoked”，有经验的程序员应该知道这个
信息是在说明某个方法被调用了。那这个方法是在哪边定义的呢？不要急，我已经帮你找到了。
4 app.js
打开项目根目录的app.js:
App({
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false
}
})
看吧，onLaunch,onShow方法都定义在这里(其中还有一个onHide方法，这个方法App切换到后台运行的时候调用)。所以,在App启动的时候，这个App会最先被加载,并执行它的onLaunch方法，然后，当它界面准备显示出来的时候，它会调用onShow方法。
然后是一堆“Register Page:xxxxx”的信息，字面意思是在注册页面文件，是在哪配置要注册哪些文件的呢？这有涉及到另一个文件：app.json。学过Node的同学肯定此刻肯定会心一笑。没错，这是类似package.json的项目配置文件，关于App的核心都放在这里面。打开这个文件:
{
"pages": [
"page/component/index",
"page/component/navigation-pages/controller/controller",
"page/component/navigation-pages/form/form",
"page/component/navigation-pages/media/media",
"page/component/navigation-pages/view/view",
"page/component/component-pages/wx-action-sheet/wx-action-sheet",
"page/component/component-pages/wx-audio/wx-audio",
"page/component/component-pages/wx-button/wx-button",
...
]
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序演示",
"navigationBarBackgroundColor": "#fbf9fe",
"backgroundColor": "#fbf9fe"
},
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "page/component/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "组件"
}, {
"pagePath": "page/API/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "接口"
}]
},
"networkTimeout": {
"request": 10000,
"connectSocket": 10000,
"uploadFile": 10000,
"downloadFile": 10000
},
"debug": true
}
目前由于我没有官方的开发教程，所以接下来说的都是我通过自己分析得出的一些结论，有错误请多多包涵。
5 app.json配置说明
5.1 pages
它配置的就是刚刚日志里那些register的页面，所以我们在App中新加了一个页面，需要把页面路径写到这个配置中。
5.2 window
它用来配置窗体的样式。
具体配置项的说明:
- navigationBarTitleText:导航栏的标题
- navigationBarTextStyle:文本样式
- navigationBarBackgroundColor:导航栏背景色
- backgroundColor:页面背景色
这里的导航栏指页面最上面的一部分。我们拿“接口->基础能力->微信登录”这个界面举例子。
屏幕快照 2016-09-23 15.01.02.png
导航栏部分在图中以红圈标出。你看，这个和原生的APP的顶部导航栏非常像，几乎以假乱真，这也算是微信小程序的 一个优势吧。
5.3 tabBar
这是配置下部导航栏的。也就是最开始的页面下面“组件”和“接口”所在的位置:
屏幕快照 2016-09-23 15.20.33.png
这也部件不管在webapp还是原始app，都很常见。
具体配置项说明:
-
color和selectedColor:图标下方的文字在一般状态的颜色和在选中状态的颜色
-
borderStyle:边框样式(目前发现还有一个white样式)
-
backgroundColor:背景色
-
list:导航栏包含的选项按钮
- pagePath:页面的路径，点击按钮会转到该页面
- iconPath:一般状态下的按钮的icon的路径
- selectedIconPath:选中状态下的按钮的icon的路径
- text:按钮icon下发的文字
5.4 networkTimeout
配置网络的超时时间，单位都是毫秒。
具体配置项说明:
- request:请求超时时间
- connectSocket: websocket是超时时间
- uploadFile:上传文件的超市时间
- downloadFile:下载文件的超市时间
5.5 debug
配置debug开启(true)还是关闭(false),关闭了只会打印开发者自己代码里的输出信息，开启了可以打印底层框架的日志。
6 app.wxss样式
基本就是css换了个名字，没啥新东西。
结语
这是系列教程的第一章。从下载开发工具到现在写完这个教程，我只花了差不多七个小时，看吧，入门就是这么简单。
网友评论