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

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

生成带参数的小程序码

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

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日

相关文章

  • 关于PHP5和PHP7中数组实现方式的比较总结

    “关于PHP5和PHP7中数组实现方式的比较总结”,我将给出完整的攻略。 概述 PHP是一种动态脚本语言,其中数组是一个重要的数据类型。从PHP5到PHP7,PHP采取了不同的数组实现方式,其中PHP5使用了“哈希表和链表”,而PHP7使用了“哈希表和单独的数组”。 PHP5中的数组 在PHP5中,数组实现方式基于“哈希表+链表”的思想。具体来说,哈希表存储…

    PHP 2023年5月26日
    00
  • 教你如何在CI框架中使用 .htaccess 隐藏url中index.php

    以下是教如何在CI框架中使用 .htaccess 隐藏url中index.php 的完整攻略: 1. 准备工作 在开始使用 .htaccess 文件隐藏 url 中 index.php 前,需要确保以下两个条件已经满足: Apache web 服务器已经安装在你的电脑上。 mod_rewrite 模块已经启用。 如果你的环境中不符合上述条件,请先通过搜索引擎…

    PHP 2023年5月26日
    00
  • PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】

    下面是详细讲解“PHP preg_match实现正则表达式匹配功能【输出是否匹配及匹配值】”的完整攻略: preg_match函数简介 PHP中的preg_match函数是一个用于在字符串中进行正则表达式匹配的函数。该函数的语法为preg_match($pattern, $subject, &$matches),其中$pattern表示正则表达式,$…

    PHP 2023年5月26日
    00
  • PHP实现将颜色hex值转换成rgb的方法

    有关于将颜色hex值转换成rgb的方法,可以使用PHP内置函数 hex2rgb() 来实现。 具体实现请按照以下步骤: 步骤一、获取输入 获取用户输入,即需要转换的颜色hex值,可以使用 $_GET 或者 $_POST 方式获取,这里以 $_GET 方法为例,示例如下: $hex_color = $_GET[‘color’]; 步骤二、转换hex值 将颜色h…

    PHP 2023年5月26日
    00
  • 小米8青春版值得买吗 小米8青春版详细评测

    小米8青春版值得买吗 如果你正在考虑购买小米8青春版,那么你可能想知道它是否值得买。根据我的测试和调研,我认为小米8青春版是一款性价比很高的手机,尤其适合那些注重性能和价格的消费者。以下是我对小米8青春版的详细评测。 性能评测 小米8青春版配备了高通骁龙660处理器和4GB RAM,这是一款在中高端手机市场表现良好的芯片组合,而且能够运行流畅的应用程序和高质…

    PHP 2023年5月27日
    00
  • php实现快速对二维数组某一列进行组装的方法小结

    首先我们先来了解一下问题的背景。 在PHP中,为了方便处理数据,我们通常会使用二维数组来存储各种信息,而且这个二维数组的各列往往意义不同,需要按照某一列进行分组、筛选、累计等操作。因此,我们需要一种快速对某一列进行组装的方法,以便更方便地进行数据处理。 接下来,我们来讲解一下具体的实现方法。这里我们可以采用PHP array_column函数的方式来实现。 …

    PHP 2023年5月26日
    00
  • php数据库配置文件一般做法分享

    下面我将详细讲解关于“PHP数据库配置文件一般做法”的攻略。 什么是PHP数据库配置文件 PHP是一种在Web服务器端用于创建交互式Web网页的HTML预处理器,它通常但并不一定使用MySQL作为数据库。配置数据库的信息和连接参数是在数据库配置文件中完成的,这个文件通常有一个php扩展名,可以使得我们可以在PHP程序中方便地读取数据库,访问数据库并完成各种操…

    PHP 2023年5月27日
    00
  • php的单例模式及应用场景详解

    让我来详细讲解一下“PHP的单例模式及应用场景详解”这个话题。 什么是单例模式? 单例模式是一种创建型设计模式,它确保一个类只有一个实例,并且提供一个全局访问点来访问该实例。单例模式是应用程序开发中常用的设计模式之一,它将一个类的对象与全局范围的访问点联系起来,这样可以确保只有一个类的实例可以被访问。 如何实现单例模式? 实现单例模式的关键在于确保只有一个对…

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