uniapp引入uview

一、uniapp引入uview不显示

如果在使用uniapp引入uview时，发现页面没有显示出样式，多数情况是因为uview没有成功引入。需要检查以下几个方面：

1、在引入uview的组件中声明样式文件地址

<style lang="scss">
  @import "@/uni_modules/uview-ui/index.scss";
</style>

2、确保uniapp项目中已安装sass支持

npm install sass-loader node-sass --save-dev

3、确保在页面中正确引入uview的css文件

<link rel="stylesheet" type="text/css" href="/uni_modules/uview-ui/index.css">

二、uniapp引入uview 报错

在使用uniapp引入uview过程中，可能会发现引入时出现各种报错。常见的报错类型有：

1、样式报错

如果发现uview的样式报错，可能是因为项目中存在一些冲突问题。推荐在uview引入之前，对uni.css文件进行重命名，以免产生命名冲突。

/* 将uni.css改为my-uni.css */
<link rel="stylesheet" type="text/css" href="/static/css/my-uni.css">

2、js报错

如果发现uview的js文件报错，可以尝试使用babel-plugin-import插件对js进行转码，从而解决报错问题。

{
  "plugins": [
    ["import", {
      "libraryName": "uview-ui",
      "customName": (name) => {
        return "@/uni_modules/uview-ui/components/" + name;
      }
    }]
  ]
}

三、uniapp引入uview组件

引入uview的组件非常简单，只需要在页面中声明组件并且按照要求传递参数即可。

例如，在引入uview的list组件时，可以这样写：

<template>
  <view>
    <u-list>
        <u-list-item title="标题" extra="文字"></u-list-item>
    </u-list>
  </view>
</template>

四、uniapp引入vant组件

与引入uview组件类似，在uniapp中引入vant组件同样是声明组件并传递参数。不过需要注意的是，vant组件可以单独引入，不需要像uview那样引入整个库。

例如，在引入vant的button组件时，可以这样写：

<template>
  <view>
    <van-button type="primary">按钮</van-button>
  </view>
</template>

<script>
  import { Button } from 'vant';
  export default {
    components: { Button }
  }
</script>

五、uniapp引入iconfont

iconfont可以让开发者更加轻松地实现图标显示，而在uniapp中引入iconfont也非常简单。

例如，在引入iconfont数字图标时，可以这样写：

<style>
  /* 引入iconfont的css样式路径 */
  @import "../static/iconfont/iconfont.css";

  /* 设置iconfont的字体大小和颜色 */
  .iconfont {
    font-size: 32rpx;
    color: #666;
    text-align: center;
  }
</style>

<!-- 使用iconfont显示数字1 -->
<i class="iconfont icon-1"></i>

六、uniapp引入高德地图

在uniapp中引入高德地图可以使用官方提供的插件amap-wx，在项目中安装插件后在需要使用高德地图的页面中引入插件并按照要求调用相关API即可。

插件安装方法：

npm install amap-wx

在需要使用高德地图的页面中引入插件：

import amapFile from '@/plugins/amap-wx.js';

使用插件API：

// 获取地理位置信息
amapFile.getRegeo({
  success: function(data){
    console.log(data);
  },
  fail: function(info){
    console.log(info);
  }
})

七、uniapp引入插件

开发者可以根据项目需要在uniapp中引入各种插件，如webrtc、socket.io等。

例如，在引入webrtc插件时，可以这样写：

import Webrtc from 'webrtc-miniprogram-api';

// 初始化webrtc实例
const rtc = Webrtc();

// 获取用户授权
rtc.initAuth();

// 加入房间
rtc.joinRoom(roomId);

// 接收通话请求
rtc.onInvite((data) => {
  // 加入房间
  rtc.joinRoom(data.roomId);
})

八、uniapp引入js文件

除了插件，开发者也可以像普通的web应用一样在uniapp中引入js文件。需要注意的是，在引入js文件之前需要对文件进行转码处理，否则可能会出现各种报错。

例如，在引入由es6编写的js文件时，可以使用babel对文件进行转码。

import 'babel-polyfill';
import test from './test.js';
console.log(test);

九、uniapp引入组件不显示

如果在引入组件时发现组件没有显示出来，很可能是因为组件的路径问题。

例如，在引入page-header组件时，路径需要正确指定：

<template>
  <view>
    <page-header>这是一个页面头部，放置标题等信息</page-header>
  </view>
</template>

<script>
  import PageHeader from '@/components/page-header.vue';

  export default {
    components: { PageHeader }
  }
</script>

总结

本次介绍了uniapp引入uview的相关内容，从不显示到引入组件的使用都进行了详细的讲解。开发者可以根据自己的需求选择相应的引入方式进行开发，提高开发效率。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/227339.html