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


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 相关文章推荐
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 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 $_SERVER当前完整url的写法
2009/11/12 PHP
php异常处理使用示例
2014/02/25 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Python基础学习之常见的内建函数整理
2017/09/06 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
自荐书封面下载
2013/11/29 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
教师求职自荐信
2014/03/09 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
秋收起义观后感
2015/06/11 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL