uniappuview2使⽤笔记
1、创建项⽬安装组件
npm install uview-ui
2、配置
1. 引⼊uView主JS库
在项⽬src⽬录中的main.js中，引⼊并使⽤uView的JS库，注意这两⾏要放在import Vue之后。
// main.js
import uView from"uview-ui";
Vue.use(uView);
2. 在引⼊uView的全局SCSS主题⽂件
在项⽬src⽬录的uni.scss中引⼊此⽂件。
/
* uni.scss */
@import'uview-ui/theme.scss';
3. 引⼊uView基础样式
<style lang="scss">
/*每个页⾯公共css */
/* 注意要写在第⼀⾏，同时给style标签加⼊lang="scss"属性 */ @import "uview-ui/index.scss";
@import './static/css/iconfont.css';
page{
width: 100vw;
box sizing// height:calc(100% - var(--status-bar-height));
height: 100vh;
display: flex;
flex-direction: column;
box-sizing: border-box;
color: #333333;
font-size: 28rpx;
line-height: 40rpx;
image{
display: block;
}
}
::v-deep .uni-toast .uni-toast__content{
text-align: center!important;
}
view{
box-sizing: border-box;
}
uni-page-body{
width: 100vw;
height: 100vh;
}
a{
box-sizing: border-box;
}
image{
display: block;
}
img{
display: block;
}
p{
font-size: 13px;
line-height: 50rpx;
text-align: justify;
}
}
4. 配置easycom组件模式
此配置需要在项⽬src⽬录的pages.json中进⾏。
// pages.json
{
"easycom":{
"^u-(.*)":"uview-ui/components/u-$1/u-$1.vue"
},
// 此为本⾝已有的内容
"pages":[
/
/ ......
]
}
5. Cli模式额外配置
如果您是vue-cli模式的项⽬，还需要在项⽬根⽬录的fig.js⽂件中进⾏如下配置// fig.js，如没有此⽂件则⼿动创建
transpileDependencies:['uview-ui']
}
3、项⽬⽬录配置
1、api⽬录（请求接⼝⽅法）例business.js
const http = uni.$u.http
//⾸页列表
export function getBygList(data ={}){
return http.post('/app/byg_service_config/app_byg_list',data)
}
2、config⽬录（公共配置⽬录）
baseUrl.js
export const baseUrl='*/fmis-api';
request.js
let num=0;
import{baseUrl}from'@/config/baseUrl.js'
// 此vm参数为页⾯的实例，可以通过它引⽤vuex中的变量
// 初始化请求配置
uni.$u.http.setConfig((config)=>{
/* config 为默认全局配置*/
config.baseURL = baseUrl;/* 根域名 */
// 配置请求头信息
config.header={
'content-type':'application/json;charset=UTF-8'
};
return config
})
// 请求拦截
uni.$u.quest.use((config)=>{// 可使⽤async await 做异步操作
uni.showLoading({
title:'加载中'
})
num++
// 初始化请求时，会执⾏此⽅法，此时data为undefined，赋予默认{}
config.data = config.data ||{}
// 根据custom参数中配置的是否需要token，添加对应的请求头
// if(config?.custom?.auth) {
/
/  // 可以在此通过vm引⽤vuex中的变量，具体值在vm.$store.state中
//  ken = vm.$store.ken
// }
const token = StorageSync('token');
ken = token?token:'';
return config
}, config =>{// 可使⽤async await 做异步操作
ject(config)
})
// 响应拦截
uni.$u.sponse.use((response)=>{/* 对响应成功做点什么可使⽤async await 做异步操作*/  num--;
if(num <=0){
uni.hideLoading()
}else{
uni.showLoading({
title:'加载中'
})
}
const data = response.data
// ⾃定义参数
//const custom = fig?.custom
de !==1){
return uni.$u.ssage);
uni.hideLoading()
// 如果没有显式定义custom的toast参数为false的话，默认对报错进⾏toast弹出提⽰
// if (ast !== false) {
//  uni.$u.ssage)
// }
// // 如果需要catch返回，则进⾏reject
// if (custom?.catch) {
//  ject(data)
// } else {
//  // 否则返回⼀个pending中的promise，请求不会进⼊catch中
/
/  return new Promise(() => { })
// }
}
return data.data ===null? data : data.data
},(response)=>{
// 对响应错误做点什么（statusCode !== 200）
uni.hideLoading()
uni.hideLoading()
//ject(response)
return uni.$u.toast(response);
})
}
3、main.js
import App from'./App'
// #ifndef VUE3
import Vue from'vue'
// main.js
import uView from"uview-ui";
Vue.use(uView);
App.mpType ='app'
const app =new Vue({
.
..App
})
// 引⼊请求封装，将app参数传递到配置中
require('./config/request.js')(app)
app.$mount()
// #endif
// #ifdef VUE3
import{ createSSRApp }from'vue'
export function createApp(){
const app =createSSRApp(App)
return{
app
}
}
// #endif
4、接⼝⽅法调⽤
import{ getBygList }from'@/api/business.js'
export default{
data(){
return{
funeralHomeList:[]
}
},
onLoad(){
},
methods:{
async getBygList(){
let res=await getBygList({});
this.funeralHomeList=res
},
}
}
4、组件使⽤遇到的问题
1、时间选择器 u-datetime-picker,⾃⾏处理确认操作，回显数据转换

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。