美文网首页
uniApp开发 微信公众号H5 跳转小程序 wx-open-l

uniApp开发 微信公众号H5 跳转小程序 wx-open-l

作者: Pino | 来源:发表于2021-02-06 20:37 被阅读0次

真机无法显示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()
}

相关文章

网友评论

      本文标题:uniApp开发 微信公众号H5 跳转小程序 wx-open-l

      本文链接:https://www.haomeiwen.com/subject/tfgotltx.html