无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装

uni-app也像小程序一样有 globalData ，这是一种简单的 全局变量 机制 globalData 是简单的全局变量，如果使用状态管理，请使用 vuex

项目文件结构

1.在 main.js 中导入store文件。

2.组装模块并导出 store

3.定义cart.js模块(这里以购物车为例)

4.定义根级别的getters

5.使用

查看下效果

点击添加按钮

let that = this 是一种常用的把this指向变量的写法，它的作用是为了在不同作用域中，都能够访问到this变量，避免this指针指向混乱。在小程序中，回调函数中的this指针会指向全局对象，而不是原本的作用域，所以通过let that = this的方式可以保留原本的作用域，以便在回调函数中仍能够访问到this变量。

uni-app项目，在main.js文件中使用Vue.prototype方法挂载一个可用于全局页面的变量

通过这个方法，可以在其他页面直接进行使用

./store/index.js:

./store/getters.js:

其它页面获取存储的signingDataList值：

1.引入外部js文件引入全局常量-组件引用全局变量

2.main.js入口文件挂载全局变量-this引用全局变量 main.js入口类文件 Vue.prototype属性全局挂载 自定义属性

即获取全局变量。

最近在做 IOT 的项目，里面有个小程序要用到 webSocket ，借这个机会，封装了一个 uniapp小程序 适用的 Socket 类，包括断线重连，心跳检测等等，具体实现如下。

直接实例化封装的 socket 类，调用 initSocket 初始化就行了，当收到消息的时候，会触发全局 $emit 事件，只需要使用 $on 监听 message 事件就行。

我这边在 globalData 里面定义了 socketObj 全局变量，在首页 onShow 生命周期里面判断当前是否已经初始化了 socket 实例，再进行操作。

home.vue

断线会自动重连。

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论； END

往期文章

个人主页

准备：使用了高德地图，所以需要前往 高德开放平台 申请appkey（安卓，iOS各一个）。申请过程不做介绍。

图片：

新建页面：

页面模板中放入地图组件：

脚本中定义页面内全局变量 地图对象 ：

页面 onReady 时获取 地图对象 ：

上面用到的api，可查看 uniapp接口文档--createmapcontext

获取中心点经纬度并反编码：

有关上面用到的api，可查看 5+app的接口文档--maps

可尝试拨动地图位置，改变地图中心点位置。点击 确定 ：

1.首先检测一下你有没有安装scss语言，任意一个.vue页面写入lang=“scss“声明。

2.如果没有安装，会提示如下信息，去插件市场安装一个就好。

如果你用的是HbuilderX器。

3.依此找到--菜单栏--工具--插件安装--安装新插件--前往插件市场安装--在搜索框输入scss--点击安装

图片教程：

1.可以嵌套写css样式 我们可以测试下： 基本框架：

scss语法体验：

效果预览：

uni.scss文件中

以$符号命名一个全局变量名称。

在其他.vue页面的样式中调用这个全局变量名。

说明 ：uni-app基于 Vue 2.0 实现，开发者需注意Vue 1.0 -》 2.0 的使用差异，详见 从 Vue 1.x 迁移 。 uni-app不仅支持应用生命周期和页面生命周期，还支持 vue 实例的如下生命周期函数： 注意 ：不要在选项属性或回调上使用箭头函数，比如 created: () =》 console.log(this.a) 或 vm.$watch(’a’, newValue =》 this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你做预期的 Vue 实例，且 this.a 或 this.myMethod 也会是未定义的。 几乎全支持 Vue官方文档：模板语法 ，下面讲下不支持的情况。 (1)不支持纯HTML uni-app的非H5端里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用，可以使用 rich-text组件 代替。或者使用三方组件wxparse，在hello uni-app中有示例。 (2)不支持部分复杂的 JavaScript 渲染表达式 非H5端无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === 》 《 .，剩下的还待完善。 (3)不支持过滤器 编译到 App 和小程序平台时不支持使用过滤器，可以使用计算属性（computed）提前计算出数据（如果是数组类型，就提前计算整个数组），用以代替过滤器。 备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持使用过滤器。 data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。 注意 ：在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，故如下写法不支持： 需修改为： 支持 Vue官方文档：计算属性 。 实现全局变量的方式需要遵循 Vue 单文件模式的开发规范。详细参考： uni-app全局变量的几种实现方式 。 非H5端不支持在 template 内使用 methods 中的函数。 备注 ： 自HBuilderX 1.7.1起，在微信小程序平台支持支持在 template 内使用 methods 中的函数。 为节约性能，我们将 Class 与 Style 的表达式通过 compiler 硬编码到 uni-app 中。 全支持 Vue官方文档：条件渲染 。 全支持vue列表渲染 Vue官方文档：列表渲染 。只是需要注意一点，嵌套列表渲染，必须指定不同的索引！需要填写 :key=“xx“ 。 注意 ：同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。 几乎全支持 Vue官方文档：事件处理器 。事件映射表如下所示： 注意 ： (1)事件映射表中没有的原生事件也可以使用，例如map组件的regionchange 事件直接在组件上写成 @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既 《map @regionchange=“functionName“ @end=“functionName“ @begin=“functionName“》《map》。 (2)为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。 (3)事件修饰符 (4)若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent=“moveHandle“，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。 (5)按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。 支持 Vue官方文档：表单控件绑定 。建议开发过程中直接使用 uni-app：表单组件 。用法示例： (1)H5 的select 标签用 picker 组件进行代替 (2)表单元素 radio 用 radio-group 组件进行代替 组件是整个 Vue.js 中最复杂的部分，支持 Vue官方文档：组件 。有且只能使用单文件组件（.vue 组件）的形式进行支持。其他的诸如：动态组件，自定义 render ，和 《script type=“text/x-template“》 字符串模版等非H5端都不支持。详细的非H5端不支持列表： (1)暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：《card class=“class-name“》 《/card》 样式是不会生效的)。 Slot（scoped 暂时还没做支持） (2)动态组件 (3)异步组件 (4)inline-template (5)X-Templates (6)keep-alive (7)transition (8)class (9)style (10)组件里使用 slot 嵌套的其他组件时不支持 v-for uni-app提供了丰富的 UI组件 ，比如： picker , map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange=“eventName“ 事件，需要写成 @change=“eventName“ 。如: uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。 注意 ：Vue.component 的第一个参数必须是静态的字符串。示例： (1)main.js 里进行全局注册 (2)index.vue 里可直接使用组件 在 uni-app 中以下这些作为保留关键字，不可作为组件名。 备注 ：除以上列表中的名称外，标准的 HTML 及 SVG 标签名也不能作为组件名。 (1) 如何获取上个页面传递的数据 在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。 (2) 如何设置全局的数据和全局的方法 uni-app内置了 vuex ，在app里的使用，可参考 hello-uniapp 的 store/index.js 。 (3)如何捕获 app 的 onError 由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下： (4)组件属性设置不生效解决办法 当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。解决办法有两种（以scroll-view组件为例）： 备注 ：第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。

1、首先打开uniapp自定义组件。2、其次在组件中找到设置并点击。3、最后在设置中点击全局控制即可。