小程序---使用globaldata配置在服务器的图片路径

最新推荐文章于 2024-06-06 09:10:54 发布
最新推荐文章于 2024-06-06 09:10:54 发布
阅读量3.1k 收藏 4
点赞数 1
分类专栏： 微信小程序开发 文章标签： 小程序 globaldata 渲染层出错
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ariel_201311/article/details/81488373
版权
本文介绍了如何在小程序中使用globaldata配置服务器图片路径，以提高代码维护性。通过在app.js设置全局变量，然后在页面js中引用，解决图片路径动态加载问题。当遇到因setData时机导致的渲染层错误时，提出了解决方案，包括确保setData执行后再加载图片，以及循环加载多个图片的方法。
摘要由CSDN通过智能技术生成

我们在设计小程序页面的时候，很常用的就是向页面里插入图片，但是每次加载图片时都要写上一大串的路径，而且倘若以后服务器有改动，不好维护。所以我们可以使用全局变量来动态配置图片路径，维护性强。

首先在app.js文件里的globaldata配置你服务器上图片存放的文件夹目录：

  globalData: {
    imageUrlPath: 'https://*****.com/***/...'
  }

然后在你想要插入照片的页面的js里：

var app = getApp();
Page({
   
	data: {
   
		imageUrlPath: ''
最低0.47元/天 解锁文章
Ariel_ckr
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序 - 详细实现＜image＞图片 src 路径动态拼接多个变量，小程序图像 src 路径在模板上进行变量拼接，路径有变量报错如何解决（详细示例代码）
王佳斌
04-30 8852
在微信小程序中对于动态图像 `src` 路径，您无法像正常 `Vue` 项目那样拼接变量路径，这归结于小程序框架底层。但在微信小程序中，您会收到报错提示。核心思路：将一切需要拼接的字符串，转为在 `data` 变量中存储，模板通过 `{{ }}` 进行连接。这种问题有很多解决方案，比如在函数中直接处理好最终图片路径，模板直接使用。 本文之所以选择之，是因其 **灵活** 特性，适用于多场景，因为您可以通过 `js` 对其进行动态改变，从而改变视图。
Vue-在data中引入静态图片路径
每一次跌倒都是为了华丽的站起来。
09-01 6878
Vue-在data中引入静态图片路径
【Uniapp】uniapp微信小程序定义图片地址全局变量
最新发布
cnsv的博客
06-06 445
uniapp微信小程序定义全局变量，全局使用图片地址路径
**【全局分享】微信小程序设置全局分享（标题，图片，路径）**
你见过思念放过谁的博客
06-12 7471
页面分享内容都一样，但是要在每个页面里都写是不是很烦？没关系，下面教你如何解决： //重写分享方法 share: function () { //监听路由切换 //间接实现全局设置分享内容 wx.onAppRoute(function (res) { //获取加载的页面 let pages = ...
微信小程序-图片裁剪、旋转、预览、上传功能实现
11-29
2、/pages/cropper/cropper页面会直接弹出选择拍照还是本地图片上传，当取消后会返回到上一层3、页面会进行图片编辑操作，操作好后，通过上传按钮，将本地图片路径先存储到公共app.globalData里面，然后跳转到上一...
微信小程序上传图片到服务器实例代码
08-28
微信小程序上传图片到服务器实例代码是一种常见的功能需求，特别是在微信小程序开发中，上传图片到服务器是非常必要的。本文将详细介绍微信小程序上传图片到服务器的实例代码，并且提供了详细的代码示例和解释。 一...
微信小程序图片选择、上传到服务器、预览（PHP）实现实例
08-30
* 在小程序中，选择图片后，图片路径将被存储在 `imglist` 数组中。 二、图片预览 * 在小程序中，可以使用 `<image>` 标签来预览选择的图片，例如 `...
微信小程序上传图片实例
12-11
在微信小程序中，我们通常会使用`wx.chooseImage`接口来让用户选择图片，然后使用`wx.uploadFile`将图片上传到服务器。以下是一个简单的实现示例： 1. `user.wxml` 文件： 在这个文件中，我们定义了一个`view`元素...
微信小程序 拍照或从相册选取图片上传代码实例
10-16
在微信小程序中，用户可以轻松地实现拍照或从相册选取图片并上传到服务器。这一功能对于各种应用程序，如社交、电商、生活服务类应用都至关重要。本文将深入讲解如何在微信小程序中实现这一功能，并提供相关的代码...
uniapp项目中怎么统一管理图片地址
warm water
07-13 867
3.使用Vuex进行状态管理：如果你已经在项目中使用了Vuex，可以在store中定义一个state来存储图片地址，并在需要使用图片的地方通过Getter获取图片地址。2.创建配置文件：可以创建一个配置文件，例如config.js，用于存储图片地址的配置信息。在需要使用图片的地方，引入该配置文件并获取对应的图片地址。1.使用全局变量：在Vue的实例中，可以定义一个全局变量来存储图片的基础地址，然后在需要使用图片的地方，通过拼接路径来获取完整的图片地址。
微信小程序全局配置
qq_52702899的博客
08-12 728
想要进行全局配置在根部的app文件里。
小程序服务器图片的使用
等，你的到来。
11-27 4154
Hello，小伙伴们下午好，最近手头上比较忙，呼呼，还接了别的组的一个小项目，自己手里的小程序还一分为二个版本，忙的都有点抓不过来了，导致最近发布小程序正式版的时候总是存在一点问题，惭愧惭愧~也总算是告一段落了，现在我来更一片有关使用小程序服务器图片的博文咯。 众所周知，小程序的大小限制在2M，我手头上这个项目目前已经不小了，因此时常出现超过2M上传不了代码的情况，为了解决这个问题，我曾经把项目的...
微信小程序+springboot+mybatis 前端图片随表单一起上传以及获取服务器图片的方法
weixin_43616676的博客
09-19 1405
小程序前端+springboot+mybatis 多图片和表单一起上传到后端
微信小程序中全局共享数据globalData的使用
热门推荐
Amelian的博客
12-20 1万+
1.全局共享数据 全局共享数据的两种方式 通过Vue原型共享数据 通过globalData共享数据 vuex 本地存储 1)在Vue实例原型属性上添加属性,其他任何页面预想使用,直接使用this获取到, 比如: 主要代码:(在入口文件mian.js中) import request from './utils/request' Vue.prototype.request=request; 2)通过globalData的方式 说明:小程序有globalData,这是一个简单的全局变量机制.这套机制在u
以太坊的 ChainId 与 NetworkId
J_Lee
06-27 4593
ChainId 和 NetworkId 真的像很多文章说的那样需要保持一致么？ 一.什么是ChainId ChainId 是 EIP-155 引入的一个用来区分不同 EVM 链的一个标识。如下图所示，主要作用就是避免一个交易在签名之后被重复在不同的链上提交。最开始主要是为了防止以太坊交易在以太经典网络上重放或者以太经典交易在以太坊网络上重放。在以太坊网络上是从 2675000 这个区块通过 Spurious Dragon 这个硬分叉升级激活。 引入 ChainId 后，带来了哪些影响呢？ 创建新的 .
微信小程序app.js中的全局变量globalData改变，如何通知其它页面界面显示改变，小程序中如何在其他页面中监听到globalData中值的变化
陈万洲的专栏
05-15 7510
微信小程序app.js中的全局变量globalData改变，如何通知其它页面界面显示改变，小程序中如何在其他页面中监听到globalData中值的变化 在小程序中，我们一般在app.js的onLaunch中发起登录请求，由于是请求是异步的，这时候你发下在页面的page.js中，会发现取不到值。这里我们使用监听全局变量globalData的变化，目前还没发下小程序有自带的监听机制，这里我们自己来实现。 1. 在app.js 中添加监听函数 // 监听全局变量变化 watch: functio
微信小程序中globalData的设置与读写
辉生活-记录程序生活的点滴。
02-18 1765
不得不吐槽小程序的关于Storage的坑实在是多。最终只能放弃，其实我要做的事情也很简单，就是要在小程序的每个页面中调取一些统一的信息。后再找到了在App.js里有一个GlobalData的功能，看名字就知道很好使。 初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值。 App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxxxxxx',//appid需自己提供，此处的appid我随机编写 se
微信小程序登录获取openid（小程序端+java后台）源码
DYZ的博客
06-12 2863
小程序端代码，app.js中调用接口： wx.login({ success: res => { console.log(res); that.globalData.code = res.code // 发送 res.code 到后台换取 openId, sessionKey, unionId wx.reques...
小程序组件如何使用 globaldata
09-07
小程序组件是一种独立封装的UI模块，组件中的数据和方法在组件内部是隔离的。如果需要在组件之间共享数据，可以使用小程序的全局Data（globalData）来实现。 首先，在小程序的app.js文件中定义一个全局的数据对象globalData： App({ globalData: { sharedData: 'Hello World!' } }) 然后，在组件中可以通过getApp()方法获取到app实例，进而获取到globalData中定义的数据： // 在组件的js文件中 const app = getApp() Page({ data: { sharedData: '' }, onLoad: function() { this.setData({ sharedData: app.globalData.sharedData }) } }) 这样，组件中的sharedData就可以获取到全局数据，并在组件内部使用了。如果需要修改全局数据，可以直接修改app.globalData中定义的变量。 // 在组件的js文件中 const app = getApp() Page({ data: { sharedData: '', newValue: 'New Value' }, onLoad: function() { this.setData({ sharedData: app.globalData.sharedData }) }, changeData: function() { app.globalData.sharedData = this.data.newValue this.setData({ sharedData: app.globalData.sharedData }) } }) 这样，在组件内部定义了一个changeData方法，当点击某个按钮时，就可以修改全局数据并刷新组件中显示的数据。 通过将组件与全局数据结合使用，可以在小程序中实现组件之间的数据共享，提高了开发的灵活性和复用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值