uni-app相关的框架资料
前言:
对uin-app的资料进行整理,这里说说他支持的框架资料。
官方入口:入口
相关资料:
一、ColorUI-高颜值,高效率的小程序组件库
git源码:点我
相关项目入口 - 一个基于colorui的商城项目:点我
实现步骤:
1、下载项目,找到这个colorui 文件夹,放到项目中
2、App.vue 引入关键Css main.css icon.css
<style>@import "colorui/main.css";@import "colorui/icon.css";....
</style>
3、main.js
引入 cu-custom
组件。
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
4、page.vue
页面可以直接调用了
<cu-custom bgColor="bg-gradual-blue" :isBack="true"><block slot="backText">返回</block><block slot="content">导航栏</block>
</cu-custom>
参数 | 作用 | 类型 | 默认值 |
---|---|---|---|
bgColor | 背景颜色类名 | String | '' |
isBack | 是否开启返回 | Boolean | false |
bgImage | 背景图片路径 | String | '' |
slot块 | 作用 |
---|---|
backText | 返回时的文字 |
content | 中间区域 |
right | 右侧区域(小程序端可使用范围很窄!) |
实现效果:点我查看
二、uView2.0 ,uni-app中的框架,跟vue的ivew/element很像
1、安装
Hbuilder X方式
下载方式配置文档
如果您是使用Hbuilder X开发的用户,您可以在uni-app插件市场通过uni_modules的形式进行安装,
此安装方式可以方便您后续在uni_modules对uView进行一键升级。
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件,导入到对应的项目中即可。
注意: 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。
下载地址:uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市场
NPM方式
npm方式配置文档
在项目根目录执行如下命令即可:
// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -ynpm install uview-ui// 更新
// npm update uview-ui
注意: 此安装方式必须要按照npm方式安装的配置中的说明配置了才可用,且项目名称不能有中文字符
2、配置
(前提)如果没有scss请安装
// 安装node-sass
npm i node-sass -D
// 安装sass-loader,注意需要版本10,否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D
安装配置
由于uView支持npm
和下载
的方式安装,二者配置几乎一致,因为某些平台的兼容性,在配置easycom稍有不同,为了不造成混淆,这里将两种 方式分开说明:
- NPM方式安装的配置
- 下载方式安装的配置
#默认单位配置2.0.12
在uView1.x中,组件参数如果为数值的话,默认为rpx
单位,但是rpx
在平板上会导致尺寸超大,为了更高的可用性,所以uView2.x将单位默认改为px
,如果您出于 某些需求,需要将单位改为rpx
,可以在main.js
中进行如下配置即可:
......
// main.js,注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'
......
3、使用
通过npm和下载方式的配置之后,在某个页面可以直接使用组件,无需通过import
引入组件。
<template><u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template><script>export default {data() {return {list: [{text: '点赞',color: 'blue',fontSize: 28}, {text: '分享'}, {text: '评论'}],show: true}}}
</script>
三、uni-app接入第三方授权登陆
微信开放平台开发第三方授权登陆(一):开发前期准备
微信开放平台开发第三方授权登陆(二):PC网页端
微信开放平台开发第三方授权登陆(三):Android客户端
微信开放平台开发第三方授权登陆(四):微信公众号
微信开放平台开发第三方授权登陆(五):微信小程序
uni-app相关的框架资料相关推荐
- 【Android 逆向】substrate 框架 ( substrate 简介 | substrate 相关文档资料 )
文章目录 一.substrate 简介 二.substrate 相关文档资料 一.substrate 简介 substrate 官网 : http://www.cydiasubstrate.com s ...
- 切换 uniapp_万能前端框架uni app初探03:底部导航开发
前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
- Web端与App端自动化测试框架
Web端与App端自动化测试框架 一.Web端与App端的区别 想了解Web端与App端自动化测试框架的区别 ,那么我们就要先来了解Web和App的区别.Web项目一般都是B/S架构,基于浏览器的,而 ...
- 滴滴Booster移动APP质量优化框架 学习之旅 三
推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅 二对重复资源 ...
- HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
- 视频教程-React全栈:前后端分离的招聘Web App项目(含资料)-ReactJS
React全栈:前后端分离的招聘Web App项目(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国 ...
- uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验 项目创建及微信小程序AppId的申请 本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
- 【iOS】APP IM聊天框架的设计(基于第三方SDK)
[iOS]APP IM聊天框架的设计(基于第三方SDK) 前言 在开发社交聊天类型的APP的时候,IM是必不可少的功能,而且很多公司的IM服务都是接的第三方的,很少用自研的,国内的IM厂商也都很成熟, ...
- Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架!
Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架! 概述 R ...
最新文章
- 分布式文件系统HDFS 练习
- Linux的java服务配置步骤
- uni中动态加载class_Java基础·类加载、反射
- 中标麒麟/NeoKylin 安装QT开发环境
- Apache Storm源码阅读笔记
- ajax成功后没有执行函数,ajax不执行回调函数
- 普林斯顿大学计算机科学研究生条件,普林斯顿大学之计算机科学系
- java des算法_Java DES算法程序
- Internet Explorer无法下载
- JavaScript(二)基本概念
- steam授权文件_幼儿园STEAM教育的活动设计研究
- Java中动态代理使用与原理详解
- boss网人脸识别认证_老来网社保认证官网版app下载
- 【工具篇】Unity运行期间日志查看的两种方式
- excel去除小数点后面的数据,将数字取整
- 利用C++求解一元二次方程
- m3u8简单教程之巨齿鲨下载
- 如何利用液体密度传感器准确地表征罐箱的质量规格?
- Mysql 为什么默认定义varchar(255) 而不是varchar(256)
- Hive 多维度聚合分析查询