真机无法显示wx-open-launch-weapp标签的 ，请先完成签名校验，校验完成 后，标签才会显示！
真机无法显示wx-open-launch-weapp标签的 ，请先完成签名校验，校验完成 后，标签才会显示！
真机无法显示wx-open-launch-weapp标签的 ，请先完成签名校验，校验完成 后，标签才会显示！
// 跳转小程序需要将相关参数传入 所以需要动态设置
// 先看view部分
<view class="bottom text-white">
<view v-html="wxOpenTags" style="width:100%;height:50px;">
</view>
</view>
// 这是利用vue的v-html指令来做解析html
that.wxOpenTags =`<wx-open-launch-weapp path="pages/start/start.html?userAccount=${userAccount.mobilePhone}&psd=${userAccount.password}"
id="launch-wxapp"username="gh_8f2a2b49cab1" @error="handleErrorFn" @launch="handleLaunchFn">
<template>
<style>.box{display:flex;justify-content:center;align-items:center} .btn {width:100px; height: 50px;background-color: #1c92d2;
color:#ffffff}
</style>
<div class="box">
<button class="btn">一键进入【小程序】</button>
</div>
</template>
</wx-open-launch-weapp>`
// 开始是想宽度不能写死 要适应屏幕宽度，结果写100% 并没有效果。
然后又外层的父元素设置100%，同样是无效啊，心累，
每一次测试都需要在打包h5 然后部署到服务端，然后通过手机来测试，
原因是uniapp依赖node_modules 在小程序无法运行，然后微信开发者工具也没法调试 签名校验问题
，唯一的办法就是 部署然后手机测试
// 重点 通过获取外层元素的宽度来 动态设置btn的宽度
showXiaochengxu() {
let that = this;
let userJson = uni.getStorageSync('userAccount') || "";
if (!userJson) return console.log("userJson", userJson);;
let userAccount = JSON.parse(userJson)
that.isShow = true;
let info = uni.createSelectorQuery().select(".bottom");
info.boundingClientRect(function(data) { //data - 各种参数
console.log(data.width) // 获取元素宽度
that.wxOpenTags =
`<wx-open-launch-weapp
path="pages/start/start.html?userAccount=${userAccount.mobilePhone}&psd=${userAccount.password}"
id="launch-wxapp"
username="gh_8f2a2b49cab1" @error="handleErrorFn" @launch="handleLaunchFn">
<template>
<style>.box{display:flex;justify-content:center;align-items:center} .btn {width:${data.width}px; height: 50px;background-color: #1c92d2;color:#ffffff}</style>
<div class="box">
<button class="btn">一键进入【小程序】</button>
</div>
</template>
</wx-open-launch-weapp>`
}).exec()
}
