前端之 uni-app 研究学习 day_1

作者：黎燃

2022 年 6 月 12 日
本文字数：1424 字
阅读完需：约 5 分钟

uni-app

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

vue.config.jsvue.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 了，作为一个前端开发者，必须要了解一下。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/72edf8225b0c4547c310b751d】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

前端之 uni-app 研究学习 day_1

uni-app

实操

结尾

黎燃

评论