前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >自创-在uniapp使用全局变量

自创-在uniapp使用全局变量

作者头像
waki
发布于 2021-12-08 01:11:17
发布于 2021-12-08 01:11:17
2.1K00
代码可运行
举报
文章被收录于专栏:wakiwaki
运行总次数:0
代码可运行

自创-在uniapp使用全局变量

一、参考文章

uni-app 全局变量的几种实现方式 优点:对uniapp理解的很深刻 uni-app多种设置全局变量及全局变量重新赋值优点:写的很踏实、易用 vue 和 nvue 共享的变量和数据

1、辅助参考:

uniapp里nvue和vue的关系是什么啊?为什么有vue文件了还要再重新为app单独写一份nvue呢 nvue开发与vue开发的常见区别

二、我的做法

第一篇理解uniapp,第二篇实操,加上配置文件融合到vuex里面,既保持结构清晰,又保证vue、nvue数据通用。

1、这样做的原因

  • 公用模块:太麻烦,太乱
  • 挂载 Vue.prototype: 调用时样子挺好看,但是功能欠缺(仅支持vue)
  • globalData: 调用的样子太丑
  • Vuex: 虽然逻辑上很麻烦,但是调用时样子好看,逻辑清晰,功能健全,有利于扩展。但是配置文件直接写在里面感觉很容易混成一团。所以按照PHP的逻辑把这一部分脱离开了。

2、我的代码

common中创建config.js配置文件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default {
	title:'自己创造的写全局配置的方法',
	config_webside:'https://www.baidu.com/',
	obj:{
		title: '子对象',
	}
}

store下index.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//模仿
import Vue from 'vue'
import Vuex from 'vuex'
import config from '../common/config.js'

Vue.use(Vuex)

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token: '',  
        avatarUrl: '',  
        userName: '',
		globalWebside: 'http://139.224.194.158/'	,//http://www.loushizufang.com/以防这个网站备案失效
		config: config
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token = '';  
            state.userName = '';  
            state.avatarUrl = '';  
        }  
    }  
})

export default store

main.js

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Vue from 'vue'
import App from './App'
import store from './store'  

Vue.prototype.$store = store

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

三、涉及知识与问题

