今天在写uni-app设计的时候,界面图片.图标规格一直无法正常显示.查看了uni-app官网的代码注释后,发现了在style中设置<style lang="scss"> </style>就可轻松调整好所有图片的格式,非常的方便,在uni.scss文件中预置了一批scss变量. 但是需要注意的是在使用uni.scss时候,需要下载安装scss 插件:并在使用的时候在 style 节点上加上 lang="scss". <style lan

前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然,有好处肯定也有不好的地方,那就是坑.踩坑的地方很多(没踩过坑肯定是没有深入使用uni-app),如果有坑自己尝试了而没有办法处理,建议添加官方QQ群或者到官方论坛提问或者搜索.这次的封装跟axios没多大区别,也是异步请求,但是这个是直接把uni-app的自带API请求uni.request二次封装

使用create-react-app脚手架搭建初始化项目 > npm install -g create-react-app > npx create-react-app my-app create-react-app构建的项目默认使用css语法,但是隐藏的webpack配置中配置支持了css/sass/scss 要想使用less/scss及全局样式/变量首先需要执行npm run eject命令暴露webpack等配置文件等信息 该操作不可逆,会在项目根目录中生成config(配置文件)和s

对uni.request的一些共同参数进行简单的封装,减少重复性数据请求代码.方便全局调用. 先在目录下创建 utils 和 common 这2个文件夹 utils 是存放工具类的,common 用来放置常用方法的 之后在utils 中创建 requset.js 用来放置 uni.request 的请求方法,在对其进行简单的封装. requset.js 代码 import operate from '../common/operate.js' // vuex 的使用 详情参考官网 https:/

在使用uni-app实现小程序的时候,设置左图的右圆角不生效,样式也都没有问题,在模拟器上也可以正常现实,手机上样式出现差别,现有以下解决方法: 设置整个圆角,然后左边使用margin-left:-30upx,隐藏左边多余的圆角 代码如下: <cover-view class="video-mask-btn"> <cover-view class="video-mask-btn-left"> 视频步骤 </cover-view>

uni-app的API中,showToast的icon值只有success,loading,none三种显示,失败没有图标.如果失败时需要显示图标,就要用到自定义图标 image 了. uni.showToast({ title: '扫码失败', image:'/static/lost.png', //要写根路径,不要写相对路径 duration: 3000, }) 结果如下: 特别注意:在components下的组件,图片路径用 /static/lost.png 这样的根路径形式,不要用…/s

封装一个uniapp请求 新建一个http.js文件封装uni.request const BASE_URL = process.env.NODE_ENV === 'development' ? '' : 'http://localhost:3000' //开发环境与生还环境的基地址 export const request = (http) => { const { url, data, method } = http return new Promise((resolve, reject)

初始效果: 解决方法: 给带有边框的元素设置如下样式margin:0 0 -borderwidth -borderwidth 这里的borderwidth即为边框的宽度,按照上图所示,则添加样式 margin: 0 0 -1px -1px; 预览效果:

解决办法:使用escape进行文件名编码 uni.downloadFile({ url: url, success: function(res) { var filePath = res.tempFilePath; //打开文件有效值 doc, xls, ppt, pdf, docx, xlsx, pptx uni.openDocument({ filePath: escape(filePath), success: function(res) { uni.hideLoading(); that

在开发 uniapp 的时候发现默认 style 是不支持 scss 模式开发样式,这样的话使用 --status-bar-height 就没有办法变成想要的数值了,这时候就需要开启 scss 支持. 在 HbuilderX 工具 -> 插件安装 找到 scss/sass编译 安装 在 style 中 添加 lang 属性 <style lang="scss"> .status_bar { height: var(--status-bar-height); width

一.安装依赖 npm i node-sass@4.14.1 sass-loader -D 二.在脚手架版本新建项目成功后,官方为我们准备了uni.scss文件,在这个里面写即可全局使用. ... 一.安装依赖 npm i node-sass@4.14.1 sass-loader -D 二.在脚手架版本新建项目成功后,官方为我们准备了uni.scss文件,在这个里面写即可全局使用. ... 一.安装依赖 npm i node-sass@4.14.1 sass-loader -D 二.在脚手架版本新

uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/

作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,main.js.日志打印,定时器,生命周期,页面,页面通讯. pages.json文件时用来对uni-app进行全局配置的,它是用来写页面文件的路径,窗口样式,底部的tabbar等,类似于小程序中的app.json的页面管理.这里注意的是定位,在小程序中是在app.json的,而在uni-app中式在m

动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容:如果存在下拉刷新,下拉刷新会从导航栏上面开始下拉加载,解决方案可采用offset偏移量,自定义下拉圈出现的位置优点:可根据实际业务场景,开发符合自己UI的样式1.会覆盖手机屏幕状态栏,解决方法:1.1.要把状态栏的位置从前景部分让出来,可写一个占位符div <view class="statu

uni-app在创建时,工程目录下会有个uni.scss文件,我们可以直接在里面定制化scss变量. 全局scss中的坑: 1.如果要引用全局外部scss文件,可以考虑在uni.scss这个系统全局scss文件内引用,其他地方引用暂不生效. 注意:在uni.scss文件中的scss样式,在打包微信小程序时会给每个vue页面的css文件都加上这些样式,如果样式过多会造成项目体积过大无法编译二维码. 2.使用全局scss样式可以直接写在App.vue里面的style标签里,记得给style标签加上l

此文章借鉴于https://blog.csdn.net/fuyuumiai/article/details/109746357,在此基础上修改小部分内容,适用于我这种uniapp小白 介绍: 现在我们要满足的项目需求是根据登录用户角色的不同,tabBar的数量和内容显示不同,如下图 用户角色为管理员时: 用户角色为普通用户时: 登录用户的角色不同,因为权限不同所以tabBar的内容和数量也不同,而uniapp中tabBar本身的配置   uni.setTabBarItem(OBJECT)   只

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14427845.html 目录 码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14427845.html 环境搭建 创建uni-app 运行uni-app 介绍项目目录,文件作用 页面外观设置 页面底部 tabBar 启动模式配置 condition 数据及事件绑定 组件使用 uni-app中的样式 条件注释实现跨端兼

rtvue-lowcode低代码开发平台 rtvue-lowcode一款基于uniapp框架和uview组件库的低代码开发平台,项目提供可视化拖拽编辑器,采用MIT开源协议,适用于app.小程序等项目开发. 对于客户端/浏览器端开发人员,真正意义的上做到了开箱即用! 目前项目正在研发中,已经实现的功能如下:表单组件,自定义表单,抽奖转盘,图表. 相信开发完毕之后,本项目将会是一个非常nice的工具,能够极大减小企业app端开发成本. 项目预览地址 Project Preview Address

在前面随笔的介绍中,我们已经为各种框架,已经准备了Web API.Winform端.Bootstrap-Vue的公司动态网站前端.Vue&Element的管理前端等内容,基本都是基于Web API基础的.完成这些基础准备和布局后,我们继续将技术的触角放到使用Vue语言开发小程序的场景中,本篇随笔介绍使用uView UI+UniApp开发微信小程序,介绍使用准备过程中的一些注意点和经验总结. 1.小程序的开发准备工作 我们在开发小程序之前,需要了解一些基本的知识,以及掌握一些常规的开发工具,相关知

前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.Web(响应式).以及各种小程序(微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝).快应用等多个平台. 1.1 软件安装 创建uni-app有两种,一个是通过 HBuilderX 可视化界