开发笔记 第4页

来源： uni-app项目打包成H5部署到服务器(超详细步骤)_uni-app unpackage-CSDN博客

咳咳, 第一次写博客, 有点激动, 昨天get了一个新技能, 也是我之前一直最不懂的一块, 就是项目做完后如何部署到服务器,昨天尝试了部署uni-app项目到测试服务器, 成功之后很开心, 后面又自己上网学了下怎么部署vue项目, 所以这篇会讲怎么部署uni-app项目, 下一篇讲怎么部署vue项目, 好, 上操作

一 ,打包项目
HBuilderX下载地址: https://www.dcloud.io/hbuilderx.html

1 , HBuilderX打开你的uni-app项目 — > 点发行 – > 网站 – PC Web或手机H5

2 , 点完之后会弹出一个框, 填写网站标题和和域名之后点发行

3 , 点完之后控制台会显示正在编译中… , 稍等一会

4, 打包成功 , 生成了unpackage文件夹, 打包好的文件存放在里面

二 , 用一个工具, 把打包好的文件上传到你的服务器 , 我用的是Xftp , 用别的工具也可以
Xftp下载链接：https://pan.baidu.com/s/1z7-AYhinrWR3qIuZTkk0XQ
提取码：cn6m

1, 打开Xftp , 点小窗口的新建

2 , 点完之后弹出这个框, 填写完信息之后点连接 , 服务器的相关信息问公司的人要

3 , 点完连接之后 , 弹出这个框 , 点接受并保存

4 , 然后会看到右侧出现了新建会话的窗口 , 表示连接到服务器了,

左侧是你自己的电脑本地 , 右侧是服务器电脑

左侧进到刚刚打包好的文件存放路径 , unpackage/dist/build/h5 , 把static文件夹和index.html 复制到右侧服务器中部署的文件夹里 , 看你们是部署到哪个文件夹就拖到哪里

5 , 部署成功 !! 打开浏览器，输入服务器ip地址，访问一首页的内容吧 ^_^

地址就是 服务器ip/部署的文件夹/ , 比如 服务器ip是123.60.120.40:3006 ,部署的文件夹名字是project , 地址就是如下

http://123.60.120.40:3006/project/
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_49577940/article/details/118058899

来源： uView 2.0版本 http请求封装_uni.$u.route-CSDN博客

