App唤起微信小程序和回调,App跳转小程序支付

4747 2745 2022-10-16

本文讲了App唤起微信小程序和回调,App跳转小程序支付。

可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的移动应用发起关联小程序操作。

唤起

App打开下程序他有两种方式:

1,通过App分享小程序卡片 到微信,然后在微信上点击小程序卡片打开小程序,这是小程序也可以打开App

第一步:你需要到微信开放平台 将你的app 关联上你的小程序!
第二步:你工程中需要导入有 wechatOpenSDK
第三步: 分享小程序卡片类型

 View Code

2,通过App主动的调用api 打开小程序,这时候小程序也可以打开App

 View Code

WXMiniProgramTypeRelease 正式版    WXMiniProgramTypeTest 开发版    WXMiniProgramTypePreview 体验版

回调

当小程序从 APP 分享消息卡片的场景打开(场景值 1036,APP 分享小程序文档 iOS / Android) 或从 APP 打开的场景打开时(场景值 1069),小程序会获得打开 APP 的能力,此时用户点击按钮可以打开分享该小程序卡片/拉起该小程序的 APP。即小程序不能打开任意 APP,只能 跳回 APP。

options.scene是1036,这个场景id表示app分享。 options.scene是1069,这个场景id表示从app打开。

按微信文档中描述,从小程序中跳回App只能通过点击小程序中的按钮方可跳回,如何实现点击按钮跳回App,并携带参数呢,需如下两步

App端:

需要创建WXEntryActivty,实现IWXAPIEventHandler接口,重写onResp方法。注意Acitvity需要在Manifest文件中声明 android:exported="true",这样才可以被外部唤起

public void onResp(BaseResp resp) {     if (resp.getType() == ConstantsAPI.COMMAND_LAUNCH_WX_MINIPROGRAM) {         WXLaunchMiniProgram.Resp launchMiniProResp = (WXLaunchMiniProgram.Resp) resp;         String extraData =launchMiniProResp.extMsg; // 对应下面小程序中的app-parameter字段的value     } }

小程序端:

需要将 <button> 组件 open-type 的值设置为 launchApp。如果需要在打开 APP 时向 APP 传递参数,可以设置 app-parameter 为要传递的参数。通过 binderror 可以监听打开 APP 的错误事件。

<view>       <button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>     </view>

这样App拿到的内容就是wechat。

扩展 

再下一步的需求是多个App跳转一个小程序,再分别返回不同的App;一个App跳转不同的小程序,接受不同的返回内容。

从App拉起小程序页面的路径是可以带参数的,我们就利用这个参数判断是从那个App跳到小程序的。

例如:

名称为a的App跳转路径为:

"pages/index/index?type=appA"

名称为b的App跳转路径为:

"pages/index/index?type=appB"

小程序端接收参数:

onLoad: function (options) {     console.log(options.type); //app传递过来的参数 可以判断a或者b },

这样App拿到的内容就是wechat。

扩展 

再下一步的需求是多个App跳转一个小程序,再分别返回不同的App;一个App跳转不同的小程序,接受不同的返回内容。

从App拉起小程序页面的路径是可以带参数的,我们就利用这个参数判断是从那个App跳到小程序的。

image.png

在微信小程序里面新建一个页面appWxaPay,在onLoad里面获取options的支付参数,直接调小程序支付API即可。

小程序支付主要用到API:wx.requestPayment

返回App主要用button组件open-type="launchApp":<button type="primary" open-type="launchApp" app-parameter="{{status}}" binderror="launchAppError">点击返回商户</button>

重要:第一次做这个,前面对它们这个原理机制没搞清楚,一直纠结在放onLoad还是onShow里。。。然后和App同事沟通再联调验证,app每次跳小程序页会销毁重开,所以写onLoad里就行了,App每次跳过来都会触发到onLoad。

<view class="page container">

  <view class="content">

    <view class="status-box">

      <block wx:if="{{isLoading}}">

        <view>支付中..</view>

      </block>

      <block wx:if="{{isSuccess}}">

        <icon type="success" size="50" class="pay-icon"></icon>

        <view>支付成功,请返回商户</view>

      </block>

      <block wx:if="{{isCancel}}">

        <icon type="warn" size="50" class="pay-icon" color="#C9C9C9"></icon>

        <view>您已取消支付</view>

      </block>

      <block wx:if="{{isFail}}">

        <icon type="cancel" size="50" class="pay-icon"></icon>

        <view>支付失败,请重新支付</view>

      </block>

    </view>

    <block wx:if="{{isFail || isCancel}}">

      <button type="primary" class="pay-button" bindtap="toPayApp">重新支付</button>

    </block>

    <block wx:if="{{isLoading}}">

      <button type="primary" disabled="true">点击返回商户</button>

    </block>

    <block wx:else>

      <button type="primary" open-type="launchApp" app-parameter="{{status}}" binderror="launchAppError">点击返回商户</button>

    </block>

  </view>

</view>

Page({

  data: {

    isLoading: false,

    isSuccess: false,

    isFail: false,

    isCancel: false,

    timeStamp: '',

    nonceStr: '',

    package: '',

    paySign: '',

    status: 0, // 0: 已取消(未付),1:已支付,2:支付失败

  },

  onLoad: function (options) {

    var that = this;

    that.setData({

      timeStamp: options.timeStamp || '',

      nonceStr: options.nonceStr || '',

      package: options.package || '',

      paySign: options.paySign || ''

    })

    that.toPayApp()

  },

  toPayApp() {

    var that = this

    if (!that.data.timeStamp || !that.data.nonceStr || !that.data.package || !that.data.paySign) {

      wx.showToast({

        title: '无效的支付请求,请返回商户重试',

        icon: 'none'

      })

      return false

    }

    if (that.data.isLoading) {

      return false

    }

    that.setData({ isLoading: true })

    wx.requestPayment({

      timeStamp: that.data.timeStamp,

      nonceStr: that.data.nonceStr,

      package: that.data.package,

      signType: 'MD5',

      paySign: that.data.paySign,

      success: function(res) {

        that.setData({ isLoading: false, isSuccess: true, status: 1 })

        wx.showToast({

          title: '支付成功,请返回商户',

        })

      },

      fail: function(res) {

        if (res.errMsg === "requestPayment:fail cancel") {

          that.setData({ isLoading: false, isCancel: true, status: 0})

          wx.showToast({

            title: '您已取消支付',

          })

        } else {

          that.setData({ isLoading: false, isFail: true, status: 2 })

          wx.showToast({

            title: '支付失败,请重新支付',

            icon: 'none'

          })

        }

      }

    })

  },

  launchAppError (e) {

    console.log(e.detail.errMsg)

  }

});

.page {

  position: relative;

  height: 100%;

  background-color: #fff;

}

.content{

  padding: 0 40rpx;

  color: #666;

}

.status-box{

  padding: 60rpx 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.pay-button{

  margin-bottom: 30rpx;

}

.pay-icon{

  margin-bottom: 30rpx;

}

上文就是小编为大家整理的App唤起微信小程序和回调,App跳转小程序支付。

国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:小米MIUI受拥趸 专家称“敏捷开发”模式为主因,app敏捷开发模式有哪些
下一篇:小程序成为多社交平台引流利器,小程序多端引流怎么做
相关文章

 发表评论

暂时没有评论,来抢沙发吧~