1.全局安装vue-cli
npm install -g @vue/cli
2.创建uni-app
vue create -p dcloudio/uni-preset-vue my-project
通过键盘箭头上下键选择模板,建议选择默认模板
项目结构如图所示
3.封装项目请求
import base from './base'
//发送数据
const sendRequest = (url,options)=>{
return new Promise((resolve,reject) =>{
uni.request({
url:base.baseUrl + url,
method: options.method,
data:options.method === 'GET' ? options.data : JSON.stringify(options.data),
header: {
'content-type':'application/json;charset=UTF-8',
"Authorization": uni.getStorageSync('userId') ? uni.getStorageSync('userId') : "",
},
success: (res) => {
if (res.statusCode === 200) {
if(res.data.returnCode === "0000000" || res.data.returnCode === "9990000" || res.data.returnCode === "0038802"|| res.data.returnCode === "0038803"){
resolve( res.data)
}else if(res.data.returnCode === "0030000"){
// token失效
// uni.showToast({
// title:"登录过期,请重新登录",
// icon:'none',
// duration:1500
// })
uni.showModal({
title: '提示',
content: '登录过期,请重新登录',
success: function (res) {
if (res.confirm) {
uni.redirectTo({url: "/pages/login/index"});
} else if (res.cancel) {
uni.switchTab({url: "/pages/work/index"});
}
}
});
resolve(res.data);
}else{
uni.showToast({
title:res.data.returnMessage,
icon:'none',
duration:1500
})
reject(res.data)
}
}
},
fail: () => {
console.log("请求失败,请稍候重试")
uni.hideLoading();
uni.showToast({
title: 'net error!',
icon: 'none',
duration: 1500
});
}
});
})
}
const get = (url, options = {}) => {
return sendRequest(url, { method: 'GET', data: options })
}
const post = (url, options) => {
return sendRequest(url, { method: 'POST', data: options })
}
const del = (url, options) => {
return sendRequest(url, { method: 'DELETE', data: options })
}
const put = (url, options) => {
return sendRequest(url, { method: 'PUT', data: options })
}
module.exports = {
get,
post,
del,
put
}
4.引用UI框架——uView
如果使用HBuilder X编辑器,请在HBuilder X菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可。因为项目采用vue-cli创建的,所以须通过以下命令安装对sass(scss)的支持。
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
安装uview
//安装方式:npm安装
npm install uview-ui
配置uview:
1、入口文件main.js中,引入并使用uView的JS库
import uView from "uview-ui";
Vue.use(uView);
2、 引入uView的全局SCSS主题文件,在根目录uni.scss文件中引入
/* uni.scss */
@import 'uview-ui/theme.scss';
3、引入uView基础样式,在App.vue首行引入
<style lang="scss">
/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
</style>
4、在pages.json中 配置easycom组件模式
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
可用于微信小程序、安卓app等应用开发。