写在前言:用过微信支付的都知道,小程序在支付时候也被苹果无情的抛弃了。所以就要区分是安卓机型还是苹果机型。那么怎么区分呢,在小程序中有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>
效果图:
放在末尾:推荐我的个人两个小程序: