微信小程序之坑

最新推荐文章于 2023-05-12 17:56:54 发布

choutian5268

最新推荐文章于 2023-05-12 17:56:54 发布

阅读量457

点赞数

原文链接：https://my.oschina.net/mirclewang/blog/3061082

版权

2019-08-29 15:27

问题：调用wx.relaunch报错:fail can not invoke relaunch in background

场景：在界面A调用微信支付 -> 跳转到微信支付页面 -> 用户点击支付 -> 支付成功回到A界面 -> 收到支付成功的回调 -> 调用wx.reLaunch(Object object)

这块有两种方法实现

1 直接写两句 wx.switchTab('tab') wx.navigateTo('h5?url=h5url') ios 不会执行第二条跳转 andorid 没问题

2 技术上面的一句 wx.relaunch('tab?url=h5url') 在tab 页面 onLoad 里面解析 option.url option.pageType 进行二次跳转（ios 没问题 andorid 报上面的错误）

加了一个延时就都ok了 setTimeout(()=>{ wx.relaunch('tab?url=h5url') },200)

2019-08-21 15:21

1 苹果xmax 不支持 vue v-if （其他手机（其他版本苹果或者andorid）v-if 等到true的时候会重新渲染 xmax第一次false之后就不会渲染注意移动端慎用 v-if ）

1 回退到webview 不刷新之坑

场景描述：1 原生a页面嵌入webiew （navigateTo）-》原生页面b

2 在b页面回退到a页面 a页面不会刷新（用的缓存）

尝试办法：1在原生a页面onShow方法里面将url加new Date().getTime() ，无效

2 如果在场景描述1 中使用 redirectTo 就会没有回退按钮了不会产生回退页面不刷新的问题

解决方案：？？？

1 首先，让webview做条件渲染：

<web-view wx:if="{{ webviewUrl }}" src="{{ webviewUrl }}" />

2 需要刷新时，先把webviewUrl设为空，销毁当前webview。然后再把webviewUrl设为当前值。如下：

  refreshWebview: function () {
    let tmpUrl = this.data.webviewUrl;
    this.setData({
      webviewUrl: ''
    });
    setTimeout(() => {
      this.setData({
        webviewUrl: tmpUrl
      })
    }, 100);
  }

这样便可以在不影响导航栏历史的情况下刷新页面，也可以是跳转url。
这里setData之后，页面内容的更新应该是异步执行的，因此我们后一次修改url需要延时一小段时间，否则会出现error。
猜测setData后页面实际更新应该是在下一次的requestAnimationFrame，因此如果页面完全不卡顿可能16ms就可以了，保险起见，我设了100ms。

最好再做下回退判断一般是回退不刷新正常的前向跳转正规处理

其他小程序常见坑：
https://blog.csdn.net/ganggang4321/article/details/88892240

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

客户端 6.7.2 版本开始，navigationStyle: custom 对 <web-view> 组件无效

属性名	类型	默认值	说明
src	String	 	webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
bindmessage	EventHandler	 	网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }
bindload	EventHandler	 	网页加载成功时候触发此事件。e.detail = { src }
binderror	EventHandler	 	网页加载失败的时候触发此事件。e.detail = { src }
示例代码：

<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
相关接口 1

<web-view/>网页中可使用JSSDK 1.3.2提供的接口返回小程序页面。 支持的接口有：

接口名	说明	最低版本
wx.miniProgram.navigateTo	参数与小程序接口一致	1.6.4
wx.miniProgram.navigateBack	参数与小程序接口一致	1.6.4
wx.miniProgram.switchTab	参数与小程序接口一致	1.6.5
wx.miniProgram.reLaunch	参数与小程序接口一致	1.6.5
wx.miniProgram.redirectTo	参数与小程序接口一致	1.6.5
wx.miniProgram.postMessage	向小程序发送消息	1.7.1
wx.miniProgram.getEnv	获取当前环境	1.7.1
示例代码：

在开发者工具中预览效果

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true })
相关接口 2

<web-view/>网页中仅支持以下JSSDK接口：

接口模块	接口说明	具体接口
判断客户端是否支持js	 	checkJSApi
图像接口	拍照或上传	chooseImage
 	预览图片	previewImage
 	上传图片	uploadImage
 	下载图片	downloadImage
 	获取本地图片	getLocalImgData
音频接口	开始录音	startRecord
 	停止录音	stopRecord
 	监听录音自动停止	onVoiceRecordEnd
 	播放语音	playVoice
 	暂停播放	pauseVoice
 	停止播放	stopVoice
 	监听语音播放完毕	onVoicePlayEnd
 	上传接口	uploadVoice
 	下载接口	downloadVoice
智能接口	识别音频	translateVoice
设备信息	获取网络状态	getNetworkType
地理位置	使用内置地图	getLocation
 	获取地理位置	openLocation
摇一摇周边	开启ibeacon	startSearchBeacons
 	关闭ibeacon	stopSearchBeacons
 	监听ibeacon	onSearchBeacons
微信扫一扫	调起微信扫一扫	scanQRCode
微信卡券	拉取使用卡券列表	chooseCard
 	批量添加卡券接口	addCard
 	查看微信卡包的卡券	openCard
长按识别	小程序圆形码	无
相关接口 3

用户分享时可获取当前<web-view/>的URL，即在onShareAppMessage回调中返回webViewUrl参数。

示例代码：

Page({
  onShareAppMessage(options) {
    console.log(options.webViewUrl)
  }
})
相关接口 4

在网页内可通过window.__wxjs_environment变量判断是否在小程序环境，建议在WeixinJSBridgeReady回调中使用，也可以使用JSSDK 1.3.2提供的getEnv接口。

示例代码：

// web-view下的页面内
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram') // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false)
} else {
  ready()
}
 
// 或者
wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram) // true
})
 
Bug & Tip

网页内iframe的域名也需要配置到域名白名单。
开发者工具上，可以在 <web-view/> 组件上通过右键 - 调试，打开 <web-view/> 组件的调试。
每个页面只能有一个<web-view/>，<web-view/>会自动铺满整个页面，并覆盖其他组件。
<web-view/>网页与小程序之间不支持除JSSDK提供的接口之外的通信。
在iOS中，若存在JSSDK接口调用无响应的情况，可在<web-view/>的src后面加个#wechat_redirect解决。
 

常见错误：

打开的域名没有在小程序管理后台设置业务域名（注意是业务域名，不是服务器域名）

打开的页面必须为https服务

打开的页面302过去的地址也必须设置过业务域名

web-view空白问题，请升级微信客户端到 6.5.16

页面可以包含iframe，但是iframe的地址必须为业务域名

web-view不支持支付能力，web-view的API能力见web-view的文档说明

开发者自己检查自己的https服务是否正常，测试方法：普通浏览器打开对应的地址

如果web-view使用了公众号授权的服务，开发者工具提示网页开发者的问题，请见：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140

 

关于web-view的问题，大家可以集中在这个帖子留言，为了保证高效查问题，请提供以下信息：

web-view的src地址

后台配置的业务域名是否设置成功

微信的版本

遇到问题的小程序APPID以及复现的微信号

出问题的错误提示信息是什么

后台设置失败问题，请提供小程序APPID以及遇到问题的时间点

转载于:https://my.oschina.net/mirclewang/blog/3061082