uni-app tabBar 踩坑
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/index/ind ...
uni-app之数据状态改动后页面不刷新踩坑
今天有个需求,在onshow里面执行函数,请求过来一堆代取的包裹(快递),然后勾选之后把数据集合放到一个list里面给后端发过去,这些包裹状态就变成了已取,正常情况下应该是到了下一个界面,但是uni-app的request请求并没有实时更新,这些勾选完的快递还在,只有刷新页面才会消失,我这时候的第一想法是在勾选完之后发送li ...
基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一、项目简介
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5、小程序、App端) 且兼容效果一致。
二、效果预览
在H5、小程序、App端测试效果如下:(后续大图均为APP端)
最新版uniapp+vue3+uv-ui跨三端短视频+直播 ...
使用uni-app开发微信小程序
uni-app 开发微信小程序
详见个人博客:https://shengchangwei.github.io/js-uni-app/ (github.io首次加载较慢)
前言
9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color ...
【记录】解决uni-app 用nginx反向代理出现Invalid Host header问题
之前解决过一次,后来给忘记了,今天又遇到这个问题,现记录一下
修改uni-app的manifest.json文件 - 》源码视图
添加以下代码:
"disableHostCheck" : true //解决127.0.0.1指向其他域名时出现"Invalid Host header"问题
VUE项目遇到此问题也类似解决方案(因为un ...
uni-app 无痛刷新 token 方法
为了给用户一个流畅的体验, token 过期后需要重新请求新的 token 替换过期的 token
前端在请求接口时,和后端定义好了,如果状态码为 401 ,则表明 token 过期,需要前端请求新的 token
流程思路参考: https://www.jianshu.com/p/58f05bf13b7d
大概流程如下:
1.用户登录之后,后端会返回两个 token ,分别为&nbs ...
uni-app开发中的各种问题处理
特别注意:
※:在components下的组件,图片路径用 /static/img/back.png 这样的根路径形式,不要用../static 或者 ../../static 的形式,不然很坑,有些平台不报错也不显示,有些找不到路径。
tips:防止弹窗遮罩时页面可滚动,在弹窗的外层view标签加上 @touchmove.stop.prevent=""
1、关 ...
uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式
一、
1、首先有一个元素
<view class="activity" ref="btn"></view>
2、确认指针指向
this.$refs.btn.$el.getBoundingClientRect()
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
例:
打印出:
可获得 用于描述边框的只读属性——left、top、right、bottom等,单位为像素。除了 ...
uni-app——uni-ui的使用
uni-app——uni-ui的使用
0.2882019.06.09 22:53:34字数 186阅读 2602
1)uni-ui 是全端兼容的基于flex布局的ui库;2)可以使用 npm 的安装使用方式,也可下载相关组件直接使用;3)uni-ui 不支持使用 Vue.use() 的方式安装4)uni-ui 依赖 scss,若是 HBuilderX 中创建的 uni-app 项目,需要在 HBuilderX 中安装 scss 插 ...
uni-app swiper设置自定义高度
话不多少先上图,
大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域。
大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢?
1.点击tab可以切换黄色区域视图
2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动
我的思路 ...
uni-app 图片上传(uploadFile)
uni-app 图片上传在实际操作中的问题
图片在不改变是如何触发接口和uni-app的uni.uploadFile方法里面的字段对应
<template>
<wiew>
<view class="touxiangicon" @click="upload">
<image class="huiyuan_img" :src="image" mode=""></image>
</view>
<view class= ...
uni-app快速入门教程
1、什么是uni-app?
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
即使不跨端,uni-app同时也是更好的小程序开发框架。
2、uni-app适用于哪些人员?
所有的前端开发人员,尤其是a ...
uni-app学习记录01-pages配置项
{
// 每个页面都需要在pages里面去声明配置
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
// 每页里面的style的设置会覆盖globalStyle里面的设置
{
"path": "pages/index/index",
"style": {
"navi ...
uni-app开发APP语音播报功能
最近开发一个代取快递的功能模块,需求是当快递取到之后要给用户一个反馈,也就是以语音提示的方式给用户提示
因为提示的文字是固定的,所以其实思路就是利用文字识别,之后转换为语音进行播报这么一个思路
但是问题就在于客户端如何进行判断快递到达
这边的话是采用,服务人员确认取件---服务器改变状态----给与客户端提示 ...
uni-app实现图片和视频上传功能
使用uni-app实现点击上传,既可以上传视频,有可以上传图片,图片预览,删除图片和视频功能,最终效果如下。uni-app里面没有提供同时上传视频和图片这个插件,只能靠自己手写,
1.页面布局
通过uni-app提供的标签,进行页面布局,这里就不多讲了,uni-app提供的有这个案例,可以直接把他们的样式拷贝 ...
uni-app 事件以及事件绑定
事件修饰符stop的使用会阻止冒泡,但是同时绑定了一个非冒泡的事件,会导致该元素上的catchEventName失效!
prevent可以直接干掉,因为uni-app里没有什么默认事件,比如submit并不会跳转页面。
self没有可以判断的标识
once也 ...
uni-app 事件以及事件绑定
事件修饰符
stop的使用会阻止冒泡,但是同时绑定了一个非冒泡的事件,会导致该元素上的catchEventName失效!
prevent可以直接干掉,因为uni-app里没有什么默认事件,比如submit并不会跳转页面。
self没有可以判断的标识
once也不能做,因为uni-app没有removeEventListener,虽然可以直接在handleProxy中处理,但非常的不优雅 ...
uni-app 组件
组件:
组件时视图层的基本组成单元
<template>
<view>
<tagname property = "value">
content
</tagname>
</view>
</template>
view
scroll-view
swiper
text
rich-text
progress
button
checkbox
form
input
label
picker
radio
slider
switch
textarea
navigator、
open-type String navigate 跳转方式
hover-cl ...
uni-app获取当前位置
uniapp获取当前城市:
官方api:uni.getLocation()获取当前的地理位置、速度。 在微信小程序中,当用户离开应用后,此接口无法调用,除非申请后台持续定位权限;当用户点击“显示在聊天顶部”时,此接口可继续调用。
例:
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('当前 ...
uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一、介绍
运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息、表情(gif图),图片预览、地图位置、长按菜单、红包/钱包、仿微信朋友圈等功能。
二、测试效果
H5 + 小程序 + App端测试效果如下,实测多端效果均为一致。(后续大图统一展示App端)
...