微信小程序开发入门（二）——Hello World

安装好开发工具后，新建项目，看到有提示quickstart的时候选择是，进入开发界面后，会出现如下的代码结构，

如果没有出现，则从官网文档上，下载一份源码：https://mp.weixin.qq.com/debug/wxadoc/dev/demo/quickstart.zip?t=2017112

对于这个结构 我们先简单的看一下，

1.app.js

app.js里声明了一个App应用，其中onLauch方法为其生命周期钟的方法：另外的三个方法就是 onShow,onHide,onError..分别在app加载，显示，隐藏和错误时触发。

在app.js中给App声明的方法，在全局中都可以访问，访问的方法是：

varapp=getApp();app.getUserInfo(func);//调用App里面的getUserInfo方法

2.app.json

这个文件用于配置整个应用的属性，比如窗口的属性，应用中的路由页面配置，导航条navbar，tabBar,networkTimeout,debug等配置。下面简单说下该配置里的参数：

01.pages

该参数是一个数组，放置所有的路由页面，

第一项被默认为起始页

02.window

该参数配置背景色，背景文字样式，导航条的背景色，导航条的文字颜色

03.tabBar

该参数可以配置tab按钮的样式，在不配置的时候是不显示的。

11.list：数组，里面配置每个tabBar文字，图标的样式，和路由路径

参数为：pagePath,text,iconPath,selectedIconPath

12.position:tabBar的位置，bottom/top

13.backgroundColor:背景色

14.color：文字颜色

15.selectedIconPath:选中的图标颜色

04.networkTimeout

对象类型：比如：request:10000

05.debug:true/false

3.app.wxss

定义全局的样式特征，里面定义的样式整个app都可以访问。

4.pages文件夹

里面放置所有的页面，当然你想放在其他地方，最好遵循标准命名规范

5.utils

放置公共的组件，组件引用遵循amd规范，可以使用commonJS规范，也可以使用es6规范，但是对于es6的解构引入，现在在微信小程序的js里还不支持。

6.简单的体验

修改pages/index/index.js钟的data参数里的motto字段的值，点下保存，会发现左侧的界面变随着更新。

然后尝试着在data里添加字段，然后在前台绑定

data: {    motto:'欢迎来到微信小程序',    userInfo: {},    logo:'语巷'},

index.wxml

{{logo}}{{motto}}

效果：

到这里为止，我们已经知道了data的作用了

原文链接：http://www.moguiweb.com.cn/article/detail/587b15bf4981030efc96ff92