前端基于VUE+JQ使用wx-open-launch-app打开app教程

基于VUE+JQ使用wx-open-launch-app教程1.一定要用 < script type=“text/wxtag-template” >< script >包裹起来，否者按钮会消失<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn" appid

云中的闪电

1037人浏览 · 2021-05-11 18:18:27

云中的闪电 · 2021-05-11 18:18:27 发布

wx-open-launch-app教程

1.一定要用 < script type=“text/wxtag-template” >< script >包裹起来，否者按钮会消失
在这里插入图片描述

<wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn" appid="wx12345678" extinfo="" style="display: block;">
                    <script type="text/wxtag-template">
                        <style>.btn { padding: 12px; width: 100%;background: #2FBB6E;height: 44px;box-shadow: 0 6px 14px -6px rgba(47,187,110,0.40);border-radius: 2px;text-align: center;color: #FFFFFF;font-size: 15px;margin: 30px 0;  border: 0px solid #fff;}</style>
                        <button class="btn"  >App内查看</button>
                    </script>
                </wx-open-launch-app>

2.不要用http://res.wx.qq.com/open/js/jweixin-1.6.0.js这个线上地址否者微信语法会报错，把微信语法下载下来，在本地引入
在这里插入图片描述

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    	<script src="./wx.js"></script>
    	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

3.wx.config自己看微信文档照着填写就行
在这里插入图片描述

4.监听用户手机跳转情况，如果没有app会走handleErrorFn函数提示用户去下载app
在这里插入图片描述
5.如果成功了会出现弹窗提示，如下
测试的时候可以把debug设置为true（调试模式，true为打开），如果提示config：ok说明wx.config的注入是成功的

下面是整体代码，仅供参考，如果能用别忘了回来给点个赞

<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>新闻详情</title>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>

	<body>
		<div id="vue" >
            <div class="warp" v-if="data">
                <div class="title" v-text="data.title"></div>
                <div class="time" v-text="'发布时间：'+data.addtime"></div>
                <!--富文本内容-->
                <div class="content" v-html="data.content"></div>
                
                <wx-open-launch-app id="launch-btn" @error="handleErrorFn" @launch="handleLaunchFn" appid="wx123456789999" extinfo="" style="display: block;">
                    <script type="text/wxtag-template">
                        <style>.btn { padding: 12px; width: 100%;background: #2FBB6E;height: 44px;box-shadow: 0 6px 14px -6px rgba(47,187,110,0.40);border-radius: 2px;text-align: center;color: #FFFFFF;font-size: 15px;margin: 30px 0;  border: 0px solid #fff;}</style>
                        <button class="btn"  >App内查看</button>
                    </script>
                </wx-open-launch-app>
            </div>
            <div class="Tips" v-if="data == '' ||data == null || data == undefined ">分享内容不存在或已删除</div>
        </div>
		
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    	<script src="./wx.js"></script>
    	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		
		<script>
			new Vue({
    	    el: '#vue',
    	    data:{
    	        data:[]
    	    },
    	    mounted:function(){
    	        var id=getUrlParam("id");
    	        let _this = this
    	        //以下请求只是页面内容，与此篇教程无关
    	       $.ajax({
                    //请求方式
                    type : "get",
                    //请求的媒体类型
                    contentType: "application/x-www-form-urlencoded",
                    //请求地址
                    url : "https://",
                    //数据，json字符串
                    data : {'id':id,},
                    //请求成功
                    success : function(ret) {
                        //  console.log(ret);
                        _this.data = JSON.parse(ret).data
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                    }
                });
                function getUrlParam(name) { 
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                    var r = window.location.search.substr(1).match(reg); //匹配目标参数 
                    if (r != null) return unescape(r[2]); 
                    return null; //返回参数值
                }
                this._toApp()
    	    },
    	     methods:{
    	        _toApp(){
    	            var locationUrl = location.href.split('#')[0];
    	            $.ajax({
                    //请求方式
                    type : "get",
                    //请求的媒体类型
                    contentType: "application/x-www-form-urlencoded",
                    //请求地址
                    url : "https://后台请求的config需要的配置",
                    //数据，json字符串
                    data : {locationUrl:locationUrl},
                    //请求成功
                    success : function(ret) {
                        wx.config({
                          debug: false, 
                          appId: JSON.parse(ret).appId, // 必填，公众号的唯一标识
                          timestamp: JSON.parse(ret).timestamp, // 必填，生成签名的时间戳
                          nonceStr: JSON.parse(ret).nonceStr, // 必填，生成签名的随机串
                          signature: JSON.parse(ret).signature,// 必填，签名
                          jsApiList: ['openLocation'], // 必填，需要使用的JS接口列表
                          openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
                        });
                        wx.ready(function () {
                        });
                        wx.error(function (err) {
                          console.log(err)
                        });
                    },
                    //请求失败，包含具体的错误信息
                    error : function(e){
                    }
                   });
    	        },
    	        handleErrorFn (e) {
                  // 跳转失败
                  window.location.href='https://app下载地址';
                //   console.log(JSON.stringify(e), '跳转失败')
                },
                // 监听launch 函数
                handleLaunchFn (e) {
                  // 跳转成功
                //   console.log(JSON.stringify(e), '跳转成功')
                }
    	    }
    	})
    	</script>
	</body>
	   
</html>