Taro小程序生成二维码保存本地

更新时间:2023-05-14 22:36:40 阅读: 评论:0

Taro⼩程序⽣成⼆维码保存本地步骤 ⽣成⼆维码 - 获取⼆维码的ba64 - 获取权限 - 获得地址 – 保存
import{ QRCode }from"taro-code";
const ref = uRef<any>();
<TView ref={ref}>
<QRCode
text='world'
size={200}
scale={4}
errorCorrectLevel='M'
typeNumber={2}
/>
</TView>
在外⾯加⼀层View 是为了获取taro-code⽣成的image 从⽽获得src 也就是ba64格式的⼆维码图⽚处理权限相关操作
import{
getSetting,
authorize,
saveImageToPhotosAlbum,
getFileSystemManager,
env,
}from"@tarojs/taro";
const handleSaveCode =uCallback(()=>{
getSetting({
success:function({ authSetting }){
//没有权限则申请
if(!authSetting["scope.writePhotosAlbum"]){
authorize({
scope:"scope.writePhotosAlbum",
success:()=>{
//存储⼆维码
handleWriteFile();
},
});
}el handleWriteFile();
},
});
},[]);
handleWriteFile
存储本地逻辑
const handleWriteFile =uCallback(()=>{
const{ src }= ref.current.childNodes[0].props;
const data = src.split(",")[1];
const filePath =`${env.USER_DATA_PATH}/${w()}.png`; const{ writeFile }=getFileSystemManager();
// 写⼊获得⽂件路径
writeFile({
考研政治教材data,
filePath,
encoding:"ba64",
success:()=>{
//存⼊相册
saveImageToPhotosAlbum({
filePath,
success:()=>{
console.log(" ");
},
});
},
fail:(err)=>{
<(err);
},
});
},[]);
完整代码 未必能直接⽤ 进攻参考
import{FC, ReactElement, uCallback, uRef, uState }from"react"; import{ View as TView }from"@tarojs/components";
import{
getSetting,
authorize,
saveImageToPhotosAlbum,
airmailgetFileSystemManager,
env,
}from"@tarojs/taro";
import{ Button, FlexView, View }from"../BUI";
import{ ICode }from"./types";
import Mask from"./Mask";
//@ts-nocheck
import{ QRCode }from"taro-code";
import"./feedQRCode.css";
import{ createCode }from"../../api/feedQRCodeAPI";
interface IProps {
code: ICode;
}
const GenerateQRCode:FC<IProps>=({ code }): ReactElement =>{ const[show, tShow]=uState(fal);
万圣节英文const[loading, tLoading]=uState(fal);
const ref = uRef<any>();
const handlePostCode =uCallback(()=>{
console.log(code);
tLoading(true);
createCode(code)
.then((res)=>{
console.log("res", res);
tLoading(fal);
})
.catch((err)=>{
console.log("err", err);
});
},[code]);
const handleGenerate =uCallback(()=>{征程什么意思
tShow(!show);
//发送请求
if(!show)handlePostCode();
},[handlePostCode, show]);
const handleWriteFile =uCallback(()=>{
const ba64 = ref.current.childNodes[0].props.src;
const data = ba64.split(",")[1];
const filePath =`${env.USER_DATA_PATH}/${w()}.png`;    console.log(filePath);
const{ writeFile }=getFileSystemManager();
writeFile({
data,
filePath,
encoding:"ba64",
success:(res)=>{
footbar
console.log(res);
//
saveImageToPhotosAlbum({
filePath,
success:()=>{
console.log(" ");
},
});
},
fail:(err)=>{
<(err);
},
职员英文});
},[]);
const handleSaveCode =uCallback(()=>{
getSetting({
success:function({ authSetting }){
//没有权限则申请
if(!authSetting["scope.writePhotosAlbum"]){
authorize({
relative是什么意思
scope:"scope.writePhotosAlbum",
success:()=>{
/
/存储⼆维码
handleWriteFile();
托福辅导
},
});
}el handleWriteFile();
},
});
},[]);
return(
<View
className='container'
style={{ bottom: show ?0:"calc(46px - 50vh)"}}
>要塞的意思
<Button
width='100%'
onClick={handleGenerate}
letterSpacing='2px'
radius='0'
>
⽣成⼆维码
</Button>
<FlexView
column
width='100%'
alignItems='center'
justifyContent='space-evenly'
style={{
filter: loading ?"blur(10rpx)":undefined,
flex:1,
}}
>
<TView ref={ref}>
<QRCode
text='world'
size={200}
scale={4}
errorCorrectLevel='M'
typeNumber={2}
/>
</TView>
<FlexView width='100%'>
<Button onClick={handleSaveCode}>保存本地</Button>
汉英字典免费下载<Button>查看页⾯</Button>
</FlexView>
</FlexView>
<Mask state={loading}/>
</View>
);
};
export default GenerateQRCode;

本文发布于:2023-05-14 22:36:40,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/108652.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:权限   维码   意思   获得   处理   考研   进攻
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图