uniapp使用记录

1. 通过HBuilderX工具创建的uniapp项目，编译器在项目的plugin目录中.
2. 运行命令npm run dev: 输出类型 例如微信小程序npm run dev:mp-wixin
3. 项目中的 静态资源 例如图片视频等只能放在static目录下
   
4. 全局应用的配置在App.vue中、
5. 配置appid等在manifest.json中
6. 配置页面的路由路径、页面呈现设置、全局的tab菜单、导航条等在pages.json中。包括分包加载的路由和分包加载的规则。
7. 图片或者文件的引入支持@的绝对路径和相对路径
8. 在css文件或者style中可以使用相对路径和绝对路径

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

9. 判断环境： process.env.NODE_ENV判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

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

10. 判断平台
    编译期判断:

// #ifdef H5
  alert("只有h5平台才有alert方法")
// #endif

代码运行时的判断为通过获取当前设备类型来做一些兼容处理。在开发者者工具中，返回的devtools。最好在真机进行调试

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

11. 使用@import语句可以导入外联样式
12. page 相当于 body 节点，可以设置全页面的背景样式等。这和taro、阿里商家应用一致。
13. uniapp提供特殊css变量
    –status-bar-height 系统状态栏高度
    –window-top 内容区域距离顶部的距离
    –window-bottom 内容区域距离底部的距离
    使用方式 var(--status-bar-height)。可以用来做一些兼容性的处理等。
14. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。
    .test2 {
    background-image: url(’~@/static/logo.png’);
    }
15. uni-app 支持在 template 模板中嵌套 和 ，用来进行 列表渲染 和 条件渲染。
16. npm包的使用

  import package from 'packageName'
  const package = require('packageName')

17. 在uniapp中使用ts方式 ：在 vue 文件的 script 节点声明 lang=“ts”
18. 在uniapp中使用各平台的自定义组件时、需要根据不同平台创建存在自定义组件的目录。并在pages.json中配置哪个页面要使用自定义组件。
    
19. 使用登录时先调用服务商支持，再调用登录接口
    
    可将一些方法实例到vue的原型