uniCloud开发插件实践

专注前端开发的蒲蒲同学
176 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

uni插件及社区

DCloud插件市场

DCloud插件市场 有丰富的插件、组件；支持开发者自己上传提交甚至收费。

插件库

常用插件库推荐

组件库选择原则：vue组件、小程序组件、跨端组件

  • uni-ui 官方组件库，支持跨端

uni-ui

color-ui

  • uviewui 功能丰富实用，尤其是内置样式和很多js，vuex，接口封装很完整

uviewui

uniCloud

类似云开发,需要付费，有免费额度。

uni开发环境准备

Hbuilder一键创建

启动

打开Hbuilder ==》 新建项目（有很多模版可以选择）

Hbuilder-start.jpeg

启动项目 ==》 如果启动失败检查下微信开发者设置和Hbuilder设置

Hbuilder-error.jpeg

开发更改是实时预览的～打包发布都可以点击生成

目录结构

┌─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此
├─uni_modules           存放uni_module规范的插件
├─wxcomponents          存放原生小程序组件的目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

uni_module uni-app的插件模块化规范，通常是对一组js sdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板，也可以开发自己的插件使用。 uni_module和node_module不太一样，支持云函数，有付费插件的版权保护。可在插件市场下载需要的插件，也可以自己开发通过Hbuilder发布到插件市场。

manifest.json 使用小程序插件：

"mp-weixin": {
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx",
      "export": "index.js"
    }
  }
}

vue-cli（个人喜好）

启动

# 全局安装vue-cli
npm install -g @vue/cli@4
# 创建uni-app(对应Hbuilder最新的正式版）
vue create -p dcloudio/uni-preset-vue my-project
# 使用vue3版本
npx degit dcloudio/uni-preset-vue#vite my-vue3-project
# 运行和发布
npm run dev:mp-weixin
npm run build:mp-weixin

目录结构

┌─src            
│  └─components           符合vue组件规范的uni-app组件目录
│  │  ├─comp-a.vue         可复用的a组件
│  └─pages           可复用的a组件
│  │  ├─index
│  │  │ └─index.vue       index页面
│  └─static                本地静态资源
│  └─uni_modules           uni插件。
│  └─wxcomponents          存放小程序组件的目录
│  └─main.js               Vue初始化入口文件
│  └─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
│  └─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
│  └─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见  
└─package.json

两种启动方式的差异

  1. Hbuilder启动编译器会随着Hbuilder升级升级
  2. 发布App还是需要Hbuilder操作，小程序等的发布均可
  3. HBuilder对vue和uni-app的支持更友好：条件编译、图形化操作等
avatar
文章
阅读
粉丝