阶段一 前期准备

1.1、框架下载

进入工具使用测试账号下载小程序框架

1.2、准备UI组件

备注：热门UI简介： https://www.jianshu.com/p/fee85363776f

这里我选用的是

Vant Weapp

1.3、搞清项目基本文件结构

pages ：页面目录
  | index 首页
  | js 文件
  | json 配置文集
  | wxml 页面文件
  | wxss 页面样式文件
utils 方法库
app.js 全局js文件
app.json 全局配置文件
app.wxss 全局样式文件
project.config.json 项目配置文件
sitemap.json 配置小程序及其页面是否允许被微信索引

1.4、选用合适的开发工具

代码编辑使用：vscode + 补全工具 ext:wxml

1.5、安装UI组件

使用UI组件：vant-weapp
手册地址: https://github.com/youzan/vant-weapp

（1）初始化npm 添加文件“package.json”
（2）npm安装组件：npm i @vant/weapp -S --production
（3）app.json 中的 "style": "v2" 去除
（4）在 project.config.json 内添加配置：

{
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

（5）npm 构建
（6）引入组件，例如：

  "usingComponents": {
      "van-button": "@vant/weapp/button/index"
  },

  按钮

组件引入成功：

1.6、配置底部tab（配置好对应需求页面后）

"tabBar": {
    "color":"#606266",
    "selectedColor": "#F56C6C",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "public/icon/png/gupiao-hangqing 2.png",
        "selectedIconPath": "public/icon/png/gupiao-hangqing.png",
        "text": "行情"
      },
      {
        "pagePath": "pages/chatRoom/chatRoom",
        "iconPath": "public/icon/png/liaotian 2.png",
        "selectedIconPath": "public/icon/png/liaotian.png",
        "text": "聊天室"
      },
      {
        "pagePath": "pages/chatRoom/chatRoom",
        "iconPath": "public/icon/png/zixun 2.png",
        "selectedIconPath": "public/icon/png/zixun.png",
        "text": "资讯"
      }
    ]
  },

效果图：

到此基本第一阶段就结束了。

阶段二、实际开发

2.1 准备版本控制器

推荐国内使用gitee
进入gitee建立自己的项目参考（见视屏教程）
去掉不需要的插件集合，比如 node_modules等，一般只要保存项目主文件就好。

ok仓库建好，文件也上传了，现在可以愉快的开发了。

2.2