Scene description

Wechat small program, there is a very convenient function, that is, long press the picture can be saved to the mobile phone album, currently Huawei Fast application has no direct interface to achieve, the following describes how to achieve this function through event triggering.

Implementation approach

Fast application components all support the general event longpress (longpress), so consider using the image component to render the image, and then implement the longpress event on the image component, trigger the image to save the function of the phone album.

The solution

The code is as follows:

<template> <div class="doc-page"> <div class="page-title-wrap"> <text class="page-title">{{componentName}}</text> </div>  <div class="item-container"> <text class="item-title">Remote image:https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1</text> <div class="item-content"> <image src="https://tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1" id="image" style="object-fit:cover" onlongpress="onImageLongpress"></image> </div> </div> </div> </template> <style> .doc-page { flex: 1; flex-direction: column; } .item-container { margin-top: 40px; margin-bottom: 40px; flex-direction: column; } .item-title { padding-left: 30px; padding-bottom: 20px; color: #aaaaaa; } .item-content { height: 200px; justify-content: center; } #image { width: 240px; height: 160px; object-fit: contain; } </style> <script> import prompt from'@system.prompt' import media from '@system.media' export default{ private: {componentName:" componentName ", inputImageURL: 'HTTPS: //tse1-mm.cn.bing.net/th/id/OIP.QFyNrABM6FhaY_0TCuUZqgHaFj?pid=Api&rs=1' }, onInit(){ this.$page.setTitleBar({text: 'Long press image to save example '}); }, onImageLongpress(){ var that=this; Prompt. ShowDialog ({message: 'hold down to save pictures ', buttons: [{text:' ok ', color: '#33dd44'}, {text: 'Unbutton ', color: '#33dd44'}, '#33dd44' }], success: function(data){ console.log("handling callback",data); If (data.index===0) {that.$element("image").totempFilepath ({fileType: 'JPG ', quality: 1.0, success: function (ret) { console.log('toTempFilePath success:tempFilePath=' + ret.tempFilePath) media.saveToPhotosAlbum ({ uri: ret.tempFilePath, success:function(data) { console.log("save picture success"); }, fail: function(data, code) { console.log("handling fail, code=" + code); } }) }, fail: function (msg, code) { console.log('toTempFilePath failed:code=' + code + '; msg=' + msg); }, complete: function (ret) { console.log('toTempFilePath complete'); } }) } }, cancel: function(){ console.log("cancel"); } }) } } </script>Copy the code

More reference

Quick Application API documentation reference:

Developer.huawei.com/consumer/cn…

The original link: developer.huawei.com/consumer/cn…

By Mayism