uni-app入门

一、uni-app简单介绍

什么是uni-app

uni-app是使用Vue.js开发跨平台应用的前端框架，开发者编写的一套代码，可编译到iOS、Android Q、H5、小程序等多个平台

uni-app的优点

跨平台发行，运行体验更好

• 与小程序的组件、api一致；
• 兼容weex原生渲染，增加了开发效率高，但是由于wexx坑比较多，建议还是使用局部渲染优化；
• 支持Vue语法，微信小程序API

二、创建项目

1、安装HBuilderX
HBuilderX内置相关环境，无需配置node.js、vue等。

• 小提示：ctril+N可以快速调到新建选择类型
  
  2、创建uni-app
  
  3、运行项目
  
  4、页面样式与布局
  （1）尺寸单位
  uni-app支持一下css单位：
  
  注意问题： 动态绑定的 style 不支持使用 upx，因为upx是编译器处理的，在手机端动态修改样式赋值时，无法直接使用 upx。

解决方案： 使用 uni.upx2px(Number) 转换为 px 后再赋值。

（2）样式导入

<style>
    @import "../../common/color.css";
    .colorA {
        box-shadow: none;
    }
</style>

（3）内联样式
支持 style 和 class来控制样式，但建议不要在style中直接使用，影响渲染速度。

（4）背景图片 和 字体图标

• 图片小于 40kb，uni-app 会自动将其转化为 base64 格式；
• 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。
• 本地引用路径仅支持以 ~@ 开头的绝对路径（不支持相对路径）

/* 背景图片 */
 .bgImg {
     background-image: url('~@/static/logo.png');
 }
/* 字体图标 */
 @iconImg {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }