uniapp
文章平均质量分 76
掌握uniapp的基础知识
༺鲸落༻
Life is transient
展开
-
在uniapp小程序中使用阿里云OSS上传图片(有部分视频教程)
1. 前言这是本人毕业设计中其中一个功能点,就是用户在微信小程序(使用uniapp框架)中的社区模块中可以发布个人动态,其中动态可包含图片,那么我们发布的图片在实际开发中不会直接放到项目中吧,因为那样会是整个项目体积变大,所以我想利用阿里云的OSS把发布成功的图片自动上传到它那里,同时数据库会存放上传成功的图片路径,然后在前端中调用后端接口显示出来。2. 实现效果(最后放个演示视频吧)3. 实现思路...原创 2021-07-17 17:03:43 · 9285 阅读 · 16 评论 -
在uniapp微信小程序中实现无限级评论(vue递归组件+Java构建所有评论树状结构)
1. 前言这是本人毕业设计中其中一个功能点,就是用户在微信小程序(使用uniapp框架)中的首页模块中可以对健身资讯进行评论或者社区模块对别人发布的动态进行评论。2. 实现效果(最后放个演示视频吧)3. 实现思路(1)首先,在前端页面中编写好一个递归组件,然后在资讯详情模块引用。为什么要搞个递归组件?因为,这么多的评论它们肯定是一个树状结构,树状结构得用递归呈现(2)第二步,就是需要在服务端编写一个接口,查询数据库中所有资讯评论把它们构造成一个树状结构了,我这里使用java语言编写逻辑代码原创 2021-06-24 17:35:50 · 6373 阅读 · 17 评论 -
如何在微信小程序中使用高德地图api查询附近周边信息并标志多处位置(uniapp)
1. 前言这是本人毕业设计中其中一个功能点,就是用户在微信小程序(使用uniapp框架)中的运动模块中有个选项卡可以查询附近健身房。我尝试过使用腾讯地图、百度地图和高德地图的api来实现此功能,前两者(腾讯、百度)都以失败告终(无法显示出健身房位置标记),大概是自己菜吧 ????????????。为了使读者们避免踩更多的坑以及记录一下自己怎么实现这个功能,我有必要总结一下。????????????2. 实现效果(最后放个演示视频吧)上图,可以看到显示我当前位置的附近有哪些健身房,我自定义了最多显示原创 2021-06-23 12:25:57 · 8279 阅读 · 8 评论 -
uniapp小程序 日期显示几秒前,几分钟前,几小时前
1. 创建一个js文件(建议放在通用的文件夹)//datetime 格式为2019-11-22 12:23:59样式//将时间转换成几天前,几个月前,几小时前等function timeago(datetime) { //dateTimeStamp是一个时间毫秒,注意时间戳是秒的形式,在这个毫秒的基础上除以1000,就是十位数的时间戳。13位数的都是时间毫秒。 var dateTimeStamp = Date.parse(datetime.replace(/-/gi, "/")); var min原创 2021-01-02 16:35:27 · 1354 阅读 · 0 评论 -
js正则表达式去除富文本中img标签的width、height、style宽高等属性
<view class="content"> <rich-text :nodes="replaceSpecialChar(news.detail)"></rich-text></view>methods: { init() { this.$u.api.getDetailById({ id: this.id }).then(res => { this.news = res.data; })原创 2020-12-21 17:32:15 · 4087 阅读 · 2 评论 -
uniapp上拉页面实现loading加载效果(配合uView)
前言在开始之前,你务必在项目中安装并配置好 uView,安装 配置这里就不再详细说怎么安装配置了,官方文档已经说得很清楚了,不懂在评论区留言 ????重要代码<view class="loading" v-if="isShow"> <u-loading mode="circle" color="blue" size="29"></u-loading> <text>正在加载更多</text></view>var原创 2020-12-19 20:43:52 · 5751 阅读 · 1 评论 -
8 | uniapp的自定义组件如何改标题
由于这个是自定义组件,不是单个页面,所以需要在每个自定义组件的文件中,使用setNavigationBarTitle修改页面的标题mounted() { // 修改页面的标题 uni.setNavigationBarTitle({ title: "专辑" }); }原创 2020-08-31 15:57:26 · 881 阅读 · 0 评论 -
7 | uni-ui和uni-api的介绍和使用
1、uni-ui(1)介绍(2)使用方式1. npm安装参考:https://ext.dcloud.net.cn/plugin?id=552. 单独安装组件 如果你没有创建uni-ui项目模板,也可以在你的工程里,单独安装需要的那个组件,点击每个组件在详情页面可以导入组件到项目下,导入后直接使用即可,无需import和注册。<template> <view> <uni-badge text="1"></uni-badge> <u原创 2020-08-28 23:21:21 · 757 阅读 · 0 评论 -
6 | uniapp生命周期
6 | uniapp生命周期常用生命周期参见uniapp生命周期原创 2020-08-28 23:18:35 · 125 阅读 · 0 评论 -
5 | uniapp之组件的使用
1. 组件的简单使用(1)定义组件在项目的根目录下新建一个文件夹components用来存放组件在components目录下直接新建组件 *.vue注意: 使用脚手架开发时,要在src目录下文件夹components(2)引入组件在页面中引入组件 import 组件名 from ‘组件路径’(3)注册组件在页面的实例中,新增属性components属性components是一个对象,把组件放进去注册(4)使用组件在页面的标签中。直接使用引入的组件 “<组件><原创 2020-08-28 23:17:56 · 1253 阅读 · 0 评论 -
4 | uniapp之事件的使用
4 | uniapp之事件的使用(1)传参的事件(2)可传自定义属性的事件原创 2020-08-28 14:16:17 · 439 阅读 · 0 评论 -
3 | uniapp的基本语法
数据显示<template> <view> <!-- 1 直接使用数据 --> <view>{{msg}}</view> <!-- 2 在标签上通过属性来使用数据 --> <view :data-color="color"></view> </view></template><script> export default { data() {原创 2020-08-28 14:12:01 · 372 阅读 · 0 评论 -
2 | uniapp的样式与sass
(1)支持小程序的rpx 和 h5的vw、vh(2)sass的使用脚手架的方式HBuilderX的方式要下载scss/sass编译插件代码示例<template> <view class="sass"> sass </view></template><script> export default { data() { return { }; } }</script>&原创 2020-08-28 14:08:15 · 247 阅读 · 0 评论 -
1 | uniapp学习之旅
什么是uniapp?uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。开发方式使用 Dcloud 公司提供的 HBuilderX 来快速开发使用脚手架来快速搭建和开发两种方式创建完目录结构是有一定的不同,因为使用脚手架来快速搭建和开发会产生node的相关配置...原创 2020-08-28 14:07:02 · 247 阅读 · 0 评论