美文网首页微信小程序开发
小程序动态生成小程序码(带参数)以及接收参数

小程序动态生成小程序码(带参数)以及接收参数

作者: 可怜的小黑兔 | 来源:发表于2019-08-09 11:27 被阅读85次

    前言

    在小程序中,我们通过canvas绘制图片并分享到朋友圈中,但是我们怎么才能在绘制的小程序码上带参数呢?如下图:

    动态生成小程序码.jpg
    这里我们需要带着参数去生成新的小程序码(通过后台接口可以获取小程序任意页面的小程序码)

    场景

    官方提供了生成小程序码的几种方式:

    生成小程序码

    page是页面地址,例如:'pages/index/index'。pages前面不能有斜杠
    scene是参数,为字符串。比如要传入id=33,那么scene参数就可以写成"33",多个参数以&分开,如第二个参数是code=44,则是"33&44"。

    Page({
      onLoad(options) {
        this.getCode();
      },
      getCode() { //获取动态小程序码
        wx.request({
          url: 'url', //后端接口
          method: 'POST',
          dataType: 'json',
          data: {
            page: "pages/index/index",
            scene: "33&44"
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            //后端返回的小程序码服务器地址(默认是二进制图片,我这里是后端处理过了)
            console.log(res);
            //此处是将小程序码下载到本地,用于canvas绘图(ps:网络图片一定要先下载到本地)
            wx.downloadFile({
              url: res.data.data, //上方返回的服务器小程序码地址
              success: res1 => {
                if (res1.statusCode === 200) {
                  //下载成功,我这里是执行的canvas绘图方法(canvas绘图可看下篇文章)
                  this.canvasPoster(res1); 
                }
              }
            });
          }
        });
      }
    })
    

    获取参数

    Page({
      onLoad (options) {
        //需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
        let scene = decodeURIComponent(options.scene);
        let id = scene.split("&")[0];
        let code = scene.split('&')[1];
      }
    })
    

    相关文章

      网友评论

        本文标题:小程序动态生成小程序码(带参数)以及接收参数

        本文链接:https://www.haomeiwen.com/subject/nudcjctx.html