小程序使用二维码跳转指定的页面

小程序使用二维码跳转指定的页面

解决方案:配置普通二维码扫描规则
登录微信公众平台->选择小程序->开发->开发设置->添加“扫普通链接二维码打开小程序->添加
小程序使用二维码跳转指定的页面_第1张图片
生成二维码的代码 网络上找的:

// An highlighted block
<form bindsubmit="formSubmit">
        <view class="input-row">
            <label>网址</label>
            <input name='url' value='配置的测试路径' 
                type="text" maxlength="255" placeholder="{{placeholder}}" />
        </view>
        <button formType="submit" class="mybtn" type="primary">生成二维码</button>
    </form>
    <view class="img-box">
        <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
    </view>
    <view hidden="{{maskHidden}}" class="mask"></view>
    <view class="canvas-box">
        <canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas" />
    </view>
  // 生成二维码
  formSubmit: function (e) {
    var that = this;
    var url = e.detail.value.url;
    if (url === "") {
      wx.showToast({
        icon: 'none',
        title: '请输入网址',
        duration: 2000
      });
      return;
    }
    that.setData({
      maskHidden: false,
    });
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration: 2000
    });
    var st = setTimeout(function () {
      wx.hideToast()
      var size = that.setCanvasSize();
      //绘制二维码
      that.createQrCode(url, "mycanvas", size.w, size.h);
      that.setData({
        maskHidden: true
      });
      clearTimeout(st);
    }, 2000)
  },
  //点击图片进行预览,长按保存分享图片
  previewImg: function (e) {
    var img = this.data.imagePath;
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  //适配不同屏幕大小的canvas
  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 686; //不同屏幕下canvas的适配比例;设计稿是750宽
      var width = res.windowWidth / scale;
      var height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    return size;
  },
  createQrCode: function (url, canvasId, cavW, cavH) {
    //调用插件中的draw方法,绘制二维码图片
    QR.api.draw(url, canvasId, cavW, cavH, this, this.canvasToTempImage);
    // setTimeout(() => { this.canvasToTempImage();},100);
  },
  //获取临时缓存照片路径,存入data中
  canvasToTempImage: function () {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function (res) {
        var tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
        that.setData({
          imagePath: tempFilePath,
        });
      },
      fail: function (res) {
        console.log(res);
      }
    }, that);
  },

你可能感兴趣的:(小程序)