小程序开发

一、创建第一个页面

1、小程序开发工具，新建项目，删除除project.config.json、sitemap.json以外的所有文件（需要到文件目下删除，小程序开发工具不支持批量删除）；

    小程序目录结构及文件类型说明：
    目录结构：APP -> page -> 组件；
    文件类型：.js　　     全局内容
            .json　　   配置文件
            .wxss      样式配置
            .wxml      布局配置（全局不需要）

2、新建全局app.js、app.json

3、app.json 添加代码：
{
　　"pages":[]
}

4、新建目录pages/home，创建home 页面。

　　微信开发者工具自动创建：home.js、home.json、home.wxss、home.wxml
　　微信开发者工具自动向app.json中添加：home页面索引

5、全局顶部设置，app.json中加入配置：
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e52027",
    "navigationBarTitleText": "购物商城",
    "navigationBarTextStyle": "white"
  }

app的json中，window 属性与 pages 同级。
页面顶部设置：页面的json中，去掉 window 层，直接将属性放入大括号内的首层（与默认的usingComponents 同级）。

二、创建底部导航

6、添加导航栏，app.json中加入配置：
  "tabBar":{
　　"selectedColor": "#e52027",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"首页",
        "iconPath":"assets/icon/tabbar/home.png",
        "selectedIconPath":"assets/icon/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/about/about",
        "text": "我的",
        "iconPath": "assets/icon/tabbar/profile.png",
        "selectedIconPath": "assets/icon/tabbar/profile_active.png"
      }
    ]
  }

按照图标路径自行添加导航图标；
tabBar 属性与 pages 同级。

三、创建一个组件

7、新建component

.wxml
<view class="title">{{title}}</view>
<view class="content">自定义组件内容</view>

.wxss
.title{
  font-weight: bold;
  font-size: 45rpx;
  color: red;
}
.class{
  font-size: 25rpx;
}

.json data中添加数据
  data: {
    title:"自定义组件标题"
  }

8、使用component

页面.json 注册组件
  "usingComponents": {
    "my-component": "/components/search/search"
  }

页面.wxml 引用组件
<my-component></my-component>