探索：uni-app 相关问题

创建项目

图形界面创建项目：安装 HBuilderX
命令行创建：
- 全局安装 vue-cli：npm install -g @vue/cli
- 创建 uni-app：vue create -p dcloudio/uni-preset-vue my-project
- 运行/发布 uni-app：
  - npm run dev:%PLATFORM%
  - npm run build:%PLATFORM%
    %PLATFORM% 的值可以是：app-plus、h5、mp-alipay、mp-baidu、mp-weixin、mp-toutiao、mp-qq、mp-360、quickapp-webview、quickapp-webview-union、quickapp-webview-huawei
    安装类型声明文件：npm i @types/uni-app -D
uni-app 使用 vue 的语法 + 小程序的标签和 API。

开发规范

为了兼容多端开发，综合考虑编译速度、运行性能等因素，约定如下开发规范：

页面文件遵循 Vue 单文件组件 (SFC) 规范
组件标签靠近小程序规范，详见uni-app 组件规范
接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发

目录结构

一个uni-app工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

编译到任意平台时，static 目录下的文件均会被完整打包进去，且不会编译。非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

资源路径说明

静态资源

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>

@开头的绝对路径以及相对路径会经过base64转换规则校验
引入的静态资源在非h5平台，均不转为base64。
H5平台，小于4kb的资源会被转换成base64，其余不转。
自HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式
App平台自HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致
支付宝小程序组件内 image 标签不可使用相对路径
使用@方式的绝对引入

JS文件引入

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

js文件不支持使用/开头的方式引入
使用@方式的绝对引入

CSS引入静态资源

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
/*=====*/
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

@开头的绝对路径以及相对路径会经过base64转换规则校验
不支持本地图片的平台，小于40kb，一定会转base64。（共四个平台mp-weixin, mp-qq, mp-toutiao, app v2）
h5平台，小于4kb会转base64，超出4kb时不转。
其余平台不会转base64

生命周期

路由

uni-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置页面路由一样。

路由跳转
- navigator 方式
- API 方式
页面栈：框架以栈的形式管理当前所有页面。

运行环境判断

通过process.env.NODE_ENV方式判断

if(process.env.NODE_ENV === 'development'){
  console.log('开发环境')
}else{
  console.log('生产环境')
}

自定义更多环境：
- 假设只需要对单一平台配置，可以 package.json 中配置，在HBuilderX的运行和发行菜单里会多一个出来。
- 如果是针对所有平台配置，可以在 vue-config.js 中配置。

平台判断

编译期判断编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。
1
2
3
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif

运行期判断运行期判断是指代码已经打入包中，仍然需要在运行期判断平台，此时可使用 uni.getSystemInfoSync().platform 判断客户端环境是 Android、iOS 还是小程序开发工具。

switch(uni.getSystemInfoSync().platform){
  case 'android':
     console.log('运行Android上')
     break;
  case 'ios':
     console.log('运行iOS上')
     break;
  default: // 默认为: devtools
     console.log('运行在开发者工具上')
     break;
}

移除Android初次打开请求权限

https://ask.dcloud.net.cn/article/36549https://ask.dcloud.net.cn/article/36549

https://blog.csdn.net/qq_39698208/article/details/125559689https://blog.csdn.net/qq_39698208/article/details/125559689

Android上架指南

https://ask.dcloud.net.cn/article/39073https://ask.dcloud.net.cn/article/39073

App适配自定义导航栏

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8Fhttps://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-%E5%8F%98%E9%87%8F

https://juejin.cn/post/6989821437179592735https://juejin.cn/post/6989821437179592735

https://ask.dcloud.net.cn/article/34921https://ask.dcloud.net.cn/article/34921

当前环境无法运行“VUE2”版本的uni-app应用！

前提
- 使用 Hbuilder X 云打包生成APP
- 本地OS：Windows 10
- Vue 3版本
- 因要适配更低本版的安卓系统，把Vue 3降级为Vue 2
  结果出现：当前环境无法运行“VUE2”版本的uni-app应用！
解决办法：删除项目目录内的your-app/unpackage/cache文件夹，并重新打包。

uni-app部分$refs为undefined