VX小程序禁止PC端访问

郝单纯💋

前言

晓杰每日靠着微薄的小程序广告度日，继之前检测手机端微信跳过小程序广告插件检测后又发现小程序广告在电脑端经常没广告，导致收入备降！虽然每天只有几块钱的收入，哈哈哈！那么怎么做到禁止小程序使用电脑端微信打开呢？晓杰想到获取设备信息判断是否为移动端设备不是就弹窗让用户扫码使用手机微信打开。

过程

通过官方接口文档wx.getSystemInfoSync() 发现platform返参刚好符合我的需求。然后设计一个组件方便后期页面调用。

代码

1. 创建一个弹窗组件

a. components/Popup/Popup.wxml:

<view wx:if="{{show}}" class="popup">
  <view class="popup-content">
    <view class="popup-header">
      <text>提示</text>
    </view>
    <image src="{{qrCodeSrc}}" class="qr-code" />
    <view class="popup-footer">
      <text>请用手机端微信扫一扫继续体验</text>
    </view>
  </view>
</view>

b. components/Popup/Popup.wxss:

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.popup-content {
  background-color: #fff;
  padding: 20px;
  width: 100%;
  border-radius: 10px;
  text-align: center;
}

.popup-header {
  margin-bottom: 20px;
}

.qr-code {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.popup-footer {
  margin-top: 20px;
}

c. components/Popup/Popup.js:

Component({
  properties: {
    show: {
      type: Boolean,
      value: false
    },
    qrCodeSrc: {
      type: String,
      value: '/path/to/your/QRCodeImage.png'
    }
  }
});

d. components/Popup/Popup.json:

{
  "component": true
}

2. 使用弹窗组件

a. pages/index/index.wxml:

<view class="container">
  <!-- 其他内容 -->
  <Popup show="{{showPopup}}" qrCodeSrc="/path/to/your/QRCodeImage.png" />
</view>

b. pages/index/index.js:

Page({
  data: {
    showPopup: false
  },
  onLoad: function() {
    const systemInfo = wx.getSystemInfoSync();
    if (systemInfo.platform !== 'android' && systemInfo.platform !== 'ios') {
      this.setData({
        showPopup: true
      });
    }
  }
});

c. pages/index/index.json:

{
  "usingComponents": {
    "Popup": "/components/Popup/Popup"
  },
  "navigationBarTitleText": "软件接口平台",
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black"
}

弹窗功能封装成了一个模块组件，并且可以在需要的页面中调用它。确保替换 /path/to/your/QRCodeImage.png 为实际的二维码图片路径。

效果图

本文作者

Soujer

（ΘζΘ）

我就想问。遇到这种小程序，有没有办法跳过。。我不想天天抱着手机。

悸动的青春

小盐粒 发表于 2024-8-7 19:02
大佬，那遇到这种小程序，咱们怎么过啊

我也想问

小盐粒

大佬，那遇到这种小程序，咱们怎么过啊

郝单纯💋

风花雪月201 发表于 2024-7-31 10:49
这不是降低了用户使用体验吗？现在客户是最难得的，有些人就是在电脑上比较方便呢？可以下面加个小文字继续 ...

你审题了吗？就是因为电脑没有广告收益 就要强制用户手机访问！

风花雪月201

这不是降低了用户使用体验吗？现在客户是最难得的，有些人就是在电脑上比较方便呢？可以下面加个小文字继续打开就选择电脑打开

qq692172929

太高端了，还没接触，准备学哈哈

郝单纯💋

为啥没人回复！