App.vue: <style lang="stylus"> @css { html { --primary: blue; --bg-image: url(https://i.loli.net/2020/10/14/gQq96O4DxRVXSKP.jpg); } html[data-theme='green'] { --primary: green; --bg-image: url(https://i.loli.net/2020/10/14/KdraGmYFC8Wpsz5.

uni-app实现了一套代码,同时运行到多个平台.支持iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具 工具安装 开发uni-app需要安装HBuilder X.下载地址. 下载成功后直接解压即可 简单的配置一下开发偏好:  创建第一个uni-app 点击左上角[文件]>>[新建]>>[项目],选择uni-app模板. uni-app目录结构 目录结构基本和小程序的目录结构相似,只是多了个基础组件的文件夹: un

今天看Dcloud官网更新了个uni-app,据说一套代码三端发布(Android,iOS,微信小程序),果断一试. uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面. OBJECT参数说明 参数 类型 必填 说明 url String 是 需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数.参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔:如 'path?key=valu

本人微信公众号:前端修炼之路,欢迎关注 背景介绍 经过上一篇文章uni-app官方教程学习手记的学习之后,我就着手做这个项目了. 目前已经初步搭出了整体的框架,秉着取之于社会,回馈于社会的原则,我将这个项目开源到GitHub uni-shop,发展壮大uni-app社区.项目肯定有不足和考虑不周之处,欢迎大家指正并提出Issues. 因为这是个真实的项目,为了一名合格的程序员的职业操守,项目真实数据部分并不会开源.为了提高整体的流畅性和帮助自己开发,数据部分采用Easy Mock模拟的假数据.有

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 公司最近在写APP应用到了uni-app  我在写的时候发现了一些路由跳转的问题 . 先说一下关于路由的各个接口把,各参数参数说明详见官网https://uniapp.dcloud.io/api/router?id=navigateto 1.uni.navigateTo(OBJECT)  保留当前的页面跳转到应用内的某个页面,使用uni.navigat

二维码扫描,已经成为当下一款应用不可或缺,同时也是用户习以为常的功能了.uni-app 为我们提供了扫码 API ,直接调用即可. 需求场景 在实际开发中,平台提供的默认扫码界面,并不能满足一些自定义的需求.例如: 非全屏显示 扫码界面文字国际化 扫码框的颜色调整 微信小程序等小程序平台,可以通过 <camera> 组件来实现部分自定义的需求.App 平台需要通过本地 HTML 来实现,即本文要分享的内容. Tips:这里的 App 特指 Android(.apk).iOS(.ipa) 移动应

前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原生APP体验的高性能前端框架,官网:https://dev.dcloud.net.cn/mui/ 个人觉得,mui除了页面设计很接近原生App之外,还有一个特点就是能方便的使用App扩展规范Html5 Plus(http://www.html5plus.org/doc/h5p.html),我们能在它

介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/android.可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置.自动关闭秒数.遮罩层透明度及点击遮罩是否关闭 H5/小程序/App三端效果如下,亲测多端效果兼容性一致.(后续大图均展示App端) 用法 ◆ 弹窗uniPop.vue组件两种引入方式 1.在main.js里引入全局组件 import

作者 | Jeskson来源 | 达达前端小酒馆 uni-app的框架,配置:page.json,manifest.json,package.json,vue.config.js.脚本,应用程序,main.js.日志打印,定时器,生命周期,页面,页面通讯. pages.json文件时用来对uni-app进行全局配置的,它是用来写页面文件的路径,窗口样式,底部的tabbar等,类似于小程序中的app.json的页面管理.这里注意的是定位,在小程序中是在app.json的,而在uni-app中式在m

onPullDownRefresh监听该页面用户下拉刷新事件需要在 pages.json 里开启 enablePullDownRefresh "globalStyle": { } 当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新 uni.startPullDownRefresh(OBJECT) success Function 否 接口调用成功的回调fail Function 否 接口调用失败的回调函数complete Function 否

在小程序中,保持登录状态是很常见的需求,今天就把写一写使用uni-app框架的保持登录状态功能是怎样实现的. 一.场景需求 1.场景:初始打开---登陆---关闭,再次打开---(已登录)上次关闭前的页面 2.cookie:传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写. 3.实现:uni-app 的官网的API 有这样一栏“数据缓存”,而且uni-app框架的主体是 VUE,那么我们就用 uni.setStorage 和 

uni-app写app的内容会与沉浸栏重合在一起,写好好多,都是有点问题的,这次终于找到解决的方法了,与大家分享一下 最简单的解决方式就是配置mainfest.json来关闭沉浸式.即通过打开应用的manifest.json文件,切换到代码视图,在app-plus -> statusbar 下添加immersed节点并设置值为false. "app-plus" : { "statusbar": { "immersed": false },

一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, 在小程序和App端部分功能受限 生命周期:Vue实例生命周期+应用生命周期+页面生命周期 使用uni-app的onReady : 代替vue的mounted 使用uni-app的onLoad : 代替vue的created 注意:不要在选项属性或回调上使用箭头函数,比如 created: () =

一.初步认识 uni-app官网:https://uniapp.dcloud.io/component/README HBuilderX官方IDE下载地址: http://www.dcloud.io/hbuilderx.html 选择版本: 下载App开发版,可开箱即用: 如使用cli方式创建项目,可直接下载标准版 创建uni-app: 工具栏里的文件 -> 新建 -> 项目 -> 选择uni-app,输入工程名 运行uni-app: 快捷键 ctrl+r 选择运行方式 显示项目目录:

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

A页面 <view class="go-to-tab" @tap="gotologin"> 去login页面 </view> msg : [ 'uniapp行业峰会频频亮相开发者反响热烈', 'DCloud完成B2轮融资,uni-app震撼发布', '36氪热文榜推荐.CSDN公号推荐 DCloud' ] gotologin(){ uni.setStorageSync('storage_key', 'hello');//存储一个字符传值 //

又双叒一个uniapp组件 最近有一个选择地址的需求,就写了一个省市区联动选择器. 选择日期使用的picker,就照着它简单的整了一个,使用网络请求城市数据,还用到了vuex组件数据共享. 本来自己整了一个底部弹窗,又在插件市场看到了更好的底部弹窗 :LuPopupWrapper--弹窗容器, 所以就用了这个. 依然发布到了插件市场:http://ext.dcloud.net.cn/plugin?id=708 看一下效果吧 具体实现 css就不贴出来了,下载可以看到. 第一.底部弹出框 <vie

2.0(2019-08-31) 船新版本的信息弹窗组件 插件市场地址:http://ext.dcloud.net.cn/plugin?id=672 可以弹出很多条信息,并单独控制消失时间.点击消失. 用循环来生成很多个弹窗,用this.$refs来传值,并添加数组. 1.布局 <view class="popup_list"> <view v-for="(items,index) of popup_list" :id="items.uui

应用中,保持登录状态是常见需求,本文讲解使用uni-app框架时如何保持用户登录状态. 即:初次进入应用为未登录状态------->登录---------->关闭应用,再次打开--------->为已登录状态 传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态,但是uni-app不支持对cookie的读写.因为uni-app框架的主体是 VUE,所以可以使用  vuex  进行登录态管理. 关于vuex中定义的全局变量和方法需要定义在指定目录的文件内. 即在项目目录

最近在uniapp打包成微信小程序的项目中第一次用到了MQTT.使用比较简单,但是还是遇到了一些问题.在此记录一下. 官方文档:MQTT Github 官方MQTT测试工具:MQTTX.测试工具使用说明 MQTT的js文件:mqtt.min.js 先上一点注意事项: (1) MQTT.js 一个 MQTT 协议的客户端库,用 JavaScript 编写,可用于 Node.js 和浏览器.在 Node.js 端可以通过全局安装使用命令行连接,同时还支持 MQTT ,MQTT TLS 证书连接:值得

uniapp 提交form表单 @submit EventHandle 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId @reset EventHandle 表单重置时会触发 reset 事件 <form @submit="formSubmit" @reset="formReset"