记录贴(注释稍微累赘),最近刚好手头上有个项目有类似的需要。废话不多说,下面介绍一下应用场景
一、应用场景:
- 公众号跳转小程序
- 小程序webview跳转小程序
第一种:公众号跳转小程序其实就是简单的采用“wx-open-launch-weapp”开放标签就可以实现了,具体可以查看“公众号开放标签”,注意:该种方式如果是嵌套在小程序webview内的话是不起作用的。
第二种则是采用小程序自带的webview的功能,可直接在H5页面上执行小程序的“navigateTo”等API进行跳转处理,具体可前往查看“小程序webview”,该种方式也是有限制的,就是仅仅允许本小程序内部页面跳转(实际上就是只能多本小程序进行操作)。
上面的两种方式根据自己的业务需求选择就行了。下面直接贴代码了
二、实现方式:(代码只贴了部分,同时实现上面提到两种方式,完整代码下方下载即可)
HTML代码:
<div class="weui-msg">
<div class="weui-msg__text-area">
<h2 class="weui-msg__title">订单已生成</h2>
<p class="weui-msg__desc">请点击下方按钮完成支付</p>
<p class="weui-msg__desc-primary">如您不在【xxx】微信小程序内,请使用微信扫描下方二维码完成支付:</p>
<!--这里可以按需要放置一个打开小程序的二维码,做保底处理-->
<!--<p class="weui-msg__desc-primary"><img src="" alt="qrcode"></p>-->
</div>
<div class="weui-msg__opr-area">
<p class="weui-btn-area">
<!--这个按钮主要是用于做第二种场景的,即webview跳转小程序-->
<button type="button" class="weui-btn weui-btn_primary" id="pay" disabled="">完成支付</button>
<!--这个按钮主要是用于做第一种场景的,即公众号跳转小程序;其中username为小程序的原始ID-->
<button type="button" class="weui-btn weui-btn_primary" id="wxapp-pay">
<wx-open-launch-weapp id="wxapp-pay" username="gh_xxxx" env-version="develop" path="/pages/pay/pay?order_id=123">
<script type="text/wxtag-template">
<style>span.wx-open{font-size:17px;font-weight:700;color:#FFF}</style>
<span class="wx-open">完成支付</span>
</script>
</wx-open-launch-weapp>
</button>
<!--这个按钮可以有无,自行决定-->
<button type="button" class="weui-btn weui-btn_default" id="back" disabled="">后退</button>
</p>
</div>
</div>
js代码:
/*引入微信js库*/
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
/*配置微信jssdk,其中jsApiList、openTagList是必须配置,用于第一种场景(公众号跳转小程序)*/
wx.config({
"debug":false,
"appId":"公众号appid",
"timestamp":"时间戳",
"nonceStr":"随机数",
"signature":"签名",
"jsApiList":["miniProgram"],
"openTagList":["wx-open-launch-weapp"]
});
</script>
<script>
/*这个链接地址是针对第二种场景的(webview跳转小程序,第一种场景跳转路径是HTML代码中的“path”)*/
const MINI_URL="/pages/pay/pay?order_id=123";
wx.ready(function(){
/*webview中获取当前环境,然后下面的disabled那些是处理上面不同场景按钮的隐藏显示的*/
wx.miniProgram.getEnv(function(res){
if(res.miniprogram){
$('#pay').prop("disabled",false);
$('#wxapp-pay').prop("disabled",true);
}else{
$('#pay').prop("disabled",true);
$('#wxapp-pay').prop("disabled",false);
}
});
try{
/*webview环境下直接跳转过去*/
wx.miniProgram.navigateTo({
"url":MINI_URL
});
}catch(e){
}
});
$(function(){
/*这里是webview环境下自行点击去跳转的(算是保底作用)*/
$('#pay').on("click",function(){
try{
wx.miniProgram.navigateTo({
"url":MINI_URL,
"fail":function(res){
$('#pay').prop("disabled",true);
$('#back').prop("disabled",false);
}
});
}catch(e){
$('#pay').prop("disabled",true);
$('#back').prop("disabled",false);
}
});
});
</script>
<script src="http://127.0.0.1:13455/__webdebugger__/wxtags.js"></script>
后端代码自行贴哈,就是获取公众号的jssdk的配置而已,相信大家都ok的啦,哈哈
三、代码
文件密码:35bq