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

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封装

1. 创建一个uniapp项目 2. 在项目目录下用npm安装 vuex npm install vuex --save 3. 在项目根目录下创建 store文件夹,在store文件夹中创建 index.js 4. 在index.js中显式地通过 Vue.use() 来安装 Vuex: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) 5.在index.js中创建store 5.1 完整的store目录如下: const st

//store 中 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { author: 'Youngmon' }, mutations: { author(state, newName) { state.author = newName; } }, actions: { } }) export default store /** /

一.在项目的根目录下新建一个store文件夹,然后在文件夹下新建一个index.js文件 二.在新建的index.js下引入vue和vuex,具体如下: //引入vue和vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({//全局变量定义 state: { forcedLogin: false,//是否需要强制登录 hasLogin: false, userN

在做用户登录的过程中,其实最重要的是登录成功后的数据要怎么储存,储存到哪里,这里我分享一个利用vuex来实现用户登录和用户数据留存的方法 vuex代码如下: //引入vue和vuex import Vue from 'vue' import Vuex from 'vuex' //H5配置行 import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) const store = new Vuex.Store({ //全局

1. uni-app学习(二) 1.1. 好用css记录 一定透明度的背景色background: rgba(255,255,255,.6); 1.2. 好用的代码段 store(用户登录) export default { state: { hasLogin: false, //登陆状态 loginProvider: "", //登陆方式 如 微信 openid: null, //应用id address: {}, //收货地址 userinfo: { nickName: "

码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14429616.html 目录 码文不易啊,转载请带上本文链接呀,感谢感谢 https://www.cnblogs.com/echoyya/p/14429616.html uni的生命周期 应用生命周期 页面生命周期 导航跳转和传参 声明式导航:navigator 编程式导航: uni.navigateTo(obj) uni.redirectTo(obj) uni.switchTab

1 路由的跳转 uni.navigateTo({ url:'/pages/home/search' }); //非tabBar页面跳转 uni.switchTab({ url:"/pages/index/index" }) //非tabBar跳转到tabBar页面 2 请求 uni.request({ url: 'https://www.easy-mock.com/mock/5cb6c0b0af031b75d25dc1f5/element/historyComtent', //接口地址

Django1.11配合uni-app发起微信支付! 经过三天的断断续续的奋战,我终于是干动了微信支付.为了以后不忘记,现在来一篇教程,来来来,开干!!! 一.准备阶段 1.准备阶段我们需要去微信官网申请一个小程序或者公众号.获得AppID和AppSecret. 2.去微信商户平台 成为商家,开通JSAPI用来获得商户号和自己配置的钥匙.然后再商户平台上面绑定小程序appid. (点击下面图片进入官方链接!) 在配置里面配置一个自己的key,需要记住后台开发的时候需要! 关联后即可在小程序管理页

手机APP---验证码 最近公司在开发手机APP,app避不可免的就是登录了,emmmm 登录验证码那必须的是有的,我们公司发给我们的图片是酱紫的~~ 这个要求大家应该都能看懂,做这个手机号啊,验证码啊,读秒这些啊,这都emmmm分分钟完成了?但是这个四位数的验证码整整折磨了我四天,啊!!!! 恶龙咆哮~ 其实这个实现 并不难,刚进入页面的时候,获取第一个input的焦点,最大长度为1,输入完成后自动跳到下一个input框,最开始的时候,focus全部为false,跳到是变为true,然后删除时

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

什么是 uni-app 1 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 官方的体验例子: 2 uni-app在跨端数量.扩展能力.性能体验.周边生态.学习成本.开发成本等6大关键指标上拥有极强的竞争优势 . 跨端数量更多 平台能力不受限 性能体验更优秀 周边生态丰富 学习成本低 开发成本低 3 功能框架 使用 uni-app 的前置条件 2.1 规范     为了更好的跨端开发,我们最好还是制定

一.使用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从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 扫码体验,先睹为快 可以扫描下微信小程序的二维码,体验一下开发完毕的效果: 代码地址: GitHub : https://github.com/Tzlibai/uni-app-video -- Star 100+ uni-app插件市场地址: https://ext.dcloud.net.cn/plugin?id=1839 -- 插件下载量

最近在做uni-app项目时,遇到了需要蓝牙打印文件的功能需要制作,在网上找到了一个教程,这里分享给大家. 引入tsc.js 简单得引入到自己所需要得页面中去,本次我们只要到了标签模式,他同时还有账单模式可以选择. // 蓝牙打印 指令和转码 var tsc = require('@components/gprint/tsc.js') 蓝牙适配前期工作 首先我们需要先初始化蓝牙模块,在进行搜索蓝牙.在监听到附近蓝牙设备时,记录他的名称和deviceId. onBlue(e) { uni.open

1 基本介绍 uni-app 是一个基于 Vue.js 的跨端开发框架,一套代码可以发布到 App.小程序.Web 等不同平台 腾讯云开发平台 Cloudbase 提供的 @cloudbase/js-sdk 可以让开发者在 Web 端(例如 PC Web 页面.微信公众平台 H5 等)使用 JavaScript 访问 Cloudbase 服务和资源. 但是 @cloudbase/js-sdk 只支持 Web(浏览器环境)的开发,不兼容其他类 Web 平台(比如小程序).因为这些平台在网络请求.本

话不多少先上图, 大家可以看到图片中红色区域是头部区域,黄色区域则是我们要滑动的区域. 大家可以在uni-app官网上看到swiper高度是默认100%,而swiper-item则是要有固定宽高的,要的效果是什么呢? 1.点击tab可以切换黄色区域视图 2.滑动黄色区域改变视图,支持横向滑动以及纵向滑动 我的思路:因为swiper是要固定高度的,它并不会因为内容而自动撑开,那么我的想法呢就是,1.给swiper一个父元素,父元素设置自适应高度,也就是黄色区域的高度,然后动态赋值给swiper,

1. uni-app学习(三) 1.1. async/await使用 表示异步处理,可使用then函数继续操作,返回的是Promise async function timeout() { return 'hello world' } timeout().then(result => { console.log(result); }) console.log('虽然在后面,但是我先执行'); 先打印下面这句 await是等待的意思,它后面可以放任何表达式,不过我们更多的是放一个返回promise

一.Taro和uni-app的介绍 1.taro的介绍 taro是多端统一开发框架,支持用 React 的开发方式编写一次代码,生成能运行在微信/百度/支付宝/字节跳动小程序.H5.React Native 等的应用. 详细j介绍见官网:https://nervjs.github.io/taro/ 2.uni-app的介绍  uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 详细介绍见官方文档:htt