在我编写公司小程序的过程中,有一次在网页端添加了一张图片,结果在小程序端访问失败了,究其原因,竟然是因为该图片名称中有一个“&”符号,网页端添加后,自动转义成了“&”存储到了数据库。当然,这种格式如果是在HTML去访问图片地址,会自动在转义成“&”,但是小程序的WXML并没有这种功能,所以这就需要我们在小程序端自行操作进行转义了。

首先,明确一下会自动转义存储的常用的特殊字符有哪些:

字符 转义字符
" "
& &
< &lt;
> &gt;
[空格] &nbsp;

如果是在<text>标签中显示文本内容,可以直接通过设置decode=‘true’的属性进行转义。

但因为我是在<image>标签中访问,所以小程序中没有便捷方法可以转义,写了一个死方法——replace.js,如下:

//替换URL中特殊字符
function replaceSpecialChar(url) {
url = url.replace(/&quot;/g, '"');
url = url.replace(/&amp;/g, '&');
url = url.replace(/&lt;/g, '<');
url = url.replace(/&gt;/g, '>');
url = url.replace(/&nbsp;/g, ' ');
console.log("转义字符", url);
return url;
}
module.exports = {
replaceSpecialChar: replaceSpecialChar
}

需要用到的时候,在页面对应的js里面调用该方法:

var replace = require("../../utils/replace.js");
Page({
..............
url = replace.replaceSpecialChar(res.data.url)
})

这样就能访问到图片啦~~~

/****************************我是可爱的分割线********************************/

微信小程序特殊字符转义方法——&转义&amp;等等的更多相关文章

  1. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  2. 微信小程序开发系列教程三:微信小程序的调试方法

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...

  3. 微信小程序最新授权方法,getUserInfo

    20180511微信小程序正式关闭原先getUserInfo的逻辑 不再允许自动弹出授权框. 方法一: index.wxml(准备一个用于给用户授权的页面,我这里直接用了一个全屏按钮) <vie ...

  4. 微信小程序——wxParse使用方法

    wxParse是一个微信小程序富文本解析组件.现在小程序里面自带了一个<rich-text>组件也能解析富文本,但是表现不尽人意.所以我还是采用的wxParse来解析富文本的. wxPar ...

  5. 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项

    小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...

  6. 微信小程序~生命周期方法详解

    生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...

  7. 微信小程序--数据共享与方法共享

    目录 全局数据共享 Mobox npm安装及其注意事项 小程序对 npm 的支持与限制 npm 依赖包的安装与使用 Mobox 1. 全局数据共享 2. 小程序中的全局数据共享方案 3. 使用mobx ...

  8. 微信小程序 weui 使用方法

      https://github.com/Tencent/weui-wxss/ 下载地址用于小程序的https://github.com/Tencent/weui   下载地址用于H5    运用示例 ...

  9. 微信小程序,全局变量方法的使用

    方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1.app.js文件,定义全局变量 /定义全局变量 globalData:{ userInfo:null, sysInfo:null, wi ...

随机推荐

  1. 考试T1总结(又CE?!)

    考试T1CE... 最近不适合考试 T1 扶苏是个喜欢一边听古风歌一边写数学题的人,所以这道题其实是五三原题.歌曲中的主人公看着墙边的海棠花,想起当年他其实和自己沿着墙边种了一排海棠,但是如今都已枯萎 ...

  2. hdu2014 青年歌手大奖赛_评委会打分【C++】

    青年歌手大奖赛_评委会打分 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  3. hadoop balancer

    一.balancer是当hdfs集群中一些datanodes的存储要写满了或者有空白的新节点加入集群时,用于均衡hdfs集群磁盘使用量的一个工具.这个工具作为一个应用部署在集群中,可以由集群管理员在一 ...

  4. 【Codeforces 522A】Reposts

    [链接] 我是链接,点我呀:) [题意] 有人转载官方号的动态. 又有其他人转载其他人转载的动态. 问你最长的一条转载动态的链有多长. [题解] 用map把每个人的英文都转成小写的 然后从map中获取 ...

  5. 【codeforces 796B】Find The Bone

    [题目链接]:http://codeforces.com/contest/796/problem/B [题意] 一开始骨头在1号位置; 然后有m个洞,给出洞的下标; 然后有k个交换操作; 如果骨头到洞 ...

  6. Hadoop2.2.0 注意事项

    1.启动前必须把防火墙关了,要不然会导致nodemanager启动不了. 关闭防火墙:service iptables stop 永久关闭(重启后默认关闭):chkconfig iptables of ...

  7. [bzoj3872][Poi2014]Ant colony_树形dp

    Ant colony bzoj-3872 Poi-2014 题目大意:说不明白.....题目链接 注释:略. 想法:两个思路都行. 反正我们就是要求出每个叶子节点到根节点的每个路径权值积. 可以将边做 ...

  8. systemtap dtrace与 oracle

    https://fritshoogland.wordpress.com/page/3/ http://externaltable.blogspot.com/2013/06/dtrace-explora ...

  9. Ubuntu 17.10安装phpMyAdmin数据库管理工具

      和Windows下各种双击安装直接使用的数据库管理工具不同,Linux下的数据库管理工具显得有些稍稍复杂.由于版权和收费限制,很多好用的数据库管理工具例如Data Grip和Navicat不能直接 ...

  10. stl变易算法(三)

    本篇接着前面stl变易算法(一)和stl变易算法(二)继续讲述变易算法. 这里将介绍完余下的变易算法,主要有:填充fill.n次填充fill_n.随机生成元素generate.随机生成n个元素gene ...