uview-ui-international

uView

多平台快速开发的阿语镜像UI框架

说明

uView UI，是uni-app生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水

特性

• 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
• 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
• 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
• 众多的常用页面和布局，让您专注逻辑，事半功倍
• 详尽的文档支持，现代化的演示效果
• 按需引入，精简打包体积

安装

# npm方式安装，插件市场导入无需执行此命令
npm i uview-ui-international

快速上手

1. main.js引入uView库

// main.js
import uView from 'uview-ui-international';
Vue.use(uView);

2. App.vue引入基础样式(注意style标签需声明scss属性支持)

/* App.vue */
<style lang="scss">
@import "uview-ui-international/index.scss";
</style>

3. uni.scss引入全局scss变量文件

/* uni.scss */
@import "uview-ui-international/theme.scss";

4. pages.json配置easycom规则(按需引入)

// pages.json
{
	"easycom": {
		// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
		// npm安装方式
		"^u-(.*)": "uview-ui-international/components/u-$1/u-$1.vue"
		// 下载安装方式
		// "^u-(.*)": "@/uview-ui-international/components/u-$1/u-$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

5.安装vue-i18n 您需要通过npm安装此插件：

	// 如果您的项目由HX创建，根目录没有package.json的话，先通过如下命令创建package.json
	// npm init -y

	// 安装vue-i18n
	npm install vue-i18n

在main.js中引用vue-i18n

	// 原有内容
	import Vue from 'vue'
	import App from './App'


	// 以下为添加的内容

	// 引入语言包，注意路径
	import zh from '@/common/locales/zh.js';
	import en from '@/common/locales/en.js';

	// 引入并使用vue-i18n
	import VueI18n from 'vue-i18n'
	Vue.use(VueI18n)

	// 构造i18n对象
	const i18n = new VueI18n({
		// 默认语言，这里的local属性，对应message中的zh、en属性
		locale: 'zh',
		// 引入语言文件
		messages: {
			// 这里的属性名是任意的，您也可以把zh设置为cn等，只是后续切换语言时
			// 要标识这里的语言属性，如：this.$i18n.locale = zh|en|zh|xxx
			'zh': zh, // 这里为上面通过import引入的语言包
			'en': en,
		}
	})

	// 由于微信小程序的运行机制问题，需声明如下一行，H5和APP非必填
	Vue.prototype._i18n = i18n


	// 原有内容，需在这添加i18n
	const app = new Vue({
		// 记得在这添加i18n
		i18n,
		store,
		...App
	})

6.app.vue 插件i18n配置

export default {
	globalData: {
		_i18n:{},
		$t: {}
	},
	onLaunch: function() {
		let context = this
		this.globalData._i18n = this.$i18n
		this.globalData.$t = str => {
			return context.$t(str)
		}
		uni.$u.setLang(this.$i18n.locale)
	}
}

6.引入vuex状态管理器

通过vuex改变插件的方向

npm install vuex --save

添加store.js

// 根目录的/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) 

// Vuex.Store 构造器选项
const store = new Vuex.Store({
    state: {
		lang: uni.getStorageSync('CURRENT_LANG')
    },
    mutations: {
        updateLang(state, val) {
			uni.setStorageSync('CURRENT_LANG', val)
			state.lang = val
		}
    }
})

export default store

main.js引入使用

全局镜像class

最外层添加class，镜像：'u-direction-rtl' ，正常： 'u-direction-ltr'

u-icon 添加mirror porps，是否对图标镜像，用于解决某些情况下不需要寻找替换图标，直接镜像使用 （默认 false ）

使用方法

配置easycom规则后，自动按需引入，无需import组件，直接引用即可。

<template>
	<u-button text="按钮"></u-button>
</template>

请通过快速上手了解更详细的内容

捐赠镜像研发