小程序识别用户手机系统选择支付方式

写在前言：用过微信支付的都知道，小程序在支付时候也被苹果无情的抛弃了。所以就要区分是安卓机型还是苹果机型。那么怎么区分呢，在小程序中有API的。

wx.getSystemInfo组件功能就是获取用户手机系统信息

这一点我们直接配置在小程序的APP.JS中方便整个小程序的页面调用

//app.js
onLaunch: function(ops) {
    //调用API从本地缓存中获取数据
    const self = this;
    console.log("----打开小程序了----",ops)
    if (ops.scene == 1044) {
      console.log(ops.shareTicket)
    }

    wx.getSystemInfo({
      success: function (res) {
        console.log(">>>>", res)
        var model = res.system;
        wx.setStorageSync('appModel', model);
      }
    });
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },

将获取的信息缓存发给别的页面来调用，system就是手机的操作系统信息，所以存储这一点内容。
在别的页面来做判断；

//支付页面
onLoad: function (options) {
    var that = this;
    console.log(this.data.content)
    that.setData({
      pageType: this.data.content,
    })
    var appInfo = wx.getStorageSync("appModel");
    console.log("判断用户系统", appInfo)
    if (appInfo.indexOf("Android")) {
      that.setData({
        systemInfo: false,
      })
    } else {
      that.setData({
        systemInfo: true,
      })
    }
  },

也有人说直接用赋值判断，我说那样也不是很简单，最起码没这么简单明了。
页面中的支付方式判断用存储器里面的值systemInfo。使用条件判断语句wx:if

<view class="helppay-inner">
  <block wx:if="{{systemInfo}}">
    <view class="header">
      <view class="title">请选择方式</view>
      <text>可以选择找朋友代付或者保存支付码去扫码支付</text>
      <button bindtap="hidePay" class="close-btn">
        <image class="icon" src="/images/main/helppay-close_icon.png"></image>
      </button>
    </view>
    <view class="payitem-box">
      <view class="payitem-price" wx:if="{{pageType=='course'}}">
        <view class="price-desc">该课程价格</view>
        <view class="price">￥{{helpdata}}</view>
      </view>
      <view class="vip-inner" wx:if="{{pageType=='vip'}}">
        <view bindtap="cardTap" class="item flex-j-a {{activeIndex==index?'active':''}}" data-index="{{index}}" wx:for="{{data}}">
          <image class="vip-icon" src="/images/main/{{activeIndex==index?'shieid_active.png':'shieid.png'}}"></image>
          <view class="flex-j-a item-inner">
            <view class="flex-a before">
              <view class="title">{{item.title}}</view>
              <view class="desc">原价：{{item.prime}}</view>
            </view>
            <view class="price">￥{{item.price}}</view>
          </view>
        </view>
      </view>
      <view class="payitem-inner flex-j-a">
        <button bindtouchstart="setShareHelpPayInfo" class="item" hoverClass="none" openType="share">
          <image class="icon" src="/images/main/helppay_android_icon.png"></image>
          <text class="text">通过找微信朋友代付</text>
        </button>
        <button bindtap="qrcodePay" class="item" hoverClass="none">
          <image class="icon" src="/images/main/helppay_qrcode_icon.png"></image>
          <text class="text">扫描二维码直接支付</text>
        </button>
      </view>
    </view>
  </block>
  <block wx:else>
    <view class="header">
      <view class="title">暂不支持</view>
      <text>十分抱歉，由于IOS相关规范，您暂时无法在这里购买。</text>
      <button bindtap="hidePay" class="close-btn">
        <image class="icon" src="/images/main/helppay-close_icon.png"></image>
      </button>
    </view>
    <view class="payitem-box">
      <view class="payitem-price" wx:if="{{pageType=='course'}}">
        <view class="price-desc">该课程价格</view>
        <view class="price">￥{{helpdata}}</view>
      </view>
      <view class="vip-inner" wx:if="{{pageType=='vip'}}">
        <view bindtap="cardTap" class="item flex-j-a {{activeIndex==index?'active':''}}" data-index="{{index}}" wx:for="{{data}}">
          <image class="vip-icon" src="/images/main/{{activeIndex==index?'shieid_active.png':'shieid.png'}}"></image>
          <view class="flex-j-a item-inner">
            <view class="flex-a before">
              <view class="title">{{item.title}}</view>
              <view class="desc">原价：{{item.prime}}</view>
            </view>
            <view class="price">￥{{item.price}}</view>
          </view>
        </view>
      </view>
      <view class="payitem-inner flex-j-a">
        <button bindtouchstart="setShareHelpPayInfo" class="item" hoverClass="none" openType="share">
          <image class="icon" src="/images/main/helppay_android_icon.png"></image>
          <text class="text">通过找微信朋友代付</text>
        </button>
        <button bindtap="qrcodePay" class="item" hoverClass="none">
          <image class="icon" src="/images/main/helppay_qrcode_icon.png"></image>
          <text class="text">扫描二维码直接支付</text>
        </button>
      </view>
    </view>
  </block>
</view>

效果图：

放在末尾：推荐我的个人两个小程序：