uni-app

UNI-APP添加顶部导航栏并且更换图标 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。 开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。 记录一下更换顶部导航栏的流程 最终效果图 在page.json里的配置项 { "path": "pages/my/index", "style": { "app-plus": { "titleNView": { "buttons": [{ "text": "\ue605", "fontSrc": "/static/iconfont.ttf", "fontSize": "22px", "float": "left" }, { "text": "\ue606", "fontSrc": "/static/iconfont.ttf", "fontSize": "22px" } ] } } } }, 更换图标 1.在阿里巴巴矢量图选择自己喜欢的图标，然后点击收藏 收藏图标 2.右上角下载全部已经收藏了的图标 下载 3.在编辑器打开已经下载的文件,把文件里的iconfont.ttf丢到static文件夹里，然后再打开iconfont.css里查看unicode编码 unicode编码 4.最后把对应图标的编码填写到page

uniApp原生导航栏 uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框，只需在page.json里面做一些配置即可。设置app-plus，dcloud平台对app-plus做了详细说明： app-plus配置 ，不过目前暂支持H5、App端，不支持小程序。 在page.json里配置app-plus即可 { " path " : " pages/ucenter/index " , " style " : { " navigationBarTitleText " : " 我的 " , " app-plus " : { " titleNView " : { " buttons " : [ { " text " : " \ue670 " , " fontSrc " : " /static/iconfont.ttf " , " fontSize " : " 22px " , " float " : " left " }, { " text " : " \ue62c " , " fontSrc " : " /static/iconfont.ttf " , " fontSize " : " 22px " } ], " searchInput " :{ ... } } } } }, 那么如何监听按钮、输入框事件？ uni-app给出了相应API

一、介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom，实现了发送图文消息、表情(gif图)，图片预览、地图位置、长按菜单、红包/钱包、仿微信朋友圈等功能。 二、测试效果 H5 + 小程序 + App端测试效果如下，实测多端效果均为一致。( 后续大图统一展示App端 ) 二、技术选型 编辑器：HBuilder X 技术框架：uni-app + vue 状态管理：Vuex iconfont图标：阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件：uniPop（基于uni-app封装模态弹窗） 测试环境：H5端 + 小程序 + App端（三端均兼容） 高德地图：vue-amap ◆ 顶部导航栏headerBar 顶部导航栏采用的是自定义模式，具体可参看这篇文章： uni-app自定义导航栏按钮|uniapp仿微信顶部导航条 在pages.json里面配置globalStyle，将navigationStyle设为custom时，原生顶部导航栏不显示，这时就能自定义导航栏 "globalStyle": {"navigationStyle": "custom"} ◆ 引入公共样式/组件及全局弹窗 import Vue from 'vue' import App from '.

在小程序中，保持登录状态是很常见的需求，今天就把写一写使用uni-app框架的保持登录状态功能是怎样实现的。 一、场景需求 1、场景：初始打开---登陆---关闭，再次打开---（已登录）上次关闭前的页面 2、cookie：传统应用保持登录状态的方式是通过读取 cookie 来判断是否是登录状态，但是uni-app不支持对cookie的读写。 3、实现：uni-app 的官网的API 有这样一栏“数据缓存”，而且uni-app框架的主体是 VUE，那么我们就用 uni.setStorage 和 vuex 进行登录状态管理。 二、实现过程 1、vuex的声明和使用 请看 《 uni-app 使用Vuex+ （强制）登录 》 2、在store/index.js 中 3、在App.vue 　　每次进入应用前，由App.vue 中的周期函数进行监听，所以在加载函数中定义方法，从本地缓存中取出用户数据，然后调用login方法，不需要发起网络登录请求。 这样就实现了，只有不清除本地缓存，每次打开小程序应用时，都是登录状态 三、总结 看到文档，有同步和异步这两种缓存数据，那么关于同步缓存和异步缓存的区别： 以Sync结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。 通俗点说,同步就是你下步操作需要上一步必须完成才能往下执行

uni-toolkit 是什么 uni-toolkit（以下简称 toolkit） 是一个用于辅助 uni-app 开发的工具（集）。toolkit 不是开发框架也不是应用插件，它作用于 uni-app 代码编译前，旨在增强 uni-app 的开发体验。 讲完这些，可能还是没有交代清楚 toolkit 到底是干什么的。各位莫急，请继续往下看。 它的由来 近期团队考虑将微信小程序（以下简称 mina）迁移到 uni-app 来，在进行测试的过程中发现了一处 mina 与 uni-app 存在较大差异的点。 mina 每个页面都有一个 .json 文件。 uni-app 的所有页面配置都在 pages.json 这一个公共的文件中。 uni-app 的这种设计意味着，每当有页面的配置需要改变，就要去操作 pages.json 这个文件。在多人协作开发时，这样做可能会使得开发人员经常应对 pages.json 文件的冲突。 到这里可能有人会问：mina 中新增/减少页面，需要操作 app.json 文件，同样会造成文件冲突呀？ 关于这一点，团队一直以来的应对策略是这样的： 通过脚本扫描 pages 目录，自动生成 app.json 的 pages 节点信息。 普通开发人员只需提交页面相关文件，就可以保证其他人的页面信息是同步的。 另外 app.json 中其它项的变动，并不会那么频繁。

