【微信小程序】image真机无法加载网络图片

目录

背景

为什么微信小程序 

技术思路

前端页面

吐槽

最终解决

---

背景

今天把车停在了路边，可能是挡住了行人的路，被贴了个条，还留了个纸条——没有你的随车电话，我只能点电话举报你了。气的我牙痒痒！

只能回来自己撸一个挪车电话小工具！这样通过扫描二维码拨打电话，也可以避免你的电话直接暴露！

为什么微信小程序 

思前想后还是选择了微信小程序，毕竟现在几乎所有人都在使用微信了！

技术思路

微信小程序提供了一个功能，就是可以获取小程序二维码，并且可以携带指定参数！这样就为我们作进一步的选择创造出了有利的条件！

前端页面

<view class="textView">
共使用{{useNum}}次
</view>
<form bindsubmit="getMovintCode">

<view class="inputView" >
<input class="input" type="number" placeholder="请输入手机号" placeholder-style="color: red" name="phoneNum"/>
</view>
<button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" formType="submit">获取挪车码</button>
</form>

<view style="margin-top: 10%;">
  <image class="img" src="{{src}}" mode="widthFix"></image>
</view>

个人认为还是有一定的可优化， 毕竟作为一个后端，来写前端页面还是比较丑的了哈哈。

吐槽

这里我遇到一个特别坑，也是被人吐槽特别多的地方，就是image真机无法加载网络图片，但是在开发环境中确实完美的给你展现出来了这一段图片。你说奇葩吧。是不是有点恶心！

现在总结几条关于真机无法显示的原因（对我是一点用处没有啊！）：

1、先确认图片地址是否能访问，图片地址是否正确 。

2、若为小程序本地图片，真机对中文路径的图片显示会有问题，请修改为英文路径。

3、检查图片访问的https 状 态 码是否为200，为安全方面考虑，小程序暂不支持状态码200以外的图片加载。

4、检查图片是否设置了防盗链，如果图片加了 防盗链会导致小程序无法访问图片从而加载失败。请去掉防盗链或更换没有防盗链的图片。

5、检查是否存在空格，括号等特 殊 符 号

结果，我没有一个中的，我只能说微信的这个api组件是真坑啊！

尤其是他的文档那叫一个TM的恶心人啊！想知道为什么吗？等你看完我的最终解决方案你就会明白了

最终解决

最终我实在没办法了，将https改成了http反而成功了！

想体验的话，可以微信搜索《微点记账》->我的->生成挪车码  使用

好了，今天的bug就到这里，欢迎大家点击下方卡片，关注《coder练习生》

后续吐槽一下，这个审核有点狗啊，“由于最近路边的停车位都被无情的创收铲掉了！今天把车停在了路边，可能是挡住了行人的路，被贴了个条，还留了个纸条——没有你的随车电话，我只能点电话举报你了。气的我牙痒痒！”因为这段话被审核不通过！！！你是真够啊！