标签：uniapp return config 笔记 js import uni data uview2

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;
			// 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模式的项目，还需要在项目根目录的vue.config.js文件中进行如下配置

// vue.config.js，如没有此文件则手动创建
module.exports = {
    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='http://*/fmis-api';

request.js

let num=0;
import {baseUrl} from '@/config/baseUrl.js'
// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
    // 初始化请求配置
    uni.$u.http.setConfig((config) => {
        /* config 为默认全局配置*/
        config.baseURL = baseUrl; /* 根域名 */
		// 配置请求头信息
		config.header= {
			'content-type': 'application/json;charset=UTF-8'
		};
        return config
    })
	
	// 请求拦截
	uni.$u.http.interceptors.request.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中
		// 	config.header.token = vm.$store.state.userInfo.token
		// }
		const token = uni.getStorageSync('token');
		config.header.token = token?token:'';
	    return config 
	}, config => { // 可使用async await 做异步操作
	    return Promise.reject(config)
	})
	
	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => { /* 对响应成功做点什么 可使用async await 做异步操作*/
		num--;
		if (num <= 0) {
		  uni.hideLoading()
		} else {
		 uni.showLoading({
			title:'加载中'
		 })  
		}
		const data = response.data

		// 自定义参数
		//const custom = response.config?.custom
		if (data.code !== 1) { 
			return uni.$u.toast(data.message);
			uni.hideLoading()
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			// if (custom.toast !== false) {
			// 	uni.$u.toast(data.message)
			// }

			// // 如果需要catch返回，则进行reject
			// if (custom?.catch) {
			// 	return Promise.reject(data)
			// } else {
			// 	// 否则返回一个pending中的promise，请求不会进入catch中
			// 	return new Promise(() => { })
			// }
		}
		return data.data === null ? data : data.data
	}, (response) => { 
		// 对响应错误做点什么 （statusCode !== 200）
		uni.hideLoading()
		//return Promise.reject(response)
		return uni.$u.toast(response);
	})
}

3、main.js

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
// 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() {
			this.getBygList();
		},
		methods: {
			async getBygList(){
				let res= await getBygList({});
				this.funeralHomeList=res
			},
	}
}

4、组件使用遇到的问题

标签：uniapp,return,config,笔记,js,import,uni,data,uview2
来源： https://blog.csdn.net/qq_38388578/article/details/121873084

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。