方框架(整合uni-app搭建移动端快速开发框架-使用第三方UI框架)

Posted

篇首语:将相本无种,男儿当自强。本文由小常识网(cha138.com)小编为大家整理,主要介绍了方框架(整合uni-app搭建移动端快速开发框架-使用第三方UI框架)相关的知识,希望对你有一定的参考价值。

方框架(整合uni-app搭建移动端快速开发框架-使用第三方UI框架)

 uni-app默认使用uni-ui全端兼容的、高性能UI框架,在我们开发过程中可以满足大部分的需求了,并且如果是为了兼容性,还是强烈建议使用uni-ui作为UI框架使用。
  如果作为初创公司,自身又不想费太多精力去自己设计一套UI框架,那么DCloud插件市场提供了很多优秀的UI框架,最重要的是有些UI框架能够提供一整套行业的页面模板,比如,前几年电商项目比较火,Vant、ColorUI等提供了一整套电商模板方案,界面设计非常精美。
  项目之前使用过ColorUI,可惜的是ColorUI已经好久没更新了,后续是否能够继续更新还是个未知数,最近刚好要做一个类似于论坛圈子的移动应用,在DCloud插件市场找到了界面设计美观、基础组件丰富的图鸟UI和图鸟模板-圈子,接下来以图鸟UI为例介绍如何在uni-app项目中集成第三方UI并实现登录注册功能。

一、导入图鸟UI库并配置生效

以下部分内容参考图鸟UI官方部署文档

1、首先从DCloud插件市场下载ZIP包或者直接使用HBuilderX导入插件

  官方插件搜索下载,我这里是直接使用HBuilderX导入插件,可以方便预览插件,复制文件操作也可以在HBuilderX中进行,相比较下载ZIP会方便一点。

2、整合图鸟UI的store文件

  • 在gitegg-uni-app-v2的/store/modules文件夹下新建tuniao.js ,复制图鸟UI项目下 /store/index.js内容到tuniao.js中,将const store = new Vuex.Store修改为const tuniao = new Vuex.Store ,将export default store修改为export default tuniao
  • 修改gitegg-uni-app-v2的/store/index.js,引入tuniao.js
    tuniao.js
......const store = new Vuex.Store(......)......export default store

index.js

......import tuniao from './modules/tuniao'......    modules:         user,		tuniao    ,......

3、将图鸟UI复制必须的库文件到我们新建的uni-app项目中

  • 将图鸟UI项目根目录下的tuniao-ui目录复制到gitegg-uni-app-v2根目录下
  • 将图鸟UI项目根目录下的static/css目录复制到gitegg-uni-app-v2的static/css目录
  • 将图鸟UI项目根目录下的libs目录复制到gitegg-uni-app-v2根目录下

4、在项目中引入TuniaoUI主JS库

  在gitegg-uni-app-v2项目根目录中的main.js中,引入并使用TuniaoUI的JS库,注意这两行配置代码要放在import Vue之后。

// 引入全局TuniaoUI主JS库import TuniaoUI from 'tuniao-ui'Vue.use(TuniaoUI)

5、引入TuniaoUI的全局SCSS主题文件

  在gitegg-uni-app-v2项目根目录的uni.scss中引入tuniao-ui/theme.scss文件。

@import 'tuniao-ui/theme.scss';

6、配置easycom组件模式

  修改page.json文件,增加easycom组件配置,确保pages.json中只有一个easycom字段。
  easycom组件模式:传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。

// pages.json  "easycom":     "^tn-(.*)": "@/tuniao-ui/components/tn-$1/tn-$1.vue"  ,  "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages          // ......      ]  // ......

二、复制模板页面文件并预览

  上面的操作将图鸟UI基础库的内容复制集成到了我们的uni-app项目中,我们在实际开发过程中可能并不需要所有的页面模板文件,否则会使程序多了很多无用代码。

1、复制图鸟UI根目录下/templatePage/login/demo1/demo1.vue文件,替换我们gitegg-uni-app-v2目录下的login.vue内容

