微信小程序展示二维码实现站外引流到微信，可以长按识别加微信！

摘要

微信小程序有一个非常好的功能，就是支持url scheme跳转，你可以在微信外部跳转到微信内部直接打开小程序指定的页面。现在很多站外引流到微信都是通过这个方法，通过url scheme跳转到微信小程序显示微信二维码加微信实现的引流。

所以本次文章，就是编写一个微信小程序展示二维码的页面，通过简单的路径配置，可以快速生成页面。

代码

showQrcode.wxml

<view class="container">
    <view class="desc" wx:if="{{descShow}}">{{desc}}</view>
    <view wx:else style="height: 30px;"></view>
    <image mode="widthFix" show-menu-by-longpress="{{true}}" src="{{QrcodeUrl}}" wx:if="{{getShowQrcode}}"></image>
    <view wx:else class="error">{{errorInfo}}</view>
</view>

showQrcode.js

// 获取应用实例
const app = getApp()
Page({
    data: {
        getShowQrcode: true,
        errorMsg: '',
        descShow: false,
    },

    onLoad(e) {

        // 获取二维码
        const url = e.url;
        // 获取标题
        const title = e.title;
        // 获取摘要
        const desc = e.desc;
        // this指向问题
        const that = this;

        // 设置标题
        if(title) {
            wx.setNavigationBarTitle({
                title: title
            })
        }else {
            wx.setNavigationBarTitle({
                title: '请长按扫码识别'
            })
        }

        // 设置摘要
        if(desc) {
            that.setData({
                descShow: true,
                desc: desc
            })
        }
        
        // 渲染
        if(url) {

            // 有二维码
            that.setData({
                getShowQrcode: true,
                QrcodeUrl: url
            })
        }else {

            // 无二维码
            that.setData({
                getShowQrcode: false,
                errorInfo: '请传递二维码Url'
            })
        }
        

        // 显示的菜单
        wx.showShareMenu({
            withShareTicket: true,
            menus: ['shareAppMessage', 'shareTimeline']
        })
    }
})

showQrcode.wxss

.container {
    width: 100%;
    margin: 0 auto;
}

.desc {
    width: calc(90% - 30px);
    background: #fff;
    padding: 15px;
    border-radius: 5px;
    display: block;
    margin: 20px auto;
    font-size: 15px;
    text-align: center;
}

.container image {
    width: 90%;
    display: block;
    margin: 0 auto;
}

.error {
    text-align: center;
    margin-top: 100px;
    color: #666;
    background: #fff;
    width: 80%;
    margin: 30px auto 0;
    padding: 20px;
    border-radius: 10px;
}

如何使用

请前往小程序后台点击右上角的工具，生成小程序码，路径如下：

pages/showQrcode/showQrcode?url=图片地址&title=标题&desc=摘要

其中title和摘要可以不传。

效果

Url Scheme

Url Scheme仅限企业认证的小程序生成，具体可以阅读开发文档。
https://developers.weixin.qq.com/minigame/dev/guide/open-abil...

源码

https://github.com/likeyun/Xcx_ShowQrcode

作者

TANKING