在uniapp中使用amis

yuanchaobo

已于 2024-10-22 16:31:37 修改

阅读量472

点赞数 3

文章标签： javascript vue uniapp

于 2024-10-22 15:14:26 首次发布

本文链接：https://blog.youkuaiyun.com/yuanchaobo/article/details/143156455

版权

amis在uniapp的使用

我司在实际项目开发中使用的是uniapp的cli脚手架搭建的项目，自己手写的动态表单，在开发完第一版之后，发现自己维护这个动态表单比较费劲，于是引入了amis。

文章目录

amis在uniapp的使用
前言
一、amis介绍？
二、在uni中安装引入
- 1.安装
- - - input输入框样式不生效

前言

本文章主要记录在项目中引入amis,以及使用中遇到的一些问题，以及如何解决的。当然其中也有一些没有填上的坑，这个等后续有了解决方案在更新，或者大家有好的方案可以留言，一起进步。

一、amis介绍？

本文中当然不会花费经理去介绍amis了，详细的介绍请移至amis官网。

关于在vue项目中如何使用amis,参考官网给出的示例https://github.com/aisuda/vue2-amis-demo。

废话不多说，直接上手。

二、在uni中安装引入

1.安装

安装依赖项

// 必须的， 这个包是必须要安装的
yarn add amis
//or
npm install amis

yarn add qs
// or 
npm install qs

安装完成之后，在项目中引入amis

import "amis/sdk/sdk.js"; // 核心包 必须引入
import "amis/sdk/rest.js"; // 城市下拉组件用到的数据，可根据情况引入
import "amis/sdk/cropperjs.js"; // 图片裁切需要用到的，可根据情况引入
import "amis/sdk/json-view.js"; // 开启debug用到的，可根据情况引入
import "amis/sdk/sdk.css"; // 默认的css主题，可根据实际情况引入不同主题
import "amis/sdk/iconfont.css";

input输入框样式不生效

等你引入完上面的依赖之后，就会发现，input框的样式不生效。排查一圈之后，发现是上面引入的css文件中，所有的input关键字在编译后变成了uni-input。显然，这是uni干的。
如何解决呢?
我修改了babel的配置文件，发现不生效。别的方案呢，没有找到，于是，在项目的publish/index.html的文件中，再次引入一遍skd.css。当然这个css文件再node_modules中，index文件肯定是获取不到的。于是我在 node_nodules下找到amis/sdk/sdk.css。复制粘贴到src/static目录下。

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"/>
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <title><%= htmlWebpackPlugin.options.title %></title>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />

		// 这段代码最重要 这里引入能保证input关键字不被转换
        <link rel="stylesheet" href="<%= BASE_URL %>static/sdk.css" />
    </head>

    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>