深入解析微信小程序开发中遇到的几个小问题


Posted in Javascript onJuly 11, 2020

本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了

item.img = '/goods/img/图片.png'
<image src="
{
{
item.img
}
}
" class="image">
</image>

经过仔细观察发现,路径是没问题的,问题在于图片名不能是中文的,把它改成字母+数字就好了。

使用FileSystemManager.readdir(Object object)方法读取本地文件夹中的所有图片,报错'readdir:fail no such file or directory'

dirPath = '/goods/img'
同样在开发工具上运行是没问题的,但真机调试就报错了。
问题所在:将dirPath设成'/',读取该文件夹下的所有文件名后得:

0: "app-service.js"
1: "app-config.json"
2: "app-service.js.map"
3: "page-frame.html"

真机调试时,readdir方法的根目录并不是项目的根目录

解决方案:暂无好的解决方法。(暂时用暴力法解决了:直接存下所有图片的名称,读取后再分割拼接路径。imgNames = '0.png,1.png,2.png'

在js里读取其它json文件的内容

短时间内没找到读取方法,因此用了替代方案:
将数据存在js文件里,设为一个变量,再用require方法来引用这个js文件。

let list = [
 {
  "id": "1",
  "name": "测试产品名字",
  "category": "分类1",
  "price": "123.5",
  "description": "产品的简单介绍",
  "img": "0.png",
 },
 {
  "id": "2",
  "name": "测试产品名字2",
  "category": "分类2",
  "price": "125.5",
  "description": "产品的简单介绍",
  "img": "1.png,2.png,3.png,4.png",
 },
 ...
]
module.exports = {
 goodsList: list
}
let goodsInfo = require('../../goods/info.js');
let list = goodsInfo.goodsList
for(let goods of list){
  console.log(goods)
}

总结

到此这篇关于微信小程序开发中遇到的几个小问题的文章就介绍到这了,更多相关小程序开发小问题内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 Javascript
js实现简洁的TAB滑动门效果代码
Sep 06 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 #Javascript
详解JavaScript匿名函数和闭包
Jul 10 #Javascript
Vue watch响应数据实现方法解析
Jul 10 #Javascript
详解Vue之事件处理
Jul 10 #Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
Element图表初始大小及窗口自适应实现
Jul 10 #Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 #Javascript
You might like
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
PHP 和 COM
2006/10/09 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
细品javascript 寻址,闭包,对象模型和相关问题
2009/04/27 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python爬取国外天气预报网站的方法
2015/07/10 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python多个模块py文件的数据共享实例
2019/01/11 Python
HTML的form表单和django的form表单
2019/07/25 Python
对于Python深浅拷贝的理解
2019/07/29 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python基于opencv检测程序运行效率
2019/12/28 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
水务局局长岗位职责
2013/11/28 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
合作合同协议书范本
2015/01/27 职场文书
投诉书格式范本
2015/07/02 职场文书
《检阅》教学反思
2016/02/22 职场文书
技术转让协议书
2016/03/19 职场文书