config/config.js写入

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
module.exports = (vm) => {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = ''; /* 根域名 */
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
		// 初始化请求拦截器时，会执行此方法，此时data为undefined，赋予默认{}
		config.data = config.data || {}
		config.header['Content-Type'] = 'application/x-www-form-urlencoded'
		// console.log(uni.getStorageSync('storage_key'))
		// 根据custom参数中配置的是否需要token，添加对应的请求头
		if (uni.getStorageSync('storage_key')) {
			// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
			config.header.token = uni.getStorageSync('storage_key').token.token
		}
		return config
	}, config => { // 可使用async await 做异步操作
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => {
		/* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data
		console.log(response.statusCode)
		// 自定义参数
		// const custom = response.config?.custom
		if (data.code != 1) {
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (data.msg) {
				uni.$u.toast(data.msg)
			}
			// // 如果需要catch返回，则进行reject
			// if (custom?.catch) {
			// 	return Promise.reject(data)
			// } else {
			// 	// 否则返回一个pending中的promise，请求不会进入catch中
			// 	return new Promise(() => {})
			// }
			
		}
		return data === undefined ? {} : data
	}, (response) => {
		// 对响应错误做点什么 （statusCode !== 200）
		if(response.statusCode==401){
			uni.$u.route('/pages/jy_Sign/jy_Sign')
		}
		return Promise.reject(response)
	})
}

config/api.js封装

const http = uni.$u.http
import qs from 'qs'
export const restlist = (params, config = {}) => http.post('/api/ebook/restlist', qs.stringify(params), config)

引入配置

main.js引入

// 引入请求封装，将app参数传递到配置中
require('./config/request.js')(app)
app.$mount()
使用

import {
		restlist
	} from '../../config/api.js'
	
	getdata() {
				var that = this;
				that.page = 1;
				this.status='loading'
				var data = {
					page: this.page,
					keywords: this.selected,
				};
				restlist(data).then(res => {
					this.status='loadmore'
					if (res.code == 1) {
						that.list = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {

				})
			},
			getmore() {
				var that = this;
				that.page = that.page + 1;
				that.status = 'loading';
				let data = {
					page: this.page,
					keywords: this.selected,
				};
				restlist(data).then(res => {
					var data = res.data;
					if (!data || data.length == 0) {
						that.status = 'nomore';
					}
					for (var i = 0; i < data.length; i++) {
						that.list.push(data[i]);
					}
				}).catch(err => {

				})
			},

request

// 此vm参数为页面的实例，可以通过它引用vuex中的变量
import configs from './config.js'
import {
	fungoPreviousPage
} from "@/utils/util.js"
module.exports = (vm) => {
	// 初始化请求配置
	uni.$u.http.setConfig((config) => {
		/* config 为默认全局配置*/
		config.baseURL = configs.baseUrl; /* 根域名 */
		return config
	})

	// 请求拦截
	uni.$u.http.interceptors.request.use((config) => { // 可使用async await 做异步操作
		config.header['Content-Type'] = 'application/json'
		config.data = config.data || {}

		// 根据custom参数中配置的是否需要token，添加对应的请求头
		config.header['cookie'] = uni.getStorageSync('cookie')
		// if (config?.custom?.auth) {
		// 	if (uni.getStorageSync('cookie')) {
		// 		// 可以在此通过vm引用vuex中的变量，具体值在vm.$store.state中
		// 	} else {
		// 		uni.redirectTo({
		// 			url: '/pages/login/wxlogin'
		// 		})
		// 	}
		// }
		return config
	}, config => { // 可使用async await 做异步操作
		return Promise.reject(config)
	})

	// 响应拦截
	uni.$u.http.interceptors.response.use((response) => {
		/* 对响应成功做点什么 可使用async await 做异步操作*/
		const data = response.data
		if (response.header['Set-Cookie']) {
			// Set-Cookie字符串获取
			var cookies = response.header['Set-Cookie']
			// 字符串分割成数组
			var cookieArray = cookies.split(/,(?=[^,]*=)/)
			// 分号拼接数组
			var newCookie = cookieArray.join(';')
			uni.setStorageSync('cookie', newCookie)
		}
		// 自定义参数
		// const custom = response.config?.custom
		if (data.code != 200) {
			// 如果没有显式定义custom的toast参数为false的话，默认对报错进行toast弹出提示
			if (data.message) {
				uni.$u.toast(data.message)
			}

			if (data.code == 401) {
				// uni.clearStorageSync()
				fungoPreviousPage()
				uni.$u.route('/pages/login/wxlogin')
			}
			if (data.code == 602) {
				// uni.clearStorageSync()
				fungoPreviousPage()
				uni.$u.route('/pages/login/wxlogin')
			}
		}
		return data === undefined ? {} : data
	}, (response) => {
		// 对响应错误做点什么 （statusCode !== 200）
		if (response.statusCode == 401) {
			fungoPreviousPage()
			uni.$u.route('/pages/login/wxlogin')
		}
		return Promise.reject(response)
	})
}

来源： uni-app.02.提交form表单的两种方式_uniapp form表单提交-CSDN博客

来源： uni-app的H5版使用注意事项 – DCloud问答

uni-app x的web版运行注意事项，另见https://doc.dcloud.net.cn/uni-app-x/web/

HBuilderX 1.2开始包含了uni-app的web平台支持。

使用方式

1. 打开uni-app项目下的vue文件
2. 点击菜单 运行->运行到浏览器->Chrome
   
3. 在Chrome內打开调试模式（右键->检查）开启设备模拟，模拟移动设备（如果UI变形刷新即可）
   
4. HBuilderX修改代码后会自动刷新chrome的页面
5. 审查元素
   

   在chrome控制台安装vue devtools后可查看节点关系。
   安装方式自行搜索。
   每个页面都在page节点下，pageHead是微信和app下的原生导航栏，即pages.json里配的导航栏。
   pageBody是导航栏下的页面内容。
   所有标签为了避免和标准H5标签冲突，都加了U前缀。

