【Taro开发】-页面生成二维码及保存到本地（十）

Taro小程序开发

系列文章的所有文章的目录

【Taro开发】-初始化项目（一）

【Taro开发】-路由传参及页面事件调用（二）

【Taro开发】-taro-ui（三）

【Taro开发】-带token网络请求封装（四）

【Taro开发】-自定义导航栏NavBar（五）

【Taro开发】-formData图片上传组件（六）

【Taro开发】-封装Form表单组件和表单检验（七）

【Taro开发】-tabs标签页及子组件的下拉刷新（八）

【Taro开发】-简易的checkBoxGroup组件（九）

【Taro开发】-页面生成二维码及保存到本地（十）

【Taro开发】-宣传海报，实现canvas实现圆角画布/图片拼接二维码并保存（十一）

【Taro开发】-分享给好友/朋友圈（十二）

【Taro开发】-小程序自动打包上传并生成预览二维码（十三）

【Taro开发】-全局自定义导航栏适配消息通知框位置及其他问题（十四）

---

---

前言

基于Taro的微信小程序开发，主要组件库为Taro-ui

实现效果：
1.生成二维码
2.保存到本地

宣传海报的生成将在后续更新

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.生成二维码

引入第三方

import { Barcode, QRCode } from "taro-code";

<View ref={c => (this.codeRef = c)} className="batchCode">
     <QRCode
        text={codeUrl}
        size={stylePerInJs(420)}
        scale={4}
        errorCorrectLevel="M"
        typeNumber={2}
     />
</View>

2.保存到本地

请求权限并保存

import Taro, {
  getCurrentInstance,
  getFileSystemManager,
  saveImageToPhotosAlbum,
  authorize,
  getSetting,
  env
} from "@tarojs/taro";

export function handleSaveCode(refNode, callBack) {
//refNode（view内即为要保存的图片）
//callBack为方法，传出保存结果
  getSetting({
    success: function ({ authSetting }) {
      //没有权限则申请
      if (!authSetting["scope.writePhotosAlbum"]) {
        authorize({
          scope: "scope.writePhotosAlbum",
          success: () => {
            handleWriteFile(refNode, (res) => callBack && callBack(res));
          }
        });
      } else handleWriteFile(refNode, (res) => callBack && callBack(res));
    }
  });
};

export async function handleWriteFile(ref, callBack) {
  //获得临时路径并保存图片
  const base64 = ref.childNodes[0].props.src;
  const data = base64.split(",")[1];
  const filePath = `${env.USER_DATA_PATH}/${Date.now()}.png`;
  const { writeFile } = getFileSystemManager()
  writeFile({
    data,
    filePath,
    encoding: "base64",
    success: res => {
      saveImageToPhotosAlbum({
        filePath,
        success: () => {
          callBack && callBack(true)
          Taro.atMessage({
            type: "success",
            message: "保存成功！"
          });
        },
        fail: () => {
          callBack && callBack(false)
          Taro.atMessage({
            type: "error",
            message: "保存失败！"
          });
        }
      });
    },
    fail: err => {
      callBack && callBack(false)
      console.error(err);
    }
  });
};

调用

<AtButton
   className="holdPhone"
   type="primary"
   circle
   onClick={() => {
     handleSaveCode(
        this.codeRef,//节点内层为二维码
        res => res && this.setState({ codeShow: false}));//回调函数，成功即关闭弹窗
    }}
    >
       保存至手机相册
</AtButton>