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=2392.导入项目：
将zip包下载以后解压后，将文件夹colorui复制到newapp目录下，然后在App.vue中的样式中导入：
/*每个页面公共css */
@import "colorui/icon.css";
@import "colorui/main.css";
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-06-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读