uniapp怎么启用不同的module

1. 什么是uniapp

uniapp是一款前端跨平台开发框架，开发者可以通过uniapp一套代码开发多个平台的应用，包括但不限于微信小程序、H5、App等。因为uniapp是基于Vue.js框架的扩展开发，所以Vue.js的开发经验可以很好地应用到uniapp的开发中。并且uniapp的开发模式类似于Vue.js的开发模式，但在开发小程序时可以避免小程序开发过程中的繁琐操作，提高开发效率。

2. uniapp的module

在uniapp中，module是指某个功能模块，这些模块都是可以在uniapp项目中自由使用的，可以方便快捷地完成特定的功能。

2.1. uniapp内置模块

uniapp内置了一些常用的模块，这些模块在安装uni-app插件时自带，无需额外安装，开发者可以直接使用。

uniapp内置模块

// 获取用户地理位置信息（需要用户授权）
uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    console.log('经度：' + res.longitude)
    console.log('纬度：' + res.latitude)
  }
})

2.2. uniapp扩展模块

uniapp还支持扩展模块，这些模块不是uniapp框架内置的，需要开发者自己安装与引用，可以自由地选择使用或不使用。

如何安装uniapp扩展模块

在使用uniapp扩展模块之前，需要先安装需要的扩展模块，可以通过npm、yarn或cnpm安装。

例如，安装了uni-ui插件之后，就可以在uniapp项目中使用uni-ui的组件了：

npm install uni-ui -S

使用安装后的uni-ui组件：

<template>
  <view>
    <uni-icons type="success"></uni-icons>
    <uni-list>
      <uni-list-item title="列表项"></uni-list-item>
    </uni-list>
  </view>
</template>
<script>
// 引入uni-ui组件
import uniIcons from '@/components/uni-icons/uni-icons.vue'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
export default {
  components: {
    uniIcons,
    uniList,
    uniListItem
  }
}
</script>

2.3. 如何启用uniapp扩展模块

uniapp扩展模块安装好之后，还需要在项目中启用才能使用。以uni-ui为例，需要在uniapp项目中的pages.json中添加uni-ui的路径：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "easycom": {
    "autoscan": true,
    "custom": {
      // 引入uni-ui组件
      "^uni-(.*)": "@/uni-ui/components/$1/$1.vue"
    }
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uniapp",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

需要注意的是，如果启用的是第三方扩展模块，还需要在项目中的App.vue中引入扩展模块。以将弹框模块easycom为例：

// 引入easycom的组件
import '@/common/vxeasycom/easycom'
export default {
  onLaunch: function () {
    // ...
  }
}

2.4. uniapp优秀扩展模块推荐

uniapp的扩展模块有很多，其中一些在实际开发过程中特别重要。下面是一些uniapp扩展模块的推荐：

uView

uView是一款uniapp的UI库，提供了许多UI组件以及丰富的功能和特性。使用uView，可以帮助开发者快速搭建无缝UI体验的uniapp应用。

easycom

easycom是一个uniapp扩展模块，专注于组件化的开发。使用它，开发者可以在uniapp中更加简单的使用组件化的开发模式。

colorUi

colorUi是一款uniapp的UI库，提供了各种风格的UI组件以及配色方案。使用colorUi，可以快速美化uniapp应用的UI风格。

3. 总结

在uniapp中，module是相对独立的功能模块，uniapp内置了一些常用的模块，也支持使用扩展模块。

使用扩展模块需要先安装，然后在项目配置文件中启用，启用后才能在项目中使用。一些优秀的uniapp扩展模块，如uView、easycom、colorUi等，可以方便快捷地完成特定的功能，提高开发效率。