基于vue的开发微信小程序h5界面+浏览器适配
<p>前提：创建了vue项目（vue create proname）</p><p>主要为了记录浏览器适配，创建vue项目省略了，网上搜一搜，一大堆。</p>
<p>开发h5界面是为了通过<web-view :src="webUrl"></web-view>(其中webUrl是指vue项目的服务器地址)，将页面嵌入到微信小程序中，微信小程序的开发在另一篇博客中有说明：https://www.cnblogs.com/wq805/p/16229343.html</p>
<p>项目结构如下图所示：</p>
<p><img src="https://img2022.cnblogs.com/blog/2052514/202205/2052514-20220507171626211-1886830341.png"></p>
<p> </p>
<p> </p>
<p><strong><span style="font-size: 16px"> 创建好项目开始浏览器适配</span></strong></p>
<p> </p>
<p> </p>
<p>第一步：安装vant 2</p>
<p>vant是移动端的组件，目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，我的项目是基于Vue 2,所以安装了vant 2</p>
<div class="cnblogs_code">
<pre>npm i vant@latest-v2 -S</pre>
</div>
<p>引入组件时，我选择按需引入，还有导入所有组件和手动按需引入，导入所有组件会增加项目体积，手动按需引入比较麻烦。下面说一下按需引入的步骤：</p>
<p>1.安装插件</p>
<p>babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。</p>
<div class="cnblogs_code">
<pre>npm i babel-plugin-import -D</pre>
</div>
<p>打开目录中的babel.config.js文件，加入下面的代码</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 0, 1)">plugins: [
[</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">import</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">, {
libraryName: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">vant</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
libraryDirectory: </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">es</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">,
style: </span><span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
}, </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">vant</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">],
]</span></pre>
</div>
<p><img src="https://img2022.cnblogs.com/blog/2052514/202205/2052514-20220507173806879-135479089.png"></p>
<p> </p>
<p> </p>
<p> 2.在src目录下新建vant文件，在该文件下创建index.js文件</p>
<p><img src="https://img2022.cnblogs.com/blog/2052514/202205/2052514-20220507173951948-1067977946.png"></p>
<p> </p>
<p> </p>
<p> 按下图方式写到index.js文件中</p>
<p> </p>
<p> </p>
<p><img src="https://img2022.cnblogs.com/blog/2052514/202205/2052514-20220507174014914-78848032.png"></p>
<p>3.在目录结构中的main.js里引入vant组件</p>
<div class="cnblogs_code">
<pre>import <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">./vant</span><span style="color: rgba(128, 0, 0, 1)">'</span></pre>
</div>
<p>第二步：安装lib-flexible和postcss-pxtorem</p>
<p>浏览器适配有Viewport布局、Rem布局适配、桌面端适配、底部安全区适配。</p>
<p>这里主要说Rem布局适配。</p>
<ul>
<li>postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位</li>
<li>lib-flexible 用于设置 rem 基准值</li>
</ul>
<div class="cnblogs_code">
<pre>npm i lib-flexible@0.3.2 --save</pre>
</div>
<div class="cnblogs_code">
<pre>npm <span style="color: rgba(0, 0, 255, 1)">install</span> postcss-pxtorem@<span style="color: rgba(128, 0, 128, 1)">5.1</span>.<span style="color: rgba(128, 0, 128, 1)">1</span> --save-dev</pre>
</div>
<p>项目结构中的 .postcssrc.js 文件是我后期新建的，用来配置PostCSS，配置内容如下：</p>
<p><img src="https://img2022.cnblogs.com/blog/2052514/202205/2052514-20220507175232783-1882885547.png"></p>
<p> </p>
<p> 最后在main.js中引入flexible</p>
<p><img src="https://img2022.cnblogs.com/blog/2052514/202205/2052514-20220507175553433-1317290221.png"></p>
<p> </p>
<p>之后就可以直接使用vant组件啦~例如：</p>
<div><van-button round block type="default" @click="regist">注册</van-button></div>
<p> </p><br><br>
来源：https://www.cnblogs.com/wq805/p/16243609.html
頁:
[1]