微信小程序全局变量功能与用法详解

2024-10-16 00:47:03

本文实例讲述了微信小程序全局变量功能与用法。分享给大家供大家参考，具体如下：

全局变量的作用

在微信小程序开发中，会遇到一个很实际的应用场景，就是一个变量会在多个页面进行使用。

例如：

1. 在微信小程序开发中使用高德地图的微信小程序开发，其中key值就需要在多个页面使用；

2. 在微信小程序开发电商平台时同样，比如客服电话，就需要在多个页面使用。

在以上两种类似的场景中，开发者就需要使用全局变量，当然也有开发者说不能每个page页面都定义一个？如果客服电话改变，如果客服要求采用他的高德key，这个时候只需要修改全局，就能进行整个小程序的修改，如果每个page一个变量，将会在修改中花费大量的时间做低效的工作。所以可以看出全局变量在这里的作用就是提高开发效率！

如何定义全局变量

方法一：用APP定义全局变量

在app.js中的APP({})传入对象中定义一个全局属性globalData，作为保存全局变量的对象。

示例代码：

声明变量进行引入！

// 引入高德地图js
const amap = require('./src/js/amap-wx.js');
// 引入接口js
const urlList = require('./src/js/config.js');
// 引入wetoast插件js
const { WeToast } = require('./src/wetoast/wetoast.js');
// 全局变量高德地图key
const key = 'c290b7e016c85e8f279b2f80018c';
// 全局变量服务电话
const phone = '400-007-859';

进行全局变量的赋值！

App({
 globalData: {//全局变量
  amap: amap,
  key: key,
  phone: phone,
  urlList: urlList.urlList
 }
})

方法一全局变量的使用：

//在page页面引入app，同时声明变量，获得所需要的全局变量
const app = getApp();
const urlList = app.globalData.urlList;

方法二：用引入js的方法定义全局变量

在公用js文件夹中创建一个保存全局变量的js文件

实例：我在公用文件夹src下的js文件夹中创建的三个保存全局变量的文件：base64.js、config.js、data.js

这三个文件作用：

1. base64.js保存背景图标转化的base64码
2. config.js保存request请求数据的路径
3. data.js 保存初次开发的模拟数据

示例代码：

let basePath = 'https://xxxxx.com';
let urlList = {
  goodsListUrl: basePath + '/goodsList',
  shopCartUrl: basePath + '/shopCart',
  ...
}
module.exports = {
 urlList: urlList
}

使用方法：

// 引入接口js
const urlList = require('./src/js/config.js');
wx.request({
  url: urlList.urlList.goodsListUrl,
  data: {},
  success: res => {}
})

总结

其实两种方法都可以定义全局变量，那么在什么时候采用哪一种方法？我个人建议，在像高德地图的key值这种只需要单独定义的，可以采用方法一，方便、简洁、不用单独创建文件。在请求地址这种批量全局变量的定义时，采用方法二，有利于后期的查找和修改。两种方法结合，更有利于开发！

希望本文所述对大家微信小程序开发有所帮助。

微信小程序实现全局搜索代码高亮的示例

需求最近在做微信小程序的时候,需要实现在搜索框的输入内容的时候实现全局匹配实现高亮效果,目前的思路是,递归后台来返回的数据,并将对象的value值替换为需要的dom节点,并且通过rich-text来实现,高亮效果. 代码 wxml: <view class='homePage'> <input bindinput="bindKeyInput"></input> <view wx:for="{{newJson}}" wx:f
微信小程序设置全局请求URL及封装wx.request请求操作示例

