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

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

生成带参数的小程序码

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

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 的配置来指明我们要调用哪个云函数。

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

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
    }
}

可以看到，我们又传入了两个额外的参数 scene 和 page。其中， 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技术站