微信小程序网页嵌入开发
<blockquote><p>无脑开发</p>
<p>下载微信开发者工具</p>
<p>新建一个项目找到index开头的进去全选删除粘贴下面代码</p>
</blockquote>
<pre class="language-html highlighter-hljs"><code><!-- html -->
<!-- 指向嵌入外部链接的地址 -->
<web-view src="这里是你的网站链接"></web-view></code></pre>
<blockquote>
<p>注意！需要企业资质才可以开发</p>
<p>个体户也可以</p>
<p>下面我们来了解一下<code><web-view></code></p>
</blockquote>
<hr>
<p>微信小程序提供了新的开放能力！它终于开放了在小程序中内嵌HTML页面的功能！从微信小程序基础库1.6.4开始，我们就可以在小程序内放置一个<code><web-view></code>组件来链接我们的HTML页面了。在这之前，我们在小程序中没有办法整合我们已有的HTML程序（比如HTML5文章系统，商城系统等），只能使用小程序的方式重新开发一套，现在有了<code><web-view></code>就可以方便的集成这些网页系统，为我们减少了可观的工作量。</p>
<figure class="">
<div class="image-block"><img src="https://img2022.cnblogs.com/blog/2368840/202210/2368840-20221007092024715-1723895096.jpg" class="" height="333" width="499">
<p id="1665105627240"></p>
</div>
</figure>
<p>下面我们来看一下具体如何使用。</p>
<h4 id="%E8%AE%BE%E7%BD%AE%E6%9D%83%E9%99%90">设置权限</h4>
<p>要在小程序中访问外部网页，需要先设置允许访问的业务网站的域名。让我们先登录小程序平台管理后台页面，进入“设置” => "开发设置"，可以看到这边多出来了一块“业务域名”的设置区域：</p>
<figure class="">
<div class="image-block"><img src="https://img2022.cnblogs.com/blog/2368840/202210/2368840-20221007092043575-510962871.jpg" class="" height="619" width="1620">
<p id="1665105645774"></p>
</div>
</figure>
<p>点击“开始配置”按钮，弹出一个窗口，我们可以在这个窗口中添加一个或多个你要在小程序中访问的域名。当然，不是所有的域名下的网页你的小程序都可以访问，只有那些你可以“掌控”的网站，你才可以访问！你需要在这个窗口里下载“校验文件”，并把这个校验文件上传到你的网站的根目录，供小程序平台进行验证，验证通过了才能成功添加域名。</p>
<figure class="">
<div class="image-block"><img src="https://img2022.cnblogs.com/blog/2368840/202210/2368840-20221007092102174-9014419.jpg" class="" height="1144" width="1516">
<p id="1665105664101"></p>
</div>
</figure>
<h4 id="%E4%BD%BF%E7%94%A8web-view%E7%BB%84%E4%BB%B6%E6%98%BE%E7%A4%BAHTML%E9%A1%B5%E9%9D%A2">使用web-view组件显示HTML页面</h4>
<p><code><web-view></code>组件的使用就比较简单了，类似HTML里面的<code><iframe></code>标签：</p>
<pre class="language-html highlighter-hljs"><code><web-view src="https://www.xxxxxxxxx.com/index.html" /></code></pre>
<p>就这样，HTML页面就可以在小程序中显示了。</p>
<p>但是，和<code><iframe></code>可以嵌入到页面的任意部分不同的是，小程序的这个<code><web-view></code>总是自动铺满整个页面，且每个页面只能有一个<code><web-view></code>，它会覆盖其他组件。也就是说，没有办法实现小程序界面组件和<code><web-view></code>页面混排的情况，这点要注意。</p>
<h4 id="%E5%9C%A8%E5%86%85%E5%B5%8C%E7%9A%84HTML%E9%A1%B5%E9%9D%A2%E4%B8%AD%E8%B7%B3%E8%BD%AC%E5%9B%9E%E5%B0%8F%E7%A8%8B%E5%BA%8F">在内嵌的HTML页面中跳转回小程序</h4>
<p>如果要在已经通过<code><web-view></code>嵌入小程序的网页中，跳转到小程序中的其他页面(Page)，可以引入微信的一个JSSDK，使用它提供的方法来实现相关跳转功能。网页代码类似如下所示：</p>
<pre class="language-html highlighter-hljs"><code><!-- html代码中引入JS SDK -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
<script>
// 跳转到小程序的一个页面
wx.miniProgram.navigateTo({url: '/path/to/page'})
</script></code></pre>
<p>(不过很遗憾，还是没有办法从一个网页中跳转到一个指定的小程序。)</p>
<h4 id="%E6%80%BB%E7%BB%93">总结</h4>
<p>这一内嵌网页的功能，也算顺应了广大开发者的要求，解决了很大一部分开发者的痛点。在混合开发方面的增强，为小程序的功能开发提供了不少灵活性和便利性。</p>
<blockquote>
<p>如何启用小程序分享功能</p>
<p>修改page/index.js</p>
</blockquote>
<pre class="language-xml highlighter-hljs"><code> /**
* 分享当前页面
*/
onShareAppMessage() {
return {
title: '',//这里填写title
path: "/pages/index/index"//这里填写路径
};
},</code></pre><br><br>
来源：https://www.cnblogs.com/xkboi/p/16759083.html
頁:
[1]