8.新建uni-app项目newapp

1.打开Hbuilder-x，【文件】→【新建】→【项目】

 2.创建项目newapp

 3.【工具】→【设置】→【运行配置】，在将微信开发者工具的安装目录填入

 4. 在项目newapp下的manifest.json下的【基础配置】中：

获取AppID

 5.点击运行，在微信开发者工具中运行：

 6.在微信公众平台，用一个邮箱注册小程序账号。

用邮箱登录微信公众平台，进入【设置】→【账号信息】可以看到AppID

然后将小程序的AppID输入到项目的配置中

 7.在pages目录下新建两个页面login和center、me

 8.在static目录下填入导航图标，然后配置pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {}
        }
        ,{
            "path" : "pages/login/login",
            "style" : {}
        }
        ,{
            "path" : "pages/center/center",
            "style" : {}
        }
        ,{
            "path" : "pages/me/me",
            "style" : {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "新中街网格化数据助手",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar" : {
        "color" : "black",
        "selectedColor" : "#1296db",
        "borderStyle" : "black",
        "backgroundColor" : "white",
        "list" : [
            {
                "pagePath" : "pages/index/index",
                "iconPath" : "static/home.png",
                "selectedIconPath" : "static/home.png",
                "text" : "首页"
            },
             {
                "pagePath" : "pages/center/center",
                "iconPath" : "static/type.png",
                "selectedIconPath" : "static/type.png",
                "text" : "操作"
            },
             {
                "pagePath" : "pages/me/me",
                "iconPath" : "static/me.png",
                "selectedIconPath" : "static/me.png",
                "text" : "个人中心"
            }
        ]
    }
}

 9.在newapp目录下新建目录commons，在commons目录下新建post_and_get.js

const host = 'http://127.0.0.1:8000';
export {
  host
}

function request(url, method, data, header = {}) {
  wx.showLoading({
    title: '加载中' //数据请求前loading
  })
  return new Promise((resolve, reject) => {
    wx.request({
      url: host + url, //仅为示例，并非真实的接口地址
      method: method,
      data: data,
      header: {
        // 'content-type': 'application/json' ,// 默认值
                'content-type' : "application/x-www-form-urlencoded"
      },
      success: function (res) {
        
        resolve(res.data)
      },
      fail: function (error) {
        
        reject(error)
      },
      complete: function () {
        wx.hideLoading();
      }
    })
  })
}

export function get(url, data) {
  return request(url, 'GET', data)
}
export function post(url, data) {
  return request(url, 'POST', data)
}

 10.选用ColorUI组件库

1.colorUI在uni-app插件市场地址：

https://ext.dcloud.net.cn/plugin?id=239

2.导入项目：

将zip包下载以后解压后，将文件夹colorui复制到newapp目录下，然后在App.vue中的样式中导入：

    /*每个页面公共css */
    @import "colorui/icon.css";
    @import "colorui/main.css";