uni-app使用总结(1)

一、uni-app在项目中安装新插件或者升级时，经常会出现运行不了的各种错误：

## npm install 后报错：
```
1、getPlatformCopy is not a function
解决： npm update（还不行就 npm cache clean --force，npm install）
2、有时可能网络有问题，删掉node_modues多安装几次依赖（或到网络好的地方多安装几次）
```

二、跨域问题

## uni-app h5 本地跨域
```
1.右键打开Chrome桌面快捷方式（已打开的Chrome网页请先关闭），点击“属性”进入到“快捷方式”选项卡，再选中“目标”项，添加“--disable-web-security --user-data-dir”
2.添加后以后，点击“应用”→“确定”，关闭后，再启动Chrome浏览器即可！
```

三、数据实时更新问题（业务逻辑问题）

```
1、onShow函数在页面每次显示及执行
2、在onLoad uni.$on监听一个事件，通过uni.$emit 触发事件，uni.$off销毁监听。
3、在vue

四、有 input 框的页面，手机端 input 被键盘挡住等各种情况

```
1、有定位为 fixed，absolute的尽量避免这样的定位，用margin、padding等代替
2、如必须 fixed、absolute定位，则动态监听页面高度，检测键盘是否提起，相应的改变 input 的高度
```

五、框架自带上拉刷新下拉加载不好用，可以使用插件：mescroll

六、uni-app h5页面切换动画（该方法源自uni-app插件市场）

```
1、index.vue:


2、index.css:
/* #ifdef H5 */
uni-page {
	opacity: 0;
}

uni-page.animation-before {
	/* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
	transform: translateY(20px);
}

uni-page.animation-leave {
	transition: all .3s ease;
}

uni-page.animation-enter {
	transition: all .3s ease;
}

uni-page.animation-show {
	opacity: 1;
}

uni-page.animation-after {
	/* 在页面上使用 transform 会导致页面内的 fixed 定位渲染为 absolute，需要在动画完成后移除 */
	transform: translateY(0);
}

/* #endif */

2、App.vue:
1) import pageAnimation from './components/page-animation'
2) mixins: [pageAnimation],

```

七、uni-app 时间格式问题 new Date(str) IOS系统跟Android系统不兼容

```
new Date("2019-12-12") 在IOS系统上显示是NAN。

原因是 IOS系统只识别 " / " 不识别 " - ". 

解决：var newDate = new Date(date.replace(/-/g, '/'));

 

八、组件生命周期：

在组件中，没有生命周期，比如页面a引用了组件b 在组件b中，onLoad，onShow，onReady全部失效，不过用created和mounted是生效的

九、uni-app升级

1、

## 更新需求说明
```
一、app升级采用两种方式：
1、整包升级：适用于大版本更新，runtime发生变化时（模块、配置、版本等变化）必须使用此更新方法（即下载整个安装包，重新安装）
2、应用资源升级：适用于小版本更新 。runtime不变，前端页面整体压缩包更新（即下载部分更新文件，安装替换部分文件）

二、升级步骤：
1、查询是否有新版本更新
2、下载新版本
3、安装新版本

三、相关需求说明：
1、后端返回数据结构，如下：
1）检测是否需要更新接口：
{
  "appid":"", //app id
  action: "all", // 后台设定更新方式：如 整包更新 = all ，应用资源独立升级 = sth,
	wgtUrl: '', // 应用资源独立升级下载地址
  "iOS":{
    "version: "1.0.0", // iOS新版本号，如：1.0.0"
    "note": "", // iOS新版本描述信息，多行使用\n分割
    "url": "" // Appstore路径，如：itms-apps://itunes.apple.com/cn/app/hello-h5+/id682211190?l=zh&mt=8
  },
  "Android":{
    "version": "1.0.0", //Android新版本号，如：1.0.1
    "note": "", // Android新版本描述信息，多行使用\n分割
    "url": "" // apk文件下载地址，如：http://www.dcloud.io/helloh5p/HelloH5.apk
  }
}
```
## 热更新
```
上架审核期间不要弹出热更新提示
热更新内容使用https下载，避免被三方网络劫持
不要更新违法内容、不要通过热更新破坏应用市场的利益，比如iOS的虚拟支付要老老实实给Apple分钱
```

