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


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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
JavaScript 学习笔记(十二) dom
Jan 21 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript验证身份证号
Mar 03 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
May 07 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 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图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
网页从弹窗页面单选框传值至父页面代码分享
2015/09/29 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
Vue修改项目启动端口号方法
2019/11/07 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python字典序问题实例
2014/09/26 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
Python类super()及私有属性原理解析
2020/06/15 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
校长岗位职责
2013/11/26 职场文书
车间组长岗位职责
2013/12/20 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
违纪学生保证书
2015/02/27 职场文书
培训班通知
2015/04/25 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Python中for后接else的语法使用
2021/05/18 Python