记录写项目时遇到的问题——小程序篇

小程序更换图片后，图片名称和地址都不变，但页面显示更换前的图片

项目场景：

上传单据图片

---

问题描述：

新增一个单据图片的上传功能，图片可来自相机或相册
没有图片的状态如下：

现在出现，当有图片的时候点击图片更换图片，会出现页面仍然显示更换前的图片

---

原因分析：

这是开发工具上编译的效果，同时还有个原因是，因为图片只是内容覆盖，但是图片名字和图片地址不变，小程序会默认从本地缓存中读取，以为你的数据并没有发生改变

---

解决方案：

方案一

给图片地址增加版本号或时间戳或者随机数
例如：
“https://xxx.com/xx/x/demo.jpg?v=202009011926”

// 获取时间戳
getTimeStamp: function() { 
  var TimeStamp = Math.round((new Date()).getTime() / 1000) + 28800;
  return TimeStamp;
}

方案二

修改图片名称

小程序加载背景图片失败

项目场景：

登录界面背景图

---

问题描述：

背景图无法显示仍为纯色背景

---

原因分析：

小程序不支持css背景图片为本地图片，可使用网络图片或者利用 base64 编码的图片代替。

图片在线 base64 编码转换工具

那么什么是 base64 编码呢？
base64 编码可用于在HTTP环境下传递较长的标识信息。
base64 百度百科——这里面除了解释 base64 编码的原理外，还用不同的计算机语言去实现 base64 编码

将一张图片的数据编码成一个字符串，然后我们可以使用这个字符串来代替本地图片的路径（地址）。这个字符串就是我们想要的图片的 base64 编码

---

解决方案：

方案一

通过 base64 图片在线转换工具将本地图片转换成 base64 编码，直接在 css 上需要设置背景图片的地方 background: url(‘转换好的字符串’) no-repeat center;

方案二

将本地图片地址转换成网络图片地址，说来也简单。所有可以上传图片的网页都能做到这点。
比如：csdn 写博客的编辑器里有一个上传图片的按钮

打开之后，如下图所示

点击上传一张本地图片，在下图划红线的部分就是我们需要的网络图片地址，可以直接复制使用

小程序使用Label失效

项目场景：

制作一个登录页

---

问题描述：

登录页需要输入用户名和密码

---

原因分析：

在查完微信官方文档之后，发现原因是小程序的 label 组件目前未支持绑定 input 控件

---

解决方案：

方案一

使用 JS 绑定点击事件，通过 focus 属性去切换

index.wsml

<view data-value="password" bindtap="togetfocus">
	<text>密码</text>
	<input focus="{{isPassword}}" type="password" value="{{user.password}}" bindinput='userpassinput'></input>
</view>

index.js

togetfocus(ev){
	if(ev.currentTarget.dataset.value == 'username'){
		this.setData({
        	isUsername: true,
        	isPassword: false
      	})
    }else if(ev.currentTarget.dataset.value == 'password'){
		this.setData({
        	isUsername: false,
        	isPassword: true
      	})
    }
}