微信点金计划步骤详情-阿里云开发者社区

微信点金计划步骤详情

2023-07-26 554

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

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

效果图：

一、开通点金计划

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

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

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

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

2.下载微信验证文件

三、编写商家小票界面

我是用的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>

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

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