6. 断点Debug
   点chrome控制台的source，可以给js打断点调试。
   找到同名的文件，如果没有同名vue文件，一般会有一个同文件名的js文件，此时会提示检测到sourcemap，是否引入，点允许。然后就会有同名的vue文件。如果找不到，则把焦点放到source的代码区，然后敲ctrl+p打开文件查找窗口，然后敲入vue页面名字，然后打开vue页面。
   这个vue里，只有js，没有tag和css，但可以打断点调试。
   
   
   
   

发布方式

1. 配置发行后的路径（发行在网站根目录可不配置），比如发行网站路径是www.xxx.com/html5，在manifest.json可视化界面 – H5配置 – 运行的基础路径中设置，也可以在源码视图内编辑h5节点，router下增加base属性为html5。
   可视化界面设置：
   

   源码视图设置：

   
2. 点击菜单 发行->H5
3. 在当下项目下的unpackage/dist/build/h5目录找到出的资源，部署服务器（或者使用本地服务器预览，不要直接在浏览器打开html文件）。如果发布使用的history模式，需要服务端配合，参考：后端配置方式

跨端注意

uni-app由uni的通用api和平台专有api组成，H5版也不例外。可以使用uni的通用api完成很多工作，也可以在条件编译里调用H5版的浏览器专有api。
虽然dom、window都可以用了，但如果要跨端，还是少写这样的代码好。
H5仍应该使用pages.json管理页面，强烈不建议使用浏览器的跳转页面的api。
H5的条件编译写法是把之前的app-plus换成H5。敲ifdef会有代码助手提示。

复制代码//#ifdef H5  
this.titleHeight = 44  
//#endif

条件编译目前有7个平台，APP-PLUS、APP-PLUS-NVUE、MP-WEIXIN、H5、MP、MP-BAIDU、MP-ALIPAY。
其中APP-PLUS-NVUE是APP-PLUS的子集，用于weex下单独写专用代码。
为了方便多平台选择，还引入了~#ifndef~，也就是ifdef的not，反向选择。以及或语法，及||。这些命名都是c语言条件编译的标准命名。

复制代码// #ifndef H5  
console.log("这段代码编译到非H5平台");  
// #endif

开发者之前为微信或app写的代码，H5的平台不支持时，需要注意把这些代码放到条件编译里。
经过这样的处理，之前做好的App或小程序才能正常运行到H5版里。

小程序版在UI上，尤其是导航栏上限制较多，H5在这里是参考了app，默认解析了pages.json下的app-plus的节点，实现了titleNView、buttons、下拉刷新（下拉刷新只有circle方式，因为只有这样的下拉刷新在H5版上可以保障流畅体验）

组件和API支持情况

目前的H5版，还没有100%实现uni的所有api，但大部分已经完成，具体参考uniapp文档。

第三方组件支持

• 支持mpvue组件
• 支持普通vue组件（仅H5平台）
• 支持微信小程序组件（HBuilderX2.5.0+开始支持编译到H5）
• 支持nvue

vue语法支持

H5版支持完整的vue语法，同时校验器也校验了更严格的vue语法，有些写法不规范会报警。比如data后面写对象会报警，必须写function。

注意事项（必看）

