文档中心 > 店铺动态卡片-开发指引

店铺动态卡片-开发指引

local-webview

更新时间：2024/07/31 访问次数：9783

1）支持版本：仅千牛PC端 7.35.66N 及以上；

2）若需要和小程序通信，必须添加 id 属性。

一、简介

供开发者在小程序中自由使用web生态能力。

使用此能力需要将页面资源（html、css、js等）放在研发工程中，上传后会一并打入小程序包。

注意：web原生网络能力会受到限制。

二、属性

同 webview，另增加 mini 属性，添加此属性可控制webview大小。

如：

<view class="page">
  <web-view mini="true" src="https://render.alipay.com/p/s/web-view/index" onMessage="onmessage"></web-view>
</view>

三、补充说明

1.支持虚拟 URL：https://webview/...，此虚拟 URL 不必申请 白名单；

2.虚拟 URL 会重定向到小程序根目录的 webview 下；

3.使用虚拟 URL 的 <web-view> 组件会受到网络限制，可访问的地址为：

1）本地地址：域名部分为 localhost 或 127.0.0.1，可带端口号；

2）虚拟地址：https://webview/...

3）商家图片空间：https://img.alicdn.com/...

4）补充中...

四、示例代码

1. 项目模板

1）云 + 端项目：https://o3-ide.oss-cn-hangzhou.aliyuncs.com/taobao-demo/cloudapp.tar.gz

2）端项目：https://o3-ide.oss-cn-hangzhou.aliyuncs.com/taobao-demo/app.tar.gz

可使用自有的开发工具写纯前端页面，如 VS Code 配合 Chrome 调试。生成目标文件，放到小程序根目录的 webview 目录下。

目录结构示意：

<ROOT>
  ├── app.acss
  ├── app.js
  ├── app.json
  ├── pages
  │   ├── index
  │   │   ├── index.acss
  │   │   ├── index.axml
  │   │   ├── index.js
  │   │   └── index.json
  │   └── ...
  └── webview
      ├── some-page.html
      ├── another-page.html
      ├── assets
      │   ├── some-style.css
      │   └── some-script.js
      └── ...

2. 小程序引用

使用原 <web-view> 组件，配合虚拟 URL：https://webview/some-page.html，写法：

<web-view src="https://webview/some-page.html" />

3. IDE 打包

在小程序根目录配置 mini.project.json：

{
  "include": [
    "webview/**/*.js",  // glob 表达式，匹配 webview 下各类文件。必须按文件类型分别列出，第一项必须 webview/ 开头，后面的项开头都不能有 webview/
    "**/*.html",
    "**/*.css"
  ]
}

这样打包的时候，webview 下文件会被打包进来。可以根据需要自行定制包含 webview 下哪些文件，以避开一部分非必需文件。

虚拟 URL 只支持“webview”目录名称。如果您通过配置 include 列表将另一个目录 foo 打包进来，是无法通过 https://foo/... 来访问的。


如果使用了云服务 （ mini.project.json 里配置了 "cloud": { "type": "CLOUDAPP" } ）


需要在 client 目录下，再创建一个 mini.project.json：

根目录下的 mini.project.json 和 client 目录下的 cient。除了 miniprogramRoot 不同，其他字段保持一致。

五、FAQ

Q：此方案为过渡性方案还是长期方案？

A：是长期方案，请放心使用。

未来，当小程序页面以及组件解决了性能问题、开发效率问题、生态丰富度问题以后，不排除会和开发者协商改成纯小程序页面。此事目前没有时间表，也没有可预见的计划，未来即使发生，也会是一个渐进型的、平滑的过程。

Q：使用 Local WebView 存在使用量限制吗？一个页面最多使用几个 Local WebView、一个小程序里最多有几个页面可以使用 Local WebView？

A：平台不对 Local WebView 的使用做类似的限制。

有如下推荐的使用建议（不强制）：

1）尽可能使用小程序页面、小程序组件

2）一个页面一旦使用 <web-view>，推荐整页都是 <web-view>，不推荐使用局部的或者多个 <web-view>。如果业务确实需要，那么请做好视觉、交互体验，以及性能测试。

3）在需要使用原生浏览器能力的场景（如 DOM 操作），以及性能敏感的场景（如长列表），推荐使用 Local Webview。这种场景下此前通过申请白名单使用在线 WebView 的，请尽量切到 Local WebView，未来平台也会做类似引导。

Q：图片、字体等纯静态资源，需要打到包里吗？

A：如果体积不大，可以打到包里。否则请使用平台提供的云存储、图片空间，Local WebView 拦截网络时会放行此类请求。

Q：我购买了一些三方组件，但它需要连接自己服务器验证 license，如何在 Local WebView 使用？

A：请在开发期间将此类组件的名称、开发商、官网及其联网验证的完整 URL、请求字段告知平台。对于业界广泛使用的、广为人知的组件，平台可配置白名单。请尽量不要使用过于小众的组件。

Q：我使用了较多三方 JS，打包以后因包大小限制而未通过审核，怎么办？

A：请在开发期间将您使用的三方 JS 库的名称、版本、官网告知平台，平台视其通用程度考虑将它们部署到平台 CDN。

Q：Local WebView 下如何访问业务接口？

A：请通过 <web-view> 组件和小程序的通信接口，让小程序去调用 my.XXX 系列 API 访问业务接口，然后通过通信接口给到 <web-view> 中的页面。

Q：如何开发、调试？

A：Local WebView 内的内容，请通过自有开发工具开发，打包后放到小程序根目录下的 webview 下（放 dist 包，不要放源代码包）。然后小程序生成预览包或真机调试包，去千牛里打开。千牛内使用 F12 打开开发者工具可调试 Local WebView 中的页面，然后配合使用 Chrome 连接小程序调试端口可调试小程序，完成联调。

推荐在前期采用本地 server、mock 数据等方式在自有开发工具调试好 Local WebView 页面，只在最后到千牛上做简单的整合验证。

未来 IDE 会支持更友好的开发方式。

Q：对于不支持 Local WebView 版本，如何兼容？

A：需要开发者通过判断千牛版本号来判断是否支持 Local WebView，从而确定使用 Local WebView 还是在线 WebView 亦或是 my.navigateToQAP。当支持 Local WebView 的版本全量以后，我们会逐步收口此前的白名单。

Q：预览模式下，Local WebView 可否支持网络访问？

A：预览模式下，允许 web-view 组件访问本地地址，方便页面调试。

FAQ

关于此文档暂时还没有FAQ
有用(0) 我要提问
返回
顶部
阿里巴巴集团 | 淘宝网 | 天猫 | 聚划算 | 全球速卖通 | 阿里巴巴国际交易市场 | 1688 | 阿里妈妈 | 阿里旅行·去啊 | 阿里云计算 | YunOS | 阿里通信 | 万网 | 高德 | 优视 | 友盟 | 酷盘 | 虾米 | 天天动听 | 来往 | 钉钉 | 11Main | 支付宝
关于淘宝 合作伙伴 营销中心 联系客服 开放平台 诚征英才 联系我们 网站地图 法律声明 © 2016 Taobao.com 版权所有
网络文化经营许可证：文网文[2010]040号 | 增值电信业务经营许可证：浙B2-20080224-1 | 信息网络传播视听节目许可证：1109364号