小程序 web-view

https://opendocs.alipay.com/mini/component/web-view

https://opendocs.alipay.com/mini/api/webview-context

https://opensupport.alipay.com/support/knowledge/46919/201602349122?ant_source=zsearch


https://opensupport.alipay.com/support/helpcenter/190

https://opendocs.alipay.com/search?keyword=web view&pageIndex=1&pageSize=10&type=qa


webview

  1. Open H5 url

  1. if (replace) {
  2. Taro.redirectTo({
  3. url,
  4. })
  5. } else {
  6. Taro.navigateTo({
  7. url,
  8. })
  9. }
  1. web-view component with H5 url ??? auto render bug

open iframe page (taro router) ???


  1. // import Taro, { Component } from '@tarojs/taro'
  2. import Taro, { Component, Config } from '@tarojs/taro'
  3. import {
  4. View,
  5. Text,
  6. WebView,
  7. } from '@tarojs/components'
  8. import './index.scss'
  9. // import classNames from 'classnames'
  10. // import PropTypes, { InferProps } from 'prop-types'
  11. const log = console.log;
  12. export default class IframeComponent extends Component {
  13. config = {
  14. navigationBarTitleText: '购买须知'
  15. }
  16. constructor (props) {
  17. super(props)
  18. const {
  19. url,
  20. } = props
  21. this.state = {
  22. link: url || ``,
  23. };
  24. }
  25. componentWillReceiveProps(nextProps) {
  26. const {
  27. url,
  28. } = nextProps;
  29. if (url !== this.state.link) {
  30. this.setState({
  31. link: url || ``,
  32. })
  33. }
  34. }
  35. componentWillMount () { }
  36. componentDidMount () { }
  37. componentWillUnmount () { }
  38. componentDidShow () { }
  39. componentDidHide () { }
  40. stopDefaultEvent = (e) => {
  41. e.preventDefault();
  42. e.stopPropagation();
  43. return;
  44. }
  45. render () {
  46. // const {
  47. // link,
  48. // } = this.state;
  49. const {
  50. url,
  51. } = this.props;
  52. return (<WebView className='iframe-container' src={link} onMessage={this.stopDefaultEvent} />);
  53. // const {
  54. // url,
  55. // } = this.props;
  56. // return (<WebView className='iframe-container' src={url} onMessage={this.stopDefaultEvent} />);
  57. }
  58. }
  59. IframeComponent.defaultProps = {
  60. url: '',
  61. }


xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


小程序 web-view的更多相关文章

  1. 一套代码小程序&Web&Native运行的探索05——snabbdom

    接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...

  2. 一套代码小程序&Web&Native运行的探索04——数据更新

    接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  3. 一套代码小程序&Web&Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  4. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  5. 一套代码小程序&Web&Native运行的探索06——组件系统

    接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...

  6. 一套代码小程序&Web&Native运行的探索03——处理模板及属性

    接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  7. 一套代码小程序&Web&Native运行的探索07——mpvue简单调研

    前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...

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

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

  9. 小程序web开发框架-weweb介绍

    weweb是一个兼容小程序语法的前端框架,你可以用小程序的写法,来写web单面应用.如果你已经有小程序了,通过它你可以将你的小程序运行在浏览器中.在小程序大行其道的今天,它可以让你的小程序代码得到最大 ...

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

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

随机推荐

  1. git commit前检测husky与pre-commit 提交钩子

    git commit前检测husky与pre-commit git commit前检测husky与pre-commit - 简书 https://www.jianshu.com/p/f0d31f92b ...

  2. gitignore 不起作用的解决办法 不再跟踪 让.gitignore生效,跟踪希望被跟踪的文件

    实践 # https://git-scm.com/docs/gitignore https://git-scm.com/docs/gitignore 不跟踪log目录下的所有文件,但需要保留这个文件夹 ...

  3. Jmeter(三十七) - 从入门到精通进阶篇 - 输出HTML格式的性能测试报告(详解教程)

    1.简介 相对于Loadrunner,Jmeter其实也是可以有测试报告产出的,虽然一般都不用(没有Loadrunner的报告那么强大是一方面),但是有小伙伴们私下问,那宏哥还是顺手写一下吧,今天我们 ...

  4. CSS定位走一波(定位学习续)

    又是新的一周过去了,时间到了,春天绿了,关于HTML5的学习进步了,今天博客更新一些CSS定位的内容,小的一些细节也要牢记,方便做一个更完美的项目. 如何让垂直方向居中,解决方式:在父元素添加over ...

  5. SpringBoot-Maven打包压缩瘦身

    SpringBoot-Maven打包压缩瘦身 一.Spring Boot 可执行 jar 分析 1.1 打包 1.2 两种 jar 的比较 1.3 一次打包两个 jar 二.SpringBoot迭代发 ...

  6. Java——break,continue,return语句

    break语句: break:用于改变程序控制流 用于do-while.while.for中时,可跳出循环而执行循环后面的语句. break的作用:终止当前循环语句的执行. break还可以用来终止s ...

  7. java架构《并发线程基础一》

    1.实现线程常见的两种的方式 : 1:继承extends Thread 2:实现new Runnable 实现其run方法 2.线程安全    结论: 当多个线程访问某一个类(对象或方法)时,这个对象 ...

  8. HashMap 和 Hashtable两者的区别以和解释

    HashMap 和 Hashtable 是 Java 开发程序员必须要掌握的,也是在各种 Java 面试场合中必须会问到的. 但你对这两者的区别了解有多少呢? 现在,栈长我给大家总结一下,或许有你不明 ...

  9. Hbase Java API包括协处理器统计行数

    package com.zy; import java.io.IOException; import org.apache.commons.lang.time.StopWatch; import or ...

  10. POJ - 3693 Maximum repetition substring(重复次数最多的连续重复子串)

    传送门:POJ - 3693   题意:给你一个字符串,求重复次数最多的连续重复子串,如果有一样的,取字典序小的字符串. 题解: 比较容易理解的部分就是枚举长度为L,然后看长度为L的字符串最多连续出现 ...