2、检测并升级方法简易封装

创建一个update.js文件

/**
 * 判断应用升级模块，从url地址下载升级描述文件到本地local路径
 * [email protected]
 *
 * 升级文件为JSON格式数据，如下：
{
  "appid":"HelloH5",
  action: "all", // 整包更新 = all ，应用资源独立升级 = sth
  "iOS":{
    "version":"iOS新版本号，如：1.0.0",
    "note":"iOS新版本描述信息，多行使用\n分割",
    "url":"Appstore路径，如：itms-apps://itunes.apple.com/cn/app/hello-h5+/id682211190?l=zh&mt=8"
  },
  "Android":{
    "version":"Android新版本号，如：1.0.1",
    "note":"Android新版本描述信息，多行使用\n分割",
    "url":"apk文件下载地址，如：http://www.dcloud.io/helloh5p/HelloH5.apk"
  }
}
 */
export function checkUpdate (checkUrl, wgtUrl) {
  // 锁定屏幕方向
  plus.screen.lockOrientation('portrait-primary') // 锁定
  // 检测升级
  uni.request({
    url: checkUrl, // 检查更新的服务器地址
    data: {
      appid: plus.runtime.appid,
      version: plus.runtime.version,
      imei: plus.device.imei
    },
    success: res => {
      console.log('success', res)
      if (res.statusCode == 200 && res.data.isUpdate) {
        const openUrl = plus.os.name === 'iOS' ? res.data.iOS : res.data.Android // 下载文件地址 ios以"itms-apps://"开头，后面跟appstore上应用地址。
        // 提醒用户更新
        uni.showModal({
          title: '更新提示',
          content: res.data.note ? res.data.note : '是否选择更新',
          success: showResult => {
            if (showResult.confirm) {
              if (res.action === 'all') {
                // 整包更新
                // plus.runtime.openURL(openUrl)
                updateAppAll(openUrl.url)
              } else {
                // 应用资源独立升级
                downWgt(wgtUrl) // 下载升级包
              }
            }
          }
        })
      }
    }
  })
}

/** 整包更新 */
function updateAppAll (openUrl) {
  if (plus.os.name === 'iOS') {
    plus.runtime.openURL(openUrl)
  } else {
    var dtask = plus.downloader.createDownload(openUrl, {}, function (d, status) {
      if (status === 200) {
      // 下载成功
        var path = d.filename
        console.log(d.filename)
        plus.runtime.install(path) // 安装下载的apk文件
      } else {
      // 下载失败
        alert('Download failed: ' + status)
      }
    })
    dtask.start()
  }
}

/** App资源在线升级更新 */
// 下载wgt文件
function downWgt (wgtUrl) {
  plus.nativeUI.showWaiting('下载更新文件...')
  plus.downloader.createDownload(wgtUrl, { filename: '_doc/update/' }, function (d, status) {
    if (status == 200) {
      console.log('下载更新文件成功：' + d.filename)
      installWgt(d.filename) // 安装wgt包
    } else {
      console.log('下载更新文件失败！')
      plus.nativeUI.alert('下载更新文件失败！')
    }
    plus.nativeUI.closeWaiting()
  }).start()
}
// 更新应用资源包（wgt文件）
function installWgt (path) {
  plus.nativeUI.showWaiting('安装更新文件...')
  plus.runtime.install(path, {}, function () {
    plus.nativeUI.closeWaiting()
    console.log('安装更新文件成功！')
    plus.nativeUI.alert('应用资源更新完成！', function () {
      plus.runtime.restart()
    })
  }, function (e) {
    plus.nativeUI.closeWaiting()
    console.log('安装更新文件失败[' + e.code + ']：' + e.message)
    plus.nativeUI.alert('安装更新文件失败[' + e.code + ']：' + e.message)
  })
}

3、在App.vue中引入：import { checkUpdate } from '@/utils/update'，并在onLaunch中使用：

 // #ifdef APP-PLUS
    checkUpdate(this.checkUrl)  // checkUrl = 检测是否需要升级的接口
 // #endif