官方有句提醒:个人类型与海外类型的小程序暂不支持使用

测试条件:

1.小程序后台管理中,进入“开发设置”,设置一个业务域名(注意:不是设置服务器域名)。比如 https://test.XXX.com.cn

2.配置业务域名时,会有如下提醒。按照提醒,将下载得到的校验文件,放到业务域名的根目录下,并确保可以访问到这个文件。

3.将做测试的 html 也提交到业务域名下的服务器。我写的测试代码如下:

<div>
<h3>这是网页</h3>
<button id="btn1">跳转到小程序的首页</button>
<button id="btn2">点击发送数据</button>
<p>点击第二个按钮后,然后点击小程序的回退箭头,可以获取到来自网页的数据</p>
</div>
  window.onload = function() {
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
btn1.onclick = function() {
wx.miniProgram.navigateTo({url: '/pages/index/index'})
}
btn2.onclick = function() {
wx.miniProgram.postMessage({ data: '来自网页的数据' })
}
}

4.开发者工具,打开本地测试的小程序。(注意:第一步中提到的小程序,使用它的AppId登录)

编写小程序测试代码,我写的代码如下:

index.wxml中,

<navigator class="link" url="/pages/logs/logs?path=https://test.XXX.com.cn/webViewTest.html">跳转到网页</navigator>

logs.wxml中,

<web-view src="{{path}}" bindmessage="getMsgHandle"></web-view>

logs.js中

Page({
data: {
show: true,
path: ''
},
onLoad: function () {
var that = this;
that.setData({
path: that.options.path
})
},
getMsgHandle: function(e) {
var that = this;
wx.showToast({
title: e.detail.data[0],
icon: 'success',
duration: 5000
})
console.log(e.detail.data)
}
})

我的测试思路:index.wxml中,点击一个链接,跳转到网页。实际实现是,点击index.wxml中的链接,跳转到logs.wxml,用logs.wxml,呈现要跳转的网页内容。

注意:测试的话,直接在开发者工具中测试,或者扫码测试即可,不用将小程序上传。

最终测试结果:点击小程序内的按钮,跳转到了显示网页的页面,点击网页中的按钮,还能回到小程序的页面。

经过研究,个人认为,小程序和网页的跳转,并不是真正意义上的跳转,实际上还是小程序中的页面1跳转到页面2,而页面2包裹的内容是网页而已。

如果,直接通过网页地址访问目标网页,点击目标网页中的按钮,是返回不了小程序的。

以上为个人测试得知,如有错误,请指正。谢谢!

测试web-view,实现小程序和网页之间的切换的更多相关文章

  1. 学不动了!微信官方推出 Web 前端和小程序统一框架 Kbone

    听说最近微信官方推出了一个统一 Web 前端和小程序的框架 -- Kbone ,特意去看了下... 为什么微信要搞Kbone? 微信小程序的底层模型和 Web 端不同,开发者无法直接把 Web 端的代 ...

  2. 分享一份软件测试项目实战(web+app+h5+小程序)

    大家好,我是谭叔. 本次,谭叔再度出马,给大家找了一个非常适合练手的软件测试项目,此项目涵盖web端.app端.h5端.小程序端,可以说非常之全面. 缘起 在这之前,谭叔已经推出了九套实战教程. 但是 ...

  3. web页面和小程序页面实现瀑布流效果

    小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1).加载图片,获取图片的宽高度: 2).根据页面需要显示几列计算每列的宽度: 3).根据图片真实宽度和每列的宽度比,计算出图片需要显示的 ...

  4. web api对接小程序基本签名认证

    using BMOA.Application.System; using BMOA.Common; using BMOA.Web.Models; using Newtonsoft.Json; usin ...

  5. 解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

    解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时,图表显示错乱 <canvas class="kcanvas" canvas-id=" ...

  6. 微信小程序开发--页面之间的跳转

    一.navigator--完成页面之间的跳转 1.新建一个页面文件夹 2.在app.json文件中引入页面 "pages": [ "pages/index/index&q ...

  7. 微信小程序之页面之间传递值

    页面之间传值有三种方式 1.url传值 2.本地存储传值 3.全局变量传值 1.url传值: 通过url传值的需要通过option来获取参数值. 更多详情可以访问小程序-navigateTo章节. A ...

  8. 微信小程序关于tabbar点击切换数据不刷新问题

    微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更 ...

  9. 小程序组件-swipe多页切换,并支持下拉刷新,上拉加载,menu动态联动切换

    前言 最近一个小程序项目中遇到一个需求,就是实现类似资讯类app的多页面切换的那种效果, 如下图: 最终效果: 1.功能分析 首先实现这个功能分为三步: 实现顶部menu菜单 实现多页面滑动切换 支持 ...

随机推荐

  1. phpstudy2016-2018漏洞验证

    影响版本 漏洞验证 查看目录下 php_xmlrpc.dll PHPTutorial\php\php-5.4.45\ext\php_xmlrpc.dll存在@eval(%s('%s'));即说明有后门 ...

  2. 二:Redis:(REmote DIctionary Server)远程字典服务器

    Redis是完全开源免费的,用C语言编写的,遵循BSD协议,是一个高性能的(key-value)分布式内存数据库,基于内存运行,并支持持久化的NOSQL数据库,是当前最热门的NOSQL数据库之一,也被 ...

  3. 使用spring框架进行aop编程实现方法调用前日志输出

    aop编程 之使用spring框架实现方法调用前日志输出 使用spring框架实现AOP编程首先需要搭建spring框架环境: 使用Spring框架实现AOP工程编程之后,不需要我们去写代理工厂了,工 ...

  4. MFC详解

    MFC的消息响应机制详解: 1.MFC是Windows下程序设计的最流行的一个类库,但是该类库比较庞杂,尤其是它的消息映射机制,更是涉及到很多低层的东西,接下来详细讲解. 2.在讲解MFC的消息响应之 ...

  5. Python 自定义模块位置

    1.需要找出Python解释器从哪里查找模块: 具体方法: >>> import sys,pprint>>> pprint.pprint(sys.path)['', ...

  6. [java基础]复习 java三大特性,异常,接口,String

    继承 关键字extends 继承是为了不同的实现(龙生九子,各不相同) 单继承,一个类最多只能有一个父类 除了私有的外,子类可以访问父类的方法.属性. new过程中,父类先进行初始化,可通过super ...

  7. iOS中跑马灯效果小结

    时光过得好快,记忆中刚刚从春节返回没有多久,清明.五一已飞逝而过,眨眼已到盛夏季节.不过还好,济南这两年不算太热,刚开始升温几天,一场及时雨总能让温度保持适宜.为了纪念一下青春的尾巴,也为了能有个健康 ...

  8. 网络篇:朋友面试之TCP/IP,回去等通知吧

    前言 最近和一同学聊天,他想换工作,然后去面了一家大厂.当时,他在简历上写着精通TCP/IP,本着对TCP协议稍有了解,面试官也不会深问的想法,就写了精通二字.没想到,大意了 关注公众号,一起交流,微 ...

  9. wsgi_uwsgi_nginx

    1.一些重要概念 https://www.cnblogs.com/xiaonq/p/8932266.html 1.1 web容器 什么是web容器 1.web容器是帮助我们部署java.php.pyt ...

  10. 冲刺随笔——Day_Two

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...