这个方法的解决思路是: 将rich-text html中的img的src从云端存储的id转变为http形式的临时url.微信中提供了这个方法.wx.cloud.getTempFileURL.
这个方法的缺陷也是rich-text的缺陷是:这样转换的img不能预览,rich-text是一个封闭的容器,其中的image的事件js捕捉不到.因此预览方法不能使用.
具体的操作步骤:
1 //首先从云端数据库中读取数据 2 db.collection(\'flowsDetail\').doc(options.id).get({ 3 success: function (res) { 4 // res.data 包含该记录的数据 5 var timestamp = Date.parse(new Date()); 6 let expiration = timestamp + 100000; 7 wx.setStorage({ 8 key: \'flowDetail\'+options.id, 9 data: res.data, 10 }) 11 wx.setStorageSync("expiration_flowDetail" + options.id, expiration); 12 13 //得到要存入rich-text中的message. 14 var _message=res.data.message; 15 var img_index= _message.indexOf("img") 16 console.log(img_index); 17 18 //如果message中有img 19 if (img_index>-1){ 20 //找到云端的src 21 var srcindex = _message.indexOf("cloud:"); 22 var pngindex=_message.indexOf(".png"); 23 var src = _message.substring(srcindex, pngindex+4); 24 console.log(src); 25 //使用wx提供的getTempFileURL的方法获取临时url 26 wx.cloud.getTempFileURL({ 27 fileList: [src], 28 success: res => { 29 // 将原来message中的img的src 云端id转换为零时的fileId 30 // console.log(res.fileList[0].tempFileURL); 31 var newMess = _message.replace(src, res.fileList[0].tempFileURL); 32 //设置message 33 _this.setData({ message: newMess}); 34 }, 35 }) 36 }else{ 37 console.log("没有img"); 38 }
请发表评论