微信最近开放的这个wx-open-launch-weapp标签,就是从H5中唤起小程序,大概是长这个样子

1595348125_27_w666_h420.png

官方的文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

这里需要注意的是

1595348482_5_w1048_h308.png

目前最新版本的小程序模拟器是不支持这个开放标签的。(你需要在真实的手机下面调试,虽然看不到效果,但通过模拟器看到dom是不是已经渲染出来,来判断你代码有没有问题)

当前最新的微信开发工具版本是:1.03.2006090(稳定版)是不支持的,因为开放标签对微信的版本和手机操作系统的版本都有要求

微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上。

而开发工具内置的微信版本是 7.0.4      

/**
* 版本号对比
* @inputvalue string 输入的版本号
* @tempvalue string 对比的版本号
* @division string 版本号的分隔符      
* @return  boolean  true 表示对比成功,false对比失败     
*/
function semvar(inputvalue, tempvalue, division{
let inputArr = inputvalue.split(division)
let tempArr = tempvalue.split(division)
let comparison = true
inputArr.forEach(function(item, idx){   if(parseInt(item,10) < parseInt(tempArr[idx],10)){
      comparison = false         
  }
})
   return comparison
}

官方文档里面给的例子,在VUE下面不太行,需要改成如下的方式  

  <wx-open-launch-weapp          
   username="gh_xxxxxxxx"          
    path="pages/home/index.html"
  >       
   <script type="text/wxtag-template">         
       <style>.btn { padding: 12px}</style>
       <button class="btn"></button>      
    </script>     
  </wx-open-launch-weapp> 

初步试验到这里,就算把功能跑通了,接下问题,就是这个“打开小程序”五个字动态渲染?

这个script标签里面的内容是不能从VUE模板一起渲染的,而且样式写成内联样式或者写在<style>里面,不然没效果,这里建议写内联。

经过多次研究和尝试(血泪)发现,这个 wx-open-launch-weapp 是支持动态渲染的,得到如下代码  

let script = document.createElement('script')  
script.type = 'text/wxtag-template' let { image = '' } = item.material && item.material[0];     
script.text = `<div style="height:70px;width:100%; background:red"> <img src="${image}" width="100%" height="70px" /></div>` 
let html = `<wx-open-launch-weapp style="width:100%;display:block;height:70px;" username="${item.appid}"path="${item.url}">${script.outerHTML}</wx-open-launch-weapp>`
let id = "launch_" + index
document.getElementsByClassName(id)[0].innerHTML = html;

这样动态拼凑出来的html内容追加到对应的 标签下面,就能实现需要的功能

如果你是把 wx-open-launch-weapp 写在模板中,再追加script的内容进去,是不得行的。会出现一个很诡异的事情,就是第一次加载失败,然后进去其他页面,再回退回来,就加载成功了。

所以需要把 wx-open-launch-weapp 和 script 里面的内容一起动态渲染,然后再塞进指定的位置。就可以了。

你以为你做完了吗? 在小程序的webview下面,这个标签也是没效果的,你还得有的兜底方案!

Leave a Reply

Your email address will not be published. Required fields are marked *