微信小程序能唤起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);
}