uniapp老项目整合DIY可视化框架

uniapp老项目整合DIY可视化框架，首先把DIY可视化源码先导出一份源码出来。

1. 拷贝依赖进项目

拷贝common、uni_modules两个目录下进你的项目里。

在main.js中全局注册uView、diygw相关JS依赖

2. 引入主JS库

在main.js中全局注册uView、diygw相关JS依赖。参照导出源码的main.js配置把里面的配置整合进你的项目里。里面有包括了vue2、vue3两种写法配置，建议使用vue3配置，因为官方扩展的uview专用组件库大部分只兼容了vue3.

// #ifdef VUE3
import App from './App'
import {
	setCurrentPage,
	Validate,
	setData,
	navigateTo,
	showModal,
	showToast,
	getPickerChildren,
	uploadImage,
	getOption
} from '@/common/Page.js'

import Tools from '@/common/Tools.js'
import HttpService from '@/common/HttpService.js'
import DiyService from '@/common/DiyService.js'
import Session from '@/common/Session.js'
import uView from './uni_modules/diy-uview-ui'
import Auth from './common/Auth'

import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)

	app.config.globalProperties.$tools = new Tools()
	app.config.globalProperties.$http = new HttpService()
	app.config.globalProperties.$diy = new DiyService()
	app.config.globalProperties.$session = Session
	app.config.globalProperties.$auth = Auth
	
	uni.getSystemInfo({
		success: function(e) {
			// #ifndef MP
			app.config.globalProperties.StatusBar = e.statusBarHeight;
			if (e.platform == 'android') {
				app.config.globalProperties.CustomBar = e.statusBarHeight + 50;
			} else {
				app.config.globalProperties.CustomBar = e.statusBarHeight + 45;
			};
			// #endif

			// #ifdef MP-WEIXIN
			app.config.globalProperties.StatusBar = e.statusBarHeight;
			let custom = wx.getMenuButtonBoundingClientRect();
			app.config.globalProperties.Custom = custom;
			app.config.globalProperties.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
			// #endif

			// #ifdef MP-ALIPAY
			app.config.globalProperties.StatusBar = e.statusBarHeight;
			app.config.globalProperties.CustomBar = e.statusBarHeight + e.titleBarHeight;
			// #endif
		}
	})

	app.mixin({
		methods: {
			setCurrentPage,
			Validate,
			setData,
			navigateTo,
			showModal,
			showToast,
			getPickerChildren,
			uploadImage,
			getOption
		}
	})
	app.use(uView)
	return {
		app
	}
}
// #endif

3. 引入全局样式

App.vue：引入基础样式（需SCSS支持）

引入相关的样式比如

@import 'common/diygw-ui/iconfont.scss';
	@import 'common/diygw-ui/animate.css';
	@import 'common/diygw-ui/index.scss';

	@import './uni_modules/diy-uview-ui/index.scss';
	@import 'common/diygw-ui/uview.scss';

4、修改uni.scss

uni.scss引入主题变量文件以自定义样式：

@import "@/uni_modules/diy-uview-ui/theme.scss";