UI — UniApp

UniApp UI

• HBuilder X

• 新建项目 – 默认模板

• pages.json同级

  • components
  • utils
  • views

• components/sl-button/sl-button.vue

template>
	view>
		测试123
	/view>
/template>

script>
	export default {
		name:"sl-button",
		data() {
			return {
				
			};
		}
	}
/script>

style lang="scss">

/style>

• views/button/index.vue

template>
	div>
		sl-button>/sl-button>
	/div>
/template>

script>
/script>

style>
/style>

• utils/function/toast.js

export const toast = (title, duration = 1500) => {
  uni.showToast({
    title,
    icon: 'none',
    duration
  })
}

• utils/index.js

import {toast} from "./functions/toast.js"

const fun = {
  toast
}


export default fun

• main.js

import App from './App'
import sl from './utils/index.js'
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.prototype.$sl = sl
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

• pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"subPackages":[
		{
			"root":"views",
			"pages":[   // 页面配置
				{
				  "path": "button/index",
				  "style": {
				    "navigationBarTitleText": "按钮",
				    "h5": {
				      "titleNView": false
				    }
				  }
				}
			]
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app服务器托管网",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"easycom": {    // 组件引入
	 "autoscan": true,
	 "custom": {
	    "^sl-(.*)": "components/sl-$1/sl-$1.vue"
	 }
	},
	"uniIdRouter": {}
}

• pages/index/index.vue

	
		
			{{ item.title }}
			
				
					{{ item1.label }}
					{{ item1.title }}
				
			
		
	



	export default {
		data() {
			return {
				list: [{
					title: '基础组件',
					item: [{
						label: 'Button',
						title: '按钮',
						url: '/views/button/服务器托管网index'
					}]
				}]
			}
		},
		onLoad() { 
			console.log(this.$sl.toast)
			this.$sl.toast("测试方法1111")
		},
		methods: {
			clickItem(item) {
				uni.navigateTo({
					url: item.url
				})
			}
		}
	}



@function topx($value) {
  @return $value * 2 + 'rpx'
}
	.demo {
		background: #f7f8fa;
		padding: #{topx(30)} #{topx(25)};

		&-title {
			font-size: 14px;
			color: #909ca4;
			margin-bottom: #{topx(20)};
		}

		&-content {
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 #{topx(40)};
			background: #fff;
			height: #{topx(45)};
			background: #fff;
			border-radius: #{topx(22)};
			margin-bottom: #{topx(13)};

			&-left {
				display: flex;
				align-items: center;
				font-weight: 700;
				color: #333;

				&-title {
					margin-left: #{topx(10)};
				}
			}

			&-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: #{topx(30)};
			}
		}
	}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: SAE自动驾驶分级介绍

SAE International 国际自动机工程师学会（原译：美国汽车工程师学会）英文全程为：Society of Automotive Engineers International，是一个全球性的非常活跃且专业的标准研究组织。对于各类工程领域均有涉及，且…