前言:

对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相关的框架资料相关推荐

  1. 【Android 逆向】substrate 框架 ( substrate 简介 | substrate 相关文档资料 )

    文章目录 一.substrate 简介 二.substrate 相关文档资料 一.substrate 简介 substrate 官网 : http://www.cydiasubstrate.com s ...

  2. 切换 uniapp_万能前端框架uni app初探03:底部导航开发

    前言 本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...

  3. Web端与App端自动化测试框架

    Web端与App端自动化测试框架 一.Web端与App端的区别 想了解Web端与App端自动化测试框架的区别 ,那么我们就要先来了解Web和App的区别.Web项目一般都是B/S架构,基于浏览器的,而 ...

  4. 滴滴Booster移动APP质量优化框架 学习之旅 三

    推荐阅读: 滴滴Booster移动App质量优化框架-学习之旅 一 Android 模块Api化演练 不一样视角的Glide剖析(一) 滴滴Booster移动App质量优化框架-学习之旅 二对重复资源 ...

  5. HbuilderX:uni app踩坑之uView-ui

    HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...

  6. 视频教程-React全栈:前后端分离的招聘Web App项目(含资料)-ReactJS

    React全栈:前后端分离的招聘Web App项目(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国 ...

  7. uni app 开发微信小程序及上线体验

    uni app 开发微信小程序及上线体验 项目创建及微信小程序AppId的申请 本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...

  8. 【iOS】APP IM聊天框架的设计(基于第三方SDK)

    [iOS]APP IM聊天框架的设计(基于第三方SDK) 前言 在开发社交聊天类型的APP的时候,IM是必不可少的功能,而且很多公司的IM服务都是接的第三方的,很少用自研的,国内的IM厂商也都很成熟, ...

  9. Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架!

    Thinkphp 6 + Vue 2 + ElementUI + Vxe-table 前后端分离的,一键生成代码和API接口的,通用后台管理系统 快速开发框架,开发小程序和APP的推荐框架! 概述 R ...

最新文章

  1. 分布式文件系统HDFS 练习
  2. Linux的java服务配置步骤
  3. uni中动态加载class_Java基础·类加载、反射
  4. 中标麒麟/NeoKylin 安装QT开发环境
  5. Apache Storm源码阅读笔记
  6. ajax成功后没有执行函数,ajax不执行回调函数
  7. 普林斯顿大学计算机科学研究生条件,普林斯顿大学之计算机科学系
  8. java des算法_Java DES算法程序
  9. Internet Explorer无法下载
  10. JavaScript(二)基本概念
  11. steam授权文件_幼儿园STEAM教育的活动设计研究
  12. Java中动态代理使用与原理详解
  13. boss网人脸识别认证_老来网社保认证官网版app下载
  14. 【工具篇】Unity运行期间日志查看的两种方式
  15. excel去除小数点后面的数据,将数字取整
  16. 利用C++求解一元二次方程
  17. m3u8简单教程之巨齿鲨下载
  18. 如何利用液体密度传感器准确地表征罐箱的质量规格?
  19. Mysql 为什么默认定义varchar(255) 而不是varchar(256)
  20. Hive 多维度聚合分析查询

热门文章

  1. pycharm创建vue项目
  2. 中华人民共和国未成年人保护法
  3. 如何构建php邮件服务器,php - 邮件服务器怎么搭建?
  4. 2022年Redis最新面试题- Redis集群
  5. 小程序 Android手机显示正常,ios手机显示空白
  6. HTML+CSS简单应用实例——购物网站的制作(四)
  7. Centos7 Redis 设置密码
  8. Android开发之如何读写文件
  9. 大数据数仓项目总结(一)需求、技术选型、框架版本、服务器、集群规模
  10. 二维对象,根据最里面的子对象的属性,来过滤,获取新的对象