uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富的插件生态.支持编译到h5.小程序及App等多个终端平台. 如上图:编译到h5+小程序+App端效果 ◆ 准备 在项目根目录components下新建ua-navbar和ua-tabbar组件. 在main.js中全局引入组件. // 引入自定义组件 import NavBar from './co

简单封装一下 uni-app 的请求,因为项目中只用 post 请求,所以只封装了 post 和 all 方法. 更新,新增 spread 方法 2019-11-22 10:37:21 global.http = { timer: null, beenLoginPage: false, post: (url, data, loading) => { if (loading) { uni.showLoading({ mask: true }) } return new Promise((resol

我们知道一个项目中对于前期架构的搭建工作对于后期的制作有多么重要,所以不管做什么项目我们拿到需求后一定要认真的分析一下,要和产品以及后台沟通好,其中尤为重要的一个环节莫过于封装接口请求了.因为前期封装好了,后面我们真的可以实现粘贴复制了.所以今天小月博客给大家分享一个在uni-app中如何封装一个request请求. 第一步.根目录下新建 config.js 文件 const config = { base_url: '这里可以是生产环境或者测试环境' } export { config } 这

封装一个uniapp请求 新建一个http.js文件封装uni.request const BASE_URL = process.env.NODE_ENV === 'development' ? '' : 'http://localhost:3000' //开发环境与生还环境的基地址 export const request = (http) => { const { url, data, method } = http return new Promise((resolve, reject)

效果图: view <canvas id="radar-canvas" class="radar-canvas" type="2d"></canvas> style .radar-canvas width 550rpx height 550rpx margin 0 auto script <script> import { toRpx } from "@/utils/common" cons

找到上面这个 文件,不管是用 命令创建 还是 用 HBX 创建,都一样会有这个文件的,然后跟着截图复制粘贴就好了. // 这是配置本地能跨域的,或者你可以直接让后端给你设置请求头,避免了跨域. "devServer" : { // "disableHostCheck" : true, //禁止访问本地host文件 ( 个人建议注释掉这一行,不然很有可能会请求不到 ) // "https" : true, // "port" :

export default { doRequest(method, url, data) { // 如果data为空 if (!data) var data = [] var arr = [] arr.push(data) //我司项目需要验证state和openid,我登录后存在本地 var state = uni.getStorageSync('state'); var openid = uni.getStorageSync('openid'); arr[0].state = state;

基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive. uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目.支持全屏丝滑般上下滑动切换小视频,迷你时间进度条,Nvue解决视频层级显示,可编译兼容H5+小程序+APP端. ◆ 一览效果 编译至 [小程序+H5+App端] 效果如下 ◆ 运用技术 编辑器:HbuilderX 3.1.21 框架技术:Uniapp+Vue.js+Nvue+Vuex UI组件库:uView-ui^

相信大家在平时开发过程中都会遇到这两类问题: 很多中小型企业要快速开发一个产品,这个产品至少需要覆盖平台范围为:ios.Android.web/H5.微信/支付宝小程序,那么需要的投入的人力成本.时间成本.维护成本会很高,然而每个老板的想法都是“又想马儿跑,又想马儿不吃草”这样的思想,成本严格把控,这个时候咋办? 作为程序员,每个人都会接私活,现在已经不像诺基亚时代那样,客户的需求仅仅只是一个web页面那么简单了,大多客户的需求就是 ios.Android.微信小程序.web/H5 这四大平台缺

一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图),图片预览.地图位置.长按菜单.红包/钱包.仿微信朋友圈等功能. 二.测试效果 H5 + 小程序 + App端测试效果如下,实测多端效果均为一致.(后续大图统一展示App端) 二.技术选型 编辑器:HBuilder X 技术框架:uni-app + vue 状态管理:Vuex iconfont图标:阿

 前端跨平台框架 之uniapp入门浅析 技术的发展总日新月异,处在风口,前端技术的发展尤为迅速,跨平台的概念也在前端流行起来.从最早期PhoneGap.lonic.Cordova,到近年来的ReactNative.weex.flutter,前端开发者在跨平台方面的探索从未停止过.趋势使然,类似uniapp框架出现在前端技术圈是技术发展潮流下的必然产物.作者自己也对uniapp框架进行了探索和实践,下面从几个方面介绍这一框架及其用法,欢迎大家踊跃讨论 一.什么是 uni-app? uni-app

最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯js的项目,利用一些html5plus能力,或者使用mui来编写手机app. 我调研了一下,uniapp和h5+(mui为代表)的差异和优缺点如下所示. 技术类型 优点 缺点 uniapp 可以使用unipp封装的组件和api,有海量的插件可以从插件市场中找到.兼容多端,也可以用html5plus的

1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV === 'development'){ // 开发环境 url_config = 'https://*****.com/' }else{ // 生产环境 url_config = 'https://*****.com/' } export default url_config 2.uni.request封装

uni-app,vue,react,Trao之缓存类封装 一,介绍与需求 1.1,介绍 缓存主要分为如下几个 1.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览器上,除非主动删除,是不会过期的.LocalStorage采用的是键值对的方式进行存储,存储方式只能是字符串.存储内容可以用图片.json.样式.脚本等. API基本使用方法: 1.1.localStorage.setItem() 存储 1.2.localStorage.getItem() 获取数

前言 之前写了一个Vue.js的axios二次封装(点击跳转),这次是uni-app,uni-app是基于vue.js框架的,我觉得是很好用的一个框架,而且一套代码编译那么多平台,非常节省成本,当然,有好处肯定也有不好的地方,那就是坑.踩坑的地方很多(没踩过坑肯定是没有深入使用uni-app),如果有坑自己尝试了而没有办法处理,建议添加官方QQ群或者到官方论坛提问或者搜索.这次的封装跟axios没多大区别,也是异步请求,但是这个是直接把uni-app的自带API请求uni.request二次封装

之前在接触uniapp做小程序项目时候,因为不太熟悉,遇到了不少尴尬的时刻,请求方法的封装算是灵魂啊有木有,今天看到有人问题,就把我自己写的发出来让大家参考一下吧. 请求方法的封装我一般用的是promise+axios,因为uniapp有自己规定的请求方式,只好结合着来了.话不多说,直奔主题. export const baseUrl = '您的域名' function getHeaders () { let token = getToken() let header = { "token&qu

对uni.request的一些共同参数进行简单的封装,减少重复性数据请求代码.方便全局调用. 先在目录下创建 utils 和 common 这2个文件夹 utils 是存放工具类的,common 用来放置常用方法的 之后在utils 中创建 requset.js 用来放置 uni.request 的请求方法,在对其进行简单的封装. requset.js 代码 import operate from '../common/operate.js' // vuex 的使用 详情参考官网 https:/

在项目 main.js 同级创建 utils 文件夹, utils里创建 config.js文件,存储重要参数 // 获取平台信息 const { system, } = uni.getSystemInfoSync() // 请求服务器环境,xxx 在这里是填充,请自行替换 let baseUrl = ['http://xxx', 'https://xxx'] // 小程序重要参数 uni.config = { platform: system.startsWith("iOS") ?

1.  websocket.js   封装代码 //是否已经连接上ws let isOpenSocket = false //心跳间隔,单位毫秒 let heartBeatDelay = 3000 let heartBeatInterval = null //心跳时发送的消息文本 let heartBeatText = "PING" //最大重连次数 let reconnectTimes = 10 let reconnectInterval = null //重连间隔,单位毫秒 let