前端之uni-app研究学习day

uni-app

前端之uni-app研究学习day_1_css

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app内部兼容了vue的写法，用于跨平台，可以同时支持android、ios，多家主流小程序，以及H5，可以说是很全面的一个框架

实操

样式导入如下：
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

<style>
    @import "../../common/uni.css";

    .uni-card {
        box-shadow: none;
    }
</style>

由于在H5端，不存在原生导航栏和tabbar，也是前端div模拟。如果设置了一个固定位置的居底view，在小程序和App端是在tabbar上方，但在H5端会与tabbar重叠。此时可使用–window-bottom，不管在哪个端，都是固定在tabbar上方。

<template>
    <view>
        <view class="toTop">
            <!-- 这里可以放一个向上箭头，它距离底部tabbar上浮10px-->
        </view>
    </view>
</template>    
<style>
    .toTop {
        bottom: calc(var(--window-bottom) + 10px)
    }
</style>

manifest.json：
manifest.json 文件是应用的配置文件，用于指定应用的AppID、名称、打包版本、启动页、图标、APP功能模块、权限、原生插件、H5配置、小程序配置等。

uni.scss
uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。

vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：vue.config.js
有一个问题：
根据头像的颜色来渲染页面的背景色，但是有跨域的问题，图片的存放地址必须和项目的存放地址必须在同一域名下。

<canvas style="width: 600rpx; height: 400rpx;" canvas-id="firstCanvas" id="firstCanvas"></canvas>

getColor() {
        const ctx = uni.createCanvasContext('firstCanvas')    
  ctx.drawImage(this.workInfo.logo, 0, 0, 111, 111)   
  ctx.draw()
  setTimeout(()=>{
    uni.canvasGetImageData({
        canvasId: 'firstCanvas',
        x: 100,
        y: 100,
        width: 1,
        height: 1,
        success(res) {      
      if(res.data[0] == 255 && res.data[1] == 255 && res.data[2] == 255 && res.data[3] == 255){
              
      }else {
           that.bgColor = "linear-gradient(to right, rgba("+res.data[0]+","+res.data[1]+","+res.data[2]+","+res.data[3]+"), #999999)"
              
      }
      
        },
        fail(res){
              
        }
            
    })
  },1000)
  },

结尾

开发工具，uni-app 有 HbuilderX 开发工具，代码书写的舒适度远高于小程序厂家自己的开发工具。
开发工具集成了 sass / less 专业级CSS扩展语言。
uni-app 增加了许多实用的接口，比如【页面通讯】相关的API，这是解决跨窗口调用传参的一把好手。
使用了 Vue.js 的语法，编码比小程序原生语法要舒服的多。
1.更新视图更加方便；
2.可以使用Vue的计算属性；
3.可以使用Vuex。

最近开始学习uni-app了，作为一个前端开发者，必须要了解一下。