uin框架搭建

app.vue中创建

    .main_content {
		position: absolute;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;
		display: flex;flex-direction: column;align-items: center;
		navbar {position: relative;width: 100%;flex-grow: 0;flex-shrink: 0;}
		container {position: relative;width: 100%;flex-grow:1;display: flex;}
		.card {
			margin-top: 25rpx;background-color: #fff;border-radius: 10rpx;
			&:first-child {margin-top: 0;}
			>.title {
				display: flex;padding: 24rpx 24rpx 0;height: 65rpx;line-height: 45rpx;
				justify-content: space-between;
				text {font-size: 32rpx;font-weight: bold;color: #333333;}
				navigator {color: #999999;font-size: 24rpx;}
			}
		}
		
		.tab_box {
			width: 100%;
			&.fixed {
				position: fixed;top: 402rpx;z-index: 999;box-shadow: 0 0 3rpx rgba(0, 0, 0, .16);
				+.content_box {
					margin-top: 120rpx;
				}
			}
		}

		.tabs {
			position: relative;width: 100%;margin-top: 16rpx;padding-bottom: 20rpx;height: 120rpx;
			line-height: 120rpx;background-color: #fff;justify-content: flex-start;white-space: nowrap;
			.tab {
				display: inline-block;padding: 0 30rpx;color: #999999;font-size: 32rpx;
				&.active {
					color: #333333;
				}
			}

			.hr {
				position: absolute;bottom: 0;height: 8rpx;transition: all .5s;
				&:after {
					content: "";position: absolute;left: 50%;width: 64rpx;
					height: 8rpx;background-color: #3FACFF;border-radius: 4rpx;
					transform: translateX(-50%);
				}
			}
		}
	}
	
	/* 搜索 */
	.search-box{
		padding: 30rpx 0 30rpx 30rpx;width: 720rpx;position: relative;z-index: 1;
		.box{
			padding: 0 0rpx 0 30rpx;display: flex;align-items: center;
			height: 68rpx;background: #ffffff;border: 2rpx solid #ec8d77;border-radius: 36rpx;
			.input{flex: 1;font-size: 26rpx;color: #333333;padding-right: 30rpx;}
			.search-btn{
				width: 80rpx;height: 100%;display: flex;align-items: center;justify-content: center;
			}
		}
	}

	/* 底部 */
	.footer {
		display: flex;justify-content: space-between;align-content: center;
		width: 100%;height: 118rpx;background: #FFFFFF;
		border-top: 1px solid #EEEEEE;align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS < 11.2 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 兼容 iOS >= 11.2 */
		.btns {
			flex-grow: 1;display: flex;padding: 0 20rpx;
			.btn {
				flex-grow: 1;margin: 0 20rpx;height: 68rpx;
				background: linear-gradient(270deg, #70E6EB 0%, #54CDD2 100%);
				border-radius: 34rpx;font-size: 32rpx;color: #FFFFFF;line-height: 68rpx;
				&:after {display: none;}
				&~.btn {
					border: 1rpx solid #54CDD2;color: #54CDD2;line-height: 64rpx;background: #ffffff;
				}
			}
		}
	}
	.uni-popup__wrapper-box {padding-bottom: 0 !important;}
	@keyframes rightin {
		0% {transform: translateX(100%)}
		100% {transform: translateX(0)}
	}
	@keyframes rightout {
		0% {transform: translateX(0)}
		100% {transform: translateX(100%)}
	}

uni.getSystemInfo({
    success: function(res) {
       console.log('mobile:' + res.model)
	    that.globalData.statusBarHeight = res.statusBarHeight
	    that.globalData.screenWidth = res.screenWidth
	}
})
that.globalData.buttonInfo = {bottom: 80,height: 32,left: 281,right: 368,top: 10,width: 87}
//#ifdef MP-WEIXIN
    that.globalData.buttonInfo = wx.getMenuButtonBoundingClientRect();
//#endif

main.js创建

import Vue from 'vue'
import App from './App'
import http from './common/axios.js' //请求封装
import api from './common/api.js'  //接口处理
import json from './common/json.js'  //测试数据
import util from './common/util.js'  //常用工具
import {config} from './common/config.js'  //常用工具
import jweixin from 'jweixin-module' //微信SDK

Vue.config.productionTip = false

App.mpType = 'app'
const msg = (title, duration=1500, mask=false, icon='none')=>{
	//统一提示方便全局修改
	if(Boolean(title) === false){ return; }
	uni.showToast({title,duration,	mask, 	icon});
}
const app = new Vue({
  ...App
})
app.$mount()
Vue.prototype.$msg = msg;  //提交框
Vue.prototype.$json = json;  //测试josn格式
Vue.prototype.$api = api;  //api管理
Vue.prototype.$util = util;  //工具类
Vue.prototype.$config= config;  //配置文件
Vue.prototype.$wx= jweixin;  //配置文件
Vue.prototype.goview = (path)=>{  //跳转页面
	let urls = ['/pages/index/index','/pages/index/artificer','/pages/index/order','/pages/index/user',];
	if(urls.includes(path)){
		uni.switchTab({url:path})
	}else{
		uni.navigateTo({url:path})
	}
}
Vue.prototype.gobanner = (item)=>{  //跳转页面
	if(item.jump_url){
		uni.navigateTo({url:item.jump_url})
	}
}

Vue.prototype.islogin = (path)=>{  //跳转页面
	if(uni.getStorageSync('token')){
		util.zdyopt.islogin().then((res)=>{
			uni.navigateTo({url:path})
		}).catch(()=>{
			uni.navigateTo({url:'/pages/login/login'})
		})
	}else{
		uni.navigateTo({url:'/pages/login/login'})
	}
}

Vue.prototype.print = (obj,type) => {  //提示文字
 type = type || 'log';
 const log = JSON.parse(JSON.stringify(obj));
 console[type](log)
}