• 编译为H5版后生成的是单页应用，SPA。如果想要SEO优化，首页可以在template模板中配置keyword。二级页不支持配置。但一个更酷的方式是用uni-app直接发布一版百度小程序，搜索权重更高。
• 编译后看日志和错误，要看浏览器的控制台，而不是HBuilderX的控制台。浏览器的控制台会有错误提示。
• 网络请求（request、uploadFile、downloadFile等）在浏览器存在跨域限制（CORS、Cross-Origin），解决方案详见：https://ask.dcloud.net.cn/article/35267
• APP 和微信的原生导航栏和tabbar下，元素区域坐标是不包含原生导航栏和tabbar的。而 H5 里原生导航栏和tabbar是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app新增了2个css变量：–window-top和–window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar上方悬浮一个菜单，之前写bottom:0。这样的写法编译到h5后，这个菜单会和tabbar重叠，位于屏幕底部。而改为使用bottom:var(–window-bottom)，则不管在app下还是在h5下，这个菜单都是悬浮在tabbar上浮的。这就避免了写条件编译代码。当然你也仍然可以使用 H5 的条件编译处理界面的不同。
• CSS內使用vh单位的时候注意100vh包含导航栏，使用时需要减去导航栏和tabBar高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
• event 对象上使用的 mpvue 独有的属性需调整（比如 event.pageY，可能需要加上44px的导航栏高度）。
• fixed定位的组件有可能遮挡框架内置UI组件，如果不希望遮挡可以分平台判断，在H5平台避开内置UI。
• 正常支持rpx。px是真实物理像素。暂不支持通过设manifest的”transformPx” : true，把px当动态单位使用。
• 使用罗盘、地理位置、加速计等相关接口需要使用https协议，本地预览（localhost）可以使用 http 协议。
• PC 端 Chrome 浏览器模拟器设备测试的时候，获取定位 API 需要连接谷歌服务器，需要翻墙。
• 组件内（页面除外）不支持onLoad生命周期。
• 为避免和内置组件冲突，自定义组件请加上前缀（但不能是u和uni）。比如可使用的自定义组件名称：my-view、m-input、we-icon，例如不可使用的自定义组件名称：u-view、uni-input。如果已有项目使用了可能造成冲突的名称，请修改名称。另外微信小程序下自定义组件名称不能以wx开头。
• 在tabBar页面，如果page高度设置为100%时，页面超出滚动会导致底部被tabbar遮挡，可在tabbar页面去掉height:100%或者改用min-height:100%。
• 编写组件时需要遵守vue的规范，之前在app端和小程序端能使用的一些不规范写法需要纠正，比如：不要修改props的值、组件最外层template节点下不允许包含多个节点。
• 开发App时，不可在H5预览后直接云打包。需在HBuilderX里点运行-选择运行到手机，真机调试无误后再打包。
• H5端 “网络不给力” 原因及解决办法：https://ask.dcloud.net.cn/article/37065。

相关

uni-app编译H5底层技术解析：https://juejin.im/post/5c1b0d715188256973244377

来源： uni-app踩坑+小改造最近团队内部一直在试点用uni-app去做一些小需求，但主要是先在H5上做试点，之后再按计划编 – 掘金

// manifest.json
{
    "h5": {
        "devServer": {
            "proxy": {
                "/prefix/api/user/list": {
                    "target": "https://api-remote.xxxx.com",
                    "pathRewrite": {
                        "^/prefix": ""
                    }
                }
            }
        }
    }
}

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/prefix/api/user/list': {
        target: 'https://api-remote.xxxx.com',
        pathRewrite: {
          '^/prefix': ''
        }
      }
    },
  }
}

// vue.config.js
const webpackApiMocker = require('mocker-api')

module.exports = {
  devServer: {
    before (app) {
      webpackApiMocker(app, path.resolve('./mock/index.js'))
    }
  }
}

// mock/index.js
const Mock = require('mockjs')

const Random = Mock.Random
const mock = Mock.mock

const proxy = {
  'GET /api/user/list': mock({
    'array|3': [
      {
        id: 1,
        username: 'kenny',
        sex: 'male'
      }
    ]
  }),
  'POST /api/login/account': (req, res) => {
    return res.json({
      status: 'ok',
      data: {
        id: Random.id(),
        userName: Random.cname(),
        city: Random.city()
      }
    })
  }
}

module.exports = proxy

const projectName = 'xxx' // 当前工程名，此处自由发挥即可
const isDev = isDev() // 是否为本地开发环境，此处自由发挥即可
const CDN_HOST = process.env.CDN_HOST   // build时指定的CDN域名
const APP_ENV = process.env.APP_ENV // build时指定的自定义环境

module.exports = {
  publicPath: isDev
    ? '/'
    : `//${CDN_HOST}/static/${projectName}/${APP_ENV}/`,
}

// @dcloudio/vue-cli-plugin-uni/index.js#L30
// 获取本地的project-config配置
module.exports = (api, options) => {
    const projectConfig = require(api.resolve('project-config'))

    Object.assign(options, { 
        outputDir: process.env.UNI_OUTPUT_TMP_DIR || process.env.UNI_OUTPUT_DIR,
        assetsDir
    }, vueConfig, {
        // 重新对publicPath进行覆盖
        publicPath: process.env.NODE_ENV === 'production' ? projectConfig.publicPath : '/'
    })
}

来源： uni-app ＜image＞和vue中img标签动态绑定src不显示本地图片 – web_pzj – 博客园

