uniapp踩坑史

前端开发 / 虫二创建于 4年前 / 阅读数 1170 / 评论数 2 / 1秒前

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。但是初次接触难免会遇到种种奇葩至极的坑，为了以后不栽倒在同一条河，所以就有了这篇踩坑系列。uniapp官网

项目创建

Jenkins自动化部署(不依赖HbuilderX) 使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目
```
npm install -g @vue/cli
vue create -p dcloudio/uni-preset-vue my-project
```
动态组件
```
<component v-bind:is="currentTabComponent"></component>
```
notice: 小程序、app不支持。

包裹元素

<template/> 和 <block/> 并不是一个组件，它们仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性，用来进行条件渲染和列表渲染。

禁止蒙版下的页面滚动
```
@touchmove.stop.prevent
```
路由跳转
navigateTo, redirectTo 只能打开非 tabBar 页面。
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
不能在 App.vue 里面进行页面跳转。
H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录。

选择媒体文件

返回媒体临时文件(blob:http://xxxx), 但是我们所需要的大多数情况下是它所对应的Blob对象
将blob url转化为Blob对象-----发送本地ajax请求
```
// blobUrl 转化为 BLOB
blobUrlToBLOB(blobUrl, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", blobUrl);
  // 改变mime类型
  xhr.responseType = "blob";
  xhr.onload = function () {
     callback(this.response);
  };
  xhr.send();
},
```
更改全局背景色

globalStyle中设置 backgroundColor不生效，解决：App.vue中设置
page:{background-color:red}

自定义组件上v-show 不生效

解决：
- 1）v-if;
- 2）自定义组件外包裹一层view ，view组件中添加v-show
  emplate ,script中引用本地图片
  
  解决：绝对路径，如‘/static/images/1.png’