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

本地图片不显示，开发工具运行是没问题的，但真机调试却显示不了

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)
}

总结

到此这篇关于微信小程序开发中遇到的几个小问题的文章就介绍到这了,更多相关小程序开发小问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序实现一张或多张图片上传（云开发）

    微信小程序实现一张或多张图片上传（云开发）

    一.简介: 这篇文章向大家展示的是把图片上传到云数据库中,这是我做商城项目时研究的.大家都知道,云开发是没有后端开发的,所有图片我们要放到云数据库中. 二.素材图: : 三.效果图: 四.代码: wxml: <!--miniprogram/pages/fb/fb.wxml--> <view class='pages'> <view class='top'><text class='top_name'>商品图片:</text></view&g

  • 微信小程序开发之map地图组件定位并手动修改位置偏差

    环境搭建 注册,获取APPID(没有这个不能真鸡调试) 下载微信web开发者工具(挺多bug,将就用) 打开微信web开发者工具,扫码登录,新建小程序,输入APPID,勾选创建quick start项目. 工程结构 可以看到工程根目录中有个app.js,这里可以定义全局变量,通过getApp()获取. 项目中有了一些示例,已经有了获取用户信息的方法等. 开发地图定位,选择位置功能 我们直接修改index页面来做这个功能. 准备 新建imgs目录,加入2个图标(ic_location和ic_pos

  • 微信小程序背景音乐开发详解

    wx.getBackgroundAudioManager()  推荐大家使用背景音乐不在使用audio audio播放音频加载时间长 体验需求达不到 相关文档 https://developers.weixin.qq.com/miniprogram/dev/api/media/background-audio/BackgroundAudioManager.html 相关代码 const bgMusic = wx.getBackgroundAudioManager() //创建背景音乐 Page(

  • 微信小程序开发之转发分享功能

    微信小程序开发之转发分享功能

    官网文档:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html 第一种情况 点击小程序转发 不加入参数 //转发 onShareAppMessage: function() { let users = wx.getStorageSync('user'); if (res.from === 'button') {} return { title: '转发', path: '/pages/

  • 微信小程序 云开发模糊查询实现解析

    这篇文章主要介绍了微信小程序 云开发模糊查询实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 解释: db.RegExp 从基础库 2.3.2 开始(wx-server-sdk 从 0.0.23 开始),数据库支持正则表达式查询,开发者可以在查询语句中使用 JavaScript 原生正则对象或使用 db.RegExp 方法来构造正则对象然后进行字符串匹配.在查询条件中对一个字段进行正则匹配即要求该字段的值可以被给定的正则表达式匹配 事例:

  • 详解微信小程序开发之formId使用（模板消息）

    基于微信小程序的模板消息: 官方文档 基于微信的通知渠道,我们为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验. 模板推送位置:服务通知 模板下发条件:用户本人在微信体系内与页面有交互行为后触发,详见下发条件说明 模板跳转能力:点击查看详情仅能跳转下发模板的该帐号的各个页面 使用案例 场景描述:前台获取 formId 送至后台,由后台实现模板消息的发送.(此处由于 formId 只能由用户触发表单提交操作产生,故前台需要将每次产生的formId发送至后台,由后台保

  • 微信小程序开发搜索功能实现(前端+后端+数据库)

    2019年5月7日更新这是写的最新的一篇文章大家看这篇:https://www.jb51.net/article/157081.htm 界面比较丑,主要实现逻辑... 超级简单的界面,表单,提交按钮,搜索结果展示区域... 下面是index.wxml <!--index.wxml--> <form bindsubmit="formSubmit"> <!--提交按钮 --> <input type="text" name=&q

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

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src=" { { item.img } } " class="image"> </image> 经过仔细观察发现,路径是没问题的,问题在于图片名不能是中文的,把它改成字母+数字就好了. 使用FileSystemManager.readdir(Object object)方法读取本地文件夹中的所有图片,报错

  • 微信小程序 开发中遇到问题总结

    微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function(){ let that = this; wx.request({ url: 'https://a.com/url.php', method: 'GET', success: function(e){ that.data = 123; } }) }; }) //conte

  • 微信小程序开发中var that =this的用法详解

    在微信小程序开发中,var that =this的声明很常见.举个例子,代码如下! 示例代码1 //index.js Page({ data: { toastHidden: true, }, loadData: function () { var that = this//这里声明了that:将this存在that里面 wx.request({ url: 'test.php', data: {a: 'a', b: 'b'}, header: { 'content-type': 'applicat

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    背景 近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路. 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,如下: echarts-for-weixin--echarts微信小程序版本 wx-charts--基于微信小程序的图表库 对比两款图表库优缺点刚好相反. echarts-for-weixin:功能强大,但体积非常大 wx-charts:功能相对简单,但体积小 由于笔者对e

  • 原生微信小程序开发中 redux 的使用详解

    原生微信小程序开发中 redux 的使用详解

    前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改.但是小程序页面直接的数据通信方式十分的简单.通常情况需要自己维护一个全局的对象来存放共有数据.但是,简单的维护一个共有数据实体,会随着业务逻辑的不断复杂化而变的过分庞大,并且数据的修改往往无法很好的溯源.加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段,往往需要在页面和对应的数据实体中同时都维护一份相同的数据,操作十分的不方便. 之前使用过Taro以react+redux的结构来开发微信小程序,依托redux整体上可以解

  • 微信小程序开发之点击按钮退出小程序的实现方法

    微信小程序官方是没有提供退出的API的,但是在navigator这个组件中,是有退出这个功能的: 详情参考官方文档:navigator. 示例代码: <navigator open-type="exit" target="miniProgram">关闭小程序</navigator> 不过这个功能最低支持版本时 2.1.0 ,如果一定要使用这个功能,那么最好在小程序管理后台中设置最低基础库版本不低于2.1.0,如果对小程序支持的最低基础库低于2

  • 微信小程序开发中的疑问解答汇总

    前言 最近总结一篇微信小程序解答,作为小程序填坑人深有体会这里的变化,小程序刚发布消息的时候我就说了一个观点,只要小程序提供的组件或API丰富,稳定,兼容性好,才能实现小程序快速开发的理念,先如今还有很多组件的兼容不理想,有一些还在的优化中,因基于小程序这个平台开发限制很大,只能坐等中...如果想用第三方库来实现,小程序明文规定不支持第三方库的做法,这样做最终小程序审核环节百分百的不通过. 1.scroll-view 在 iOS 上存在 bug 在使用这个组件开发页面的时候,因自带滚动效果,Y

  • 在小程序开发中使用npm的方法

    微信小程序在 2.2.1 版本后增加了对 npm 包加载的支持,使得小程序支持使用 npm 安装第三方包. 1. 在小程序中加载 npm 包 npm install miniprogram-datepicker --production node_modules可以 在小程序根目录下,也可以存在于小程序根目录下的各个子目录中.但是不可以 在小程序根目录外.使用--production选项,可以减少安装一些业务无关的 npm 包,从而减少整个小程序包的大小. 2. 构建 npm 包 在微信小程序开

  • 详解如何在微信小程序开发中正确的使用vant ui组件

    微信小程序终于可以支持npm导入第三方库了(https://developers.weixin.qq....),但是这种导入模式和使用模式有别于我们使用的npm调用.今天我按照有赞新出的vant小程序ui库来讲解如何导入npm资源. 第一步: 在小程序工程的根目录下执行: npm i vant-weapp -S --production 第二步: 保证当前你的微信开发者工具是最新版本,然后点击执行"构建npm" 构建成功后会提示: 同时项目根目录中会多出一个目录"minipr

  • 小程序开发中如何使用async-await并封装公共异步请求的方法

    小程序开发中如何使用async-await并封装公共异步请求的方法

    前言 在平常的项目开发中肯定会遇到同步异步执行的问题,还有的就是当执行某一个操作依赖上一个执行所返回的结果,那么这个时候你会如何解决这个问题呢: 1.是用settimeout让它异步执行,显然这只是让它加入异步任务队列中去执行,但并不能保证等待其返回结果再去执行另一个操作. 2.还是自己封装callback函数?那样就会陷入所谓的回调地狱,代码层层嵌套,环环相扣,逻辑稍微复杂就会很难去维护. 3.当然es6中的promise倒是很好的解决了这样的问题,再配合es7的async和await就更完美

随机推荐