weex怎么是原生编译呢? nvue和weex的关系,为什么是vue的更快速版本,又补充了weex的什么缺点?

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/04/14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
uni-app中使用flyio请求_uniapp能否上架
因为最近需要使用uni-app进行小程序的开发,所以最近在搭建小程序的环境,作为一个使用vue的前端小白,自然选择了支持vue的uni-app。但是uni自带的uni.request需要自己封装(因为懒)所以选择了flyio进行请求封装。
全栈程序员站长
2022/10/29
8180
uni-app 全局变量的几种实现方式
注意这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。
高久峰
2023/12/17
4940
uni-app 全局变量实现的4种方式
注意:这种方式只支持多个vue页面或多个nvue页面之间公用,vue和nvue之间不公用。
Javanx
2019/09/04
19.3K0
uni-app 全局变量实现的4种方式
uni-app开发H5使用vue-router
在uni-app项目根目录 执行 npm install uni-simple-router
代码哈士奇
2021/03/15
3.1K0
uniapp页面间通信相关方法总结
uni-app 是一个使用 vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
前端达人
2021/06/16
4.5K0
测试平台分支-小程序端-3-小程序登录(上)
一年没更新了,今天本地运行了下都快忘了写啥了。ε=(´ο`*)))唉现在的行情还是多学习吧。
怪盗LYL
2023/09/15
2980
测试平台分支-小程序端-3-小程序登录(上)
用Promise封装UniApp的request请求
刚刚发现官方现在已经自己支持了,可以直接用不用像下面这样封装了,不过封装也不影响。
零云
2023/07/24
7680
Uni-APP高仿抖音|uniapp直播+小视频+聊天实例
uniapp-ttLive 一款使用uni-app+uview-ui开发的跨端短视频/直播聊天项目。
andy2018
2021/09/23
4K1
Uni-APP高仿抖音|uniapp直播+小视频+聊天实例
uni-app 前后端分离情况下的请求中间件(构建header和全路径等)
躺平程序员老修
2023/09/05
5010
uniapp动态底部tabbar_微信小程序开发例子
公司要求开发一个小程序,要求二种不同权限的人群都可以使用,使用时根据不同的权限,获取不同的tabbar,以及展示对应不同的内容。
全栈程序员站长
2022/11/01
2.6K0
uniapp动态底部tabbar_微信小程序开发例子
【积水成渊】uniapp高级玩法分享
在 uni-app 中,我们可以通过全局配置来为整个项目进行统一设置。全局配置放置在 src/main.js 文件中的 Vue.config 对象中,具体可参考官方文档。以下是一些常用的全局配置项:
淼学派对
2023/10/14
2230
【积水成渊】uniapp高级玩法分享
【有问必答】搭建uniapp项目流程手把手教学
前段时间,博友加本狗微信,询问uniapp的学习方法。本狗资历浅薄,没有专门学过uniapp,只能将自己日常开发uniapp的基本流程和步骤进行分享,希望可以略尽绵薄之力。感谢如下图所示的博友朋友的询问支持,大家的支持才是我进步的动力。
JavaDog程序狗
2024/10/07
1720
【有问必答】搭建uniapp项目流程手把手教学
walletConnect连接钱包
https://docs.walletconnect.com/quick-start/dapps/client#sign-message-eth_sign
高大北
2022/06/14
3.1K0
walletConnect连接钱包
【Vue.js——Bug修复】消失的 Token(蓝桥杯真题-2424)【合集】
此时输入用户名后回车/点击确定,数据发生改变,但还是停留在登录页,无法正确显示登录成功界面。
Rossy Yan
2025/02/11
1110
【Vue.js——Bug修复】消失的 Token(蓝桥杯真题-2424)【合集】
uni-app+vue仿微信聊天APP界面|uniapp仿微信朋友圈
基于uniapp+vue仿微信聊天室uniapp-chatroom项目,vue语法及类似小程序api开发原生APP应用,实现了发送图文消息、表情(gif动图),图片预览、地图位置、红包、仿微信朋友圈等功能。
andy2018
2019/10/10
10.5K3
uni-app+vue仿微信聊天APP界面|uniapp仿微信朋友圈
uniapp仿抖音App界面|uni-app小视频
Uni-liveshow直播室是一个基于vue+Nvue+uniapp技术开发的集仿制抖音小视频/App聊天/直播功能混合项目。可实现类似抖音上下滑动切换视频播放,支持编译到多端。
andy2018
2019/11/15
9.2K0
uniapp仿抖音App界面|uni-app小视频
2.封装axios、本地存储,安装vuex、element
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 Element 一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
RtyXmd
2018/08/30
1.4K0
2.封装axios、本地存储,安装vuex、element
uniapp实现简单登录注册
可以看到弹窗供你选择,这个地方是因为我们的ctrl+y与删除行重复了,所以需要选择
阿超
2022/08/16
7K3
uniapp实现简单登录注册
测试平台分支-小程序端-4-小程序登录(下)
怪盗LYL
2023/09/15
2240
测试平台分支-小程序端-4-小程序登录(下)
用户登录的步骤你知道吗
1.前端将用户名和密码调用接口传给后端。 2.后端收到请求,验证用户名和密码是否正确,验证成功,返回一个token。 3.前端拿到token后,存储到localStorage和vuex中,并进行页面跳转。 4.前端每次跳转路由,都要判断localStroage有无token,没有则跳转登录页,有则跳转至对应路由页。 5.每次调用后端接口,都要在请求头中携带token。 6.后端判断请求头中有无token并验证,验证成功则返回数据,验证失败或没有token则返回401。 7.如果前端拿到401的状态码,则清空token信息并跳转登录页。
zhouzhouya
2023/10/26
3070
相关推荐
uni-app中使用flyio请求_uniapp能否上架
更多 >
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文