20230720----重返学习-小程序页面的初步完成

最新推荐文章于 2024-08-29 08:00:00 发布
最新推荐文章于 2024-08-29 08:00:00 发布
阅读量245 收藏
点赞数
分类专栏： 重返学习 微信小程序 文章标签： 学习 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/131843373
版权
文章详细介绍了微信小程序中使用vant-weappUI框架进行页面构建的过程，包括vant-weapp的安装、组件注册与使用，以及首页轮播图、列表、生命周期事件的处理。此外，还涉及到了小程序页面的动态尺寸调整、收藏功能、分享功能的实现，以及原生分享与自定义分享按钮的应用。
摘要由CSDN通过智能技术生成

day-116-one-hundred-and-sixteen-20230720-小程序页面的初步完成

UI框架

  1. weui - 微信小程序推荐的官方UI框架-很少人使用
  2. vant-weapp - 实际开发中常用的主流UI框架

vant-weapp安装

  1. 步骤一 通过 npm 安装

    # 通过 npm 安装
npm i @vant/weapp -S --production

  2. 步骤二 修改 app.json

    • 将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

  3. 步骤三 修改 project.config.json ,新版本可能不用了.

    • 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
    • 需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
    {
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}
    • 注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为’./'即可

  4. 步骤四 构建 npm包

    • 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

  5. 在需要使用的时候，在pages/xxx/xxxx.json中注册一个组件。

    • 如：van-rate。

      • pages/interview/interview.json

        {
  "usingComponents": {
    "van-rate": "@vant/weapp/rate/index"
  }
}

      • pages/interview/interview.wxml

        <van-rate
  custom-class="rate"
  value="44444444"
  color="#ffd21e"
  void-icon="star"
  void-color="#eee"
  bind:change="onChange"
/>

      • pages/interview/interview.js

        Page({

  onChange(e){
    console.log('onChange')
  },
})

使用vant-weapp组件-van-cell相关组件

  1. 在安装之后直接在json中注册；

    • pages/mime/mime.json

      {
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  },
}

  2. 在注册好之后，直接在wxml调用就好了。

    • pages/mime/mime.wxml

      <van-cell-group inset>
  <van-cell
    title="退出"
    bind:tap="logout"
    is-link
  />
  <van-cell
    title="收藏"
    is-link
    link-type="navigateTo"
    url="/pages/collect-list/collect-list"
  />
</van-cell-group>

  3. 如果在组件上绑定了一些方法，那么就在js中定义好。

    • pages/mime/mime.js

      Page({
  logout(){
    wx.clearStorageSync()
    wx.reLaunch({
      url: '/pages/mime/mime',
    })
  },
})

首页轮播图

  • swiper - 微信小程序原生组件

  • pages/index/index.wxml

    <!--pages/index/index.wxml-->
<swiper 
  indicator-dots 
  autoplay
  interval="{{3000}}"
>
  <swiper-item wx:for="{{bannerList}}" wx:for-item="banner" wx:key="index">
    <image src="{{banner.url}}" mode="aspectFill"/>
  </swiper-item>
</swiper>

  • pages/index/index.js

    import { get } from "../../utils/request"; //这个是请求列表数据的.

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
  */
  data: {
    bannerList: [],
  },

  async getBannerList() {
    let { bannerList } = await get("/bannerList");
    this.setData({ bannerList });
  },

  /**
   * 生命周期函数--监听页面加载
  */
  onLoad(options) {
    this.getBannerList();//获取banner列表
  },
});

首页列表

  • pages/index/index.js

    import { get } from "../../utils/request";//这个是请求列表数据的.

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
  */
  data: {
    articles: [],
    page: 1,
    total: 0,
  },

  async getArticleList() {
    let { articles, total } = await get("/articleList", {
      data: {
        limit: 5,
        page:this.data.page,
      },
    });
    console.log(articles, total);
    this.setData({
      articles,
    });
  },

  /**
   * 生命周期函数--监听页面加载
  */
  onLoad(options) {
    this.getArticleList();
  },
});

  • pages/index/index.wxml

    <view class="article" wx:for="{{articles}}" wx:for-item="article" wx:key="index">
  <text class="title">{{article.title}}</text>
  <view class="author">
    <text>{{article.author}} | {{article.createTime}}</text>
  </view>
  <image class="poster" src="{{article.poster}}" mode="aspectFill" />
  <text class="content">{{article.content}}</text>
  <view class="other">
    <text>点赞：{{article.support}} |  观看：{{article.look}}</text>
  </view>
</view>

  • pages/index/index.wxss

    .article {
  border: 1px solid #ccc;
  border-radius: 30rpx;
  padding: 15rpx;
  margin-bottom: 10px;
}
.title {
  padding-top: 10px;
  font-size: 35rpx;
  font-weight: bold;
  line-height: 50rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}
.author {
  font-size: 25rpx;
  line-height: 45rpx;
}
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 20rpx 0;
  font-size: 30rpx;
}
.poster {
  width: 100%;
  height: 300rpx;
}
.other {
  color: #777;
  font-size: 25rpx;
}

首页列表封装成组件

  1. 新建/components/article/，在/components/article/中右键打开菜单，点击新建Component，输入article会自动生成对应的四个文件。

    • 小程序中，默认所有组件类型的文件，都放在/components/中。

  2. 写代码：

    • components\article\article.js

      // components/article/article.js