2、启动手机模拟器 > 双击桌面的nox_adb快捷方式(如果已启动,可以忽略此步骤)

3、在HBuilder X中依次点击 运行 -> 运行到手机或模拟器 -> 运行到Android App基座

4、弹出框会显示我们已连接的模拟器,点击运行,HBuilderX就可以自动打包app发布到模拟器中运行,并可以在HBuilderX控制台查看运行日志

5、图鸟UI的登录页面预览

相关参考

微信怎么整小程序(在合肥如何快速开发搭建一个微信小程序)

部分合肥小程序搭建需求由于周期计划比较紧凑,往往都希望能够较短时间内就完成产品开发及上线服务。也有一些客户公司为了能早点去进行试水市场,都希望能够实现快速应用搭建的需求。对于这些情况而言,就涉及到一个...

桁架搭建图解(「钢构知识」伸臂桁架、腰桁架,超高层钢结构设计要点)

在外框柱与核心筒之间设置伸臂桁架的主要目的是减小结构侧移,它的机理是提高水平荷载作用下的外框架柱的轴力,从而增加框架承担的倾覆力矩,同时减小了内核心筒的倾覆力矩。它对结构形成的反弯作用可以有效的增大...

构建算法模型(AI算法模型之应用部署概述)

...框架类型算法模型的部署主要可以分成两个方面。一是在移动端/边缘端的部署,即嵌入式,通常以SDK形式呈现。另一个是云端/服务端,通常以服务的形式呈现;今天着重聊聊部署流程,后续移动端部署、具体厂商的智能硬件部...

怎么自己做网站教程(分享一个快速、免费搭建个人网站的方法)

21年,我花258在阿里云买一个服务器,将我的小网站重新部署到互联网。当时一番折腾,将实现纯文本网站的框架从WordPress变成Pelican。WordPress发布新文章,需要在界面上复制粘贴一通操作;Pelican发布文章只需要执行一行指令将Ma...

怎么做出app软件(按个摩小程序系统开发平台源码搭建(APP、软件、H5))

...序开发、按个摩系统开发、按个摩软件开发、按个摩平台搭建、按个摩技术开发、按个摩App开发!  经济的持续发展和人们总体生活水平的不断提升。物质生活的提高,人们的需求也越来越旺盛,追求健康的人越来越多,这就...

快速认字的方法(微信里有个按钮会认字学会随时用,比查字典快多了)

...们把第四个按钮点开,这就是裁剪按钮。立刻出现了一个方框,我们可以移动方框的四边来选择我们不认

建一个肉鸡养殖鸡棚大概多少钱(移动鸡棚,养肉鸡效益好)

...  所谓移动“别墅”其实是一座用竹、木、薄膜等材料搭建的易拆、易移动的棚舍,其建造可就地取材:用大竹或木条搭建一个长8米、宽1.2米、高2.2米的框架,并在中间开一个门,门宽0.8米(两边不用留窗),再用旧尼龙网或鱼...

思维导图是什么样的(带你写出有价值的文字:思维导图)

...样的文字才算有价值呢?以及怎样写出有价值的文字?02.搭建框架通过框架快速找到需要的内容黄金圈理论“是什么、为什么、怎么办”搭建框架是什么这课讲的是什么内容?这课首先讲了什么样的文字才算有价值?有价值的文...

微信里的微站是什么(如何使用微站来宣传推广?)

...小攻略。一、信息集成展示微站能够将客户所需所有信息整合起来并以便捷的移动端展现出来,整合活动简介、注册报名、活动日程、嘉宾介绍、现在照片直播、在线直播等各功能板块,自定义设计添加在微站页面中,更方便用...

方框式视镜哪里有卖的(向征:论新时代思想政治工作的守正创新)

编者按:新时代思想政治工作是中国共产党百年思想政治工作的继承与发展,坚持守正创新是思想政治工作面向新时代“变”与“不变”的历史必然。内涵上,新时代思想政治工作守正创新是一个整体的历史的概念,是传统与现...