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


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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
jquery异步请求实例代码
Jun 21 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
Dec 29 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
php5.2时间相差8小时
2007/01/15 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
Javascript学习指南
2014/12/01 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
javascript实现简单留言板案例
2021/02/09 Javascript
Python下rrdtool模块的基本使用方法
2015/11/13 Python
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
利用Python获取操作系统信息实例
2016/09/02 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
python基础梳理(一)(推荐)
2019/04/06 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
深入了解python中元类的相关知识
2019/08/29 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
Python自动登录QQ的实现示例
2020/08/28 Python
Django跨域请求原理及实现代码
2020/11/14 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
大学自主招生自荐信
2013/12/16 职场文书
党员民主生活会材料
2014/12/15 职场文书
村党组织公开承诺书
2015/04/30 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
初中美术教学反思
2016/02/17 职场文书
Nginx同一个域名配置多个项目的实现方法
2021/03/31 Servers
golang使用map实现去除重复数组
2022/04/14 Golang