uniapp+小技巧

日常开发收集，

1. 页面刷新 uni.navigateBack() 无效

// 点击返回
cliNavBack() {
    let canNavBack = getCurrentPages();  
    if(canNavBack && canNavBack.length>1) {  
        uni.navigateBack({delta: 1});  
    } else {  
        history.back();  
    }  
    return false
},

2. canvas 签名区域组件

<template>
    <view class="qinaming">
        <canvas class="mycanvas" canvas-id="mycanvas" 
        @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
        :disable-scroll='true'
        ></canvas>
        <view class="close" @click="clear">
            <uni-icons type="loop"></uni-icons>
            清空重签
        </view>
    </view>
</template>

<script>
    var x = 20;
    var y =20;
    export default{
        data(){
            return {
                ctx: '',         //绘图图像
                points: [],       //路径点集合 
                isEnd: false, // 是否结束签名
                image:'',
                yuliu:''
            }
        },
        created() {
            this.ctx = uni.createCanvasContext("mycanvas",this);   //创建绘图对象
            //设置画笔样式
            this.ctx.lineWidth = 4;
            this.ctx.lineCap = "round"
            this.ctx.lineJoin = "round"
            this.ctx.fillStyle="#f4f4f4"
            this.ctx.fillRect(0,0,300,300);
        },
        methods:{
            //触摸开始，获取到起点
            touchstart:function(e){
                let startX = e.changedTouches[0].x;
                let startY = e.changedTouches[0].y;
                let startPoint = {X:startX,Y:startY};
                this.points.push(startPoint);
                //每次触摸开始，开启新的路径
                this.ctx.beginPath();
            },
            //触摸移动，获取到路径点
            touchmove:function(e){
                let moveX = e.changedTouches[0].x;
                let moveY = e.changedTouches[0].y;
                let movePoint = {X:moveX,Y:moveY};
                this.points.push(movePoint);       //存点
                let len = this.points.length;
                if(len>=2){
                    this.draw();                   //绘制路径
                }
                
            },
            // 触摸结束，将未绘制的点清空防止对后续路径产生干扰
            touchend:function(){                   
                this.points=[];
                this.isEnd = true
                this.finish()
            },
            
            /* ***********************************************
            #   绘制笔迹
            #    1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
            #    2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
            #    3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
            ************************************************ */
            draw: function() {
                let point1 = this.points[0]
                let point2 = this.points[1]
                this.points.shift()
                this.ctx.moveTo(point1.X, point1.Y)
                this.ctx.lineTo(point2.X, point2.Y)
                this.ctx.stroke()
                this.ctx.draw(true)
            },
            //清空画布
            clear:function(){
                let that = this;
                uni.getSystemInfo({
                    success: function(res) {
                        let canvasw = res.windowWidth;
                        let canvash = res.windowHeight;
                        that.ctx.clearRect(0, 0, canvasw, canvash);
                        that.ctx.draw(true);
                    },
                })
            },
            //完成绘画并保存到本地
            finish:function(){
                let that = this
                if(!this.isEnd){
                    uni.showToast({
                        title: '请先完成签名',
                        icon: "none",
                        duration: 1500,
                        mask: true
                    })
                    return
                }
                uni.canvasToTempFilePath({
                    canvasId: 'mycanvas',
                    fileType:'png',
                    success: function(res) {
                        console.log(res);
                        that.yuliu=res.tempFilePath
                        that.debounce(that.fanhuiImg())
                    } 
                })
            },
            // 手写一个防抖函数来解决重复请求后台服务器的问题
            debounce(fn) {
                var timer = null;
                let that=this
                return function () {
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        timer=null
                        fn.apply(this, arguments);
                    }, 1000)
                }
            },
            fanhuiImg(){
                this.$emit('signDone',this.yuliu)
            },
            // 生成图片
            createImg:function(dataurl, filename = 'file'){
                let arr = dataurl.split(',')
                let mime = arr[0].match(/:(.*?);/)[1]
                let suffix = mime.split('/')[1]
                let bstr = atob(arr[1])
                let n = bstr.length
                let u8arr = new Uint8Array(n)
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n)
                }
                return new File([u8arr], `${filename}.${suffix}`, {
                    type: mime
                })    
            }
        },
    }
</script>

<style>
    .qinaming{
        height: 400rpx;
        background-color: #f4f4f4;
    }
    .mycanvas{
        height: 350rpx;
        width: 100%;
    }
    .close{font-size: 22rpx;display: flex;justify-content: flex-end;align-items: center;margin-right: 30rpx;}
</style>

3. html2canvas生成海报图片，将编写的样式截屏成图片

注意：网络图片本地生成后会空白 上线后图片正常显示

npm install --save html2canvas

<template>
    <view class="haibao">
         <!-- 生成图片的标签展示 -->
        <view id="capture" class="imgsc"></view>
           <!-- 想要生成照片的区域 -->
        <view id="shouxie" class="shouxie" v-if="!isSuccess">
             <!-- 需要自己写出来 -->  
        </view>
    </view>
</template>

<script>
    import html2canvas from 'html2canvas';
    export default {
        data() {
            return {
                isSuccess:false
            };
        },
        onLoad() {
            this.getInit()
        },
        methods:{
            shengChengNum(){
                return Date.now ();
            },
            getInit(){
                uni.showLoading({title:'生成中...'})
                setTimeout(()=>{
                    this.cliShengCheng()
                },2000)
            },
            cliShengCheng(){
                html2canvas(document.querySelector('#shouxie'),{}).then(function(canvas) {
                    let oImg = new Image();
                    oImg.src = canvas.toDataURL(); 
                    const imgData = canvas.toDataURL('image/jpeg', 1.0);
                    document.querySelector('#capture').appendChild(canvas);
                    console.log(canvas,imgData);
                }).then(()=>{
                    uni.hideLoading();
                    this.isSuccess=true;
                    this.downloadImg()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
</style>