微信小程序开发入门(一) 微信小程序开发入门(一)

前言微信小程序于今日内测了，一下子成为了程序员们的热门话题。本人以前是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换了个名字，没啥新东西。
结语这是系列教程的第一章。从下载开发工具到现在写完这个教程，我只花了差不多七个小时，看吧，入门就是这么简单。