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


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 相关文章推荐
取消选中单选框radio的三种方式示例介绍
Dec 23 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
详解WordPress开发中get_current_screen()函数的使用
Jan 11 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 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
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP闭包实例解析
2014/09/08 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python3实现用turtle模块画一棵随机樱花树
2019/11/21 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
小王子读书笔记
2015/06/29 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书