微信点金计划步骤详情

简介: 微信点金计划步骤详情

最近在写点金计划。使用点金计划就可以更加丰富你的返回页面,可以在返回页面展示支付信息 小票和广告等。

在写之前建议先去看看文档:点金计划文档

效果图:

一、开通点金计划

  1. 自行登录微信服务商平台https://pay.weixin.qq.com/index.php/core/home/login
  2. 一次点击服务商功能–>点金计划–>开通计划

1029a50cc3292523fd7db22f00753b69.png

3. 填写接口人员最多填写5个,这个功能用来给开发者来调试点金计划的页面

二、配置点金计划的商家小票

1.在点金计划页面点击【商家小票链接配置】,在如图所在的位置,我这边已经是配置好了,这个链接就是服务商支付成功之后跳转的页面

e3eb477f5aa55fc6086c1ac1a859227d.png


2.下载微信验证文件


e3eb477f5aa55fc6086c1ac1a859227d.png

三、编写商家小票界面

我是用的uniapp来开发的微信公众号H5,所以在这里展示的代码是vue格式的,可以直接拿来用

<template>
    <view>
        <view style="text-align: center;">
            <view v-for="item in list" style="text-align: center;">
                <view style="margin-left: 100px;">
                    <uqrcode ref="item.skuName" canvas-id="item.skuNamee" :value="item.barCode"></uqrcode>
                </view>
                {{item.barCode}}
            </view>
        </view>
        <u-button type="primary" size='medium' shape="circle" @click="toPage" :plain="true">返回查看订单</u-button>
    </view>
</template>
<script>
    export default {
        components: {},
        data() {
            return {
                loading: true,
                detail: {},
                list: {},
                codee: ''
            };
        },
        async onLoad() {
            const urlone = window.location.href;
            const pages = getCurrentPages();
            const currentPage = pages[pages.length - 1]; //当前页面的全部信息
            const route = currentPage.route; //当前路由的路径 pages/login/login
            const options = currentPage.options; //url里面的参数json类型
        },
        async created() {
            try {
                  document.querySelector("html").style.fontSize = "10px"; // 解决进入小票html 的font-size = 0 的问题
                const urlone = window.location.href; //获取当前路径
                const pages = getCurrentPages();
                const currentPage = pages[pages.length - 1]; //当前页面的全部信息
                const route = currentPage.route; //当前路由的路径 pages/login/login
                const options = currentPage.options; //url里面的参数json类型
                let subMchId = options.sub_mch_id;
                let outTradeNo = options.out_trade_no;
                let checkCode = options.check_code;
                let t = options.t;
                let ss = await this.$myRequest({
                    url: 'index/out/listByCheckCode',
                    data: {
                        subMchId,
                        outTradeNo,
                        checkCode,
                        url: urlone
                    }
                })
                this.list = ss.data.date;
            } catch (err) {
               console.log(err)
            }
        },
        mounted() {
            const mchData = {
                action: "onIframeReady",
                displayStyle: "SHOW_CUSTOM_PAGE",
            };
            const postData = JSON.stringify(mchData);
            window.parent.postMessage(postData, "*");
        },
        methods: {
            toPage() {
                // 跳转到指定的h5页面
                const mchData = {
                    action: "jumpOut",
                    jumpOutUrl: `https://XXXX/XX?out_trade_no=${this.$route.query.out_trade_no}`,
                }; // 跳转到指定的页面并携带参数
                const postData = JSON.stringify(mchData);
                window.parent.postMessage(postData, "*");
            }
        }
    };
</script>
<style scoped>
</style>

付款完成之后,看到这个页面样式已经有了,说明已经成功了

本篇文章适合刚开始搞点金计划的人参考

目录
相关文章
|
1天前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
【微信小程序-原生开发】实用教程16 - 查看详情(含页面跳转的传参方法--简单传参 vs 复杂传参)
5 0
|
1天前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
6 0
|
2月前
|
小程序 API
微信小程序飞机大战游戏步骤及代码
微信小程序飞机大战游戏步骤及代码
132 0
|
2月前
|
存储 小程序 开发者
微信小程序猜拳游戏步骤及代码
微信小程序猜拳游戏步骤及代码
99 0
|
2月前
|
存储 小程序 开发者
开发微信小程序模拟聊天步骤及代码
开发微信小程序模拟聊天步骤及代码
107 0
|
2月前
|
小程序 开发者
微信小程序斗地主完整代码及步骤
微信小程序斗地主完整代码及步骤
289 0
|
2月前
|
小程序 开发者
微信小程序狼人杀游戏代码及步骤
微信小程序狼人杀游戏代码及步骤
121 0
|
2月前
|
小程序 开发者
微信小程序开发商城详细步骤
微信小程序开发商城详细步骤
115 0
|
2月前
|
JSON JavaScript 前端开发
全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解
|
8月前
|
小程序 前端开发
微信小程序从零开始开发步骤(八)引入框架WeUI
微信小程序从零开始开发步骤(八)引入框架WeUI
176 0