uView

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

说明

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

特性

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

安装

``bash


npm方式安装，插件市场导入无需执行此命令


npm i uview-ui-international
`

快速上手

1. main.js引入uView库
`js
// main.js
import uView from 'uview-ui-international';
Vue.use(uView);
`

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

`

3. uni.scss引入全局scss变量文件
`css
/ uni.scss /
@import "uview-ui-international/theme.scss";
`

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

`js
// 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组件，直接引用即可。

`html

``

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

捐赠镜像研发