uniapp基础学习

冷不防 2021-09-13 15:24 419阅读 0赞

## 1.概念 ##

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到
     iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

## 2.特点 ##

> 1.跨平台更多  
> 2.运行体验更好  
> 3.通用技术栈，学习成本更低（vue的语法，微信小程序的api）  
> 4.开放生态，组件更丰富  
>

## 3.安装 ##

**（1）通过HBuilderX可视化界面**

创建/运行/打包/发布

详情见：https://uniapp.dcloud.io/quickstart?id=\_1-%e9%80%9a%e8%bf%87-hbuilderx-%e5%8f%af%e8%a7%86%e5%8c%96%e7%95%8c%e9%9d%a2  
**（2）通过vue-cli命令行**

使用正式版（对应HBuilderX最新正式版）
    vue create -p dcloudio/uni-preset-vue my-project
    使用alpha版（对应HBuilderX最新alpha版）
    vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

会提示选择项目模板，初次体验建议选择 hello uni-app 项目模板，可体验uni-app框架的组件、接口、模板如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]![在这里插入图片描述][20200309131636147.png]  
**运行并发布uni-app**  
创建成功后进入根目录

npm run dev:%PLATFORM%
    npm run build:%PLATFORM%

%PLATFORM% 可取值如下：  
![在这里插入图片描述][20200309131945157.png]

## 4.组件/标签的变化 ##

div 改成 view
    span、font 改成 text
    a 改成 navigator
    img 改成 image
    input 还在，但type属性改成了confirmtype
    form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
    select 改成 picker
    iframe 改成 web-view
    ul、li没有了，都用view替代
    audio 不再推荐使用，改成api方式，背景音频api文档
    其实老的HTML标签也可以在uni-app里使用，uni-app编译器会在编译时把老标签转为新标签，比如把div编译成view。但不推荐这种用法，调试H5端时容易混乱。

**新增了一批手机端常用的新组件**

scroll-view 可区域滚动视图容器
    swiper 可滑动区域视图容器
    icon 图标
    rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
    progress 进度条
    slider 滑块指示器
    switch 开关选择器
    camera 相机
    live-player 直播
    map 地图
    cover-view 可覆盖原生组件的视图容器 cover-view需要多强调几句，uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

**css的变化**

（1） *选择器不支持；
    （2）元素选择器里没有body，改为了page。微信小程序即是如此。

**单位的变化**

px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。
     如果想使用根据屏幕宽度    自适应的单位，推荐使用rpx

**css变量**

status-bar-height	系统状态栏高度
    window-top	内容区域距离顶部的距离
    window-bottom	内容区域距离底部的距离

**本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径**

## 5.页面跳转（pages.json） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]

每次添加一个页面他这里就会有
    path是项目路径
    style是他的样式
    navigationBarTitleText标题
    navigationBarBackgroundColor标题的背景色
    navigationBarTextStyle标题的颜色

## 5.样式导入 ##

**默认配置文件中@就代表src目录。如：  
import Person from '@/components/Person’**  
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。  
示例代码：

## 6.自定义头部导航栏 ##

在pages.json里添加  
![在这里插入图片描述][20200303153131693.png]  
需要手动创建  
![在这里插入图片描述][20200303153225158.png]

## 7.引入插件 ##

插件市场：https://ext.dcloud.net.cn/  
搜索需要用到的插件，例如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200303164831761.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]  
选择项目之后会自动将插件下载到components,并且会自动新建components  
然后根据插件下面的使用方式将代码复制到页面之中。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200303104913319.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx,size_16,color_FFFFFF,t_70
[20200309131636147.png]: /images/20210913/1b858c679c754d58bf5d14320b80ff41.png
[20200309131945157.png]: /images/20210913/b10c601cbadf4f3fa325ba1b064d8c3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/9ca7f59599734b1dbde64cb9c7c95a0c.png
[20200303153131693.png]: /images/20210913/cce4486c28564747a18e096926646ee5.png
[20200303153225158.png]: /images/20210913/e231c49e4b5f456e9f4cca5c4d8c138c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/53a1b8cd1cee40e39e9df58ceab7bf75.png
[20200303164831761.png]: /images/20210913/54ce323f539b4cadae2042d5162e5df1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200303164846655.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx,size_16,color_FFFFFF,t_70