微信小程序 注册账号 和 创建初始项目

注册账号

  访问官网小程序注册

获取APPID

开发工具

  严格来说，微信小程序支持所有的开发工具，但是从观察效果只能用微信的开发工具
微信小程序开发工具下载地址

扫码登陆

 安装完成后打开开发者工具，用微信扫码登陆

创建项目

 选择小程序创建项目，填写路径和APPID（或者通过测试号创建）
 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS , 以及 JavaScript ,并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

与传统 web 对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

基本的项目目录

全局配置 app.json

 app.json 是当前小程序的全局配置，包括了小程序所有页面路径，界面表现、网络超时事件、底部 tab 等。普通快速启动项目里边的 app.json 配置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

tabBar

 如果小程序是个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），也可以通过 tabBar 配置指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

{
  "pages": [...],
  "window": {...},
  
  "tabBar": {
    "color": "#fff",
    "selectedColor": "#0094ff",
    "backgroundColor": "#eee",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/index.png",
        "selectedIconPath": "icons/index_active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "icons/book.png",
        "selectedIconPath": "icons/book_active.png"
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}