因为需要根据后端返回的数据渲染不同的图片，所有要对imge标签的src进行动态绑定。

以下是静态绑定时的代码，静态绑定无任何问题。

下方是静态绑定时的正常图片：

以下是动态绑定时的代码，但是图片无法显示。

无法显示效果图：

解决办法一：用将路径放入require()中。

解决办法二：不要使用../，改为根目录/

来源： uniapp 中出现 Undefined variable $u-type-primary-light 问题_undefined variable: “$u-type-primary-light”.-CSDN博客

来源： uni-app 分不清的全局变量this, uni, $u, vm, uni.$u, this.$u-CSDN博客

项目引入了uview,并将uview所有模块指给uniapp全局变量uni

uni.$u=$u

在登录页面，或者APP.vue打印以下变量：

this, uni, $u, vm, uni.$u, this.$u

// this,$u,vm,uni， this.$u， uni.$u全局变量说明
console.log(“>>this”, this)
console.log(“>>uni”, uni)
console.log(“>>this===uni”, this === uni) //false
console.log(“>>this.$u “, this.$u)
console.log(“>>uni.$u “, uni.$u)
console.log(“>>this.$u===uni.&u”, this.$u === uni.$u) //ture

try {//$u is not defined
console.log(“>>$u “, $u)
} catch (e) {
console.log(e)
}
try { //vm is not defined
console.log(“>>this.vm”, this.vm)
console.log(“>>vm “, vm)
} catch (e) {
console.log(e)
}
运行结果
$u 是uview挂载到uni上的，方便使用uni来操作uview组件。

uni. 对象是uni-app框架实例。

this. 在.vue页面，对应就是当前vue的实例对象。

this.$u 与uni.$u 在vue页面是同一对象，指向 uview

$u来源
uniapp-master\uview-ui\index.vue，在此vue里，通过xx.prototype.$u的方法 ，通过uni.$u方法同时挂载到全局里。

// 引入全局mixin
import mixin from ‘./libs/mixin/mixin.js’

// 防抖方法
import debounce from ‘./libs/function/debounce.js’
// 节流方法
import throttle from ‘./libs/function/throttle.js’
import {fixMoney2Decimal, formatInputMoney, toFixed2Decimal} from “@/uview-ui/libs/function/numberform”;
import {positiveNumber} from “@/uview-ui/libs/function/inputRegExp”;
//…
//…

// 配置信息
import config from ‘./libs/config/config.js’
// 各个需要fixed的地方的z-index配置文件
import zIndex from ‘./libs/config/zIndex.js’
import {timeFormatCmm} from “@/uview-ui/libs/function/timeFormatStr”;

const $u = {
queryParams: queryParams,
positiveNumber: positiveNumber,
route: route,
timeFormat: timeFormat,
date: timeFormat, // 另名date
timeFormatCmm: timeFormatCmm,
timeFrom,
colorGradient: colorGradient.colorGradient,
colorToRgba: colorGradient.colorToRgba,
guid,
color,
sys,
os,
type2icon,
randomArray,
wranning,
get: http.get,
post: http.post,
put: http.put,
‘delete’: http.delete,
hexToRgb: colorGradient.hexToRgb,
rgbToHex: colorGradient.rgbToHex,
test,
random,
deepClone,
deepMerge,
getParent,
$parent,
addUnit,
trim,
type: [‘primary’, ‘success’, ‘error’, ‘warning’, ‘info’],
http,
toast,
toastErr,
toastS,
modal,
config, // uView配置信息相关，比如版本号
zIndex,
debounce,
throttle,

//–
toFixed2Decimal,
fixMoney2Decimal,
formatInputMoney
}

// $u挂载到uni对象上
uni.$u = $u

const install = Vue => {
Vue.mixin(mixin)
if (Vue.prototype.openShare) {
Vue.mixin(mpShare);
}
// Vue.mixin(vuexStore);
// 时间格式化，同时两个名称，date和timeFormat
Vue.filter(‘timeFormat’, (timestamp, format) => {
return timeFormat(timestamp, format)
})
Vue.filter(‘date’, (timestamp, format) => {
return timeFormat(timestamp, format)
})
// 将多久以前的方法，注入到全局过滤器
Vue.filter(‘timeFrom’, (timestamp, format) => {
return timeFrom(timestamp, format)
})
Vue.prototype.$u = $u
}

