【腾讯云 Cloud studio 实战训练营】云端 IDE 构建移动端H5_h5页面内嵌小型ide

最新推荐文章于 2024-07-12 16:09:11 发布

2401_84264244

最新推荐文章于 2024-07-12 16:09:11 发布

阅读量198

点赞数 7

分类专栏：程序员文章标签： ide

本文链接：https://blog.csdn.net/2401_84264244/article/details/138294437

版权

程序员专栏收录该内容

201 篇文章 0 订阅

订阅专栏

4、开发移动端H5项目

（1）安装vant

yarn add vant@^3.6.12

（2）按需引入组件样式
在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件，并按需引入组件的样式。
相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。

// —D表示安装到开发依赖中
yarn add -D unplugin-vue-components@^0.22.7

需要配置下vite.config.js文件，如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入以下2个库
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // 增加以下配置
    Components({
      // 不生成类型声明文件自己写
      dts: false,
      // 样式需要单独引入
      resolvers: [VantResolver({ importStyle: false })]
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

（3）安装 Less
Vite 和 Webpack 不同，不需要 less-loader 等，只需安装 less

yarn add -D less@^3.12.2

vite.config.js文件需要增加以下配置：

// 增加以下css配置代码
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

（4）安装 normalize
Normalize.css 是CSS重置的现代替代方案，可以为默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。

yarn add -D normalize.css@^8.0.1

（5）main.js引入相关库和包

 import { createApp } from 'vue'
import App from './App.vue'
// 按需引入 Vant
import { Tabbar, TabbarItem } from 'vant';
import 'vant/lib/index.css'
// CSS 重置的现代替代方案
import 'normalize.css/normalize.css'

// 实例化 Vue 实例
const app = createApp(App)

// 安装 Vant 相关使用插件
app.use(Tabbar);
app.use(TabbarItem);

// 挂载到 #app 节点
app.mount('#app')

（6）移动端适配

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
    <!-- built files will be auto injected -->
    <script>
      // rem定义
      /\*
 720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例
 \*/
      getRem(375, 100);

      window.onresize = function() {
        getRem(375, 100);
      };

      function getRem(pwidth, prem) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
        html.style.fontSize = (oWidth / pwidth) \* prem + "px";
      }

      // 安卓机中，默认字体大小不让用户修改
      ;(function () {
        if (typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function') {
          handleFontSize()
        } else {
          if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
          } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', handleFontSize)
            document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
          }
        }

        function handleFontSize() {
          // 设置网页字体为默认大小
          WeixinJSBridge.invoke('setFontSizeCallback', {
            fontSize: 0,
          })
          // 重写设置网页字体大小的事件
          WeixinJSBridge.on('menu:setfont', function () {
            WeixinJSBridge.invoke('setFontSizeCallback', {
              fontSize: 0,
            })
          })
        }
      })()
    </script>
  </body>
</html>

（7）App.vue业务代码

<template>
  <div class="container">
    <van-nav-bar
      title="e租宝案"
      left-arrow
    />

    <div class="list\_box">
      <div class="list">
        <div class="list-head">开庭前准备 5</div>
        <div class="list\_item">
          <div class="list\_item-head">
            <van-checkbox v-model="radio" shape="square">核对证据原件并存档</van-checkbox>
            <div class="list\_item-head\_name">
              <div class="list\_item-head\_name-tag"></div>
              <div class="list\_item-head\_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list\_item-info">
            <img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list\_item-info\_tag list\_item-info\_tag--gray">03-28 截止</div>
            <img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>

        <div class="list\_item list\_item--blue">
          <div class="list\_item-head">
            <van-checkbox v-model="radio1" shape="square">调取并查阅案卷</van-checkbox>
            <div class="list\_item-head\_name">
              <div class="list\_item-head\_name-tag"></div>
              <div class="list\_item-head\_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list\_item-info">
            <img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list\_item-info\_tag list\_item-info\_tag--blue">下周一 截止</div>
            <img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>

        <div class="list\_item list\_item--orange">
          <div class="list\_item-head">
            <van-checkbox v-model="radio2" shape="square">领取传票并通知委托人</van-checkbox>
            <div class="list\_item-head\_name">
              <div class="list\_item-head\_name-tag"></div>
              <div class="list\_item-head\_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list\_item-info">
            <img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list\_item-info\_tag list\_item-info\_tag--orange">明天 17:00 截止</div>
            <img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>

        <div class="list\_item list\_item--red">
          <div class="list\_item-head">
            <van-checkbox v-model="radio3" shape="square">写委托书</van-checkbox>
            <div class="list\_item-head\_name">
              <div class="list\_item-head\_name-tag"></div>
              <div class="list\_item-head\_name-text">e租宝案</div>
            </div>
          </div>
          <div class="list\_item-info">
            <img class="list\_item-info\_img" style="display: block;" src="https://cs-res.codehub.cn/workspace/assets/icons/emberjs.svg" lazy-load alt="" />
            <div class="list\_item-info\_tag list\_item-info\_tag--red">2019-2-12 截止</div>
            <img class="list\_item-info\_clock" style="display: block;" src="https://cs-res.codehub.cn/vscode/serverless.svg" lazy-load alt="" />
          </div>
        </div>
      </div>
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item icon="comment-o">名片夹</van-tabbar-item>
      <van-tabbar-item icon="shop-o">官网</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      active: 0,
      radio: false,
      radio1: false,
      radio2: false,
      radio3: false,
    };
  },
};
</script>

