关于微信小程序webview的使用 £神魔★判官ぃ 2021-06-24 15:58 603阅读 0赞 [http://www.wxapp-union.com/article-3362-1.html][http_www.wxapp-union.com_article-3362-1.html] <table style="word-wrap:break-word; margin:0px; padding:0px; empty-cells:show; border-collapse:collapse; border:0px; border-spacing:0px; table-layout:fixed; width:730px; height:300px; color:rgb(102,102,102); font-family:"Microsoft Yahei",Simsun; font-size:14px"> <tbody style="word-wrap:break-word; margin:0px; padding:0px"> <tr style="word-wrap:break-word; margin:0px; padding:0px; border:0px"> <td style="word-wrap:break-word; margin:0px; padding:0px; border:0px; vertical-align:top"> <h1 style="word-wrap:break-word; margin:0px; padding:0px; font-size:2.25em; border:0px; font-weight:normal"> <a href="http://www.wxapp-union.com/" style="word-wrap:break-word; margin:0px; padding:0px; border-bottom:1px solid blue; text-decoration:none!important; color:rgb(54,54,54)!important" rel="nofollow">小程序</a></h1> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了,本文主要还是体验了下<code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>的功能。</p> <h2 style="word-wrap:break-word; margin:0px; padding:0px; font-size:1em; border:0px; font-weight:normal"> web-view详解</h2> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 有了这个组件之后,小程序可以很好的嵌入一些页面,可以环境小程序<code style="word-wrap:break-word; margin:0px; padding:0px">size</code>告急的问题,同样也使开发更加便捷,毕竟小程序开发者基本都对前端开发较为了解。</p> <h3 style="word-wrap:break-word; margin:0px; padding:0px; font-size:1em; border:0px; font-weight:normal"> web-view能力</h3> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 说再多还是需要去看官方文档,<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/web-view.html" style="word-wrap:break-word; margin:0px; padding:0px 0px 1px; text-decoration:none; color:rgb(0,154,97); background:transparent; outline:0px" rel="nofollow">web-view文档</a>,</p> <h4 style="word-wrap:break-word; margin:0px; padding:0px; font-size:1em; border:0px; font-weight:normal"> 兼容</h4> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 首先就需要注意:兼容问题,<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/framework/client-lib.html" style="word-wrap:break-word; margin:0px; padding:0px 0px 1px; text-decoration:none; color:rgb(0,154,97); background:transparent; outline:0px" rel="nofollow">版本库和对应版本比例</a></p> <blockquote style="word-wrap:break-word; margin:1.5em 0px; padding:10px 20px; border-left:2px solid rgb(0,154,97); background:rgb(246,246,246); color:rgb(85,85,85)"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px"> 基础库 1.6.4 开始支持,低版本需做兼容处理,<br style="word-wrap:break-word; margin:0px; padding:0px"> 个人类型与海外类型的小程序暂不支持使用。</p> </blockquote> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 目前而言,基本<code style="word-wrap:break-word; margin:0px; padding:0px">80%</code>的用户会升级微信,所以其实不必担心版本问题,官方截止<code style="word-wrap:break-word; margin:0px; padding:0px">2017-12-01</code>提供的数据也说明<code style="word-wrap:break-word; margin:0px; padding:0px">88%</code>的用户支持<code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>。</p> <h4 style="word-wrap:break-word; margin:0px; padding:0px; font-size:1em; border:0px; font-weight:normal"> 使用</h4> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> <code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code> 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面;</p> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 属性:<code style="word-wrap:break-word; margin:0px; padding:0px">src</code> 是<code style="word-wrap:break-word; margin:0px; padding:0px">String</code>类型,是一个网站的<code style="word-wrap:break-word; margin:0px; padding:0px">url</code>,默认值是<code style="word-wrap:break-word; margin:0px; padding:0px">none</code>,<code style="word-wrap:break-word; margin:0px; padding:0px">webview</code> 指向网页的链接。需登录小程序管理后台配置域名白名单。</p> <pre style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding:0px; overflow:auto"><code style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)"></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)"></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">web-view</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">src</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"https://mp.weixin.qq.com/"</span>></span><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">web-view</span>></code></pre> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 可以配合<code style="word-wrap:break-word; margin:0px; padding:0px">Page</code>实例的<code style="word-wrap:break-word; margin:0px; padding:0px">onLoad</code>方法来获取<code style="word-wrap:break-word; margin:0px; padding:0px">url</code>的具体值,也就是一个微信小程序页面中只有一个<code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>,但是这个<code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>的内容可以根据上一个页面传递的参数来获取页面<code style="word-wrap:break-word; margin:0px; padding:0px">URL</code>,后面会讲如何实践,</p> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 官方提供如下接口:</p> <ul style="word-wrap:break-word; margin:1.5em 0px 1.5em 3em; padding:0px; border:0px; color:rgb(51,51,51)"> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px; list-style:disc"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px"> <code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>和小程序的通信</p> <pre style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding:0px; overflow:auto"><code style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">1</span>. 由小程序到`web-view`,其实本质上`WEB-VIEW`也是小程序的一个页面,所以小程序到`web-view`是正常的小程序间的通信,通过`wx.navigateTo`、`wx.redirectTo`,带上`url`参数,`query`参数就像正常`url`的参数一样跟着后面,然后在`web-view`的页面的`Page`实例里面通过`onLoad`的方法的参数来获取`url`的值,设置给`web-view`的`src`属性为改值即可。 <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">2</span>. 由`web-view`到小程序,由于在`web-view`的跳转通常是在`src`对应的网页中的操作来处理的,所以需要结合`jssdk`来处理,不需要`wx.config`配置,直接通过`script`标签来引入`https://res.wx.qq.com/open/js/jweixin-<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">1.3</span>.<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">0</span>.js`,就可以使用`wx.miniProgram.navigateTo`、`wx.miniProgram.navigateBack`、`wx.miniProgram.switchTab`、`wx.miniProgram.reLaunch`、`wx.miniProgram.redirectTo`接口,就像小程序之间的跳转一样,单是只能在当前小程序页面内跳转。</code></pre> </li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px; list-style:disc"> 支持以下部分JSSDK接口图像、音频、摇一摇、地理位置等信息,具体可以查看<a href="https://mp.weixin.qq.com/debug/wxadoc/dev/component/web-view.html" style="word-wrap:break-word; margin:0px; padding:0px 0px 1px; text-decoration:none; color:rgb(0,154,97); background:transparent; outline:0px" rel="nofollow">web-view文档</a>,不过这些需要通过<code style="word-wrap:break-word; margin:0px; padding:0px">wx.config</code>来授权,就和服务号开发类似。</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px; list-style:disc"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px"> 用户分享时可获取当前<code style="word-wrap:break-word; margin:0px; padding:0px"></code>的<code style="word-wrap:break-word; margin:0px; padding:0px">URL</code>,即在<code style="word-wrap:break-word; margin:0px; padding:0px">onShareAppMessage</code>回调中返回webViewUrl参数。</p> <pre style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding:0px; overflow:auto"><code style="word-wrap:break-word; margin:0px; padding:0px">Page({ onShareAppMessage(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">options</span>) { console.log(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">options</span>.webViewUrl) } })</code></pre> </li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px; list-style:disc"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px"> 在网页内可通过window.__wxjs_environment变量判断是否在小程序环境。</p> <pre><code><code style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)">// web-view下的页面内</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,134,179)">console</span>.log(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,134,179)">window</span>.__wxjs_environment === <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'miniprogram'</span>) <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)">// true</span></code></code></pre> </li> </ul> <h3 style="word-wrap:break-word; margin:0px; padding:0px; font-size:1em; border:0px; font-weight:normal"> web-view实践</h3> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 在目前实践了部分<code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>的功能,</p> <pre><code><code style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)">//index.js</span> Page({ <span style="word-wrap:break-word; margin:0px; padding:0px">data</span>: { <span style="word-wrap:break-word; margin:0px; padding:0px">url</span>: <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'https://test.com'</span> }, <span style="word-wrap:break-word; margin:0px; padding:0px">onLoad</span>: <span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">function</span>(<span style="word-wrap:break-word; margin:0px; padding:0px">options</span>)</span>{ options.url ? <span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">this</span>.setData({ <span style="word-wrap:break-word; margin:0px; padding:0px">url</span>: options.url}) : wx.navigateBack({ <span style="word-wrap:break-word; margin:0px; padding:0px">delta</span>: <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">2</span>}); } }); <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)">//index.wxml</span> "{ {url}}"><span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">web-view</span>></span></code></code></pre> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 在这个<code style="word-wrap:break-word; margin:0px; padding:0px">web-view</code>中,指向的就是<code style="word-wrap:break-word; margin:0px; padding:0px">https://test.com</code>的内容,所以在在<code style="word-wrap:break-word; margin:0px; padding:0px">https://test.com</code>中跳转出回到小程序,需要修改<code style="word-wrap:break-word; margin:0px; padding:0px">https://test.com</code>中的<code style="word-wrap:break-word; margin:0px; padding:0px">JavaScript</code>,</p> <pre style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding:0px; overflow:auto"><code style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,153); font-weight:bold"></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">html</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">lang</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"en"</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">head</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">meta</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">charset</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"UTF-8"</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">meta</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">name</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"viewport"</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">content</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"width=device-width, initial-scale=1.0"</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">meta</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">http-equiv</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"X-UA-Compatible"</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">content</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"ie=edge"</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">title</span>></span>test<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">title</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">link</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">rel</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"stylesheet"</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">href</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"https://test.com/index.css"</span> /></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">head</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">body</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">div</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">class</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"app"</span>></span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">h1</span>></span>webview-wechat-detail<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">h1</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">p</span>></span> detail <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">p</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">button</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">type</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"button"</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">id</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"btn"</span>></span>返回小程序<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">button</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">div</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">script</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">src</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"https://test.com/jquery.js"</span>></span><span style="word-wrap:break-word; margin:0px; padding:0px"></span><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">script</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">script</span> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,128,128)">src</span>=<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">"https://res.wx.qq.com/open/js/jweixin-1.3.0.js"</span>></span><span style="word-wrap:break-word; margin:0px; padding:0px"></span><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">script</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)"><<span style="word-wrap:break-word; margin:0px; padding:0px">script</span>></span><span style="word-wrap:break-word; margin:0px; padding:0px"> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(153,153,136)">/* eslint-disable */</span> $(<span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">function</span>(<span style="word-wrap:break-word; margin:0px; padding:0px"></span>)</span>{ doucument.cookie = <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'bb=bbbbbb'</span>; $(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'#btn'</span>).on(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'click'</span>,<span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">function</span>(<span style="word-wrap:break-word; margin:0px; padding:0px">s</span>) </span>{ <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,134,179)">document</span>.cookie = <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'aa=ssssss'</span>; wx.miniProgram.navigateTo({ <span style="word-wrap:break-word; margin:0px; padding:0px">url</span>:<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'/pages/index?test=testtest'</span>, <span style="word-wrap:break-word; margin:0px; padding:0px">success</span>: <span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">function</span>(<span style="word-wrap:break-word; margin:0px; padding:0px"></span>)</span>{ <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,134,179)">console</span>.log(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'success'</span>) }, <span style="word-wrap:break-word; margin:0px; padding:0px">fail</span>: <span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">function</span>(<span style="word-wrap:break-word; margin:0px; padding:0px"></span>)</span>{ <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,134,179)">console</span>.log(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'fail'</span>); }, <span style="word-wrap:break-word; margin:0px; padding:0px">complete</span>:<span style="word-wrap:break-word; margin:0px; padding:0px"><span style="word-wrap:break-word; margin:0px; padding:0px; font-weight:bold">function</span>(<span style="word-wrap:break-word; margin:0px; padding:0px"></span>)</span>{ <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,134,179)">console</span>.log(<span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(221,17,68)">'complete'</span>); } }); }); }); </span><span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">script</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">body</span>> <span style="word-wrap:break-word; margin:0px; padding:0px; color:rgb(0,0,128)">html</span>> </code></pre> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 如果需要使用一些其他的的<code style="word-wrap:break-word; margin:0px; padding:0px">jssdk</code>的方法,那就需要参照公众号的开发配置了。</p> <h3 style="word-wrap:break-word; margin:0px; padding:0px; font-size:1em; border:0px; font-weight:normal"> web-view采坑</h3> <p style="word-wrap:break-word; margin-top:1.5em; margin-bottom:1.5em; padding-top:0px; padding-bottom:0px; border:0px; color:rgb(51,51,51)"> 由于很多使用中的一些问题</p> <blockquote style="word-wrap:break-word; margin:1.5em 0px; padding:10px 20px; border-left:2px solid rgb(0,154,97); background:rgb(246,246,246); color:rgb(85,85,85)"> <p style="word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; border:0px"> 1.打开的域名没有在小程序管理后台设置业务域名(注意是业务域名,不是服务器域名)<br style="word-wrap:break-word; margin:0px; padding:0px"> 2.打开的页面必须为https服务<br style="word-wrap:break-word; margin:0px; padding:0px"> 3.打开的页面302过去的地址也必须设置过业务域名<br style="word-wrap:break-word; margin:0px; padding:0px"> 4.web-view空白问题,请升级微信客户端到 6.5.16<br style="word-wrap:break-word; margin:0px; padding:0px"> 5.页面可以包含iframe,但是iframe的地址必须为业务域名<br style="word-wrap:break-word; margin:0px; padding:0px"> 6.web-view不支持支付能力,web-view的API能力见web-view的文档说明<br style="word-wrap:break-word; margin:0px; padding:0px"> 7.开发者自己检查自己的https服务是否正常,测试方法:普通浏览器打开对应的地址<br style="word-wrap:break-word; margin:0px; padding:0px"> 8.如果web-view使用了公众号授权的服务,开发者工具提示网页开发者的问题,请见:<a href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140" style="word-wrap:break-word; margin:0px; padding:0px 0px 1px; text-decoration:none; color:rgb(0,154,97); background:transparent; outline:0px" rel="nofollow">公众号开发</a><br style="word-wrap:break-word; margin:0px; padding:0px"> 其他的问题注意:</p> </blockquote> <ol style="word-wrap:break-word; margin:1.5em 0px 1.5em 3em; padding:0px; border:0px; color:rgb(51,51,51)"> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">每个页面只能有一个,会自动铺满整个页面,并覆盖其他组件,小程序对webview的监控状态基本没有,只能设置src设置url。</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">关于小程序和web-view的通信, → 小程序只能通过JSSDK 1.3.0提供的接口返回小程序页面,设置参数来传值,反之,小程序到webview也是一样的,只能是src的路径带上参数;</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">web-view不支持支付能力,是指无法唤起小程序的直接支付窗口,对于h5的那套支付应该是支持的,但是web-view 里边没法使用 微信支付的 JSAPI,也就是可能可以h5的相关的的支付中心来支付;</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">关于层级,在webview中可以无限跳转,对于导航条返回和物理键返回都会回到上一个页面直到退出webview,就像<code style="word-wrap:break-word; margin:0px; padding:0px">history.back</code>。</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">webview中的html的title会自动放到小程序的头部作为标题;</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">webview中可以正常使用ajax之类的操作。</li> <li style="word-wrap:break-word; margin:0.3em 0px; padding:0px; border:0px">一些可能的问题<a href="https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=585555149&docid=ebfd9e5ec9986b4f23c41f8d8bbf2730" style="word-wrap:break-word; margin:0px; padding:0px 0px 1px; text-decoration:none; color:rgb(0,154,97); background:transparent; outline:0px" rel="nofollow">问题汇总</a></li> </ol> </td> </tr> </tbody> </table> [http_www.wxapp-union.com_article-3362-1.html]: http://www.wxapp-union.com/article-3362-1.html
还没有评论,来说两句吧...