uni-app
文章平均质量分 68
sziitjin
安卓App开发工程师
展开
-
uni-app 手记集。
1、uni-app是一个使用Vue.js开发的前端应用的框架,所以不会Vue.js的小伙伴可以先去看看Vue.js的基础教学。2、.vue文件结构<template> <div class="container"> </div></template><script type="text/ecmascript-6">export default { data(){ return{ ...原创 2024-08-22 13:54:09 · 1348 阅读 · 1 评论 -
十分钟,零基础使用uniCloud完成后端管理系统搭建三
本节主要完成将文章管理功能添加到后端管理系统的菜单栏。原创 2023-06-10 23:15:06 · 470 阅读 · 0 评论 -
十分钟,零基础使用uniCloud完成后端管理系统搭建二
上一节我们已经成功搭建基础版的后端管理系统,这一节我们将利用uniCloud给我们提供的schema2code自动生成代码,快速完成:列表、增加和修改页面创建。原创 2023-06-10 23:00:26 · 1499 阅读 · 0 评论 -
十分钟,零基础使用uniCloud完成后端管理系统搭建一
本文主要是通过uniCloud搭建后端管理系统,适合小白开发者、个人开发者,零后端基础,快速、低成本完成后端管理系统搭建。原创 2023-06-10 22:17:37 · 1877 阅读 · 0 评论 -
Dcloud开发者注册,uniCloud服务空间创建。
启动HBuilderX后,点击工具 --》插件安装,进行下载安装插件;在开发过程中,需要用到某个插件时,HBuilderX也会提示安装。1、注册完成开发者后,点击开发者后台,点击uniCloud,进入uniCloud服务空间列表;2、创建uniCloud服务空间,开发成本5元,购买一个月即可;3、点击创建好的uniCloud服务空间,进入服务空间详情。1、登录dcloud官网,下载HBuilderX开发工具;2、打开HBuilderX开发工具,下载相关开发插件。二、创建uniCloud服务空间。原创 2023-06-10 21:33:08 · 1835 阅读 · 0 评论 -
微信小程序转uniapp:4)微信image等控件的src路径不匹配。
微信小程序转uniapp后,uniapp会自动创建一个static文件夹,并把微信原来的resources文件剪切到static文件下。因此会导致原先image控件的路径无法找到对应的图片(其他资源文件同理),这时候需要手动修改一下。修改前<image src="/resources/images/a.png"></image>修改后<image src="/static/resources/images/a.png"></image>原创 2020-11-18 10:20:29 · 1095 阅读 · 0 评论 -
微信小程序转uniapp:3)微信this.selectComponent获取组件实例不适用uniapp。
在使用微信小程序获取子组件实例对象时,我们通常会使用this.selectComponent("#id"),然而在uniapp上是无法获取到组件对象的。该如何解决这个问题呢?我推荐大家使用 $refs ,顺便介绍一下uni-app $refs的基本用法。$refs的基本用法:一个对象(Object),持有注册过 ref 特性 的所有 DOM 元素和组件实例。简单的说就是通过ref="id"去注册组件,然后使用this.$refs.id获取组件的实例,进而可以使用组建的方法。代码实现:微信实原创 2020-11-17 18:00:44 · 5710 阅读 · 0 评论 -
微信小程序转uniapp:2)微信自定义顶部和底部导航栏不适用uniapp。
由于微信小程序项目使用了自定义顶部和底部导航栏,使用miniprogram-to-uniapp工具转成uniapp后这种报错,ui各种混乱。。。主要原因还是因为微信自定义顶部和底部导航栏不适用uniapp,这可怎么办呢?在此,我建议大家先把自定义导航栏改回原生的,然后转成uniapp后,再使用uniapp的自定义组件去实现自定义顶部和底部导航栏的效果,个人认为只是最快速解决问题的方法。恢复原生底部导航栏1、找到app.json文件,去掉"custom": true"tabBar": {原创 2020-11-17 17:46:59 · 1122 阅读 · 0 评论 -
微信小程序转uniapp:1)如何把原生微信小程序转为uniapp。
背景:今年刚才是接触小程序,刚开始公司要求使用uniapp开发小程序,刚上手uniapp前端就跑了,这会原生小程序也得干。过了几个月原生小程序刚上手,领导说还是把原生小程序转成uniapp,以后统一使用uniapp开发。非常好,喝口水压压惊,继续干。如何把原生微信小程序转为uniapp?百度了一下,非常好,已经有大神开发miniprogram-to-uniapp小程序转换工具,使用HBuilderX插件直接就可以把微信小程序转为uniapp了,当然转换完后会出现一堆报错,需要自己手动去修改。具体原创 2020-11-17 18:03:08 · 10728 阅读 · 3 评论 -
uni-app学习:CSS之文本
1、字体大小font-size:12px;2、文字加线1)下划线:text-decoration:underline2)删除线:text-decoration:line-through3)上划线:text-decoration:overline3、字体加粗font-weight:bold;4、字体倾斜font-style: italic;5、内容居中1)靠左对齐: text-align:left2)靠右对齐:text-align:right3)居中对齐..原创 2020-07-22 17:21:39 · 4896 阅读 · 0 评论 -
uni-app学习:CSS之flex布局居中
1、上下居中(垂直居中)style="height: 40px; background-color: #FFFFFF;display: flex; flex-direction: row; align-items: center;"2、左右居中(水平居中)style="height: 40px; background-color: #FFFFFF; display: flex; flex-direction: row; justify-content: center;"...原创 2020-07-15 14:24:06 · 19314 阅读 · 0 评论 -
uni-app学习:CSS之渐变色
基础线性渐变,从上到下background: linear-gradient(blue, pink);改变渐变方向background: linear-gradient(to right, blue, pink);对角线渐变background: linear-gradient(to bottom right, blue, pink);设置渐变角度background: linear-gradient(70deg, blue, pink);...原创 2020-07-15 14:18:35 · 8806 阅读 · 0 评论 -
uni-app学习:uniapp微信小程序分享页面到微信好友和朋友圈。
1、uniapp微信小程序分享页面到微信好友跟onLoad()同级,直接添加代码onShareAppMessage() {}即可激活微信小程序菜单栏的分享微信好友功能,即转发按钮。2、uniapp微信小程序分享页面到微信朋友圈这个功能是微信2020年7月7日才开通的,目前只支持安卓手机,ios还不支持。代码实现:跟onLoad()同级,直接添加代码onShareTimeline() {}至此已经实现分享微信小程序到朋友圈。那要如何自定义分享内容呢?如下:onSha原创 2020-08-11 11:34:29 · 11450 阅读 · 10 评论 -
uni-app学习:CSS之padding
padding : +数值+单位 或 百分比数值div{padding:5px}设置对象距离四边边距为5px间隔同时可以单独设置左、右、上、下边距离发布设置1、padding-left 设置对象距离左边的边距补白间隔div{padding-left:5px}对象内距离左边补白间距为5px2、padding-right 设置对象距离右边的边距补白间隔div{padding-right:5px}对象内距离右边补白间距为5px3、padding-top 设置对象距离上边的边距补白间隔.原创 2020-07-15 14:20:14 · 4131 阅读 · 0 评论 -
uni-app学习:CSS之圆角篇
1. 指定背景颜色的元素圆角:{ border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px;}2. 指定边框的元素圆角:{ border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px;.原创 2020-07-15 14:17:16 · 10015 阅读 · 0 评论 -
uni-app学习:uni-app最简单的动态给主键设置开关。
如何动态的控制,比如我想通过一个函数去控制一个控件的点击事件是否执行。1、我们给aaa组件增加一个modal函数,这里赋值false。<aaa :modal="false" ></aaa>2、在组件aaa里面增加对应的modal函数。export default { props:{ modal: { type: Boolean, defaul...原创 2020-06-11 18:16:39 · 696 阅读 · 0 评论 -
uni-app学习:uni-app微信小程序获取用户信息
1、编写点击按钮<button form-type="submit" open-type="getUserInfo" @getuserinfo="getUserInfo">点我登录</button>参考微信小程序button:https://developers.weixin.qq.com/miniprogram/dev/component/button.html2、调用api获取用户信息methods: { getUserInfo() {...原创 2020-06-08 17:41:29 · 1532 阅读 · 0 评论 -
uni-app学习:swiper--动态计算swiper高度。
1、知其所以然:为什么要对swiper高度进行动态设置?因为swiper对高度进行了限制,如果你不对高度进行设置会出现如下图效果,导致swiper无法占满屏幕,列表内容显示不全。2、下面来看看具体要实现的效果,效果页面如下:从下图可以知道我们要计算的swiper高度是绿色框部分。所以,绿色框高度 = 紫色 - 红色 - 黑色;明确思路了,下面我们分部计算出各颜色框的高度:1)紫色 :直接使用uni-app的API获取屏幕可见区域的高度,在这里即紫色区域的高度。let.原创 2020-06-08 14:24:52 · 5649 阅读 · 4 评论