小程序学习笔记-1：微信小程序项目结构

本篇内容
* 最基本的微信小程序项目结构
* 一个简单页面的工作

首先，按照小程序官方文档注册，新建一个小程序https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html

认识项目目录结构：
app.js 整个项目的入口文件

App({   //创建一个应用对象
  onlunch:function(){
      //此处可以写一些登录获取用户信息的代码
  },
  globalData: {  //全局数据
    userInfo: null
  }
}) 

app.json 项目的全局配置

{
  "pages":[   //配置页面路由，第一个默认为小程序的首页
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{  //全局的默认窗口表现
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",   //指定使用升级后的weui样式
  "sitemapLocation": "sitemap.json"   //指明 sitemap.json 的位置,sitemap.json用于配置小程序能否被微信索引到
}

app.wxss 全局样式

pages目录下，每个页面建一个文件夹，每个文件夹下可以有四种文件，以index页面为例
index.js 页面逻辑，必须

//index.js
//获取应用实例
const app = getApp()

Page({   //创建一个页面
  data: {  //渲染到页面的数据
  },
  //事件处理函数
  bindViewTap: function() {
         //...
  },
  onLoad: function () {
   
  }
})

index.json 页面配置文件，非必须
index.wxml 页面模板文件，必须，有小程序自己的标签，和html不一致
index.wxss 页面样式文件，非必须，对css大部分支持，新增小程序尺寸单位rpx

到这里，就可以建成一个简单的小程序了，在新建小程序的时候，里边已经包括了这些基本的目录结构，学习之后就可以根据自己项目的需求进行开发了。

参考资料：
微信小程序官方文档-小程序代码构成

下一篇：小程序学习笔记-2：NavigationBar和TabBar的设置