微信小程序分享小程序码的生成(带参数)以及参数的获取

微信小程序是非常流行的一种小应用形式,而小程序的分享就显得尤为重要。本攻略将详细介绍如何生成带参数的小程序码并获取参数,在其中包含两个实例来帮助理解。

生成带参数的小程序码

小程序码可以用于分享小程序的入口,它可以通过微信扫码打开小程序,并打开对应的页面。下面我们将详细介绍如何生成带参数的小程序码。

1. 在小程序中创建二维码图片

小程序官方提供了一个API wx.createQRCodeImg() 来获取小程序二维码图片,在调用的时候需要传入以下参数:

  • path:生成的小程序码跳转的页面路径。
  • width:生成的小程序码宽度。
  • autoColor:是否自动配置线条颜色,如果另外的参数颜色值为0,那么将使用默认的颜色填充线条。
  • lineColor:小程序码的线条颜色,为小程序码的颜色值,默认为黑色。
  • isHyaline:是否透明背景,默认为false。

下面是示例代码:

wx.createQRCodeImg({
    path: '/pages/index?source=share',
    width: 200,
    autoColor: false,
    lineColor: {
        'r': 0,
        'g': 0,
        'b': 0
    },
    isHyaline: false,
    success: (res) => {
        console.log(res);
        //此处将res中的图片地址更新到界面上的<img>标签上即可
    },
    fail: (error) => {
        console.log(error);
    }
})

以上代码中,我们传入了一个path参数,它是一个字符串,代表了小程序码跳转的页面路径。在这里,我们传入了 /pages/index?source=share,其中source就是我们要传递的参数。当用户扫码进入小程序时,它将会直接跳转至 /pages/index 页面,并在路由参数中携带了一个 source 参数,方便我们在index 页面中处理。

2. 生成带参数的小程序码

上面提到的 wx.createQRCodeImg() 生成的小程序码是一个普通的二维码图片,并不带参数。要想生成带参数的小程序码,需要调用小程序的 cloud 接口来生成。

我们需要配置小程序的 project.config.json 文件,添加如下配置:

{
    "cloudfunctionRoot": "cloudfunctions",
    "miniprogramRoot": "miniprogram",
    "appid": "你的小程序appid",
    "setting": {
        "urlCheck": true,
        "es6": true,
        "postcss": true,
        "preloadBackgroundData": false,
        "minified": true,
        "newFeature": true,
        "coverView": true,
        "nodeModules": true,
        "autoAudits": false,
        "uglifyFileName": true,
        "checkInvalidKey": true,
        "checkSiteMap": true,
        "uploadWithSourceMap": true
    },
    "cloudfunctionService": {
        "service": "云服务名",
        "env": "云开发环境id"
    }
}

以上配置中,我们添加了一个 cloudfunctionService 的配置来指明我们要调用哪个云函数。

在上面的配置中,我们设置了serviceenv 两个参数。这两个参数通常在小程序云函数中用来初始化云服务所需的信息。

const cloud = require('wx-server-sdk')
cloud.init({
    env: '云开发环境id',
    traceUser: true,
    // 此处service的值就需要与project.config.json中的配置保持一致
    service: '云服务名'
})

之后我们就可以调用 cloud.openapi.wxacode.getUnlimited() 接口来生成带参数的小程序码了。需要注意的是,在同级目录下创建一个空白文件 project.config.json 以便小程序可以访问云开发功能。

// 引入云开发模块
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口
exports.main = async (event, context) => {
    try {
        let result = await cloud.openapi.wxacode.getUnlimited({
            scene: event.scene,
            page: event.page,
            // 设置小程序码的宽高
            width: 200,
            isHyaline: true
        })
        return result
    } catch (err) {
        return err
    }
}

可以看到,我们又传入了两个额外的参数 scenepage。其中, page 表示小程序码跳转的页面路径, scene 表示需要传递给该页面的参数。获取小程序码的接口将把这两个参数组合成一个字符串,生成带参数的小程序码。