export default {
install
}
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/LlanyW/article/details/132522228

来源： 【uni-app项目如何引入 uView组件库】_uview安装到uni-app项目-CSDN博客

uniapp项目引入uView组件库
一、uView官方文档
二、公司项目中引入并使用uView
一、uView官方文档
uView官方文档

二、公司项目中引入并使用uView
第一步：

在公司创建完成uniapp项目后引入uView

第二步：

您如果是使用HBuilder X创建的uniapp项目，使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ，(如果这个看不懂可以看官方文档)

(1) HBuilder X插件库中下载 uni_modules

现在是已经将 uView导入到项目中了，接下来还需要对项目中uView组件库样式的导入，(具体步骤官方文档里都有)

如果之前安装过scss，可以直接跳过

这里的scss仅限于是通过Vcode开发uniapp的

通过HBuilder X 下载scss

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from ‘@/uni_modules/uview-ui’
Vue.use(uView)

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import ‘@/uni_modules/uview-ui/theme.scss’;

到这一步可以直接启动项目，里边的组件均可使用
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/Lnbd_/article/details/129470614

来源： 关于uni-app的ui库、ui框架、ui组件 – DCloud问答

组件的概念

组件是现代开发的重要里程碑。组件重构了分工模型，让大量的轮子出现，让开发者可以拿来轮子直接用，大幅提升了整个产业的效率。

uni-app是有内置组件的。这和web开发不一样。
web开发基本上不用基础组件，都是找一个三方ui库，全套组件都包含。那是因为html的基础组件默认样式不适配手机风格。
但uni-app体系不是这样，内置组件就是为手机优化的。

但内置组件只能满足基础需求，更多场景，需要扩展组件。
扩展组件是基于内置组件的二次封装，从性能上来讲，扩展组件的性能略低于内置组件，所以开发者切勿抛弃内置组件，直接全套用三方UI组件库。

uni-app的插件市场，有很多扩展组件，有的是单独的，有的是成套的。
有些开发者喜欢成套的组件，但注意成套扩展组件也不可能覆盖所有需求，很多场景还是需要单独下载专业组件。

扩展组件的选择

众多扩展组件如何选择？我们首先要搞清楚组件的分类。
组件分2大类：1、vue组件（文件后缀为vue）；2、小程序自定义组件（文件后缀为wxml或其他小程序平台特有后缀名称）

• vue组件又分为2个细项：only for web、全端兼容
• 小程序组件又分为：微信/QQ小程序组件、阿里小程序组件、百度小程序组件、字节跳动小程序组件。
  这些组件uni-app都支持，但受组件本身技术特点限制，在不同端有不一样的支持度。
  下面这张表格，可以清楚的表达不同类型的组件的兼容性。

从表格中可以很明显看出，更推荐使用的是全端兼容的uni规范组件。

很多人容易搞错2个问题：

1. 同样是vue组件，only for web的和全端的有什么区别？
   传统的vue组件，比如elementUI，都是only for web的，里面有大量dom和window对象操作。但小程序和App是没有dom这些api的，自然无法跨端使用。
   想要跨端，其实也不难，做一套无dom的vue组件即可。官方的uni-ui即是如此。还有众多开发者在插件市场提交了更多这种类型的库。
2. vant是分web版和weapp版的，千万别搞混
   vant的web版操作了dom，所以只能用于web端；而vant weapp是微信小程序组件规范，可以用于微信、App、H5；vant自身并没有提供全端可用的无dom vue组件。

除了兼容性，在性能和生态完善度层面，不同类型组件有什么差别？

1. 性能：
   • vue组件性能好于小程序自定义组件。这是因为uni-app在底层对vue数据更新使用了自动差量更新的机制。而小程序自定义组件，默认的setData写法是没有差量数据更新的，需要写代码手动实现差量更新才能达到相同性能。
2. 生态完善度
   • 首先除了微信小程序，其他几个平台的小程序几乎是没有三方组件和模板生态的。开发其他端小程序，得靠uni-app的生态
   • 再说微信小程序生态，之前在微信小程序平台上一些有名的库（比如wxParse、wx-Echart），实际上在性能、功能、技术支持上，大多做的不如uni-app生态下的新库好。而vant、iview的weapp版，其性能也均不如uni ui。
