小程序学习笔记（一）HelloWorld

准备工作

官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1475052055990
开发工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364
开发工具安装好后，新建一个项目，记得取消勾选“创建quick start项目”

10-40-43.jpg

从Hello，World！开始

了解下目录结构

小程序 = app程序主体 + 页面pages

app程序主体文件结构：

1. app.js（必填）
   小程序的逻辑。通过app()函数注册一个小程序，并指定生命周期函数。
2. app.json（必填）
   小程序的公共设置。页面路径、窗口表现、tabBar、网络超时等配置项。
3. app.wxss
   小程序公共样式表。可以理解成common.css，不是必填，每个页面可以有自己的样式表，也可以引用公共样式表。

页面page文件结构：

1. js文件（必填）
   页面逻辑。在这里注册页面，初始化数据、生命周期函数、事件处理函数等。
2. wxml文件（必填）
   页面结构，可以理解成html。
3. wxss
   页面样式表，理解成单个页面的css文件，可以为页面单独设置样式。
4. json
   页面配置。只能配置window相关配置项，改变窗体表现。

创建app.js

通过开发工具的提示，使用App函数，快速生成一个小程序。

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

创建app.json

一个app.json文件的配置项包含：

1. pages（必填）---页面路径管理
   一个数组，每一项是字符串“路径+文件名”，指定小程序由哪些页面组成，数组第一项作为初始页面。文件名不需要后缀。

"pages":[
"pages/index/index"
"pages/logs/logs"
]
```
后面这几个不是必备，等以后用到的时候再展开

2. window---设置窗口表现
3. tabBar---设置tabBar
4. networkTimeout---设置网络请求超时时间
5. debug

所以我们的app.json代码如下

{
    "pages":[
        "pages/index/index"
    ]
}

创建index页面

为了便于管理，一般页面会放在pages文件夹下，一个页面一个子文件夹，里面包含js文件、wxml文件、wxss文件、json文件（4个文件名必须一致）。

12-10-11.jpg

index.js

用Page函数快速生成页面实例

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

index.wxml

把view换成div是不是很容易理解

    Hello,World!

index.wxss

样式表的使用基本跟css一样

#hello-world{
    text-align: center;
    margin-top: 75%;
}

编译运行

12-26-57.jpg

好了，enjoy it！下回见：）