Component({
  /**
   * 组件的属性列表
  */
  properties: {
    article: {
      type: Object,
      default: {},
    },
  },

  /**
   * 组件的初始数据
  */
  data: {},

  /**
   * 组件的方法列表
  */
  methods: {},
});

    • components\article\article.json

      {
  "component": true,
  "usingComponents": {}
}

    • components\article\article.wxml

      <view class="article">
  <text class="title">{{article.title}}</text>
  <view class="author">
    <text>{{article.author}} | {{article.createTime}}</text>
  </view>
  <image class="poster" src="{{article.poster}}" mode="aspectFill" />
  <text class="content">{{article.content}}</text>
  <view class="other">
    <text>点赞：{{article.support}} |  观看：{{article.look}}</text>
  </view>
</view>

    • components\article\article.wxss

      /* components/article/article.wxss */
.article {
  border: 1px solid #ccc;
  border-radius: 30rpx;
  padding: 15rpx;
  margin-bottom: 10px;
}
.title {
  padding-top: 10px;
  font-size: 35rpx;
  font-weight: bold;
  line-height: 50rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}
.author {
  font-size: 25rpx;
  line-height: 45rpx;
}
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 20rpx 0;
  font-size: 30rpx;
}
.poster {
  width: 100%;
  height: 300rpx;
}
.other {
  color: #777;
  font-size: 25rpx;
}

  3. 在需要用的地方导入并使用

    • pages/index/index.js

      import { get } from "../../utils/request"; //这个是请求列表数据的.

// pages/index/index.js
Page({
  /**
   * 页面的初始数据
  */
  data: {
    articles: [],
    page: 1,
    total: 0,
  },

  async getArticleList() {
    let { articles, total } = await get("/articleList", {
      data: {
        limit: 5,
        page: this.data.page,
      },
    });
    console.log(articles, total);
    this.setData({
      articles,
    });
  },

  /**
   * 生命周期函数--监听页面加载
  */
  onLoad(options) {
    this.getArticleList();//获取文章列表
  },
});

    • pages/index/index.json 注册组件，以便在wxml中调用。

      {
  "usingComponents": {
    "article": "/components/article/article"
  },
  "navigationBarTitleText": "首页"
}

    • pages/index/index.wxml

      <article  wx:for="{{articles}}" wx:for-item="article" wx:key="index" article="{{article}}"></article>

    • pages/index/index.wxss

      /* 之前的列表样式移除了。 */

点击跳转详情

  • /pages/index/index.wxml 页面的html结构，用于承载点击事件等。

    <div
  wx:for="{{articles}}"
  wx:for-item="article"
  wx:key="index"
  article="{{article}}"
  bind:tap="toDetail"
>
  <span>{{article}}</span>
</div>

  • pages/index/index.js 页面的点击事件，用于处理跳转逻辑的。

    Page({
  /**
  * 页面的初始数据
  */
  data: {
    articles: [
      {
        _id: "6452633132c176fbe7ecd1ce",
        title: "1.闭包？什么是闭包？--JavaScript前端",
        author: "abc",
        createTime: "2022-1-20",
        content:
          "闭包的背景 由于js中只有两种作用域，全局作用域和函数作用域， 闭包的使用 函数柯里化 使用call实现bind 矩阵点击应用",
        poster: "https://static.zhufengpeixun.com/2_1689731480602.png",
        detail:
          "为了便于理解，我们将外部函数比喻为妈妈本体，里面保存着总钱数这个变量和消费这个行为，通过创建为儿子消费的这个行为对象，然后执行这个行为花费5元，返回剩余的95元。\n这个就是为了将变量money保存在mother本体内而避免暴露在外部的全局环境作用域中，只能通过mother()创建消费行为来影响money这个变量。\n        由此可以归纳总结使用闭包的三个步骤\n用外层函数包裹变量，函数；\n        外层函数返回内层函数；\n        外部用变量保存外部函数返回的内层函数\n目的是为了形成一个专属的变量，只在专属的作用域中操作。\n        上述的闭包代码示例中，有一个缺陷的场景是，在后续不需要money变量的情况下，没有释放该变量，造成内存泄露。原因是payForSon这个函数的作用域链引用着money对象，解决的办法是将payForSon = null就可以释放方法作用域，进而解除对money的引用，最后释放money变量。\n        ",
        support: 40,
        look: 1100,
        __v: 0,
      },
      {
        _id: "6452633132c176fbe7ecd1cf",
        title: "2.GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~",
        author: "abc",
        createTime: "2022-2-20",
        content:
          "虽然在短期内，ChatGPT将使开发人员能够更快地完成开发工作，而不是取代他们。但技术的发展日新月异，很难想象 ChatGPT及其他的大模型在 10 到 20 年后会是什么样子。",
        poster: "https://static.zhufengpeixun.com/6_1689731504176.webp",
        detail:
          "其实这背后的逻辑并不难理解，chatGPT 所训练的数据来源于互联网，它目前还具备自我生成、左右手互博的能力，也就意味着，答案的最终来源仍然是网页背后千千万万的开发者。如果他们被一瞬间干掉了，chatGPT 的数据从哪来？答案的保真度、新鲜度从何而来？你敢说 2 年、3年、5年后的React写法、功能和现在一样？还有那千千万万不断迭代的 npm 包！\n更有甚的可能会是一些严重的社会民生问题，比如，你司的医疗APP接入 chatGPT，作为24小时人工智能客服机器人给病人问诊开药，你能保证机器人不会将感冒错误地诊断为XinGuan？你能保证机器人不会给病人开错药？\n因此，准确性可能会逐渐提高，但永远不会完美，因为互联网上的数据本身准确性就非常有问题。在庞大的用户群面前，哪怕一两个典型的事件就足可能杀死一家公司，更别说几十上百件。\n",
        support: 60,
        look: 200,
        __v: 0,
      },
    ],
  },
  toDetail(e) {
    // console.log(e.detail._id);
    wx.navigateTo({
      url: "/pages/article-detail/article-detail?id=" + e.detail._id,
    });
  },
});

  • pages/article-detail/article-detail.js 拿到传递过来的id，并用这个id会做一些事。如语法接口数据等。

    Page({
  data: {
    article: {},
  },
  async onLoad(options) {
    console.log(options.id)
    if (!options.id) return;
    let { article } = await get("/article", {
      data: {
        id: options.id,
      },
    });
    console.log(article);
    this.setData({
      article,
    });
  },
});

