微信小程序程序员今日看点

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

2016-09-23  本文已影响591人  zjjfly

前言

微信小程序于今日内测了，一下子成为了程序员们的热门话题。本人以前是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

它用来配置窗体的样式。

具体配置项的说明:

这里的导航栏指页面最上面的一部分。我们拿“接口->基础能力->微信登录”这个界面举例子。


屏幕快照 2016-09-23 15.01.02.png

导航栏部分在图中以红圈标出。你看，这个和原生的APP的顶部导航栏非常像，几乎以假乱真，这也算是微信小程序的 一个优势吧。

5.3 tabBar

这是配置下部导航栏的。也就是最开始的页面下面“组件”和“接口”所在的位置:

屏幕快照 2016-09-23 15.20.33.png
这也部件不管在webapp还是原始app，都很常见。

具体配置项说明:

5.4 networkTimeout

配置网络的超时时间，单位都是毫秒。

具体配置项说明:

5.5 debug

配置debug开启(true)还是关闭(false),关闭了只会打印开发者自己代码里的输出信息，开启了可以打印底层框架的日志。

6 app.wxss样式

基本就是css换了个名字，没啥新东西。

结语

这是系列教程的第一章。从下载开发工具到现在写完这个教程，我只花了差不多七个小时，看吧，入门就是这么简单。

上一篇下一篇

猜你喜欢

热点阅读