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 请求 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 ...
uni-app picker-view不显示问题
这样的代码在uni-app中不显示，刚开始以为是框架问题导致不能使用，
<picker-view v-show="true" :value="value" @change="bindChange">
<picker-view-column>
<view class="item" v-for="item in toDayList" :key="item">
{{ item }}
</view>
</picker-view-column>
<picker ...
uni-app 蓝牙打印功能
uni-app 蓝牙打印功能
本章主要讲解 uni-app蓝牙API的使用，蓝牙打印的实现思路，了解蓝牙在项目中的使用。支持的蓝牙打印机设备：芝佳蓝牙打印机、佳博打印机，如其他蓝牙打印机，需自己进行调试。感谢qihang666提供的代码。源码来源以及uni-app蓝牙API：
https://github.com/qihang666/BluetoothPrinterhttps://uniapp.d ...
uni-app 顶部tabbar切换
完成样式
项目地址：https://gitee.com/jielov/uni-app-tabbar
顶部tabbar代码
<!--顶部导航栏-->
<view class="uni_tab_bar">
<view class="uni_swiper_tab order_top">
<block v-for="(tabBar,index) in tabBars" :key="index">
<view class="swiper_ta ...
uni-app上传图片视频音频
在写上传的功能时候，发现uni.choosefile上传文件不支持app，所以就自己写了一个上传的方法。、
首先写了一个上传文件的组件。、，用input写成的。
<view class="content" style="opacity: 0; position: absolute; bottom: 0; width: 0rem; height: 0rem;" >
<view ref="input" class="i ...
uni-app无法设置Request请求头Referer解决办法
uni-app Request请求设置请求头Referer参数
首先看到uni-app官网提供的文档来看是不支持伪造或修改请求头中的Referer参数的，但我们也有一种解决这个问题的办法。
解决办法：
我这里先说一下解决思路，前端没法设置Header中的Referer但不代表后端不能伪造请求头呀。我们的解决思路就是通过后端服务器 ...
uni-app指纹识别登录
uniapp使用指纹识别功能，一般有2种方式：官方api验证或用plus.fingerprint进行验证，下面分别讲解一下。
使用指纹识别的基础是需要开启指纹识别的权限：首先需要获取得到权限，在 manifest.json文件中配置
一、官方生物认证API
官方生物认证说明：https://uniapp.dcloud.io/api/system/authentication
...
uni-app开发经验分享十五： uni-app 蓝牙打印功能
最近在做uni-app项目时，遇到了需要蓝牙打印文件的功能需要制作，在网上找到了一个教程，这里分享给大家。
引入tsc.js
简单得引入到自己所需要得页面中去，本次我们只要到了标签模式，他同时还有账单模式可以选择。
// 蓝牙打印 指令和转码
var tsc = require('@components/gprint/tsc.js')
蓝牙适配前期工作
首先 ...
uni-app 设置沉浸式的状态栏
uni-app 想要实现最顶部（手机预览包含电量信号的位置）， 改成我们自己想要的，可以是透明状态
解决方案：
在pages.json文件中设置
1、全局取消原生导航栏，注释或者删除即可。
2、在每个页面单独配置style，当navigationStyle设为custom或titleNView设为false时，原生导航栏不显示：
{
"path": "pages/index/index" ...
Uni-app工程转vue-cli工程步骤
Uni-app工程转vue-cli工程步骤
一、全局安装vue-cli
// 安装之前需要安装node,npm,安装方法自行百度
npm install -g @vue/cli
二、创建一个空的uni-app工程
//使用正式版（对应HBuilderX最新正式版），my-project项目名称不支持驼峰式命名
vue create -p dcloudio/uni-preset-vue my-project
//执行命令会先安装uni-app ...
uni-app通过canvas实现手写签名
分享一个uni-app实现手写签名的方法
具体代码如下：
<template>
<view >
<view class="title">请在下面输入签名：</view>
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
<view class="footer">
<view class="left" @click="f ...