点击详情编译小技巧-加参数

预览图片

  • pages/article-detail/article-detail.wxml 用于承载图片的点击事件。
<view class="article-detail container">
  <image
    src="{{article.poster}}"
    bind:tap="toPreviewImage"
    data-url="{{article.poster}}"
  ></image>
</view>
  • pages/article-detail/article-detail.js 用于定义页面要展示的图片，以及图片默认展示列表的调用接口。
Page({
  data: {
    article: {
      _id: "6452633132c176fbe7ecd1cf",
      title: "2.GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~",
      author: "abc",
      createTime: "2022-2-20",
      content:
        "虽然在短期内，ChatGPT将使开发人员能够更快地完成开发工作，而不是取代他们。但技术的发展日新月异，很难想象 ChatGPT及其他的大模型在 10 到 20 年后会是什么样子。",
      poster: "https://static.zhufengpeixun.com/6_1689731504176.webp",
      detail:
        "其实这背后的逻辑并不难理解，chatGPT 所训练的数据来源于互联网，它目前还具备自我生成、左右手互博的能力，也就意味着，答案的最终来源仍然是网页背后千千万万的开发者。如果他们被一瞬间干掉了，chatGPT 的数据从哪来？答案的保真度、新鲜度从何而来？你敢说 2 年、3年、5年后的React写法、功能和现在一样？还有那千千万万不断迭代的 npm 包！\n更有甚的可能会是一些严重的社会民生问题，比如，你司的医疗APP接入 chatGPT，作为24小时人工智能客服机器人给病人问诊开药，你能保证机器人不会将感冒错误地诊断为XinGuan？你能保证机器人不会给病人开错药？\n因此，准确性可能会逐渐提高，但永远不会完美，因为互联网上的数据本身准确性就非常有问题。在庞大的用户群面前，哪怕一两个典型的事件就足可能杀死一家公司，更别说几十上百件。\n",
      support: 60,
      look: 200,
      __v: 0,
    },
  },
  toPreviewImage(e) {
    const url = e.currentTarget.dataset.url;
    wx.previewImage({
      urls: [url, url, url], // 需要预览的图片http链接列表
    });
  },
});

生命周期

  • pages/life-cycle/life-cycle.js

    // pages/life-cycle/life-cycle.js
Page({

  onLoad(options) {
    console.log(`onLoad - 监听页面加载`);
  },

  onReady() {
    console.log(`onReady - 监听页面初次渲染完成`);
  },

  onShow() {
    console.log(`onShow - 监听页面显示`);
  },

  onHide() {
    console.log(`onHide - 监听页面隐藏`);
  },

  onUnload() {
    console.log(`onUnload - 监听页面卸载`);
  },

  onPullDownRefresh() {
    console.log(`onPullDownRefresh - 监听用户下拉动作`);
  },

  onReachBottom() {
    console.log(`onReachBottom - 页面上拉触底事件的处理函数`);
  },
})

