uni-app 图片上传
uni.uploadFile(OBJECT)
将本地资源上传到开发者服务器,客户端发起一个POST请求,其中content-type为multipart/form-data.
如页面通过uni.chooseImage等接口获得一个本地资源的临时危机路径后,可通过此接口将本地资源上传到指定服务器。
OBJECT 参数说明:
参数名
类型
必填
说明
平台支持
url
String
是
开发者服务 ...
uni-app使用
uni-app的基本使用
课程介绍:
基础部分:
目录uni-app的基本使用--uni-app介绍 官方网页--环境搭建--利用HbuilderX初始化项目--运行项目--介绍项目目录和文件作用全局配置和页面配置--通过globalStyle进行全局配置--创建新的message页面--通过pages来配置页面--配置tabbar----使用tabbar的midButton相关--condition启动模 ...
uni-app 导航组件 navigator
navigator:页面跳转
属性说明
属性名类型默认值说明平台差异说明
url
String
应用内的跳转链接,值为相对路径或绝对路径,如:"../first/first","/pages/first/first",注意不能加 .vue 后缀
open-type
String
navigate
跳转方式
delta
Number
当 open-type 为 'navigate ...
uni-app 表单及表单组件
表单:用于数据的收集和数据的提交
官网地址:https://uniapp.dcloud.io/component/
1.button组件
属性说明
属性名类型默认值说明生效时机平台差异说明
size
String
default
按钮的大小
type
String
default
按钮的样式类型
plain
Boolean
false
按钮是否镂空,背景色透明
&nb ...
uni-app 事件及事件绑定
事件修饰符
stop 的使用会阻止冒泡,但是同时绑定了一个非冒泡事件,会导致该元素上的catchEventName失效。
prevent 可以直接干掉,因为uni-app里没有什么默认事件,比如submit并不会跳转页面。
self 没有可以判断的标识
once 也不能做,因为uni-app没有removeEventlistener,虽然可以直接在handleProxy中处理,但非常的不 ...
uni-app pages.json配置和tabBar使用
pages.json 配置页面
{
"pages": [ //pages数组中第一项表示应用启动页,可以随时换成自己想要的默认的启动页
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{//每建立一个.vue页面都要在pages ...
uni-app 路由与页面跳转
文章目录
保留当前页面,跳转到应用内的某个页面
关闭当前页面,跳转到应用内的某个页面
关闭所有页面,打开到应用内的某个页面
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
关闭当前页面,返回上一页面或多级页面
窗口动画
关键点
跳转到 tabBar 页面只能使用 switchTab 跳转
navigateTo, ...
uni-appios端app白屏问题
hbuilder版本高于3.0.0,则此方法不适用,使用最新的 https://www.cnblogs.com/qdjj/p/15196221.html
最近开发了一款使用uni-app做框架的app
打包上线后发现在ios端项目在后台运行时内存不足重回页面时当前tabbar页面是正常,但是其他tabber页会白屏
但是安卓端没有遇到这种问题,看了官方文档配置了
"kernel" : { ...
uni-app 坑
1.fixed定位
在H5中,tabbar,顶部导航栏,系统状态栏(手机信号,电量显示等)包含在内容区,H5在定位时,需要算上这些高度(如果页面中存在这个元素的话)
解决办法:使用条件编译,针对不同的平台设定不同的top值
position: fixed;
top:var(--window-top);
/* #ifdef MP-WEIXIN || APP-PLUS */
top:0;
/* #endif ...
uni-app中封装axios请求
uni-app中封装axios请求
安装
安装axios
npm install axios --save
安装qs
npm install qs --save
配置
在src/下新建一个utils/request.js
import axios from "axios"
import qs from "qs"
import Vue from "vue"
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = proces ...
uni-app tabBar中间按钮 之 midButton
midButton 中间按钮 仅在 list 项为偶数时有效 , 需要App 2.3.4+、H5 3.0.0+以上版本
midButton 属性说明
属性类型必填默认值描述
width
String
否
80px
中间按钮的宽度,tabBar 其它项为减去此宽度后平分,默认值为与其它项平分宽度
height
String
否
50px
中间按钮的高度,可以大于 tabBar 高度, ...
uni-app 使用笔记
1.前言
也不知道是我水平菜还是文档太烂,这个框架使用的过程中踩了无数的坑,屡次想砸键盘,最后贫穷让我平复了心情。为了纪念这段操蛋的日子,我决定把这些坑都记录下来。
2.数据请求
在实际的项目中,数据请求需要配合一些UI效果,例如请求数据时展示'loading'效果,数据回来后又要取消这种'loading'效果,既然每次都要使 ...
uni-app 请求 uni.request封装使用
对uni.request的一些共同参数进行简单的封装,减少重复性数据请求代码。方便全局调用。
先在目录下创建 utils 和 common 这2个文件夹
utils 是存放工具类的,common 用来放置常用方法的
之后在utils 中创建 requset.js 用来放置 uni.request 的请求方法,在对其进行简单的封装。
requset.js 代码
import operate f ...
uni-app 实现APP的版本更新
在index.vue 中的onload方法里面或者app.vue中的onLaunch中添加如下部分:
```
update() {
var _this = this;
uni.request({
url: `${this.$store.state.apiBaseUrl}/users/versions`, //请求接口
method: 'POST',
success: result => {
if (result.data.code == 1) {
plus.runti ...
uni-app页面导航栏透明背景
效果:
代码:
// pages.json ,需要的页面添加 {
"path": "pages/ServiceHome/ServiceHome",
"style": {
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "transparent",
"navigationBarTextStyle": "white ...
uni-app开发经验分享十九: uni-app对接微信小程序直播
uni-app对接微信小程序直播
1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件
2.添加直播组件后->点击<详情> 记录这两个参数直播插件的appid和最新版本号
3. 打开项目,找到manifest.json这个文件
代码:
"plugins" : {
"live-player-plugin" : {
...
uni-app下使用vant组件
uni-app下使用vant组件
1. 创建uni-app
下载打开HbuilderX,注意这里下载app开发版的。然后创建新项目,创建的时候选择uni-app默认模板
2. 下载vant组件
vant的GitHub下载地址下载完成后解压,然后在项目更目录下创建文件夹wxcomponents,注意这里的wxcomponents目录级别和pages在同一级别,然后再该目录下创建vant目录。回 ...
uni-app 自定义 简单 底部tab
项目地址:https://gitee.com/jielov/uni-app-tabbar
先创建三个页面 分别为 home.vue , classify.vue, my.vue 。 以下为基础样式
创建一个 base_tab 为主页面,在base_tab 引入先前创建好的三个页面,关于组件的引用可自行去官网查看
//导入组件
import Home from '@/components/home'
import C ...
uni-app中组件传值(父传子,子传父)
一、父组件向子组件传值
通过props来实现,子组件通过props来接收父组件传过来的值!
1、逻辑梳理
父组件中:
第一步:引入子组件;
1 import sonShow from '@/component/son.vue';
第二步:在components中对子组件进行注册;
1 components: {
2 sonShow
3 },
4
第三步:以标签的形式载入;通过数据 ...
uni-app 获取地址位置
uni.getLocation
获取当前的地理位置、速度。 在微信小程序中,当用户离开应用后,此接口无法调用;当用户点击“显示在聊天顶部”时,此接口可继续调用
uni.getLocation({
type: 'wgs84 ',
success: function (res) {
console.log('经度:' + res.longitude);
console.log('纬度:' + res ...