微信小程序:新组件web-view(2017.11.02新增)

移动开发 简书

使用前需要注意的点

一开始听到微信小程序除 组件的时候,都以为可以跳转任何网页,但其实还是有很多限制的,在别人提出在小程序中跳转网页的需求时,需要特别注意下面几点:

  • 需要在小程序管理页面 设置-开发设置 里添加要跳转网页的域名为
    业务域名
  • 跳转域名需要支持 HTTPS
  • 添加跳转域名时,需要下载 校验文件 放到域名根目录下 ,并保证可以访问该文件。(所以不要以为想跳什么网站就跳什么网站,这个是需要对应域名服务器做配合的)

    业务域名列表

配置业务域名

使用

使用是很简单的,但是有时候开发工具里显示不出来,可以试试真机测试。



这样就行了,不用做其他事情。

页面跳转

例如网页里一个按钮点击后跳转到微信小程序 /pages/test/test 页面:




    
        
        
            .my_div {
                margin:0 auto;
                width:200px;
                height:200px;
                background:#aaa;
            }
        
    
    
        
function goto(){ wx.miniProgram.navigateTo({url: '/pages/test/test'}) }

这个是我用 vue 和相关框架弄的一个简单页面,表现还是不错的:

demo

相关接口

相关接口1

支持

  • 基础库 1.6.4 开始支持

参考

web-view官方文档

官方论坛

[web-view]问题汇总

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » 微信小程序:新组件web-view(2017.11.02新增)

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录