自学uni-app第一天，因为有一点点的小程序和vue的基础所以感觉对uni-app有一点点的亲切感，从今天呢开始着手从登录页学习uni-app，记录一些用到的知识点，欢迎大家一起学习。 启动页隐藏顶部导航栏 这个可能用到的场景也只有登录也或者一些单页面了，话不多说直接上代码。 在 pages.json文件 style:{"app-plus":{"titleNView":false}}即可实现单页面隐藏顶部导航的效果。 同样是在 pages.json 里配置 "app-plus":{"titleNView":false}即可实现全局隐藏导航栏 得到的效果： ok，隐藏uni-app顶部导航栏就到这里，根据学习进度持续分享学习知识点， 来源： oschina 链接： https://my.oschina.net/u/4357035/blog/3313856

Android 用HBuilder的DCloud公用证书即可 HBuilderX uni-app打包成apk安装到手机 首先要登录，没有帐号可以注册，接着点击运行—原生App-云打包，配置完后点击打包，首次打包，提示说appid不能为空，跳转出基础配置页面，点击云端获取，接下来再次打包就可以顺利完成了 Android 包名：对应 信息 io.dcloud.UNI8BEE30E 基础配置中的uni-app 应用标识的值 Apple 苹果开发者账号。 苹果的开发者账号分两种：一种是不能在商店上线但可以直接安装使用的，一种是用于商店上线的。 准备证书 以上步骤完成后就可以开始打包了。 在HBuilder内打开H5项目，打开manifest.json，填好相关信息，如各SDK的key，app的启动页等。配置完成后，点击顶部菜单栏中的 在iOS开发者证书这一栏中填入刚才创建的APP IDS，输入刚才导出证书时填写的密码，并选好对应的文件。通过HBuilder打包后，得到了后缀名ipa的安装包 来源： oschina 链接： https://my.oschina.net/u/4261771/blog/3400020

iOS13+ 系统开始支持苹果登录，需要在登录界面进行判断，是否ios，如果是，需要添加苹果登录 苹果登录示例 uni.login({ provider: 'apple', success: function(loginRes) { let iosopenid=loginRes.authResult.openid // 获取用户信息 uni.getUserInfo({ provider: 'apple', success() { //在这里获取到苹果手机的ID后可以继续你的操作，请求后台进行登录 } }); }, fail: function(err) { uni.showToast({ icon: 'none', title: err, duration: 2000 }); } }); 技术文档： https://ask.dcloud.net.cn/article/36651 来源： oschina 链接： https://my.oschina.net/u/4259287/blog/4254108

一、前言、scroll-view基本属性： 前言： 　　前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示（在我这个页面中同时使用了三个scroll-view做数据展示），因为这几个展示的内容的数据都比较的多，因此为了页面的数据加载顺畅决定使用上拉加载（简单的说就是数据分页显示）。 页面组成如下图所示： scroll-view属性说明： 属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 scroll-top Number 设置竖向滚动条位置 scroll-left Number 设置横向滚动条位置 scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡 enable-back-to-top Boolean false

本教程和全套源码已经开源在OSChina码云上，会持续更新，最新版本请访问 https://gitee.com/goeasy-io/GoEasyDemo-Live-Chatroom.git 最近两年直播那个火啊，真的是无法形容！经常有朋友问起，我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢？ 今天小编就手把手的教你用GoEasy做一个聊天室，当然也可以用于直播间内的互动。全套源码已经开源，git地址： https://gitee.com/goeasy-io/GoEasyDemo-Live-Chatroom.git 本教程主要目的是为大家介绍实现思路，为了确保本教程能帮助到使用不同前端技术的朋友，采用了HTML + JQuery的方式，后续还会推出Uniapp(nue/nvue)和小程序版本，大家可以持续关注。 我们这次要实现的聊天室，有两个界面，分别是： 登录界面 聊天室界面 登录 对于登录界面，我们期望： 用户可以输入自己的昵称 用户可以选择自己喜欢的头像 用户可以选择进入不同的聊天室（直播间） 实现步骤 登录界面的实现，不用多说，因为真的是So Easy! 一个简单的界面，只包含三个简单的逻辑： 验证是否输入昵称 验证是否选择一个头像 根据选择进入相应的聊天室 下边重点讲一下聊天室的实现。 聊天室（直播间） 当我们进入一个聊天室后，我们期望：