触底加载

  • pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    articles: [
      {
        _id: "6452633132c176fbe7ecd1ce",
        title: "1.闭包？什么是闭包？--JavaScript前端",
        author: "abc",
        createTime: "2022-1-20",
        content:
          "闭包的背景 由于js中只有两种作用域，全局作用域和函数作用域， 闭包的使用 函数柯里化 使用call实现bind 矩阵点击应用",
        poster: "https://static.zhufengpeixun.com/2_1689731480602.png",
        detail:
          "为了便于理解，我们将外部函数比喻为妈妈本体，里面保存着总钱数这个变量和消费这个行为，通过创建为儿子消费的这个行为对象，然后执行这个行为花费5元，返回剩余的95元。\n这个就是为了将变量money保存在mother本体内而避免暴露在外部的全局环境作用域中，只能通过mother()创建消费行为来影响money这个变量。\n        由此可以归纳总结使用闭包的三个步骤\n用外层函数包裹变量，函数；\n        外层函数返回内层函数；\n        外部用变量保存外部函数返回的内层函数\n目的是为了形成一个专属的变量，只在专属的作用域中操作。\n        上述的闭包代码示例中，有一个缺陷的场景是，在后续不需要money变量的情况下，没有释放该变量，造成内存泄露。原因是payForSon这个函数的作用域链引用着money对象，解决的办法是将payForSon = null就可以释放方法作用域，进而解除对money的引用，最后释放money变量。\n        ",
        support: 40,
        look: 1100,
        __v: 0,
      },
      {
        _id: "6452633132c176fbe7ecd1cf",
        title: "2.GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~",
        author: "abc",
        createTime: "2022-2-20",
        content:
          "虽然在短期内，ChatGPT将使开发人员能够更快地完成开发工作，而不是取代他们。但技术的发展日新月异，很难想象 ChatGPT及其他的大模型在 10 到 20 年后会是什么样子。",
        poster: "https://static.zhufengpeixun.com/6_1689731504176.webp",
        detail:
          "其实这背后的逻辑并不难理解，chatGPT 所训练的数据来源于互联网，它目前还具备自我生成、左右手互博的能力，也就意味着，答案的最终来源仍然是网页背后千千万万的开发者。如果他们被一瞬间干掉了，chatGPT 的数据从哪来？答案的保真度、新鲜度从何而来？你敢说 2 年、3年、5年后的React写法、功能和现在一样？还有那千千万万不断迭代的 npm 包！\n更有甚的可能会是一些严重的社会民生问题，比如，你司的医疗APP接入 chatGPT，作为24小时人工智能客服机器人给病人问诊开药，你能保证机器人不会将感冒错误地诊断为XinGuan？你能保证机器人不会给病人开错药？\n因此，准确性可能会逐渐提高，但永远不会完美，因为互联网上的数据本身准确性就非常有问题。在庞大的用户群面前，哪怕一两个典型的事件就足可能杀死一家公司，更别说几十上百件。\n",
        support: 60,
        look: 200,
        __v: 0,
      },
    ],
    page: 1,
  },
  async getArticleList() {
    wx.showNavigationBarLoading(); //更新时加loading
    let { articles } = {
      articles: [
        {
          _id: "6452633132c176fbe7ecd1cf" + this.data.page,
          title: "2.GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~",
          author: "abc",
          createTime: "2022-2-20",
          content:
            "虽然在短期内，ChatGPT将使开发人员能够更快地完成开发工作，而不是取代他们。但技术的发展日新月异，很难想象 ChatGPT及其他的大模型在 10 到 20 年后会是什么样子。",
          poster: "https://static.zhufengpeixun.com/6_1689731504176.webp",
          detail:
            "其实这背后的逻辑并不难理解，chatGPT 所训练的数据来源于互联网，它目前还具备自我生成、左右手互博的能力，也就意味着，答案的最终来源仍然是网页背后千千万万的开发者。如果他们被一瞬间干掉了，chatGPT 的数据从哪来？答案的保真度、新鲜度从何而来？你敢说 2 年、3年、5年后的React写法、功能和现在一样？还有那千千万万不断迭代的 npm 包！\n更有甚的可能会是一些严重的社会民生问题，比如，你司的医疗APP接入 chatGPT，作为24小时人工智能客服机器人给病人问诊开药，你能保证机器人不会将感冒错误地诊断为XinGuan？你能保证机器人不会给病人开错药？\n因此，准确性可能会逐渐提高，但永远不会完美，因为互联网上的数据本身准确性就非常有问题。在庞大的用户群面前，哪怕一两个典型的事件就足可能杀死一家公司，更别说几十上百件。\n",
          support: 60,
          look: 200,
          __v: 0,
        },
      ],
    };
    this.setData({
      articles: [...this.data.articles, ...articles],
      page: this.data.page + 1,
    });
    wx.hideNavigationBarLoading(); //加载后去掉loading
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getArticleList(); //获取文章列表
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // console.log("reachBottom")
    this.getArticleList();
  },
});
  • pages/index/index.wxml
<view
  wx:for="{{articles}}"
  wx:for-item="article"
  wx:key="index"
  article="{{article}}"
>
  <view style="height:700px">{{article.title}}</view>
</view>

顶部下拉刷新

  1. 小程序配置 /页面配置
  • pages/index/index.json
{
  "enablePullDownRefresh": true
}
  • pages/index/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    articles: [
      {
        _id: "6452633132c176fbe7ecd1ce",
        title: "1.闭包？什么是闭包？--JavaScript前端",
        author: "abc",
        createTime: "2022-1-20",
        content:
          "闭包的背景 由于js中只有两种作用域，全局作用域和函数作用域， 闭包的使用 函数柯里化 使用call实现bind 矩阵点击应用",
        poster: "https://static.zhufengpeixun.com/2_1689731480602.png",
        detail:
          "为了便于理解，我们将外部函数比喻为妈妈本体，里面保存着总钱数这个变量和消费这个行为，通过创建为儿子消费的这个行为对象，然后执行这个行为花费5元，返回剩余的95元。\n这个就是为了将变量money保存在mother本体内而避免暴露在外部的全局环境作用域中，只能通过mother()创建消费行为来影响money这个变量。\n        由此可以归纳总结使用闭包的三个步骤\n用外层函数包裹变量，函数；\n        外层函数返回内层函数；\n        外部用变量保存外部函数返回的内层函数\n目的是为了形成一个专属的变量，只在专属的作用域中操作。\n        上述的闭包代码示例中，有一个缺陷的场景是，在后续不需要money变量的情况下，没有释放该变量，造成内存泄露。原因是payForSon这个函数的作用域链引用着money对象，解决的办法是将payForSon = null就可以释放方法作用域，进而解除对money的引用，最后释放money变量。\n        ",
        support: 40,
        look: 1100,
        __v: 0,
      },
      {
        _id: "6452633132c176fbe7ecd1cf",
        title: "2.GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~",
        author: "abc",
        createTime: "2022-2-20",
        content:
          "虽然在短期内，ChatGPT将使开发人员能够更快地完成开发工作，而不是取代他们。但技术的发展日新月异，很难想象 ChatGPT及其他的大模型在 10 到 20 年后会是什么样子。",
        poster: "https://static.zhufengpeixun.com/6_1689731504176.webp",
        detail:
          "其实这背后的逻辑并不难理解，chatGPT 所训练的数据来源于互联网，它目前还具备自我生成、左右手互博的能力，也就意味着，答案的最终来源仍然是网页背后千千万万的开发者。如果他们被一瞬间干掉了，chatGPT 的数据从哪来？答案的保真度、新鲜度从何而来？你敢说 2 年、3年、5年后的React写法、功能和现在一样？还有那千千万万不断迭代的 npm 包！\n更有甚的可能会是一些严重的社会民生问题，比如，你司的医疗APP接入 chatGPT，作为24小时人工智能客服机器人给病人问诊开药，你能保证机器人不会将感冒错误地诊断为XinGuan？你能保证机器人不会给病人开错药？\n因此，准确性可能会逐渐提高，但永远不会完美，因为互联网上的数据本身准确性就非常有问题。在庞大的用户群面前，哪怕一两个典型的事件就足可能杀死一家公司，更别说几十上百件。\n",
        support: 60,
        look: 200,
        __v: 0,
      },
    ],
    page: 1,
  },

  async getArticleList() {
    wx.showNavigationBarLoading(); //更新时加loading
    let { articles } = {
      articles: [
        {
          _id: "6452633132c176fbe7ecd1cf" + this.data.page,
          title: "2.GPT-4 炸裂成那样，前端真的还有机会吗？我是这么看的~",
          author: "abc",
          createTime: "2022-2-20",
          content:
            "虽然在短期内，ChatGPT将使开发人员能够更快地完成开发工作，而不是取代他们。但技术的发展日新月异，很难想象 ChatGPT及其他的大模型在 10 到 20 年后会是什么样子。",
          poster: "https://static.zhufengpeixun.com/6_1689731504176.webp",
          detail:
            "其实这背后的逻辑并不难理解，chatGPT 所训练的数据来源于互联网，它目前还具备自我生成、左右手互博的能力，也就意味着，答案的最终来源仍然是网页背后千千万万的开发者。如果他们被一瞬间干掉了，chatGPT 的数据从哪来？答案的保真度、新鲜度从何而来？你敢说 2 年、3年、5年后的React写法、功能和现在一样？还有那千千万万不断迭代的 npm 包！\n更有甚的可能会是一些严重的社会民生问题，比如，你司的医疗APP接入 chatGPT，作为24小时人工智能客服机器人给病人问诊开药，你能保证机器人不会将感冒错误地诊断为XinGuan？你能保证机器人不会给病人开错药？\n因此，准确性可能会逐渐提高，但永远不会完美，因为互联网上的数据本身准确性就非常有问题。在庞大的用户群面前，哪怕一两个典型的事件就足可能杀死一家公司，更别说几十上百件。\n",
          support: 60,
          look: 200,
          __v: 0,
        },
      ],
    };
    this.setData({
      articles: [...this.data.articles, ...articles],
      page: this.data.page + 1,
    });
    wx.hideNavigationBarLoading(); //加载后去掉loading
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getArticleList(); //获取文章列表
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  async onPullDownRefresh() {
    console.log("pullRefresh");
    this.data.page = 1;
    this.data.articles = [];
    await this.getArticleList();
    wx.stopPullDownRefresh(); //关闭下拉
  },
});
  • pages/index/index.wxml
