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


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 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
PHP读取txt文件的内容并赋值给数组的代码
2011/11/03 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
2016/03/09 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
Angular中的interceptors拦截器
2017/06/25 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python文件操作基本流程代码实例
2017/12/11 Python
python中列表和元组的区别
2017/12/18 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
新娘父亲婚礼致辞
2014/01/16 职场文书
班级活动策划书
2014/02/06 职场文书
房屋转让协议书
2014/04/11 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
劳资员岗位职责
2015/02/13 职场文书