微信小程序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. C# 使用运算符重载 简化结果判断

    执行某个方法后, 一般都要对执行结果判断, 如果执行不成功, 还需要显示错误信息, 我先后使用了下面几种方式 /// <summary> /// 返回int类型结果, msg输出错误信息 ...

  2. java进阶系列之装饰器模式

    1.介绍 装饰器模式顾名思义就是装饰某个对象的,是一种结构型模式.装饰器模式允许向一个现有对象添加新的功能,同时不改变其结构,用户可以随意的扩展原有的对象.它是作为现有的类的一个包装.装饰器模式一方面 ...

  3. Swoole 理解manager进程和worker进程的启动顺序,以及演示如何停止或者重启服务端。

    测试的代码主要功能:开启一个tcp服务器.然后设置了管理进程和工作进程start的回调进行更名.设置了pid_file保存了服务端启动的mast进程. <?php //创建Server对象,监听 ...

  4. 201771010134杨其菊《面向对象程序设计(java)》第十七周学习总结

    第十七周学习总结 1. 程序是一段静态的代码,它是应用程序执行的蓝本.进程是程序的一次动态执行,它对应了从代码加载.执行至执行完毕的一个完整过程.操作系统为每个进程分配一段独立的内存空间和系统资源,包 ...

  5. 某app的安全性分析过程

    交互过程如下,可以发现问题很多 http://www.ixxxx.com//api/index/app图片验证码:{"data":{"imgCode":&quo ...

  6. Java中的4个并发工具类 CountDownLatch CyclicBarrier Semaphore Exchanger

    在 java.util.concurrent 包中提供了 4 个有用的并发工具类 CountDownLatch 允许一个或多个线程等待其他线程完成操作,课题点 Thread 类的 join() 方法 ...

  7. Python+Selenium基础篇-打开和关闭火狐浏览器

    本节介绍如何初始化一个webdriver实例对象driver,然后打开和关闭firefox浏览器.要用selenium打开fiefox浏览器.首先需要去下载一个driver插件geckodriver. ...

  8. PHP配置文件详解php.ini

    [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而php.ini的设置更改可以反映出相当的变化, ; 在使用新的PHP版本前,研究一下php.ini会有好处的 ;;;;;;;; ...

  9. IDEA导入Maven多项目(Mac下)

    主界面Import Project 选择maven项目目录文件夹 选择Import project from external model 中的maven选项,Next下一步 Sources和Docu ...

  10. Linux---设备文件名和挂载点

    分区: 1.分区: MBR   GPT 2.格式化  : 为了写入文件系统 3.设备文件名 4.什么是挂载点? 挂载点:使用已经存在的空目录作为挂载点 挂载: 必须分区: / (根分区) swap分区 ...