<view
  wx:for="{{articles}}"
  wx:for-item="article"
  wx:key="index"
  article="{{article}}"
>
  <view style="height:700px">{{article.title}}</view>
</view>

tab切换

  • pages/interview/interview.json
{
  "usingComponents": {
    "van-rate": "@vant/weapp/rate/index"
  },
  "navigationBarTitleText": "面试题"
}
  • pages/interview/interview.wxml
<view class="container">
  <scroll-view style="white-space: nowrap;">
    <view
      class='tab {{index==currentIndex?"active":""}}'
      wx:for="{{tabs}}"
      wx:for-item="tab"
      wx:key="index"
      data-index="{{index}}"
      bind:tap="switchTab"
    >
      {{tab}}
    </view>
  </scroll-view>
</view>
<swiper current="{{currentIndex}}">
  <swiper-item
    wx:for="{{tabs}}"
    wx:for-item="tab"
    wx:key="index"
  >
    {{tab}}
  </swiper-item>
</swiper>
  • pages/interview/interview.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: ["css", "js", "html", "vue", "react", "typescript", "node"],
    currentIndex: -1,
    lists: [],
    computedHeight: 0,
  },
  async swipe(currentIndex) {
    console.log(currentIndex);
    if (currentIndex == this.data.currentIndex) return;
    this.setData({
      currentIndex,
    });
  },
  switchTab(e) {
    this.swipe(e.currentTarget.dataset.index);
  },
});

动态获取DOM并得到尺寸

  • pages/interview/interview.json
{
  "usingComponents": {
    "van-rate": "@vant/weapp/rate/index"
  },
  "navigationBarTitleText": "面试题"
}
  • pages/interview/interview.wxml
<swiper
  current="{{currentIndex}}"
  bindchange="switchSwiper"
  style="height:{{computedHeight}}px"
>
  <swiper-item
    wx:for="{{tabs}}"
    wx:for-item="tab"
    wx:key="index"
  >
    <view class="swiper-item-{{index}}">
      <block
        wx:for="{{lists}}"
        wx:for-item="list"
        wx:key="index"
      >
        <text>{{list.title}}</text>
        55555
      </block>
    </view>
  </swiper-item>
</swiper>
  • pages/interview/interview.js
Page({
  data: {
    tabs: ["css", "js", "html", "vue", "react", "typescript", "node"],
    currentIndex: -1,
    lists: [],
    computedHeight: 0,
  },
  async swipe(currentIndex) {
    //动态获取swiper-item的高度
    let selector = wx.createSelectorQuery();
    selector.select(`.swiper-item-${currentIndex}`).boundingClientRect();
    selector.exec((res) => {
      console.log(`res-->`, res);
    });
  },
  onLoad(options) {
    this.swipe(0); // 解决第一个不显示问题
  },
});

应用的动态尺寸

  • pages/interview/interview.json
{
  "usingComponents": {
    "van-rate": "@vant/weapp/rate/index"
  },
  "navigationBarTitleText": "面试题"
}
  • pages/interview/interview.wxml
