在 uniapp 中使用小程序ui组件库(mini-ali-ui-rpx)


uniapp 提供了很多开箱即用的特性,但是业务开发中,好像很少使用原生的小程序组件,这个特性是支持的。从 uniapp 开发者角度,支持原生小程序特性有利于开发者对现有的小程序做快速迁移,能够兼容社区绝大多数 ui 组件库。

引入小程序组件(以支付宝小程序为例)

  1. 在 src 目录中新建 wxcomponents/mycomponents 文件夹,用于存放小程序组件

  2. 使用:在 pages.json 的 globalStyle -> usingComponents 引入组件,注意这里必须是全局而不是页面级别。

  3. 在页面中使用

    <!-- 页面模板 (index.vue) -->
    <view>
        <!-- 在页面中对自定义组件进行引用 -->
        <custom name="uni-app"></custom>
    </view>

    引入 mini-ali-ui-rpx

    1. 通过 npm 下载 mini-ali-ui-rpx 文件

    2. 复制 mini-ali-ui-rpxmycomponents 文件夹下

    3. 在 pages.json 的 globalStyle -> usingComponents 引入组件,注意如果使用的组件依赖一些基础组件,如am-icon/am-button,这些组件必须也要被引入,否则找不到组件,报错。

      代码地址:Yaob1990/use-mini-ali-ui-rpx-in-uniapp: 在 uniapp 中使用 mini-ali-ui-rpx

      在线预览(加载较慢😭):http://42.192.184.113:40425/

参考:


 上一篇
git merge --squash git merge --squash
在开发过程中,git squash merge 是个比较低频使用的命令,这也是一个比较危险的命令(操作 git 记录),如果你不明白他的真实用途,建议不要使用。 场景如果你在gitlab合并分支提交的时候勾选了squash选项,那么你的多个
2021-07-07
下一篇 
深入理解 ts 中的 utility 类型 深入理解 ts 中的 utility 类型
平时开发中,有些场景总有种蹩手蹩脚的感觉,看到 Utility Types 才知道自己 native 了,很多场景 ts 都帮我们想好了。 Partial设置 Type 某个类型为可选,并返回部分 Type 类型。 源码:type Part
2021-05-25
  目录