web-view和wx.navigateback
web-view
我们先来了解一下官方的东西
web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | none | webview 指向网页的链接。需登录小程序管理后台配置域名白名单。 |
示例代码:
<!-- wxml -->
<!-- 指向微信公众平台首页的web-view -->
<web-view src="https://mp.weixin.qq.com/"></web-view>
相关接口 1
<web-view/>网页中可使用JSSDK 1.3.0提供的接口返回小程序页面。 支持的接口有:
| 接口名 | 说明 | 最低版本 |
|---|---|---|
| wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
| wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
| wx.miniProgram.switchTab | 参数与小程序接口一致 | 即将开放 |
| wx.miniProgram.reLaunch | 参数与小程序接口一致 | 即将开放 |
| wx.miniProgram.redirectTo | 参数与小程序接口一致 | 即将开放 |
示例代码:
<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})
相关接口 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变量判断是否在小程序环境。
示例代码:
// web-view下的页面内
console.log(window.__wxjs_environment === 'miniprogram') // true
大概就给了这么多
wx.miniProgram.navigateBack 这个参数让你返回上一个页面。 但是具体能不能调用回调函数还是有待验证的
其它文章
web-view和wx.navigateback的更多相关文章
- wx.navigateBack(OBJECT)怎么携带参数呢?
wx.navigateBack(OBJECT) 关闭当前页面,返回上一页面或多级页面.可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层. OBJECT 参数说明: 参数 ...
- 微信小程序:wx.navigateBack页面返回传参
场景(比如:商城选地址,选优惠券): 在[页面A]中调用wx.navigateTo方法跳转到[页面B] 然后从[页面B]返回[页面A], 并将[页面B]中的一些数据传回[页面A] wx.navigat ...
- 小程序中navigator和wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab,wx.navigateBack的用法
如果用一句话来表明navigator和API中wx.系列的跳转有什么区别,那就是navigator是在wxml中用标签添加open-type属性来达到和wx.系列一样的效果. navigator的属性 ...
- 3-4 1449 web view
1.app类型 不同类型的应用 区别 native app 纯原声app,Android用Java些,iOS用object c写 hybrid app 套用原声应用的外壳,既有原生的UI页面,又通过内 ...
- Appium——unknown error: cannot activate web view
测试步骤: 1. 打开必应APP(如果出现欢迎界面和定位服务弹窗,需要点掉) 2. 点击搜索按钮 3. 输入JAVA到搜索框 4. 点击搜索网页 5. 观察显示搜索出来的结果是否含有java 6. ...
- 微信小程序从子页面退回父页面时的数据传递 wx.navigateBack()
我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // ...
- wx.navigateTo、wx.redirectTo、wx.reLaunch、wx.switchTab和wx.navigateBack的区别
wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab和wx.navigateBack有什么区别呢? **wx.navigateTo:** 用于保留当 ...
- 【微信小程序】wx.navigateBack() 携带参数返回
第一个页面: go_pick_time:function(e){ var that = this; var type = e.currentTarget.dataset.type; wx.naviga ...
- 微信小程序跳转问题:wx.redirectTo、wx.navigateTo、wx.reLaunch、wx.switchTap、wx.navigateBack区别
wx.redirectTo:关闭当前页,跳转到指定页: wx.navigateTo:保留当前页,跳转到指定页: wx.reLaunch:关闭所有页面,打开到应用内的某个页面. wx.switchTap ...
随机推荐
- iOS --提取本地<通讯录>数据 <1>
#pragma mark - 获取手机所有联系人 - (void)obtainPhoneAllContact { //这个变量用于记录授权是否成功,即用户是否允许我们访问通讯录 ; //声明一个通讯簿 ...
- Java语言如何进行异常处理,关键字:throws、throw、try、catch、finally分别如何使用?
先上代码再进行分析 public class Test { public static void main(String[] args) { try{ int i = 100 / 0; System. ...
- php 代码的执行
PHP内核的实现和世界上绝大数的程序一样,接收输入数据,做相应处理后输出结果.用PHP编写的代码就是输入数据,PHP内核对编写的代码进行解释和运算,最后返回运算结果.当编写的PHP代码给内核去执行的时 ...
- 深入PHP内核 SAPI探究
转自 http://www.csdn.net/article/2014-09-26/2821885-exploring-of-the-php-2 SAPI是Server Application Pro ...
- python中json操作
1.写操作.json文件dumps().dump()函数 d = { 'zll': { 'addr': '北京', 'age': 28 }, 'ljj': { 'addr': '北京', 'age': ...
- activity通过流程实例id动态获取流程图并展示在jsp页面上
提供的Service方法如下: Java /** * 获取当前任务流程图 * * @param processInstanceId * @return */ @Override public Inpu ...
- 【BZOJ4825】[Hnoi2017]单旋 线段树+set
[BZOJ4825][Hnoi2017]单旋 Description H 国是一个热爱写代码的国家,那里的人们很小去学校学习写各种各样的数据结构.伸展树(splay)是一种数据结构,因为代码好写,功能 ...
- javaScript Number对象
Number 对象 Number 对象是原始数值的包装对象. 创建 Number 对象的语法: var myNum=new Number(value); var myNum=Number(value) ...
- mock数据(模拟后台数据)
mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...
- 解决IE,z-index失效
在影响显示顺序的模块加上: style="position:relative;z-index:-1;" 解决IE,z-index失效