恭喜HBuilderX用户

2022-04-15 本文已影响0人开源指北

哈喽，大家好，我是指北君。

WeUI是微信官方设计团队为微信 Web 开发量身打造的一个UI框架。能够和微信很好的融合在一起，简直是小程序开发新手的良师。只需要你有一个微信开发者工具就足够了。其使用方式官方文档都有详细的说明。冲就完事了！

??? 难道今天指北君就是带你来领略WeUI的“美丽”吗？

啊这不太好吧......

当然不是咯！你还记得指北君说的是HBuilder X用户吧？

那对HBuilder X用户而言又有什么好消息呢？

肯定是因为uni-app啦。因为uni-app在HBuilder X上比在其他编译器上兼容更强、更高效的有利条件，对小程序开发人员而言，绝对是个爆赞的好消息。

目前市面上有不少的UI框架，但uni-app生态专用的uView UI框架相对更全面更成熟。

想必你也猜到了，指北君此次介绍的是基于uni-app的uView UI框架。

开发小程序，需要用uView UI的组件代码下进行项目的整合使用，或者利用HBuilder X工具，直接下载使用uView UI插件模块。

uView UI提供了各种界面上用到的组件，几乎封装了我们常见到的各种界面元素，极大的方便了我们小程序界面的开发工作，如果有些特殊的功能界面，也可以从UniApp官网的插件列表中寻找进行整合。

虽然其他编辑器也可以使用nni-app+uView UI框架，但HBuilder X和uni-app，同属DCloud公司，因而HBuilder X团队为uni-app做了大量的优化和定制。也即相较其他编辑器，技术上uni-app与HBuilder X的匹配度最高，容错率更强。

uView：

uView2.02.0已全面兼容nvue。uView是uni-app生态专用的UI框架，uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台,这也是它主要特点。

并且需要开发者具备基本的vue和小程序的知识，使用起来才能得心应手哦。

安装：

安装方式有两种：

1.Hbuilder X方式

在官网下载HBuilder X，如下操作：

2.npm方式

在项目根目录执行如下命令：

npm install uview-ui

修改uView内置配置方案:

uView版本为2.0.25以上的，可以通过setCofig方法配置uView内部的各项内置配置，目前可配置的有config、props、zIndex、color属性，目前只建议修改config、props属性，除非你清楚知道自己的修改所带来的影响。

// main.jsimport uView from 'uview-ui'
Vue.use(uView)
// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({
    // 修改$u.config对象的属性
    config: {
        // 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
        unit: 'rpx'
    },
    // 修改$u.props对象的属性
    props: {
        // 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
        radio: {
            size: 15
        }
        // 其他组件属性配置
        // ......
    }})

使用

通过npm或下载方式的配置之后，在某个页面可以直接使用组件，无需通过import引入组件。

<template>
    <u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
    export default {
        data() {
            return {
                list: [{
                    text: '点赞',
                    color: 'blue',
                    fontSize: 28
                }, {
                    text: '分享'
                }, {
                    text: '评论'
                }],
                show: true
            }
        }
    }
</script>

注意事项：

由于微信小程序预览和发布的主包大小都不能超过2M，否则无法真机预览和上传发布，故uView是按需引入的，在发行时，HX会自动剔除您没有使用组件，即使您使用了uViwe的全部组件，整个uView的大小也只有500K左右，但是有如下两点前提：
1. 调试
在调试阶段，HX默认是没有对JS进行压缩和去除注释，也没有进行组件按需引入的，因此会导致JS文件都很大，需要在 HBuilder X进行如下操作，再重新编译即可：

HBuilder X   运行->运行到小程序模拟器->勾选 运行时是否压缩代码

2. 发布

在HX中进行发布时，uView的组件会按需引入(使用uView所有组件的情况下，占用空间500k左右)，如果主包依然超出2M，需要从多个方面着手：

1.小程序分包

2.将静态资源放到服务器进行引用

3.取消"ES6转ES5"设置

组件样式

uView有着丰富的组件和样式，这里指北君只展示如下的Keyboard键盘组件代码及其效果图，其他的就等着大家去探索~~~

<template>
    <view>
        <u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard>
        <u-button @click="show = true">打开</u-button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                show: false
            }
        }
    }
</script>

指北君有话说

利用uView UI+uni-app开发微信小程序，实际本身还是对官方小程序接口的封装处理，需要我们对其中相关的生命周期、底层函数等有一定的了解，才能更好的理解微信小程序的各种机制和处理方式。uView是uni-app生态最优秀的UI框架，全面的组件和便捷的工具会让你信手拈来，得心应手。故这里指北君还是推荐使用HBuilderX来开发小程序，相对通用的VS Code来说，它的处理更特性化，使用更流畅。已有不少小程序开发者也在使用这套框架。
所以，你也赶紧来玩玩看吧~~~

开源指北，立志做最好的开源分享平台，分享有趣实用的开源项目。
欢迎加入交流群，你可以摸鱼、划水、吐槽、咨询。
还有简历模板、各种技术面试资料等100G的资源等着你领取哦。
公众号回复888马上加入，快来一起来聊一聊吧！

开源指北公众号回复UI框架获取资源。

以上就是本次推荐的全部内容，我是指北君，感谢各位的观看。