本文实例讲述了微信小程序设置全局请求URL及封装wx.request请求操作.分享给大家供大家参考,具体如下: app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(metho
微信小程序全局变量的设置、使用、修改过程解析

1. 全局变量的设置在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的. App({ globalData: { hasLogin: false, openid: null }, onLaunch: function () { } }) 2.全局变量的使用在app.js文件中,直接使用,如: this.globalData.hasLogin 在其他非app.js文件中使用,需要先申明app变量,如: var app = getApp() app
微信小程序本作用域下调用全局JS详解及实例

微信小程序本作用域下调用全局JS详解本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"
微信小程序全局变量改变监听的实现方法

问题来源最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面. 需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层,并且动态的展示值,这个值的来源就是最后一个组件页面中的内容. 处理办法当时想到的就是使用全局变量,在 app.js 中定义好全局变量,点击组件页面时就修改全局变量的值,父页面同样使用全局变量的值,这样一来就可以动态打开/关闭弹出层且传递值了. 下面先看看 app.js 中怎么定义的: glob
微信小程序定义全局数据、函数复用、模版等详细介绍

微信小程序定义全局数据.函数复用.模版等问题总结: 1.如何定义全局数据在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp(); app.function/key的方式调用,不过我们没有必要再app.js中定义全局函数. 2.如何实现代码的复用函数的复用: test.js test: function(){ } module.exports={ test:test } other.js var common = require('
微信小程序如何实现全局重新加载

背景: 随着业务的增加,我们服务器需要计算大量的用户数据,导致用户跟客服反应页面不能正常展示.反馈给开发后,我们一看,是服务器异常的错误.So,产品想看下我们到底有多少用户页面不能正常展示? 方案: 后端人员直接在阿里云后台去查哪些接口异常前端做一个服务器报错页,这样产品在小程序后台能看到这个页面的PV,UV 技术方案因为业务庞大,所以我们不可能区在每个页面加上重新加载的逻辑.所以初步考虑使用全局重新加载. 需要解决的问题都有哪些? 首先我们要有网络请求失败的全局控制权(要不然就需要在每个页
微信小程序全局变量功能与用法详解

本文实例讲述了微信小程序全局变量功能与用法.分享给大家供大家参考,具体如下: 全局变量的作用在微信小程序开发中,会遇到一个很实际的应用场景,就是一个变量会在多个页面进行使用. 例如: 1. 在微信小程序开发中使用高德地图的微信小程序开发,其中key值就需要在多个页面使用: 2. 在微信小程序开发电商平台时同样,比如客服电话,就需要在多个页面使用. 在以上两种类似的场景中,开发者就需要使用全局变量,当然也有开发者说不能每个page页面都定义一个?如果客服电话改变,如果客服要求采用他的高德key,
微信小程序本地数据存储实例详解

微信小程序本地数据存储实例详解前言如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor
微信小程序动态传参实例详解

微信小程序动态传参实例详解在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=
微信小程序支付及退款流程详解

首先说明一下,微信小程序支付的主要逻辑集中在后端,前端只需携带支付所需的数据请求后端接口然后根据返回结果做相应成功失败处理即可.我在后端使用的是php,当然在这篇博客里我不打算贴一堆代码来说明支付的具体实现,而主要会侧重于整个支付的流程和一些细节方面的东西.所以使用其他后端语言的朋友有需要也是可以看一下的.很多时候开发的需求和相应问题的解决真的要跳出语言语法层面,去从系统和流程的角度考虑.好的,也不说什么废话了.进入正题. 一. 支付支付主要分为几个步骤: 前端携带支付需要的数据(商品id,购
微信小程序全局文件的使用详解

目录全局文件总结我们前边两篇介绍了账号的申请.注册,工具的安装,云服务的开通.本篇我们介绍一下基础语法.介绍的方法呢我们会结合上微搭低代码的工具一起做个对比.因为低代码工具也产生了非常多的技术概念,但最终在发布成小程序的时候也是按照微信的规范去生成的,把微信开发者工具学会了也可以更深入的了解低代码的相关概念. 全局文件小程序中是分为全局和页面级两部分.全局是在小程序的所有页面都有效,页面级是只在当前页面中生效.小程序根目录有三个文件app.js.app.json.app.wxss这三个就
微信小程序url与token设置详解

微信小程序url与token设置详解新浪云应用sae的代码里创建一个weixin.php文件,写入以下代码 define("TOKEN","myToken");// 后台填写的token,在微信公众平台启用 $wechatObj = new wechatAPI(); $wechatObj->isValid(); class wechatAPI { public function isValid()//验证微信接口,验证函数以外的代码和微信公众号开发token
微信小程序检查接口状态实例详解

微信小程序检查接口状态实例详解实例代码: // 检查接口是否可用 wx.getSetting({ success(res) { if (!res['scope.record']) { // 接口调用询问 wx.authorize({ scope: 'scope.userInfo', success(res) { wx.startRecord() // 用户已经同意小程序使用录音功能,后续调用 wx.startRecord 接口不会弹窗询问 }, fail() { }, complete()
微信小程序滚动选择器(时间日期)详解及实例代码

微信小程序滚动选择器(时间日期)详解微信小程序自己封装了很多控件,用起来确实很方便,如果这是Android里面,还需要自己去定义,不废话,效果图: 一起来看看怎么实现的呢?看完你应该就该说,尼玛,这就行啦-. 这个效果呢,要用到picker组件,动画从底部弹起的滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器. 看下相应的属性: 具体的来看看代码,布局: <view class="section" > <
微信小程序 POST请求的实例详解

微信小程序 POST请求的实例详解在微信小程序里post请求和get情求,写法差不多,但是还是有一点点不同的,下面利用post请求做一个查询天气的微信小程序demo. 页面代码: <view> {{title}} </view> <span style="font-size:24px;"> <view class="container"> <view style=
微信小程序网络请求wx.request详解及实例

微信小程序网络请求wx.request详解及实例如果说小程序API里面最重要一个接口是哪一个?那么首推wx.request().相当于在小程序内请发起一个https请求(本地调试模式下支持HTTP).HTTP协议中共定义了八种方法或者叫"动作"来表明对Request-URI指定的资源的不同操作方式. GET:向特定的资源发出请求. POST:向指定资源提交数据进行处理请求.数据被包含在请求体中. PUT:向指定资源位置上传其最新内容. DELETE:请求服务器删除Request-UR

微信小程序全局变量功能与用法详解

相关推荐

随机推荐