我们可以使用云函数的方式或者使用HTTP请求来调用云函数,得到带参数的小程序码的结果。其中,结果是一个包含小程序码图片的 buffer 类型的数据,我们可以将其进行转换,并返回给前端应用使用。

获取小程序码参数

获取小程序码参数非常简单,只需要在小程序启动的时候,检查当前页面的路由参数即可。在上面的示例中,我们设置了一个source参数,因此可以通过以下方式来获取这个参数:

const app = getApp()
const source = app.globalData.options.source

在小程序启动时,我们可以通过 getApp() 来获取全局的应用实例,然后通过 options 属性来获取路由参数。只需要将这种方法放在 onLoad() 中,即可在小程序启动的时候处理这个参数。下面是具体示例代码:

// 从全局的应用实例中获取小程序启动参数
const app = getApp()
const source = app.globalData.options.source

// 小程序入口页面
Page({
    /**
     * 页面的初始数据
     */
    data: {
        message: ''
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function() {
        // 处理传递进来的source参数
        if (source) {
            this.setData({
                message: '我的来源是' + source
            })
        } else {
            this.setData({
                message: '没有传递source参数'
            })
        }
    },
})

在上面的示例代码中,我们在小程序入口页面 onLoad() 函数中处理了传递进来的 source 参数,并在界面上显示这个参数。需要注意的是,我们通常将全局的应用实例放在 app.js 文件中,并通过 getApp() 获取。

示例

上面是一组完整的示例代码,这里再给出两个小例子来演示如何生成带参数的小程序码并获取参数。

示例1

当我们希望在自己的业务中根据不同的菜品生成带参数的小程序码,可以在菜品页面上调用以下代码:

let product = {
    id: 2233,
    name: '白糖菜',
    price: 50.0
}
wx.cloud.callFunction({
    name: 'createWxCode',
    data: {
        scene: `product=${JSON.stringify(product)}`,
        page: 'pages/product/detail'
    },
    success: (res) => {
        console.log(res.result)
        //此处将res.result中的图片地址更新到界面上的<img>标签上即可
    },
    fail: (error) => {
        console.log(error)
    }
})

在详情页中,我们使用以下代码来获取页面参数来在界面上直接显示这个菜品的详细信息。

const app = getApp()
const product = JSON.parse(app.globalData.options.product)

Page({
    data: {
        product: product
    },
    onLoad: function() {
        console.log(product)
    }
})

示例2

当我们希望在自己的推广活动中生成带参数的小程序码,并在小程序中通过这个参数直接跳转到活动页面,可以在活动页的分享按钮上添加以下代码:

let shareParams = {
    activityId: 1234,
    title: '听凤凰FM 千万大奖等你拿',
    image: 'http://image.cdn.feng.com/group2/M00/29/18/wKgM-Bst_BWAlltPAAFzqyPfHRAAAJb3gMwfXMABoGZ630.png'
}
wx.cloud.callFunction({
    name: 'createWxCode',
    data: {
        scene: `shareParams=${JSON.stringify(shareParams)}`,
        page: 'pages/activity/detail'
    },
    success: (res) => {
        console.log(res.result)
        //此处将res.result中的图片地址更新到界面上的<img>标签上即可
    },
    fail: (error) => {
        console.log(error)
    }
})

在活动页中,我们使用以下代码来获取页面参数并在界面上显示这个活动的详细信息。

const app = getApp()
const shareParams = JSON.parse(app.globalData.options.shareParams)

Page({
    data: {
        shareParams: shareParams
    },
    onLoad: function() {
        console.log(shareParams)
    }
})

以上就是生成带参数的小程序码和获取小程序码参数的完整攻略,希望对小程序开发有所帮助!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:微信小程序分享小程序码的生成(带参数)以及参数的获取 - Python技术站

(0)
上一篇 2023年5月30日
下一篇 2023年5月30日

相关文章

  • php中怎么搜索相关联数组键值及获取之

    在PHP中,可以使用array_keys()和array_values()函数分别获取数组的键和值,然后使用array_search()函数查找特定的键或值在数组中的位置。以下是具体的步骤: 第一步:创建一个关联数组 首先,我们需要创建一个关联数组,作为实验对象,以便演示如何搜索相关联数组的键值。例如: $students = array( "Jo…

    PHP 2023年5月26日
    00
  • 几篇关于无限分类算法的文章

    想要了解无限分类算法,首先需要了解什么是分类和分类算法。 分类和分类算法 分类是指将事物按照某种标准或属性分成若干类别的过程或结果。在编程领域中,分类可以用来对数据进行归纳,从而方便进行查询和处理。 分类算法则是特指一种通过算法和规则来将数据进行分类的技术。常见的分类算法包括决策树、支持向量机等。 无限分类算法 无限分类指的是可以无限嵌套的分类,即每个分类可…

    PHP 2023年5月26日
    00
  • 如何实现php图片等比例缩放

    下面是如何实现 PHP 图片等比例缩放的完整攻略。 1. 什么是等比例缩放 等比例缩放指的是在不改变图像原来的比例(宽高比)的前提下,将整张图片按一定比例缩小或放大。 2. 如何实现等比例缩放 在 PHP 中实现图片等比例缩放,可以通过 GD 库提供的函数来完成。 GD 库是一个在 PHP 环境下用来处理图形的开源库,也是 PHP 支持的常用扩展之一。 具体…

    PHP 2023年5月23日
    00
  • 浅谈PHP中的数据传输CURL

    关于“浅谈PHP中的数据传输CURL”的完整攻略,以下是详细讲解: 一、CURL简介 CURL是一个开源的、支持多种协议的网络库,它可以用来进行网络数据传输和通信操作。在PHP中,我们可以使用CURL扩展来完成这些操作。CURL主要支持以下协议: HTTP、HTTPS、FTP、FTPS、TELNET、LDAP、DICT、FILE、HTTP POST、HTTP…

    PHP 2023年5月26日
    00
  • php 利用array_slice函数获取随机数组或前几条数据

    获取随机数组或前几条数据,可以使用PHP中的array_slice函数。该函数用于将数组的一部分拆分出来,并返回新的数组。 array_slice函数的基本语法如下: array array_slice(array $array, int $offset, ?int $length = null, bool $preserve_keys = false) 其…

    PHP 2023年5月26日
    00
  • 快速解决Golang Map 并发读写安全的问题

    解决Golang Map并发读写安全的问题的方法有多种,以下是一些常见的方法: 方法一:使用 sync.Map sync.Map 是 Go1.9 新增加的一个并发安全的 map。它提供了以下几种方法解决 map 的并发读写问题: Load:从 map 中获取一个 key 对应的 value,如果不存在该 key 则返回零值。该方法的返回值是一个 interf…

    PHP 2023年5月27日
    00
  • PHP实现文件下载详解

    PHP实现文件下载详解 1. 实现文件下载的基本原理 当用户点击下载链接时,服务器需要将文件流传送给浏览器,让浏览器下载文件。而浏览器无法直接访问服务器上的文件,因此需要通过服务器脚本来实现文件下载。 2. PHP代码实现文件下载 以下载PDF文件为例,以下是实现文件下载的PHP代码: $file_url = ‘http://example.com/file…

    PHP 2023年5月26日
    00
  • php使用正则表达式获取字符串中的URL

    下面是具体步骤和示例说明: 1. 利用PHP内置函数获取HTML字符串 在使用正则表达式前,我们需要先获取HTML字符串。可以使用PHP内置的函数,如file_get_contents或curl等。 $htmlStr = file_get_contents(‘http://www.example.com’); 2. 构建正则表达式 构建正则表达式是本次攻略的…

    PHP 2023年5月26日
    00
合作推广
合作推广
分享本页
返回顶部