3. 其他指标
   • vue doc：HBuilderX支持vue doc，组件作者在vue组件源码里编写vue doc，可以让组件使用者写代码时得到良好的代码提示。
   • easycom：uni-app支持easycom，可以大幅简化组件的使用
   • nvue支持：如果开发App，可能会涉及到nvue原生渲染页面，这种渲染方式支持的css有限，此时就要甄别组件是否兼容nvue。

再来看看各种成套UI的优劣分析

uni ui

DCloud官方出了一套扩展组件，即uni-ui
这些扩展组件支持单个组件从插件市场下载，也支持npm引入uni ui，当然更方便的是在HBuilderX新建项目时直接选择uni ui项目模板
uni ui有如下优势：

1. 优化逻辑层和视图层的通信折损：非H5端的各个平台，包括App和各种小程序，其逻辑层和视图层是分离的，两层之间通信交互会有折损，导致诸如跟手滑动不流畅。uni ui在底层会利用wxs等技术，把适当的js代码运行在视图层，减少通信折损，保证诸如swiperAction左滑菜单等跟手操作流畅顺滑
2. 自动差量diff数据：在uni-app下，开发App和小程序，不需要手动setData，底层自动会差量更新数据。但如果使用了小程序组件，则需要按小程序的setData方式来更新数据，很难做到自动diff更新数据。
3. 背景停止：很多ui组件是会一直动的，比如轮播图、跑马灯。即便这个窗体被新窗体挡住，它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上，背景操作ui会引发很严重的性能问题，造成前台界面明显卡顿。而uni ui的组件，会自动判断自己的显示状态，在组件不再可见时，不会再做动画消耗硬件资源。
4. 纯vue语法：uni ui的引用、开发都是纯vue方式。而小程序组件的引用注册、开发都是小程序语法，两种语法混合在一个工程，写的也不舒服，维护也麻烦。
5. 与uni统计自动整合：比如使用uni ui的导航栏组件，就不需要写统计的自定义事件来触发页面标题上报。uni统计会自动识别导航栏组件的标题。类似的，收藏组件、购物车组件，都可以免打点直接使用。
6. uni ui兼容Android 4.4等低端机webview，没有浏览器兼容问题。
7. uni ui支持nvue：App端，uni-app同时支持webview渲染和原生渲染，而uni ui是可以一套代码同时支持webview渲染和原生渲染的。为了兼容原生渲染，uni ui也做到了纯flex布局。
8. uni ui内置vue doc，使用组件时有良好的代码提示
9. 支持easycom规范，使用非常简单
10. 支持datacom规范，云端一体全部封装掉
11. 支持uni_module规范，方便插件的更新

推荐在HBuilderX新建项目时，直接选择uni ui项目模板，然后在代码里直接敲u，所有组件都拉出来，不用引用、不用注册，直接就用。

插件市场更多组件

插件市场，https://ext.dcloud.net.cn，有各种玲琅满目的组件、模板。
其中成套的全端兼容ui库包括：

• uViewUI：组件丰富、文档清晰，支持nvue
• colorUI css库：颜值很高，css库而非组件
• unify UI：全端支持的组件库，侧重nvue
• mypUI：全端支持的组件库，侧重nvue
• ThorUI组件库
• graceUI商业库
• nPro全端nvue组件与模版库：云端一体、nvue优质商业库，https://ext.dcloud.net.cn/plugin?id=5169
• first UI：分开源版和商业版
• 图鸟UI：高颜值UI库
• s-ui

其他

• 如果你仍坚持使用微信小程序的自定义组件ui，插件市场也有很多vant weapp版的集成示例https://ext.dcloud.net.cn/search?q=vant。同时要注意，小程序自定义组件的性能不如vue组件。
• 如果你的nvue文件使用weex编译模式，也支持weex ui。三方商业ui库有graceUI weex版。但weex编译模式属于被淘汰技术，不再提供技术支持，nvue开发请使用uni-app编译模式。

综上，官方对组件的使用建议是：

1. 首先使用内置组件
2. 然后使用uni ui扩展组件
3. 其他需求依靠插件市场其他组件灵活补充