微信小程序能唤起APP吗？封装唤起APP组件

微信小程序能唤起APP吗？首先回答：可以的，但是受限使用场景。

实现方式

微信没有提供API，通过button中open-type设置为launchApp来实现跳转APP。

它可以传递的参数：

• 可以通过app-parameter属性设定向APP传的参数，app根据传的参数跳转APP不同页面；

• binderror：当使用开放能力时，发生错误的回调，open-type=launchApp时有效

• bindlaunchapp：打开 APP 成功的回调，open-type=launchApp时有效

限制唤起APP场景

根据官方描述只能实现APP跳转小程序后，小程序才能回调APP，场景值是1069时有效。官方描述为：当小程序从 APP 打开的场景打开时（场景值 1069），小程序会获得返回 APP 的能力，此时用户点击按钮可以打开拉起该小程序的 APP。即小程序不能打开任意 APP，只能 跳回 APP。

实现

JS

const URLSCHEME = 'weixin://';
Component({
  properties: {
    targetAppUrl: {
      type: String,
      value: ''
    },
    textButton: {
      type: Boolean,
      value: true
    },
    width: {
      type: Number,
      value: 600,
    },
    height: {
      type: Number,
      value: 150,
    },
    borderRaius: {
      type: Number,
      value: 200
    },
    textContent: {
      type: String,
      value: '点击打开APP'
    },
    // 文字按钮，按钮背景颜色
    bgColor: {
      type: String,
      value: '#C2BF5E'
    },
    // 文字按钮，按钮文字颜色
    textColor: {
      type: String,
      value: 'rgb(247, 239, 239)'
    },
    // 文字按钮，按钮背景图片
    textBgImg: {
      type: String,
      value: ''
    },
    // 图片按钮，按钮背景图片
    bgImage: {
      type: String,
      value: 'http://t15.baidu.com/it/u=2364316606,2378153540&fm=224&app=112&f=JPEG?w=344&h=500'
    }
  },
  data: {

  },
  lifetimes: {
    attached() {
      this.setData({
        appUrl: `${URLSCHEME}${this.data.targetAppUrl}`
      });
    }
  },
  methods: {
    launchAppError(e) {
      console.log('launchAppError',e.detail.errMsg);
      wx.showToast({
        title: '此场景无法跳转',
        icon: 'none'
      });
    },
    launchAppSucess(e) {
      console.log('launchAppSucess',e);
    }
  }
})

wxml

<view class="comp-root">
  <button class="btn"	hover-class="small-hover" open-type="launchApp" app-parameter="{{appUrl}}" binderror="launchAppError" bindlaunchapp="launchAppSucess" style="width: {{width}}rpx; height: {{height}}rpx; padding: 0; line-height: {{height}}rpx; border-radius: {{borderRaius}}rpx; background:{{bgColor}} url({{textBgImg}});  color: {{textColor}};" >
  <block wx:if="{{textButton}}">
  {{textContent}}
  </block>
  <block wx:else>
  <image class="img" src="{{bgImage}}" mode="aspectFill"/>
  </block>
  </button>
</view>

wxss

.btn {
  padding: 0;
  text-align: center;
}

.img {
  width: 100%;
  height: 100%;
}

.rect-hover{
  position: relative;
  top: 3rpx;
  left: 3rpx;
  box-shadow: 0 0 8px rgba(0,0,0,0.1) inset;
}


.small-hover{
  opacity: 0.9;
  transform: scale(0.95,0.95);
}


.medium-hover{
  opacity: 0.8;
  transform: scale(0.85,0.85);
}

总结

微信小程序能唤起APP吗？首先回答：可以的，但是受限使用1069（APP唤起小程序）场景，本文基于此封装了微信小程序唤起APP组件。