<view class="container">
  <scroll-view style="white-space: nowrap;">
    <view
      class='tab {{index==currentIndex?"active":""}}'
      wx:for="{{tabs}}"
      wx:for-item="tab"
      wx:key="index"
      data-index="{{index}}"
      bind:tap="switchTab"
    >
      {{tab}}
    </view>
  </scroll-view>
</view>
<swiper
  current="{{currentIndex}}"
  bindchange="switchSwiper"
  style="height:{{computedHeight}}px"
>
  <swiper-item
    wx:for="{{tabs}}"
    wx:for-item="tab"
    wx:key="index"
  >
    <view class="swiper-item-{{index}}">
      <block
        wx:for="{{lists}}"
        wx:for-item="list"
        wx:key="index"
      >
        <text>{{list.title}}</text>
        <view class="interview-oprater">
          <van-rate
            custom-class="rate"
            value="{{ list.hard }}"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
            bind:change="onChange"
          />
        </view>
      </block>
    </view>
  </swiper-item>
</swiper>
  • pages/interview/interview.js
import { get } from "../../utils/request";

// pages/interview/interview.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    tabs: ["css", "js", "html", "vue", "react", "typescript", "node"],
    currentIndex: null,
    lists: [],
    coumputedHeight: 0,
  },
  async swipe(currentIndex) {
    if (currentIndex === this.data.currentIndex) {
      return;
    }
    this.setData({
      currentIndex,
    });
    //
    const type = this.data.tabs[this.data.currentIndex];
    // console.log("type", type);

    const { interview: lists } = await get("/interview", {
      data: {
        type,
      },
    });
    console.log("lists", lists);
    this.setData({ lists });

    //动态获取swiper-item的高度
    let selector = wx.createSelectorQuery();
    selector.select(`.swiper-item-${currentIndex}`).boundingClientRect();
    selector.exec((res) => {
      console.log("res", res);
      let height = res?.[0]?.height;
      if (height == null) {
        return;
      }
      this.setData({
        coumputedHeight: height,
      });
    });
  },

  switchTab(e) {
    this.swipe(e.currentTarget.dataset.index);
  },

  switchSwiper(e) {
    this.swipe(e.detail.current);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.swipe(0);
  },
});

收藏课程

  • pages/lesson/lesson.json
{
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "van-button": "@vant/weapp/button/index"
  },
  "navigationBarTitleText": "课程中心"
}
  • pages/lesson/lesson.wxml 收藏按钮的展示。
<view
  class="lesson"
  wx:for="{{lessonLists}}"
  wx:for-item="list"
  wx:key="index"
>
  <image src="{{list.poster}}" mode="aspectFill"></image>
  <view class="lesson-info">
    <text>{{list.title}}</text>
    <view class="btn-list">
      <van-button
        type="warning"
        bind:tap="toCollect"
        data-lesson="{{list}}"
      >收藏
      </van-button>
    </view>
  </view>
</view>
  • pages/lesson/lesson.js 收藏的逻辑。
