
uni-app
文章平均质量分 53
以uni-app为框架的一些功能实现
Miraitowa_chole
日拱一卒无有尽,功不唐捐终入海
展开
-
uviewbug之Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loade
uviewbug之Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/sass-loade原创 2022-10-16 10:18:10 · 2143 阅读 · 0 评论 -
#微信小程序# #uni-app# 实现提交表单或登录,需勾选同意协议,才可以进行下一步
#微信小程序##uni-app#实现提交表单或登录,需勾选同意协议,才可以进行下一步原创 2022-07-08 01:06:03 · 7078 阅读 · 3 评论 -
#微信小程序# #uni-app# 使用uni.getUserProfile,实现微信授权登录 (附源码)
#微信小程序# #uni-app# 使用uni.getUserProfile,实现微信授权登录 (附源码)原创 2022-07-08 00:34:58 · 3674 阅读 · 1 评论 -
#微信小程序# 在小程序里面退出退出小程序(navigator以及API--wx.exitMiniProgram)
#微信小程序# 在小程序里面退出退出小程序(navigator以及API--wx.exitMiniProgram)原创 2022-06-25 11:43:17 · 10988 阅读 · 1 评论 -
#vue# element-ui 如何修改类名
#vue# element-ui 如何修改类名原创 2022-02-14 00:58:23 · 3604 阅读 · 0 评论 -
#uni-app#常用函数/api
uni-app里面一些常用的函数,可以让我们更快速去开发小程序原创 2022-02-14 00:20:02 · 2138 阅读 · 0 评论 -
#uni-app#元素节点操作-uni.createSelectorQuery(),实现页面定位
1、需求:使用uni-app,实现点击页面里面的某一个版块,(滚动到)跳转到当前同一个页面的指定位置2、代码示例://定制目标按钮<button class="custom-btn" @click="totarget">定制目标</button>//12月挑战版块,设置id类名<view id="chanllge-month"> <swiper class="challenge-list" :interval="50" > <原创 2021-12-12 17:22:16 · 3633 阅读 · 0 评论 -
#小程序# 如何分享小程序到群聊或者朋友?
#小程序# 如何分享小程序到群聊或者朋友?原创 2021-11-28 21:11:04 · 2305 阅读 · 0 评论 -
#vue# vue阻止事件冒泡
vue里面阻止事件冒泡的方法原创 2022-02-13 23:42:15 · 535 阅读 · 0 评论 -
#前端# 点击列表页跳转到对应的详情页(获取上一页的参数/id)
#前端# 点击列表页跳转到对应的详情页(获取上一页的参数/id)示例:从列表页跳转到详情页效果图:思路:在列表页面:(1)首先通过后端接口数据,将列表页的内容进行循环渲染出来(2)再通过绑定点击事件,在事件里面传入id实参(就是后端返回的数据id)示例:<view v-for="(item, index) in reportList" @click="toDetail(item.id)" >(3)再在method里面的getDeta...原创 2021-10-26 09:16:29 · 7997 阅读 · 3 评论 -
#Vue# 使用getCurrentPages()进行页面传值,获取之前页面的数据
onLoad() { this.init() }, methods: { init() { const pages = getCurrentPages() const prevPage = pages[pages.length - 3] // 数字3为获取上一页面 const prevPage2 = pages[pages.length - 2] // 数字2为获取上上一页面 this.imageUrl = prevPage.$vm._data.imag.原创 2021-10-19 17:10:29 · 3857 阅读 · 1 评论 -
#Vue# #uni-app# 动态修改样式 (附源码)
一、需求:根据内容的不同,显示不同的颜色二、思路:(1)使用v-for渲染出来(2)再在数组中,用一个变量来存放我们的样式(颜色、背景颜色之类)(3)进行绑定样式 进行动态修改类型1:插件:在插件里找到样式参数,进行绑定,例如 :active-color="item.color"代码展示:<template> <view> <view class="calorie-ingest" v-for="(item,inde.原创 2021-10-15 15:38:53 · 1109 阅读 · 0 评论 -
#vue# #uni-app# 使用定位实现文字在图片上显示,且左右滑动(附源码)
思路:(1)排版:使用弹性布局,将页面排列出来,再用v-for循环出来(2)在最大的盒子加overflow-x: scroll; 达到左右滑动(3)使用定位(子绝父相)让文字显示在图片上面源码如下:<template> <view> <!-- 挑战活动版块 --> <view class="examine"> <view class="examine-item" v-for="(item,index) in exam原创 2021-10-15 15:12:53 · 7286 阅读 · 1 评论 -
#uni-app# u-avatar-cropper实现选择图片裁剪,设置用户头像uview (附源码)
(3)选择图片,裁剪图片首先我们需要在模态框处,设置点击事件,唤起操作菜单,然后进行修改操作菜单里面的参数然后在操作菜单这个组件设置点击事件,接入uni.chooseImage这个api,接成功以后,再将将上传的图片赋值给我们定义好的变量数组,接着,我们再使用裁剪插件,监听裁剪ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-app UI框架uView UI,是uni-app生态最优秀的UI框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水htt.原创 2021-10-14 17:02:47 · 5453 阅读 · 5 评论 -
【uni-app】实现获取验证码功能
【uni-app】实现获取验证码功能一、注册界面-获取验证码的需求:情况1:手机号码正确输入手机号码---点击--“获取验证码”---出现“发送中”...---重新获取(60)情况2:手机号码不正确输入手机号码(或没有输入)---点击获取验证码--弹出“请输入“ 正确号码的手机号码 ”的提示框二、思路如下:(1)先进行排版,设置输入框input的参数,初始值(2)绑定点击事件,追加样式(3)在点击事件里面第一步:需要判断手机号码的...原创 2021-09-13 20:05:01 · 16227 阅读 · 10 评论 -
【前端开发】Vue/uview/uni-app,实现登录注册页面
注册的思路: 注册需求: 注册所需的 (1)使用uview的u-form表单组件 先将版式排出来(如果需要额外加样式,就加同样的类名即可) (2)再进行参数的设置 u-form:需要设置:model="form" ref="uForm" +参数列表 u-form-item:需要设置 label="昵称" prop="name" labelWidth="160" leftIcon="phone" +参数列表 u-input:需要设置v-m...原创 2021-09-09 18:33:08 · 9010 阅读 · 1 评论 -
Vue &uni-app(附源码)-----实现登录注册功能
需求:制作一个简易登录界面思路:(1)排版(不细讲)(2)登录密码的input框,我们通过v-if来判断输入框的类型、小眼睛的切换、密码是否隐藏-----输入框的类型设置inputType这个变量的初始值为true<input class="input-phone" type="password" v-model="password" placeholder="登录密码" v-if="inputType" /><input class="input-.原创 2021-09-08 19:06:05 · 7918 阅读 · 0 评论 -
#uni-app 开发项目实战#(附源码) 实现上传图片及预览功能
需求:实现图片上传及预览功能知识点:v-for渲染、数组、api使用、flex布局上传图片与预览的思路及步骤一、上传图片步骤:(1)首先进行排版,排版出我们需要的放图片的位置 》》》》点击参考图片排版教程<template> <!-- 上传图片板块 --> <button @click="chooseImg" >上传图片</button> <view class="choose" > <view原创 2021-09-02 16:03:56 · 1750 阅读 · 0 评论 -
#uni-app 开发项目实战# 下拉刷新,上拉加载数据
一、下拉刷新的思路:第一步:在pages.json里面,找到想要设置下拉刷新的页面,进行配置 加入-----"enablePullDownRefresh":true"enablePullDownRefresh":true第二步:2种方式进行下拉刷新(页面直接刷新法&点击标签法)页面直接刷新法:(1)先写出一些数据内容例如:<template> <view v-for="(item,index) in uplist" cl..原创 2021-09-01 19:54:05 · 691 阅读 · 0 评论 -
#uni-app# 组件复用
前言为什么需要组件复用,那是因为在实际开发里面,往往会有一些重复性的版块,这个时候为了减少代码的书写以及更高效地进行开发,我们就会用到组件复用提示:以下是本篇文章正文内容,下面案例可供参考下面的组件主要是排版相同的组件之间的复用,不涉及传值步骤:第一步:在目录——components里面,右键新建组件“test”第二步:在“test.Vue”组件里面,写出可复用组件的内容第三步:在需要用到复用组件的页面,进行引入、注册、使用复用组件引入:原创 2021-08-30 14:15:33 · 1644 阅读 · 1 评论 -
#uni-app项目配置# uView安装 UI框架
安装之前:确保您下载的Hbuilder X为APP开发版,而非标准版,并且在"工具-插件安装"中安装了"scss/sass编译"插件安装步骤:1、下载地址:https://ext.dcloud.net.cn/plugin?id=15932、导入插件:3、在HBuilder X里面进行引入插件第一步:在目录---main.js里,引入uView库复制下面的代码:// main.jsimport uView from 'uview-ui';Vue.use(.原创 2021-08-25 16:16:30 · 1193 阅读 · 0 评论 -
# uni-app开发-实战总结 # 顶部导航栏制作(uView)
<!-- 页面顶部导航栏 --><view> <u-navbar title="我的赞" title-color="#25AFA2" back-icon-name="nav-back" back-icon-color="#25AFA2" back-text="返回"> </u-navbar></view>本文的顶部导航栏为使用uView的导航栏组件------Navbar..原创 2021-08-25 15:29:18 · 6470 阅读 · 1 评论 -
#uni-app开发项目-实战总结# 底部导航栏
底部导航栏的制作步骤:首先在目录的pages这个文件夹里面,右键新建页面(不超过5个)然后在目录里,打开page.json,在里面的“tabBar”里面进行加上底部栏的跳转地址、图标、文字就可以了 "tabBar": { "color": "#7A7E83", //文字的颜色 "selectedColor": "#25AFA2", //点击图标以后,文字的颜色 "borderStyle": "black", "backgroundColor": "#ff..原创 2021-08-25 14:17:54 · 226 阅读 · 0 评论 -
# uni-app开发攻略 # 个人封面页 (透明导航栏、源码)
需求:制作一个类似于某博的个人主页的封面板块效果图:思路:拿到设计图以后,我们需要先进行拆解页面结构,这个页面主要由三大板块组成:导航栏+背景图+用户信息拆解完结构以后,下一步是进行细分板块,看每一个板块里面有什么特点,会用到什么知识点下面是每个版块的思路及知识点一、导航栏:(tip:这里我们采用的是uview里面的组件——u-navbar,所以第一步是先要在page.json里面的这个页面加上"navigationStyle":"custom")然后我.原创 2021-08-24 18:02:29 · 2625 阅读 · 4 评论 -
#uni-app实战项目开发# 社交软件---用户发布内容界面(制作思路及步骤,附源码)
v-for嵌套式渲染怎么写?项目实例:以一个用uni-app做的app为例,在效果图里一个用户信息板块包括头像签名板块、文章内容板块、图片板块、评论点赞数据板块,通过v-for的方式,进行渲染出来,从效果图中,通常我们都只会先写出一个,再进行渲染,我们可以看出,头像签名板块+文章内容板块 ,这些板块的内容,我们只需要通过一次渲染就可以得到,而我们的图片板块+评论点赞数据板块,就要再进行另外一次渲染,具体要怎么来写呢?...原创 2021-08-24 16:08:21 · 2562 阅读 · 4 评论 -
必看!uni-app开发项目实战教程(12条常遇到知识点)
(1)创建项目:选uni-ui项目在HBuilderX新建uni-app项目的模板中,选择uni ui模板 由于uni-app独特的easycom技术,可以免引用、注册,直接使用各种符合规则的vue组件。在代码区键入u,拉出各种内置或uni ui的组件列表,选择其中一个,即可使用该组件。光标放在组件名称上,按F1,可以查阅组件的文档。(2)引入组件首先先将扩展组件(uni-ui)插件进行引入uni-ui的插件库下载进行引入(3)使用组件例如:制作一个消息列.原创 2021-08-23 17:49:58 · 3748 阅读 · 0 评论