微信小程序签名(绝不黑屏)

<!--pages/topay/sign/sign.wxml-->
<view style="padding: 15rpx;font-size: 26rpx;">
    <view style="width: 720rpx;margin-left: 15rpx;">
        <view><rich-text nodes="{{content}}"></rich-text></view>
        <view style="margin-top: 50rpx;">
            <view style="display: flex;">
               <view>签名</view>
               <view style="position: absolute;margin-left: 60rpx;margin-top: -30rpx;"><image style="width: 170rpx;height: 60rpx;" src="{{img}}"></image></view>
            </view>
            <view style="width: 200rpx;border-bottom: 1rpx solid #000000;margin-left: 56rpx;"></view>
            <view wx:if="{{img == ''}}" style="text-align: center;margin-top: 50rpx;width: 730rpx;">
                <view class="dade_sign"  bindtap="sign">签名</view>
            </view>
            <view wx:else style="text-align: center;margin-top: 50rpx;width: 730rpx;">
                <view class="dade_sign_xh"  bindtap="xhsign">确定签署协议</view>
            </view>
        </view>
        <!-- 签名画布 -->
        <view style="{{sign==1 ? ' display: none;' : ''}}">
            <view class="dade_sign_top" catchtouchmove='true'>
                <view style="display: flex;line-height: 70rpx;">
                   <view style="width: 750rpx;text-align: center;">开始签名</view>
                   <view style="position: absolute;right: 50rpx;" bindtap="colse">关闭</view>
                </view>
                <view>
                    <canvas style="width: 750rpx;background-color: rgb(242, 247, 247);position: fixed;" canvas-id="firstCanvas" id='firstCanvas' bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
                </view>
                <view style="display: flex;position: absolute;bottom: 40rpx;">
                    <button style="font-size: 26rpx;height: 70rpx;border-radius: 100rpx;padding: 0 105rpx;margin-top: 40rpx;background-color: rgb(247, 145, 86);margin-left: 66rpx;" type="warn" bindtap='clear'>重签</button>
                    <button style="font-size: 26rpx;height: 70rpx;border-radius: 100rpx;padding: 0 75rpx;margin-top: 40rpx;background-color: rgb(74, 135, 248);margin-left: 66rpx;" type="primary"  bindtap='export'>完成签名</button>
                </view>
            </view>
        </view>
 
    </view>
    
</view>

// pages/topay/sign/sign.js
var app = getApp();
var api = require('../../../api.js');
var util = require("../../../utils/util.js");
Page({

    /**
     * 页面的初始数据
     */
    data: {
        context: null,
        index: 0,
        height: 0,
        width: 0,
        img:'',
        sign:1,
        url:'',
        path:'',
        content:'',
    },

    /**记录开始点 */
  bindtouchstart: function(e) {
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
  /**记录移动点，刷新绘制 */
  bindtouchmove: function(e) {
    this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    this.data.context.stroke();
    this.data.context.draw(true);
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
  },
  
  /**清空画布 */
  clear: function() {
    this.data.context.clearRect(0, 0, this.data.width, this.data.height);
    this.data.context.draw();
    this.data.context.setStrokeStyle('#000000')
    this.data.context.setLineWidth(4)
    this.data.context.setFillStyle('white')
    this.data.context.setFontSize(20)
    let str = "";
    this.data.context.fillText(str, Math.ceil((this.data.width - this.data.context.measureText(str).width) / 2), Math.ceil(this.data.height / 2) - 20)
    this.data.context.draw()
  },
  /**导出图片 */
  export: function() {
    const that=this;
    wx.canvasToTempFilePath({
        canvasId: 'firstCanvas',
        success: function(res) {
          //打印图片路径
          //console.log(res.tempFilePath)
          //设置保存的图片
          // that.setData({
          //   img: res.tempFilePath
          // })
          let imgurl = res.tempFilePath;
        wx.getFileSystemManager().readFile({
            filePath: res.tempFilePath, //选择图片返回的相对路径
            encoding: 'base64', //编码格式
            success: res => {
                let imgs =  res.data;
                let data = {'img':imgs};
                util.post({
                    api_url: api.payOrderSign,
                    params: data,
                    success: function (res) {
                        console.log(res.data.data.data)
                        that.data.sign = 1;
                        that.data.context.setLineWidth(4)
                        that.data.context.setFillStyle('white')
                        that.data.url=res.data.data.data;
                        that.data.path=res.data.data.path;
                        that.setData({
                            img:res.data.data.data,
                            sign:1
                        })
                    }, fail: function (res) {
                        that.setData({"loading.hidden": true});
                        util.showMsg("网络不给力");
                    }
                }); 
            }
          })
      }
    })
  },
  onLoad: function(options) {
    console.log(options.id);
    if (options.id) {
      wx.showToast({
        title: '姓名' + options.id,
        icon: 'success',
        duration: 2000
      })
    }
  },
  onShow: function() {
    let query = wx.createSelectorQuery();
    const that = this;
    query.select('#firstCanvas').boundingClientRect();
    query.exec(function(rect) {
      let width = rect[0].width;
      let height = rect[0].height;
      that.setData({
        width,
        height
      });
      const context = wx.createCanvasContext('firstCanvas')
      
      context.setStrokeStyle('#000000')
      context.setLineWidth(4)
      context.setFontSize(20)
      context.setFillStyle('white')
      let str = "";
      context.fillText(str, Math.ceil((width - context.measureText(str).width) / 2), Math.ceil(height / 2) - 20)
      context.draw()
      that.setData({
        context: context
      })
    });
  },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let _this = this;
        var data = {'shool_id':3};
        util.post({
            api_url: api.payGetSign,
            params: data,
            success: function (res) {
                _this.data.content = res.data.data.data[0].content;
                _this.setData({
                    content:res.data.data.data[0].content
                })
            }, fail: function (res) {
                that.setData({"loading.hidden": true});
                util.showMsg("网络不给力");
            }
        }); 
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },


    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },



    // 签名
    sign:function(){
        this.data.sign = 2;
        this.setData({
            sign:2
        })
    },
    //关闭签名
    colse:function(){
        this.data.sign = 1;
        this.setData({
            sign:1
        })
    },
    //确定签署协议
    xhsign:function(){
        var pages = getCurrentPages();
        var prevPage = pages[pages.length - 2]; // 上一个页面
        let urls = this.data.url;
        let paths = this.data.path;
        let contents = this.data.content;
        console.log(urls)
        //改变上一页参数
        prevPage.setData({
            url:urls,
            path:paths,
            content:contents,
        })
        //返回上一页
        wx.navigateBack({
            delta: 1
        })
    },

})

/* pages/topay/sign/sign.wxss */
page {
    background-color: #ffffff;
}
.dade_sign{
    width: 100rpx;
    background-color: rgb(40, 122, 245);
    padding: 10rpx 15rpx 10rpx 15rpx;
    border-radius: 100rpx;
    font-size: 25rpx;
    color: #ffffff;
    margin-left: 300rpx;
    margin-bottom: 10rpx;
}
.dade_sign_xh{
    width: 200rpx;
    background-color: rgb(231, 65, 74);
    padding: 10rpx 15rpx 10rpx 15rpx;
    border-radius: 100rpx;
    font-size: 25rpx;
    color: #ffffff;
    margin-left: 270rpx;
    margin-bottom: 10rpx;
}

.dade_sign_top{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 530rpx;
    background-color: #ffffff;
    border-top-left-radius: 10rpx;
    border-top-right-radius: 10rpx;
    z-index: 1000;
}