Page({
  data: {
    lessonLists: [
      {
        _id: "64536367a5d86043a3d99d67",
        title: "谈谈你对SPA单页应用的理解，它的优缺点是是什么",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/2.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
      {
        _id: "64536367a5d86043a3d99d6b",
        title: "Vue生命周期的理解",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/4.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
      {
        _id: "64536367a5d86043a3d99d68",
        title: "谈谈你对vue的理解",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/1.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
      {
        _id: "64536367a5d86043a3d99d69",
        title: "v-if和v-for哪个优先级更高",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/3.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
    ],
    collectLesson: {},
  },
  toCollect(e) {
    const lesson = e.currentTarget.dataset.lesson;
    this.data.collectLesson[lesson._id] = lesson;
    wx.setStorageSync("collect", this.data.collectLesson);
  },
});
  • pages/collect-list/collect-list.wxml 已收藏页面的展示。
<van-cell
  is-link
  wx:for="{{lists}}"
  wx:key="index"
  title="{{item.title}}"
  bind:tap="redirect"
/>
  • pages/collect-list/collect-list.js 已收藏页面的逻辑
Page({
  data: {
    lists: [],
  },
  onLoad(options) {
    let lists = wx.getStorageSync("collect");
    if (!lists) return;
    this.setData({
      lists: Object.values(lists),
    });
  },
  redirect() {
    wx.switchTab({
      url: "/pages/lesson/lesson",
    });
  },
});
  • pages/collect-list/collect-list.json
{
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"
  }
}

课程的筛选

  • pages/lesson/lesson.json
{
  "usingComponents": {
    "van-search": "@vant/weapp/search/index",
    "van-button": "@vant/weapp/button/index"
  },
  "navigationBarTitleText": "课程中心"
}
  • pages/lesson/lesson.wxml
<van-search
  value="{{ value }}"
  placeholder="请输入搜索的内容"
  bind:search="onSearch"
/>
<view
  class="lesson"
  wx:for="{{computeLists}}"
  wx:for-item="list"
  wx:key="index"
>
  <image src="{{list.poster}}" mode="aspectFill"></image>
  <view class="lesson-info">
    <text>{{list.title}}</text>
  </view>
</view>
  • pages/lesson/lesson.js
Page({
  data: {
    value: "",
    url: "",
    lessonLists: [
      {
        _id: "64536367a5d86043a3d99d67",
        title: "谈谈你对SPA单页应用的理解，它的优缺点是是什么",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/2.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
      {
        _id: "64536367a5d86043a3d99d6b",
        title: "Vue生命周期的理解",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/4.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
      {
        _id: "64536367a5d86043a3d99d68",
        title: "谈谈你对vue的理解",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/1.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
      {
        _id: "64536367a5d86043a3d99d69",
        title: "v-if和v-for哪个优先级更高",
        poster: "https://static.zhufengpeixun.com/1_1689731473030.webp",
        url: "https://zishui.oss-cn-beijing.aliyuncs.com/3.mp4",
        __v: 0,
        desc: "常见vue面试题",
      },
    ],
    collectLesson: {},
    computeLists: [],
  },
  onSearch(e) {
    //console.log(e.detail) 搜索框里输入的内容
    let lessonLists = this.data.lessonLists;
    if (e.detail == "") {
      this.setData({
        computeLists: lessonLists,
      });
    }
    //lessonLists  [{title:""},{title:"123"}]
    this.setData({
      computeLists: lessonLists.filter((item) => item.title.includes(e.detail)),
    });
  },
  onLoad(options) {
    this.setData({
      computeLists: this.data.lessonLists,
    });
  },
});

分享功能

原生上方分享

  1. wx.showShareMenu()允许当前页面可以被用户分享。

    Page({
  onLoad(options) {
    wx.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
  },
})

  2. 修改用户分享到朋友圈的标题

    Page({
  onShareTimeline(){
    return {
      title:"珠峰珠峰"
    }
  }
})

自定义分享按钮

  1. 设置自定义分享按钮

    • pages/mime/mime.wxml

      <button type="info" open-type="share">分享小程序</button>

  2. 定义分享相关回调

    • pages/mime/mime.js

      Page({
  /**
  * 用户点击右上角分享
  */
  onShareAppMessage() {
    //分享结束后触发
    return {
      title: "珠峰学堂",
      path: "/page/index/index",
      success: function (res) {
        console.log("分享成功", res);
      },
      fall: function (res) {
        console.log("分享失败", res);
      },
    };
  },
});

  3. 修改用户分享到朋友圈的标题

    • pages/mime/mime.js

      Page({
  onShareTimeline(){
    return {
      title:"珠峰珠峰"
    }
  }
})

打包发到线上

微信小程序开发中主要使用的文档

  1. weui - 微信小程序推荐的官方UI框架-很少人使用
  2. vant-weapp - 实际开发中常用的主流UI框架
  3. swiper - 微信小程序原生组件-微信小程序中常用的

进阶参考

  1. weui - 微信小程序推荐的官方UI框架-很少人使用
  2. vant-weapp - 实际开发中常用的主流UI框架
  3. swiper - 微信小程序原生组件-微信小程序中常用的
方朝端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[转]PKM－个人知识体系建设
dbbv11995的博客
07-20 1万+
这里集中了本站所有关于个人知识库、个人知识体系方面的文章，下面是展开的目录： PKM理论和方法 艾宾浩斯与他的遗忘曲线 记忆核系统 资料整理的方法 电子资料整理技巧 图书馆馆藏电子资料管理方法分析 浅谈资料...
20230718----重返学习-微信小程序初步
seetoyou的博客
07-19 134
立即注册微信小程序前往注册首页小程序发布流程小程序开发与管理开发设置开发开发管理开发设置小程序。
Springboot小区物业服务平台-计算机毕业设计源码35514
vx_cxsj813的博客
04-22 1252
本设计主要实现集人性化、高效率、便捷等优点于一身的小区物业服务平台 ，完成首页、系统用户、物业公告、业主信息、登记报修、缴费管理、房产信息等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。小区物业服务平台开发是采用基于 MVVM模式的springboot框架进行开发，使用 MyEclipse编译器编写，数据方面主要采用的是微软的MySQL关系型数据库来作为数据存储媒介，配合前台HTML+CSS 技术完成系统的开
flask旅游数据可视化 毕业设计-附源码81319
Vxin_CXSJ881的博客
06-15 835
旅游数据可视化主要功能模块包括景点数据、热门景点，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取MySQL作为后台数据的系统用户、管理员主要存储单元，采用flask框架、 python技术进行业务系统的编码及其开发，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。针对旅游数据可视化 的各项需求以及技术问题进行分析，证明了系统的必要性和技术可行性。
学生宿舍管理系统 毕业设计-附源码58493
weixin_61498557的博客
07-30 1936
学生宿舍管理系统在对需求做解析后，整个系统主要分为两个部分：管理员和学生用户、宿管用户，每个模块下的分支功能不一样。对功能做出如下说明： 学生模块： 账号登录认证。 管理个人资料信息，修改可修改的信息项。 宿舍信息：同时查看宿舍具体信息。 缺勤记录：同时查看历史已学生的缺勤记录。 报修记录：对于历史已报修的记录。 管理员模块： 维护学生用户：审核学生用户的账号，可以冻结学生用户的登录权限，或者删除学生用户账号。 公告维护：管理员发布公告，公布一些必要的消息，让学生和宿管浏览。 宿舍信息：对宿舍信息进行维护.
20230721----重返学习-vue3实战项目初步
seetoyou的博客
07-21 103
而我们项目中，有一些配置相关的代码是在node环境下跑的，一般我们需要让这些在node环境下跑的代码后缀写成cjs，以便区分项目中的代码是跑在ESModule还是node。src/installVant.js 配置一些不能直接按需导入的全局属性及全局方法，以插件的形式来写，让相关功能的代码更统一在一起。.eslintrc.cjs 配置让项目环境支持node的CommonJS规范及浏览器的ES6Module规范。把css文件中的px单位转成rem，具体转换比例看postcss.config.cjs。
SSM思政课程学习平台的设计与实现-计算机毕业设计源码54576
vx1_Biye_Design的博客
08-20 242
本研究旨在基于SSM框架设计和实现一个思政课程学习平台，涉及教师用户、学生用户、管理员、选课信息、教学资源、完成作业、课程信息和交流管理等关键功能模块。该平台的目标是提供便捷、高效的思政课程学习服务，促进学生思想政治教育的全面发展。通过采用SSM框架，该平台具备灵活性和可扩展性，能够满足不同规模学校和教学需求的要求。用户界面的设计和交互流程的优化，使得平台易于使用，并提供良好的用户体验。该思政课程学习平台的研究和实现旨在促进思想政治教育的有效开展，提高学生的思想道德素质和综合能力。通过集中管理课程信息...
SSM小区车辆信息管理系统-计算机毕业设计源码06111
VX_DZbishe的博客
06-19 955
实现集人性化、高效率、便捷等优点于一身的小区车辆信息管理系统完成首页、人员管理、车辆档案、进入记录、外出记录、车辆收费等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。
Springboot智慧食堂的设计与实现 毕业设计-附源码78635
最新发布
DZbishe的博客
08-29 356
智慧食堂的研究旨在设计和开发一个基于智能技术的食堂管理系统，以提升食堂的运营效率和用户体验。该系统主要包括商城管理、食堂菜谱、用户催单、取消订单等功能模块，本文设计开发的“Springboot智慧食堂”采用Springboo框架，B/S结构，以MySQL为数据库，并选用IDEA进行系统设计。 关键词：智慧食堂；Java编程语言；MySQL数据库
基于射频技术的门禁管理系统
m0_46152035的博客
05-26 4993
引言 随着科学水平的不断提高,基于 RFID 技术的门禁管理系统日渐成熟,现如今已被各大高校，公司，政府机关等敏感区域使用，其强大的功能已为人们深刻认识,它已进入人类社会的各大安全防范领域并发挥着至关重要的作用。越来越多的管理人员意识到门禁管理系统的重要性，而且在未来几年内可以预见到，基于 RFID 技术的门禁管理系统将随着技术的发展逐步普及到学校，住宅，以及人们日常可接触到的公共场合，成为一种为大众所熟知的日常设施。本文是对此次毕业设计的详细描述和分析，将以此为基础对现阶段市场上出现的基于 RFID 技术
git基本操作
qq_33993729的博客
11-21 344
为什么学习git的使用? 现在写的程序出版本是在文件夹后面加个v1,v2…,不好管理,在方仓医院里面的顺丰工程师之间合作用到就是git进行版本控制,为了后续更好的管理程序版本,更好的和其他人员合作交流,所以简单学习一下git的使用,可以在qt中通过git进行版本控制。 一、git初步学习 廖雪峰的git教程 1.安装及配置 # install sudo apt-get update sudo apt-get install git # config git config --global user.name
图形世界分裂的两派——理清Direct3D和OpenGL的脉络
weixin_30616969的博客
01-31 702
计算机三维图形是指将用数据描述的三维空间通过计算转换成二维图像并显示或打印出来的技术，API(Application Programming Interface)即“应用程序接口”是连接应用程序与操作系统、实现对计算机硬件控制的纽带，Direct3D和OpenGL是目前的两大3D图形 API，要在你的3D显卡上进行3D特效的制作、实现都必须通过它们（Vooodoo迷们肯定对Glide接口记忆尤...
图形世界分裂的两派——理清D3D和OpenGL的脉络
qq_44894420的博客
04-13 562
图形世界分裂的两派——理清D3D和OpenGL的脉络
【AI学习】在魔塔社区玩Ollama：部署GLM4和CodeGeeX4
bylander的博客
08-27 565
尝试了一下CodeGeeX4-ALL-9B 的Ollama部署。GPU要明显快很多，CPU的速度，也还凑合吧
html+css+js网页设计 个人博客模版 我的学习经历7个页面
qq_42431718的博客
08-28 249
html+css+js网页设计 个人博客模版 我的学习经历7个页面 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
vue.js学习步骤
m0_63178019的博客
08-23 1127
Vue.js 从一个简单的实验性项目成长为一个功能强大、社区活跃的前端框架，其发展历程展示了它对前端开发的持续创新和改进。通过引入先进的功能和不断扩展的生态系统，Vue.js 为开发者提供了一个高效、灵活的工具，满足了不同规模和复杂度应用的需求。
Golang学习笔记-Golang中的锁
qq_24428851的博客
08-25 1370
Go标准库的中的sync.Cond是一个条件变量，它可以让一系列的goroutine都在满足特定条件下时候被唤醒，每一个 sync.Cond 结构体在初始化时都需要传入一个互斥锁，我们可以通过下面的例子了解它的使用方法。因为请求的哈希在业务上一般表示相同的请求，所以上述代码使用它作为请求的键。这个是Go语言的扩展包中提供的另外一个信号量，它能够在一个服务中抑制对下游的多次重复请求，比如在redis的缓存雪崩中，能够限制对同一个 Key 的多次重复请求，减少对下游的瞬时流量。上述两个加起来，只占用8个字节。
学习大数据DAY44 帆软 report 配置
shh2000424的博客
08-23 1479
署，并设置服务器开机自启动，并请实操演示 得分点（完成得满分，未完成得。服务器容器的端口修改，并将内存调大，请实操演示 得分点（完成得。2 部署 tomcat web 服务。1 安装帆软 report v11。配置环境变量 推荐用自己的名字。等几秒查看下进程或者端口。3 显示 帆软 报表平台。分 服务器开机自启动。初始化设置下用户和密码。在它的第二行上面添加。
CVE-2019-16759漏洞原理详解
08-19
### 回答1： 这个问题我可以回答。CVE-2019-16759漏洞是LibreOffice软件中的一个漏洞，攻击者可以利用该漏洞通过特制的ODF文档文件来执行任意代码。该漏洞的原理是由于LibreOffice在处理ODF文档时，没有正确地验证...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值