阶段一 前期准备

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

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。