uniapp的

一、uni-app简单介绍

什么是uni-app？

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

uni-app的优点

跨平台发行，运行体验更好

与小程序的组件、API一致；
兼容weex原生渲染，增加了开发效率高，但是由于weex坑比较多，建议还是使用局部渲染优化；
通用前端技术栈,学习成本更低

支持vue语法，微信小程序API
内嵌mpvue
开发生态,组件更丰富

支持通过npm安装第三方包
支持微信小程序自定义组件及JS SDK
兼容mpvue组件及项目(内嵌mpvue开源框架)
App端支持和原生混合编码
插件丰富,DCloud将发布插件到市场

二、功能框架浏览图

三、创建项目

1、安装HBuilderX

HBuilderX内置相关环境，无需配置nodejs、vue等，三秒钟就可以创建一个项目。

• 小提示：ctril+N可以快速调转到新建选择类型

2、创建uni-app

3、运行项目

4、官方提示

static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

四、项目中使用扩展组件

1. 在uniapp官网中选择要引入的组件

2. 这里就拿Card 卡片 做演示

3. 项目中下载插件

4. 下载完成 引入组件

import uniCard from '@/components/uni-card/uni-card.vue'
export default {
   
    components: {
   uniCard}
}

<!-- 一般用法 -->
<uni-card title="标题文字" thumbnail="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" extra="额外信息" note="Tips">