vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃

本文链接：https://blog.youkuaiyun.com/qq_38998250/article/details/117792987

h5网页点击按钮，唤醒微信小程序是否可以做？

可以！！，就是有点限制。

通过wx-open-launch-weapp就可以实现，但是限制 微信服务号才可以使用。也就是说必须是微信环境下。

文章最下边，有知识扩展，是我踩的坑，很重要！很重要！

一、配置、授权

这里我就不多说了，总之就是引入sdk、授权等等常规操作。不明白的小伙伴，可以看看我专门写授权的一篇文章h5获取code，授权等问题

二、wx.config

假设大家将数据都拿到了，那么需要调用一下wx.config

wx.config({
				// debug: true, // 开启调试模式
				appId: this.appObj.appId, // 必填,公众号的唯一标识
				timestamp: this.appObj.timestamp, // 必填,生成签名的时间戳
				nonceStr: this.appObj.noncestr, // 必填,生成签名的随机串
				signature: this.appObj.signature, // 必填,签名
				jsApiList: ["scanQRCode", "checkJsApi","onMenuShareAppMessage","onMenuShareTimeline"], // 必填,需要使用的JS接口列表
				openTagList:['wx-open-launch-weapp']  // 可选，需要使用的开放标签列表
});

onMenuShareAppMessage ：分享给朋友
onMenuShareTimeline ：分享到朋友圈
wx-open-launch-weapp ：开发标签-- 打开小程序

三、小程序跳转按钮：

名称	必填	默认值	备注
username	是		所需跳转的小程序原始id，即小程序对应的以gh_开头的id
path	否		所需跳转的小程序内页面路径及参数

到这里，大家因为正常使用wx-open-launch-weapp就可以了吗？No ! No ! No

wx-open-launch-weapp 有个非常尴尬的问题，就是样式设置不好使。

还好问题不严重，折腾了一番。让我找到一个折中的办法。

四、分析问题及解决它

wx-open-launch-weapp 的基本样式还是可以设置的，只是我们正常场景下，排版布局有点满足不了，那么我们就先正常排版，然后将wx-open-launch-weapp定位在需要跳转的盒模型上

上代码

主要3个文件 home.vue 、wx-weapp-box.vue、config.js

//home.vue   主页面

<template>
  <section class="home-wrap"> 
    <div class="box c-weapp-box">
       <wx-weapp-box path="/pages/xxx/list"/>
       <img class="img" src="~@/assets/img/activity/618/yh-1.png" />
    </div>
  </section>
</template>

<script>
import wx from 'weixin-js-sdk'
import {configJS} from '$model/mixins/config'
import wxWeappBox from '$model/wx-weapp-box.vue'
export default {
  components: { wxWeappBox },
	mixins:[configJS],
  data (){
    return {

    }
  },
  methods :{
    shareFn (){
      //处理验证成功的信息
      let _this = this
      
      wx.ready( () =>{
      
      
       //分享到朋友圈
      
       wx.onMenuShareTimeline({
      
        title:'618活动~', // 分享标题
      
        link: `xxx/xxx/xxx/`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      
      //   imgUrl: _this.newDetailObj.thu_image, // 分享图标
      
        success: function (res) {
      
        },
      
        cancel: function (res) {
      
        }
      
       });
      
       //分享给朋友
      
       wx.onMenuShareAppMessage({
      
        title: '618活动~', // 分享标题
      
        desc: '这是一个活动~', // 分享描述
      
        link: `xxx/xxx/xxx/`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      
       imgUrl: 'xxx/xxx/xxx.png', // 分享图标
      
        success: function (res) {
      
         // 用户确认分享后执行的回调函数
      
      
        },
      
        cancel: function (res) {
      
         // 用户取消分享后执行的回调函数
      
      
        }
      
       });
      
      
      
      });
    }
  },
  mounted (){
		this.checkJsApiFn(()=>{
      		this.shareFn()
    	});
	}
}
</script>

<style lang="scss" scoped>
.home-wrap{
 .c-weapp-box{
    overflow: hidden;
    position: relative;
    .img{
      width: 100%;
      height: 100%;
    }
  }
}
</style>

//wx-weapp-box  封装 wx-open-launch-weapp逻辑的组件
<template>
  <div class="c-wx-weapp-box">
    <wx-open-launch-weapp
      username="gh_xxxxx6xx"
      :path="path"
      style="display:block;"
    >
      <script type="text/wxtag-template">
        <button style="width:1000px;height:1000px;">打开小程序</button>
      </script>
    </wx-open-launch-weapp>
  </div>
</template>

<script>
export default {
  props :{
    path:{
      type:String,
      default:''
    }
  }
}
</script>
<style lang="scss" scoped>
.c-wx-weapp-box{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
}
</style>