2021-02-01微信小程序<web-view>页面显示 按钮

一、官方文档的webview官方api

1、铺满整个屏幕,不支持自定义导航。
2、不能设置宽高,直接铺满整个页面,一个页面只能有一个webview
3、层级极高,不能通过z-index改变元素属性来浮在上面。

二、 解决办法 官方api只有真机才能实现效果,微信开发者工具不适用

html

<web-view src="https://720yun.com/t/a9cjvOsnOa3?scene_id=20949466">
		<cover-view class="share-button">
			<cover-view class="share-txt" >
				搭配详情
			</cover-view>
			<cover-view class="share-txt">
				商品列表
			</cover-view>
		</cover-view>
	</web-view>

css


.share-button {
  z-index: 999999;
  position: fixed;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  bottom:30rpx;
  width:60%;
  height: 72rpx;
  display: flex;
  left: 20%;
  justify-content: center;
}

.share-txt{
  width:200rpx;
height:72rpx;
box-shadow:0rpx 4rpx 6rpx 0rpx rgba(18,46,102,0.5);
border-radius:36rpx;
line-height: 72rpx;
text-align: center;
font-size: 28rpx;

}

.share-txt{
  margin-right: 40rpx;
}


样式就像一张一张的纸,叠在一起。z-index的值越大,表示纸越靠近眼睛。
所以,必须有z-index。
而 z-index 必须position才能有效果。
所以,必须有 positon属性。
使用 web-view 和 cover-view 要在外面加上 view,不加容易出错,无法显示。

推荐阅读:http://www.lht.ren/article/21/
原文链接:https://blog.csdn.net/qq_43299315/article/details/107416587?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-2&spm=1001.2101.3001.4242

实现微信小程序web-view跳转商城,支付的时候的跳转微信小程序支付,需要进行以下步骤: 1. 在微信公众平台注册小程序,并获取AppID。 2. 在小程序后台开启支付功能,并设置支付相关的参数,例如商户号、密钥等。 3. 在商城的页面,使用微信JS-SDK的`chooseWXPay`方法调起微信支付。 以下是调用微信支付的代码示例: ```javascript // 调用微信支付 function pay() { wx.chooseWXPay({ timestamp: '', // 支付的时间戳 nonceStr: '', // 支付的随机字符串 package: '', // 统一下单接口返回的 prepay_id 参数值 signType: '', // 签名算法,暂支持 MD5 paySign: '', // 签名 success: function (res) { // 支付成功后的回调函数 }, fail: function (res) { // 支付失败后的回调函数 } }); } ``` 4. 在商城页面,点击支付按钮时,调用`pay`函数进行支付。 5. 在微信小程序,使用`navigateToMiniProgram`或`navigateBackMiniProgram`方法实现跳转到微信小程序支付界面。 以下是跳转到微信小程序支付界面的代码示例: ```javascript // 跳转到微信小程序支付界面 function navigateToPay() { wx.navigateToMiniProgram({ appId: '', // 小程序的AppID path: '', // 跳转到小程序的路径 extraData: {}, // 传递给小程序的数据 success(res) { // 成功跳转到小程序支付界面后的回调函数 }, fail(res) { // 跳转失败后的回调函数 } }) } ``` 6. 在商城页面,调用`navigateToPay`函数实现跳转到微信小程序支付界面。 7. 在小程序后台,配置小程序支付的回调URL,用于接收微信支付结果通知。 以上是微信小程序web-view跳转商城,支付的时候的跳转微信小程序支付的实现步骤和代码示例。需要注意的是,具体的代码和小程序后台配置可能会因为不同的商城和小程序而有所不同。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值