小程序开发 - webview

2017-11-02 20:01:22 阅读：803 作者：子龙 来源：巨推传媒 分类：小程序开发

小程序开发 - webview

最近要做一个项目需要在小程序中打开外链，小程序最近开放了web-view组件， 可在里面内嵌自己写的H5页面，也就实现了打开外链的功能，但是有几个注意点。 这里记录一下，希望将来小程序能放开更多限制。

申请业务域名

首先必须在小程序后台配置业务域名，并且是已经备案过的。

微信授权登录

当需要微信授权登录的H5页面直接通过小程序webview访问时，会报错。

解决方案：

对浏览器进行判断，如果是小程序webview（官方判断条件： window.__wxjs_environment === 'miniprogram' ）就跳过授权登录。 这样就规避了访问非授权业务域名问题。

打开网页条件

1. 小程序基础库版本要大于 1.6.4，低版本的小程序需要做兼容处理
2. 网页内容只能在 组件中显示，它会自动铺满整个小程序页面
3. 个人类型与海外类型的小程序暂不支持使用web-view组件打开网页

示例代码

<!– wxml –>
<!– 指向微信公众平台首页的web-view –>
<web-view src=”http://mp.weixin.qq.com/”></web-view>

web-view组件接口

网页中可使用JSSDK 1.3.0提供的接口返回小程序页面，支持的接口有：

接口名		说明最低版本
wx.miniProgram.navigateTo	参数与小程序接口一致	1.6.4
wx.miniProgram.navigateBack	参数与小程序接口一致	1.6.4
wx.miniProgram.switchTab	参数与小程序接口一致	即将开放
wx.miniProgram.reLaunch	参数与小程序接口一致	即将开放
wx.miniProgram.redirectTo	参数与小程序接口一致	即将开放

示例代码：

<!-- html -->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

// javascript
wx.miniProgram.navigateTo({url: '/path/to/page'})

网页中仅支持以下JSSDK接口有限，详细请参考 官网文档说明

微信开发 微信 小程序开发

上一篇：基于 Wafer 2.0 搭建自己的先进个小程序 下一篇：怎样用一天时间，开发上架一个天气小程序

更多推荐

• 
  小程序开发 定制微商城分销系统 微信分销平台不单单是为了做好网络营销，其实在面对营销的时候更多的时候离不开市场，所以这个时候应该明确的就是微信分销应该做好具体的市场营销工作。一起来看看该怎么做...

  2019-03-21 17:28:12 2668

• 
  小程序开发 微商城有多种销售方式，让你快速实现分销 一、微商城有多种销售方式，让你快速实现分销 1、微商城采用主店无数分店的模式，让企业拉动与分销商之间在订单协作、商品信息、库存管理、渠道沟通等业务环节的紧密协作...

  2019-03-21 17:27:07 2949

• 
  小程序开发 企业进行微信小程序开发的好处有哪些呢？ 目前， 微信 小程序 开发 呈现出 持续火热 的状态 ，越来越多的商家开始关注并开发自己的小程序， 但是，我们也看到，还有一部分的 商家 持观望的态度，不知道是...

  2019-03-21 17:25:57 3047

• 
  小程序开发 企业如何发挥微信小程序的作用呢？ 现在， 微信小程序 成为了企业在进行微信营销时又一个有效的方式，许多企业通过 微信小程序 开发的方式建立起微信上的营销覆盖网络，但是，有些企业在开发小程序之后，...

  2019-03-21 17:24:53 2953

• 
  小程序开发 企业进行微信小程序开发后能够赚钱吗？ 微信小程序 对于许多企业的发展是有助力作用的，因此，现在 许多公司在小程序出现已经开始申请自己的账号，一些提前开始运营 微信小程序 的公司已经取得了不错的成绩，...

  2019-03-21 17:23:46 3022