在我编写公司小程序的过程中,有一次在网页端添加了一张图片,结果在小程序端访问失败了,究其原因,竟然是因为该图片名称中有一个“&”符号,网页端添加后,自动转义成了“&”存储到了数据库。当然,这种格式如果是在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. form:input 标签使用

    <form:input path="suplier" htmlEscape="false" maxlength="50" id=&qu ...

  2. 入口文件 index.php

    一. 运行流程 The index.php serves as the front controller, initializing the base resources needed to run ...

  3. VsCode 格式化插件配置

    Beautify 1.在工作目录下建立.jsbeautifyrc文件: { "brace_style": "none,preserve-inline", &qu ...

  4. python爬虫17 | 听说你又被封 ip 了,你要学会伪装好自己,这次说说伪装你的头部

    这两天 有小伙伴问小帅b 为什么我爬取 xx 网站的时候 不返回给我数据 而且还甩一句话给我 “系统检测到您频繁访问,请稍后再来” 小帅b看了一下他的代码 ): requests.get(url) 瞬 ...

  5. vim学习2-文档编辑

    一.vim重复命令 1.重复执行上次命令 在普通模式下.(小数点)表示重复上一次的命令操作 拷贝测试文件到本地目录 $ cp /etc/protocols . 打开文件进行编辑 $ vim proto ...

  6. 【Codeforces 474D】Flowers

    [链接] 我是链接,点我呀:) [题意] 让你吃东西 B食物一次必须要吃连续k个 但是对A食物没有要求 问你有多少种吃n个食物的方法(吃的序列) [题解] 设f[i]表示长度为i的吃的序列且符合要求的 ...

  7. 【MariaDB】MariaDB vs MySQL - 特性

    原文链接: https://mariadb.com/kb/en/mariadb-vs-mysql-features/ xiaomo译------ 支持更多的存储引擎 除了标配的MyISAM, BLAC ...

  8. poj 2031

    #include<stdio.h> #include<math.h> #include<stdlib.h> #define N 200 double co(doub ...

  9. NandFlash、NorFlash、DataFlash

    1. NandFlash和NorFlash        Flash存储芯片,俗称闪存,因其具有非易失性.可擦除性.可重复编程及高密度.低功耗等特点,广泛地应用于手机.数码相机.笔记本电脑等产品.   ...

  10. [bzoj1131][POI2008]Sta_树形dp

    Sta bzoj-1131 POI-2008 题目大意:给定一棵n个点的树,求一个根,使得深度和最大. 注释:$1\le n \le 10^6$. 想法:扭一扭即可. 扭的时候看看这个点当没当过根. ...