小程序 前端 实现生成分享二维码(可带参数 无需配置)(后端可借鉴)

    生成可带参数小程序二维码前后端都可以实现,但是最好还是由后端来生成传递给前端这边我是前端的主要介绍前端生成的方法,携带的参数scene 有长度限制 但是足够满足正常分享的需求了,官方文档都有说明,不是特别的难。

    首先获取access_token 是开发小程序后端的必要参数,同样前端也是通过请求官方提供的接口来获取,取得token就很简单了,直接调用官方的接口,获取带参数的小程序二维码(注意返回的格式 由于是前端处理的会有格式问题 如果是后端的话  就可以直接存储数据库) 前端及转换格式 image 承接显示图片   

要在有权限的小程序开发者里面测试

获取    access_token

/** * 获取access_token * * @paramappid * @paramappsecret * @return*/

官方文档 获取 access_token

wx.request({

      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx9743427e009a5d0&secret=decff2504655b08ec20260e3699039c',

      method: 'get',

      success: function (res) {

        console.log(res)

      }

    })

拿到access_token 获取 小程序二维码 (原数据为二进制图片)请求方法设置返回格式 为arraybuffer 

官方文档 获取小程序二维码

let data = {

      scene: '123456',要传递的参数 最高32位

      page: 'pages/hotinfo/hotinfo',扫码进入的小程序页面

    }

wx.request({

      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=31_92uKEw2joJRdBP75gViNwBwZu-LGZ4-99EwkjpOy-iT3yW4B4Q7e_iscapbVQ3uIBoJXdo5sv0IJVyz8e6XfxAZHAbmmSFi8W1Fhu-OTSNJBQ57_h0aOlfjUIxChman-gaxZy_XOQVgdwpJ8DTRaAFAJZX',

      method: 'post',

      data:data,

      // dataType: 'json',

      responseType: 'arraybuffer',         //将返回数据 按文本解析修改为arraybuffer

      success: function (res) {

        console.log()

        self.setData({

           //再arraybuffer转为base64  显示图片

          url: 'data:image/png;base64,'+wx.arrayBufferToBase64(res.data)

        })

      }

    })

注意  https://api.weixin.qq.com接口 必须由后端请求返回对应参数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一.技术栈 1.画布组件 2.js画布绘制对象以及常用方法 CanvasContextwx.cre...
    攻城熊阅读 2,101评论 0 0
  • 本来年底跑路了,但上上家公司还一直打电话、发视频叫我帮忙做事,最多的就是生成小程序界面二维码供市场部推广(写需求也...
    沉船无数阅读 3,265评论 0 0
  • 微信公众号开发 ​前面做过 HG 项目的微信端,里面用到微信扫码、支付、图片选取、拍照、分享的功能。用到 weix...
    Ghnhxg阅读 545评论 1 1
  • 第一次用简书,觉得简书有着印象笔记没有的功能,在线分享资源,并且还是富文本编辑器类型。现在项目是采用前后端分离,用...
    zhuyuansj阅读 3,002评论 0 16
  • 初识彭小六是在简书平台上,通过他的文章了解到他是名斜杠青年。他不仅是名IT主管,会带团队,会玩手绘,会画思维导图,...
    花开candy阅读 970评论 4 19