精华内容
下载资源
问答
  • 完整的生成二维码方法,并有压缩图片的方法,包括小程序跳转二维码h5跳转二维码两种
  • H5网页生成小程序二维码海报

    千次阅读 2019-12-02 10:17:28
    1.产品需求生成一张带有小程序二维码的海报 要求:1.携带邀请人信息;2.携带小程序页面参数 解决办法: 1.通过后端请求微信服务器拿到带参数的小程序二维码; 接口参照 ...2.将二维码用canv...

    1.产品需求生成一张带有小程序二维码的海报
    要求:1.携带邀请人信息;2.携带小程序页面参数

    解决办法:
    1.通过后端请求微信服务器拿到带参数的小程序二维码;
    接口参照
    https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
    2.将二维码用canvas画到海报上;

      <canvas id="canvas" width="530" height="760" v-show="false">
                浏览器版本太低,请更新浏览器
      </canvas>
      <img  id="newimage" src="" style="width: 256px;height: 380px;">
            newImage2(job) {
                    // 生成图片
                    const rate = window.devicePixelRatio // 获取屏幕像素比
                    let code = '9527'  // 邀请码
                    let jobId = '11111111'        // 小程序页面参数
                    getWxCodeApi({ // 后端提供的接口,前端提供生成二维码的参数
                        "scene": code + '&' + jobId, // **参数长度不能超过32位**
                        "width": 430, // 二维码宽度
                        "page": "pages/jobDetail/jobDetail" // 小程序路径
                    }).then(res => {
                        var imageBox = document.getElementById("newimage")
                        var canvas = document.getElementById("canvas")
                        canvas.width = 265 * rate
                        canvas.height = 380 * rate
                        var cxt = canvas.getContext("2d")
                        var img = new Image()
                        img.setAttribute('crossOrigin', 'anonymous');
                        // 如果是网络的图片需要增加这句且服务器支持跨域,否则报错
                        img.src = 'https://wodan-idc.oss-cn-hangzhou.aliyuncs.com/shijianke-wap/h5/test/partner/img/poster_bg.png'
                        // 图片加载完成,才可处理
                        img.onload = () => {  // 画背景
                            cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, 265 * rate, 380 * rate)
                            // 二维码
                            var img2 = new Image()
                            img2.setAttribute('crossOrigin', 'anonymous');
                            img2.src = res.content.fileUrl // 后端处理后返回的图片地址(直接返回base64文件不可用)
                            img2.onload = () => {
                                cxt.drawImage(img2, 0, 0, img2.width, img2.height, 60 * rate, 230 * rate, 50 * rate, 50 * rate)
                                imageBox.src = canvas.toDataURL() // 将canvas图画到图片元素上,可以支持长按报错操作,注意这里生产的是base64的图片,如果是APP內保存需要App支持才行.
    
                            }
                        }
    
                    })
                }
    
    展开全文
  • 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序 为了开发方便,以上两种均借助了微信小程序云函数来实现 #事前准备 在vue过程的index.html中加入 <script src=...

    研究了两种H5跳转小程序的方法,同时携带参数

    1. 手机浏览器打开H5页面,点击按钮拉起微信小程序

    2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序

    为了开发方便,以上两种均借助了微信小程序云函数来实现

     

    #事前准备

    在vue工程的index.html中加入

    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

     

    1. 实现手机浏览器打开H5页面,点击按钮拉起微信小程序

    先准备云函数

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV
    })
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
    
      let urlScheme = getUrlScheme(event)
      return urlScheme
    }
    
    async function getUrlScheme(event) {
      return cloud.openapi.urlscheme.generate({
        jumpWxa: {
          path: '/pages/index/index', // 需要跳转的小程序页面
          query: `param1=${event.p1}&param2=${event.p2}`,
        },
        // 一分钟有效期
        isExpire: true,
        expireTime: parseInt(Date.now() / 1000 + 60),
      })
    }

    再编写前端代码

    <template>
      <div class="block">
        <div class="input-filed">
          <el-input v-model="value1" placeholder="abcde">
            <template #prepend>value1</template>
          </el-input>
          <el-input v-model="value2" placeholder="abcde">
            <template #prepend>value2</template>
          </el-input>
        </div>
        <div>
          <el-button type="primary" @click="jump">跳转</el-button>
        </div>
      </div>
    </template>
    
    <script setup>
    
    import { onMounted, ref } from 'vue'
    
    const value1= ref('abcde')
    const value2= ref('123')
    let wxCloud = null
    
    onMounted(async () => {
      console.log('onMounted')
      await cloudInit()
    })
    
    const cloudInit = async () => {
      wxCloud = new cloud.Cloud({
        identityless: true,
        resourceAppid: '小程序APPID',
        resourceEnv: '云函数环境id',
      })
      await wxCloud.init()
    }
    
    
    
    const jump = async () => {
      const res = await wxCloud.callFunction({
        name: '填上面云函数名字',
        data: {
          p1: '1',
          p2: '2',
        },
      })
      console.warn(res)
      // 跳转,拉起小程序
      location.href = res.result.openlink
    }
    
    </script>
    
    <style scoped>
    .block {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .block > * {
      margin-top: 10px;
    }
    .input-filed {
      width: 250px;
    }
    </style>
    

    编译代码,并部署到静态网站上

    手机访问网站,点击按钮即可跳转到小程序,在小程序页面的onLoad函数中就可获取options中传递的参数

     

    2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序

    先准备云函数

    // 云函数入口文件
    const cloud = require('wx-server-sdk')
    
    cloud.init({
      env: cloud.DYNAMIC_CURRENT_ENV
    })
    
    // 云函数入口函数
    exports.main = async (event, context) => {
      const wxContext = cloud.getWXContext()
      try {
        const result = await cloud.openapi.wxacode.getUnlimited({
          scene: `param1=${event.p1}&param2=${event.p2}`, //长度32位限制
          page: 'pages/index/index',
        })
        return result
      } catch (err) {
        return err
      }
    
    }

    再编写前端代码

    <template>
      <div class="block">
        <div class="input-filed">
          <el-input v-model="value1" placeholder="abcde">
            <template #prepend>value1</template>
          </el-input>
          <el-input v-model="value2" placeholder="abcde">
            <template #prepend>value2</template>
          </el-input>
        </div>
        <div>
          <el-button type="primary" @click="createQRcode"
            >创建二维码</el-button
          >
        </div>
        <div>
          <img id="QR-img" :src="qrSrc" alt="no image" />
        </div>
      </div>
    </template>
    
    <script setup>
    import { onMounted, ref } from 'vue'
    
    const qrSrc = ref('')
    const value1= ref('abcde')
    const value2= ref('123')
    let wxcloud = null
    
    onMounted(async () => {
      console.log('onMounted')
      await cloudInit()
    })
    
    const cloudInit = async () => {
      wxcloud = new cloud.Cloud({
        identityless: true,
        resourceAppid: 'xxx',
        resourceEnv: 'xxx', 
      })
      await wxcloud.init()
    }
    
    const createQRcode = async () => {
      console.log('createQRcode')
      const res = await c.callFunction({
        name: 'wxacode',
        data: {
          param1: '1',
          param2: '2',
        },
      })
      if (res.result && res.result.errCode === 0) {
        showQRCode(res.result.buffer, res.result.contentType)
      }
    }
    
    function showQRCode(arrayBuffer, contentType) {
      var uInt8Array = new Uint8Array(arrayBuffer)
      var i = uInt8Array.length
      var binaryString = new Array(i)
      while (i--) {
        binaryString[i] = String.fromCharCode(uInt8Array[i])
      }
      var data = binaryString.join('')
    
      var base64 = window.btoa(data)
      var url = ''
      if (contentType.endsWith('png')) url = 'data:image/png;base64,' + base64
      else if (contentType.endsWith('jpeg'))
        url = 'data:image/jpeg;base64,' + base64
    
      qrSrc.value = url
    }
    
    
    </script>
    
    <style scoped>
    #QR-img {
      width: 200px;
      height: auto;
    }
    .block {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .block > * {
      margin-top: 10px;
    }
    .input-filed {
      width: 250px;
    }
    </style>
    

    在本地运行即可

    点击按钮生成二维码,扫码直接跳转,在小程序页面的onLoad函数中就可获取options中传递的参数

    展开全文
  • pc和h5生成二维码跳转到微信小程序

    千次阅读 2020-11-23 16:41:01
    pc和h5生成二维码跳转到微信小程序 先使用qrcode生成二维码,绑定对应链接,分别引入qrcode插件 pc: <div class="codeDes">微信扫描二维码跳转</div> <div id="qrcode"></div> $('...

    pc和h5生成二维码跳转到微信小程序

    先使用qrcode生成二维码,绑定对应链接,分别引入qrcode插件

     

    pc:

      <div class="codeDes">微信扫描二维码跳转</div>
                 <div id="qrcode"></div>
    $('#qrcode').qrcode({width: 64,height: 64,correctLevel:0,text: "https://wap.BalleMax.com/miniprogram?action=go&customerNo="+that.customerNo+"&orderId="+that.orderId+"&apexId="+that.apexId});
    //动态绑定对应二维码
    

    H5:

            <div class="recommendedNumber">长按或保存二维码</div>
            <div class="qrCode">
                <vue-qr
                    :size="300"
                    class="erweima"
                    :text="appSrc">
                </vue-qr>
            </div>
       // 拼接网址。
                spellUrl() {
                    //todo 生产环境改为https
                    this.appSrc = "https://wap.BalleMax.com/miniprogram?action=go&customerNo="+this.customerNo+"&orderId="+this.orderId+"&apexId="+this.apexId;
                    console.log("paths: " + this.appSrc)
                }

    像上面这样二维码和参数都是生成好了,但是要注意,想让二维码正确小程序,必须在微信公众平台配置对应参数:

    如果想动态传参,必须要在https://wap.BalleMax.com/原链接后面跟随miniprogram?action=go(这里我是随便取的,你也可以aaa?bb=c)然后将再连接之后需要的参数,使用&customerNo=111&orderId=222就可以(&参数名=值)

    注意:开发环境每测试一条不同参数的二维码,都需要在测试链接里面添加一条新的,目前只能存在五条测试链接,当然是可以删除重新添加的喔。

    到上线的时候建议先发一版测试,别忘配置二维码跳转规则,先测一下,正常情况下是可以动态跳转的。

    如果有帮助到你,可以给我一颗小心心吗~

    展开全文
  • js生成小程序某页面二维码(生成小程序二维码

    万次阅读 多人点赞 2018-08-02 11:15:09
    时候会有业务需求生成某页面的小程序二维码,进入指定页面 效果图: 首先要获取access_token; 下面是链接 https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&...

     

    时候会有业务需求生成某页面的小程序二维码,进入指定页面

    效果图:

    首先要获取access_token;

    下面是链接

    https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=秘钥

    红色字体需要用户自己根据信息填充。

    请求成功返回的结果是下面这种形式的

    
    //注意:以下参数值不可以直接复制粘贴使用,需要自己根据上面的链接+参数获取使用
    {
      "access_token": "12_fbGiPb3QuOW9M6n-Abg0ik4My2NocTJZZiAIAEUU",  
      "expires_in": 7200
    }

    expires_in:是一个有效期;

    获取完access_token,下面开始正式我们的请求:

     

    index.js:

    //index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
      },
      onLoad: function (options) {
        var that = this;
        var scene = decodeURIComponent(options.scene)
    
        // 生成页面的二维码
        wx.request({
    //注意:下面的access_token值可以不可以直接复制使用,需要自己请求获取
          url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=AbgEb2z0il9eIsqn6pWJTmSkvTcJhtb1As3_e049Qv_iFnVw8TXKEa2N8nn3GBKJbQaJ9G2ae5At4Cirphd8HFaduGvMU14UpuWjJz6X0i74I8-',
          data: {
            scene: '000',
            page: "pages/index/index"  //这里按照需求设置值和参数   
          },
          method: "POST",
          responseType: 'arraybuffer',  //设置响应类型
          success(res) {
            console.log(res)
            var src2 = wx.arrayBufferToBase64(res.data);  //对数据进行转换操作
            that.setData({
              src2
            })
          },
          fail(e) {
            console.log(e)
          }
        })
    
    
      },
    
    })
    

    index.wxml

    <view>
       <view class='img'>
        <image src='data:image/png;base64,{{src2}}'></image>
       </view>
    </view>

    注意:对于没有发布的小程序page参数要设置为空,不然会导致二维码生成失败,在发布前按需改回来就好

     

    展开全文
  • java web项目使用qrcode创建二维码方法示例,可使用微信进行扫码查看,直接在web前端运行,在界面上显示生成二维码
  • 我们知道H5二维码页面链接跳转小程序可以登录微信公众平台,然后在开发设置里面进行配置,如下图: 我们配置规则http://a.aaa.com/a/b/,这时候需要在域名下创建a目录,b目录,然后在b目录下放入小程序校验文件,...
  • 步骤 生成二维码 - 获取二维码的base64 - 获取权限 - 获得地址 – 保存 import { QRCode } from "taro-code"; const ref = useRef<any>(); <TView ref={ref}> <QRCode text='world' size={200}...
  • 登录微信小程序后台 右键工具,生成小程序码 输入小程序的appid 输入页面连接:pages/Shopping_Management/productDetail/productDetail.html?id=123XXXXXXXX 得到小程序码
  • 微信小程序生成二维码跳转到指定页面 文章目录微信小程序生成二维码跳转到指定页面找小程序中的现成的api解决二进制返回的问题预想(并没有实现) 在微信小程序使用中,我们会遇到这样的场景,我们使用微信扫描...
  • 扫描二维码 打开 小程序或是H5网页

    千次阅读 2021-01-21 16:23:06
    最近在做一个的项目,有一个需求是扫码查看信息详情 扫描的情况可能是使用微信扫描,或是其他扫描 ...方案二:H5+微信小程序的普通二维码跳转小程序 方案三:使用微信小程序生成无限制二维码 首先去.
  • 顶格博客小程序的文章详情页下屏蔽了评论功能,通过引导用户访问小程序来评论。这样做能利用微信自带的内容安全的同时,避免需要在web页面让用户输入身份信息。所以要实现通过识别二维码访问小程序指定页面。
  • demo中含有jar包对应的maven地址,直接引入到pom中就可以使用了
  • 小程序二维码,条形码的创建与显示,亲测可用,欢迎下载!小程序二维码,条形码的创建与显示,亲测可用,欢迎下载!
  • 1.多张图片循环渲染后预览、保存、识别带参数二维码 wxml页面 “{{imgalist}}” wx:for-item=“image” class=“previewimg”> “{{image}}” data-src=“{{image}}” bindtap=“previewImage”> js页面 Page({ ...
  • 相信朋友们一定遇到过类似问题,为了分享美观,H5生成一经专属的带分享者信息的二维码的海报。具体实现可以借助于html2canvas及qrcode完成此功能。 第一步生成当前页面的二维码,页面包含用户分享OPENID参数; &...
  • 这里小程序后台默认生产的二维码就不多说了。 1、微信 ①普通链接二维码打开小程序 详细可以参考官方文档:扫普通链接二维码打开小程序 例如 一个小程序账号最多可配置100个二维码前缀规则 每个月最多...
  • uniapp扫码登录功能一、测试环境:uniapp小程序 uniapp h5二、实现思路三、实现步骤 一、测试环境:uniapp小程序 uniapp h5 二、实现思路 1、手机登录uniapp小程序 2、 uniapp在h5端 通过后端发送的unid 生成二维码 ...
  • ![解析后的base64]... ``` onLoad: function(options) { var that = this; var access_token = that.data.access_token ... var scene = decodeURIComponent(options.scene) ...```
  • 最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5小程序<br> 与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果 前端框架使用的是uni-app方便打包成H5...
  • 微信小程序 最全 生成带参数二维码

    千次阅读 2018-05-03 15:54:49
    摸索了几天终于完成了,接口A B C 通用 ,接口B只能生成已发布的小程序 $appid='APPid'; $secret='你的小程序秘钥'; $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&...
  • 最近公司要做一个小程序,之前也没接触过,但是用过Vue框架的,就直接上手了,毕竟思想是很像的。 但是微信小程序的坑还是有的,今天就讲一下思路,如果有需求可以出详细的文章。有错的地方请大家纠正。 复制代码 二...
  • java生成二维码
  • 微信小程序自定义二维码效果图微信端代码文件下载圆角头像圆角头像文字加粗圆角思路最终效果show you the code保存生成图片解析sence参数后端 效果图 微信端代码 微信端主要分为拉取服务端小程序码,和主要图片文件...
  • 小程序wxml <image src="{{image}}" bindtap="imgLoad"></image> 小程序js文件 imgLoad: function(event) { let imgList = [ '**', ] wx.previewImage({ current: '**', // 当前显示图片的...
  • 需求:需要根据用户id的不同生成不同的二维码,并进行本地保存 第一步:下载插件 这里对于二维码生成,使用的是第三方插件weapp.qrcode.min.js 将第三方插件的文件放到项目的工具文件夹中,便于使用 第二步:...
  • 生成二维码并能长按识别(需要图片才能支持) 解决方法: 利用qrcodejs2插件生成二维码(canvas、table渲染不是image图片) 利用canvas的一个方法toDataURL() 返回图片展示的 data URI 实例化一个Image() ,存入...
  • 小程序分享报告(图片+二维码): 小程序页面生成图片:请用canvas,页面简单用canvas,页面复杂也用canvas。 踩过的坑: 思路:html -> html2canvas -> canvas||image/png; 最后涉及到小程序H5页面项目...
  • 1.在uni-app插件市场下载uQRCode二维码生成插件 2.下载完成后在项目中找到uni_modules 3.如何使用 <template> <view class="content"> <view class="title">uQRCode二维码生成</view> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,505
精华内容 1,002
关键字:

h5生成小程序二维码