公司要用小程序,今天试了试微信的web-view组件,感觉还是不错的,有点像写app的感觉,微信的的确确帮前端的兄弟们做了很多良心的事,前端因为微信工作机会大大增加,地位也太高了不少,更加感动主要是工资也能涨,好多废话……
组件web-view
1.首先要提的是个人类型与海外类型的小程序暂不支持使用,好桑心
2.页面中一但有<web-view></web-view>
,页面会首先显示组件内页面(其他内容一概不显示)
3.<web-view src="https://www.baidu.com/"></web-view>
引入页面必须是https开头的,这个页面的域名必须要在微信公众平台小程序后台设置(设置 => 开发设置 => 业务域名)
这个域名配置还需要两点
a.业务域名需IPC备案
b.需下载校验文件(放在服务器根目录,文件为.txt文件)
这是我服务器的根目录
到这里准备的差不多了,还需要在你的服务器上写一个测试页面()。
小程序代码部分。
<web-view src="https://www.tource.vip/travels/list.html"></web-view>
h5代码部分。
需要引入一个js JSSDK ,有了它你才能调用微信的方法进行页面跳转。(其实还可以做很多事情,自己去看文档吧!)
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>my</title>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script src="js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div id="app" onclick="go()" style="background:blue; margin:40px auto; font-size:30px;width:190px;height:70px;line-height: 70px;color:#fff;text-align: center;">点我啊</div>
<script type="text/javascript">
function go(s) {
console.log(33)
// 该方法主要用于在小程序中已注册页面之间的跳转。
wx.miniProgram.navigateTo({url: '/pages/index/main'})
// 比如你想通过web-view跳转到tabBar页面,那么此时使用wx.navigateTo()和wx.redirectTo()都不会成功。
// wx.miniProgram.switchTab({
// url:'/pages/index/main',
// success: function(){
// console.log('success')
// },
// fail: function(){
// console.log('fail');
// },
// complete:function(){
// console.log('complete');
// }
// });
};
</script>
</body>
</html>
微信给出的跳转方法
1、wx.navigateTo
该方法主要用于在小程序中已注册页面之间的跳转。微信官方规定“为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。”其次,该方法跳转页面的时候,原来的页面还留着,可以进行返回的。就像一个栈一样。这个栈只能存储5个页面。2、wx.redirectTo()
该方法主要用于打开新的页面,用于小程序中已注册页面之间的跳转。使用该方法之后,原来的页面相当于被关闭了,打开了一个新的栈。所以我们可以把一些不需要返回的页面,用wx.redirectTo()来进行跳转。3、wx.switchTab()
这个方法是微信给出的跳转方法中,唯一能跳到tabBar注册页面的方法。比如你想通过web-view跳转到tabBar页面,那么此时使用wx.navigateTo()和wx.redirectTo()都不会成功。必须要使用wx.switchTab()。
end……