Taro小程序生成高清晰的海报

Taro小程序生成高清晰的海报

小程序中我们通常是希望先拿到openid再去做登录或者别的操作,我们发现有时候app.js中获取的openid会有时候比在index.js中后执行，解决办法

@/utils/tools.js

export const PromiseGetOpenId=()=>{
  return new Promise(async(resove,reject)=>{
   try{
        let {code}=await Taro.login();//获取code
        let {openid}=await getCode(code);//拿openid;
        resove(openid,code)
        
       }catch (error) {
         reject(error)
       }
  })
}

pages/index/index 中使用
PromiseGetOpenId(openid,code).then(()=>{
    //逻辑
})

小程序通用的登录授权

@/utils/tools.js


export const getPhoneNumber =  (e,code) => { //微信授权登录
  // let {code}=this.state; //这里的code要在登录的当前页面中willDidMount中获到以后在存到state,
  //否则偶尔会报错session_key不匹配
  return new Promise(async(resolve,reject)=>{
     let {encryptedData, iv,errMsg} = e.detail;
      if (errMsg == 'getPhoneNumber:ok') { //同意授权
        Taro.showLoading({icon:'loading',mask: "true",title:'授权中'});
        let {token} = await WxLogin({encryptedData,iv,code})
        if (token) {
           setStorage(`${process.env.TOKEN}`, token);
            let userInfo = await getUser(); //用户的具体信息
            let mobile=["18198951094"];//代理商配置
            if(mobile.includes(userInfo.mobile)){
              userInfo={...userInfo,authType:'FXS'}
            }
            Taro.showToast({
              title: '授权成功',
              icon: 'success',
              duration: 1500
            })
            resolve({token,userInfo})
        }
      } else {
        Taro.showToast({
          title: '您拒绝了授权',
          icon: 'error',
          duration: 2000
        })
      }
  })
}

使用
getPhoneNumber({token,userInfo}).then((res)=>{
//逻辑
})

对于小程序页面中多张图片做下拉到可视区域再加载（懒加载）

state={
  imgList:[
      {src:`${process.env.BASE_URL}/store/front/xuanfu/01.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/02.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/03.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/04.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/05.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/06.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/07.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/08.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/09.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/010.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/011.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/012.jpg`,show:false},
      {src:`${process.env.BASE_URL}/store/front/xuanfu/013.jpg`,show:false},
    ]
}

 <View className='imgList'>
  {
    imgList.map((item,index)=>
    <View key={index}>
        <Image className={['item-'+index,'img'].join(' ')} data-index={index} 
        src={item.show?item.src:''} mode='widthFix' />
    </View>)
  }
</View>


 componentDidMount () { 
    let {imgList}=this.state;
     imgList.forEach((item,i)=>{
      const viewPort=Taro.createIntersectionObserver().relativeToViewport();
      viewPort.observe(`.item-${i}`,(res)=>{
        let index=res.dataset.index;
        imgList[index].show=true;
        this.setState({imgList})
      })
    })
  }
 

小程序生成海报 使用的是 mina-painter（效果如图）

import Painter from "mina-painter";

<View>
     <Painter
      customStyle='position: absolute; left: -9999rpx;' 
      palette={template}
      widthPixels="1000"
      onImgOK={(e)=>this.onImgOK(e)}
     />
      {
        imagePath&&<View className='create_poster'>
            <Poster imagePath={imagePath} onclose={()=>this.close()}/>
        </View>
      }
</View>

createPoster=async ()=>{
  let {qrcodeUrl,qrcodeValue}=this.state;
    let json={
      width: `1125rpx`,
      height: `2436rpx`,
      background: `${process.env.BASE_URL}/store/front/xuanfu/20230301173259.jpg`,
      views: [
        { 
          id:'avator',
          type: 'image',
          url: https//avator,
          css: {
            top: `30px`,
            left: `30px`,
            width: `150px`,
            height:`150px`,
            mode: 'aspectFill',
            borderRadius: '20px',
            borderWidth: '5rpx',
            borderColor: '#FFFFFF',
          },
        },
        {
          id:'nameTxtId',
          type: 'text',
          text:user&&user.name,
          // text:'我是一个名字',
          css: {
            // width:'180rpx',
            left: `calc(avator.width + 120rpx)`,
            top: `calc(avator.top + 110rpx)`,
            fontSize: `90rpx`,
            fontWeight:600,
            textAlign:'center',
            color:'#333'
          },
        },
        {
          id:'ImageId',
          type: 'image',
          url: path,
          css: {
            width: `180px`,
            height:`180px`,
            // borderRadius: '100%',
            mode: 'aspectFill',
            bottom:'140px',

            left:'300px',
          }
        },
        {
          type: 'qrcode',
          content:qrcodeValue,
          css: {
            background:'#fff',
            bottom:'140px',
            right: '300px',
            width: '180px',
            height: '180px',
          },
        },
      ],
    }
    this.setState({template:json})
  }
  

注：生成海报的时候图片需要等比缩放，根据需求

对于小程序中解析图片的二维码，比如我们需要用户长传一张带二维码的名片，用户随意的截图上传，我们合成的海报就比较丑，解决的办法就是解析图片中二维码的值，再转成规则的二维码

前端最直接的解决办法

Taro.scanCode({
      onlyFromCamera:false,   //值为 false  既可以使用相机也可以使用相册，  值为true 只能使用相机
       scanType:['qrCode'], //分别对应 一维码  二维码  DataMatrix码  PDF417条码  
      success: async (res) => { //扫码成功后
       console.log('我是解析')
       console.log(res)
       console.log('我是解析')
      //res.result		所扫码的内容
      //res.scanType		所扫码的类型
      //res.charSet		所扫码的字符集
      //res.path			当所扫的码为当前小程序二维码时，会返回此字段，内容为二维码携       带的 path
      //res.rawData		原始数据，base64编码
       },
       fail: (res) => {//扫码失败后
         console.log('我是解析失败')
          console.log('我是解析失败')
       },
     })