微信小程序web-view实例

index.js

//index.js
//获取应用实例
const app = getApp() Page({ /**
* 页面的初始数据
*/
data: { },
goBaidu: function(e) {
wx.navigateTo({
url: '../out/out',
success: function(e) {
console.log(e);
},
fail: function(err) {
console.log(err);
}
})
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) { }, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() { }, /**
* 生命周期函数--监听页面显示
*/
onShow: function() { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function() { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function() { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function() { }
})

index.wxml

<!--index.wxml-->
<view class='wrapper'>
<button class='wepay' bindtap='goBaidu'>点击跳转</button>
</view>

out.wxml

<web-view src="https://www.baidu.com/"></web-view>

达叔小生:往后余生,唯独有你

You and me, we are family !

90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通

简书博客: 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞

微信小程序web-view实例的更多相关文章

  1. 第六章 “我要点爆”微信小程序云开发实例之爆文详情页制作

    爆文详情页制作 从首页中数据列表打开相应详情页面的方法: 给数据列表中每个数据项加一个点击事件,同时将当前数据项的id暂时记录在本地,然后跳转到详情页面detail goopen: function ...

  2. 原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能

    1.效果图: 2.页面仅仅利用了JS的相关功能,包含:wxml.js.wxss 2.1wxml页面代码: <text>绑定手机</text> <form bindsubm ...

  3. 微信小程序背景音乐官方实例代码无效问题解决及音乐src获取方法

    最近在学习微信小程序时遇到了个问题:官方的背景音乐的api实例代码中的音乐src不管用(可能有期限,后面的方法获取的src同样可能有期限),因此本人只能自己去寻找办法获取src,现将方法记录在下面.( ...

  4. “我要点爆”微信小程序云开发实例

    使用云开发进行微信小程序“我要点爆”的制作 下一章:“我要点爆”微信小程序云开发之项目建立与我的页面功能实现 接下来我将对“我要点爆”微信小程序进行完整的开源介绍 小程序名称: 我要点爆 查看方式:从 ...

  5. 微信小程序request请求实例,网络请求。

    最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参 ...

  6. 第五章 “我要点爆”微信小程序云开发实例之从云端获取数据制作首页

    下面我们来实现从云端获取数据,完成首页世界页面index的制作,首页分为4个数据列表导航页面,页面具体内容如下: 推荐:为用户推荐最新的点爆信息,它包含文本点爆内容和语音点爆内容. 文爆:筛选出文字点 ...

  7. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  8. 关于微信小程序获取view的动态高度填坑

    wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width heig ...

  9. 【微信小程序】view顶部固定或底部固定 + scroll-view中的元素view也可以使用position:fixed;固定选中元素位置

    1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;&q ...

  10. 微信小程序将view动态填满全屏

    一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ ...

随机推荐

  1. centos7+mariadb+防火墙,允许远程

    centos7 已安装mariadb,想要允许数据库远程==数据库权限允许+系统允许 mariadb:允许数据库用户在所有ip使用某个用户远程 GRANT ALL PRIVILEGES ON *(数据 ...

  2. Mysql数据库性能优化(一)

    参考 http://www.jb51.net/article/82254.htm 今天,数据库的操作越来越成为整个应用的性能瓶颈了,这点对于Web应用尤其明显.关于数据库的性能,这并不只是DBA才需要 ...

  3. Windows10开机pin界面循环重启解决办法

    昨天电脑在开机时,进入pin界面,输入pin码之后系统没反应,也不显示登陆成功,大概一分钟之后自动重启,遂百度答案:大部分建议都是在开机显示win图标时强制关机,强制关机两次即自动进入疑难解答页面,以 ...

  4. 数据库镜像转移Failover Partner

    数据库主体镜像转换:任务 - 镜像 - 故障转移 sqlserver2008 数据库镜像服务配置完成后,大家会发现我们有了两个数据库服务,这两个服务可以实现自动故障转移,那么我们的程序如何实现自动连接 ...

  5. javascript和c#aes加密方法互解

    关键信息如下. javascript function Encrypt() { var key = CryptoJS.enc.Utf8.parse('8080808080808080'); var i ...

  6. 图数据库-Neo4j使用

    Cypher 查询语言简单使用 3.1.基本语法 Node语法: Cypher使用一对圆括号来表示一个节点:提供了多种格式如下: () 匿名节点 (matrix)  为节点添加一个ID (:Movie ...

  7. 第47章:MongoDB-用户管理

    ①用户管理 在MongoDB里面默认情况下只要是进行连接都可以不使用用户名与密码,因为要想让其起作用,则必须具备以下两个条件: ·条件一:服务器启动的时候打开授权认证: ·条件二:需要配置用户名和密码 ...

  8. 关于PHP读取HTTP头的部分

    本文转载自https://my.oschina.net/luoczi/blog/86608 1.关于PHP读取HTTP头的方法 $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 ...

  9. Rabbimq 安装过程,还有踩得坑!centos 安装

    一 .安装erlang 1 添加yum 源,在/etc/yum.repos.d 下添加 rabbitmq-erlang.repo,内容如下 # In /etc/yum.repos.d/rabbitmq ...

  10. Docker优势以及与传统虚拟机对比(1)

    docker优势 1.更快速地交付和部署: 2.更高的虚拟化(不需要额外的hypervisor支持,是内核级的虚拟化,实现更高的性能呢和效率): 3.更轻松的迁移和扩展: 4.更简单的管理  与传统的 ...