uniCloud开发插件实践

·  阅读 31

携手创作,共同成长!这是我参与「掘金日新计划 · 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的支持更友好:条件编译、图形化操作等
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改