<style lang="less">
html,
body {
  // font-family: PingFangSC-Medium, PingFang SC, Arial, 'Microsoft Yahei', sans-serif;
  font-family: Arial, 'Microsoft Yahei', sans-serif;
  font-size: 0.14rem;
  // line-height: 0.24rem;
  color: #333;
  background: #f9f9f9;
  // iPhone 横屏默认会放大文字，设置text-size-adjust会解决这个问题
  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}

\* {
  outline-style: none !important;
}
</style>

<style lang="less" scoped>
.container {
  position: relative;
  min-height: 100vh;
  padding-bottom: 0.5rem;
  background: #fff;
}

.list_box {
  padding: 0.2rem 0.1rem;
  box-sizing: border-box;
  .list {
    padding: 0.1rem 0.1rem 0.3rem;
    box-sizing: border-box;
    background: #f4f4f4;
    width: 100%;
    border-radius: 3px;
    &-head {
      padding: 16px 15px 12px 0;
      box-sizing: border-box;
      font-size: 0.16rem;
    }
  }
}

.list_item {
  background: #fff;
  padding: 0.1rem;
  box-sizing: border-box;
  border-radius: 3px;
  margin-bottom: 0.1rem;
  &--gray {
    background: #cccccc;
  }
  &--blue {
    border-left: 2px solid #75A8F7;
  }
  &--orange {
    border-left: 2px solid #E8A743;
  }
  &--red {
    border-left: 2px solid #E8311F;
  }
  &-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    &_name {
      display: flex;
      align-items: center;
      &-tag {
        width: 6px;
        height: 6px;
        background: #5F8DD8;
        border-radius: 50%;
        margin-right: 0.05rem;
      }
      &-text {
        font-size: 0.12rem;
        color: #989A9C;
      }
    }
  }

  &-info {
    padding-top: 8px;
    padding-left: 25px;
    display: flex;
    align-items: center;
    &_img {
      width: 20px;


### 一、网安学习成长路线图


网安所有方向的技术点做的整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/aa7be04dc8684d7ea43acc0151aebbf1.png)


### 二、网安视频合集


观看零基础学习视频，看视频学习是最快捷也是最有效果的方式，跟着视频中老师的思路，从基础到深入，还是很容易入门的。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f0aeee2eec7a48f4ad7d083932cb095d.png)


### 三、精品网安学习书籍


当我学到一定基础，有自己的理解能力的时候，会去阅读一些前辈整理的书籍或者手写的笔记资料，这些笔记详细记载了他们对一些技术点的理解，这些理解是比较独到，可以学到不一样的思路。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/078ea1d4cda342f496f9276a4cda5fcf.png)


### 四、网络安全源码合集+工具包


光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e54c0bac8f3049928b488dc1e5080fc5.png)


### 五、网络安全面试题


最后就是大家最关心的网络安全面试题板块  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/15c1192cad414044b4dd41f3df44433d.png)![在这里插入图片描述](https://img-blog.csdnimg.cn/b07abbfab1fd4edc800d7db3eabb956e.png)  



**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以点击这里获取](https://bbs.csdn.net/topics/618540462)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**