【前端知识】手搓微信小程序

news2025/1/8 18:11:33

微信小程序开发介绍

    • 知识概述
    • 语法解析
      • 一、WXML(WeiXin Markup Language)
      • 二、WXSS(WeiXin Style Sheet)
      • 三、JavaScript
      • 四、JSON
    • WXML 标签
    • 核心JS语法
      • 1. 页面配置与生命周期
      • 2. 数据绑定
      • 3. 事件处理
      • 4. 微信小程序API调用
      • 5. 模块化
      • 6. 全局状态管理
      • 注意事项
    • 核心Api
    • 样例展示
      • 1. 项目结构
      • 2. 全局配置(app.json)
      • 3. 用户列表页(user-list)
        • user-list.wxml
        • user-list.js
        • user-list.wxss
      • 4. 用户编辑页(user-edit)
        • user-edit.wxml
        • user-edit.js
        • user-edit.wxss
      • 注意事项
    • 相关链接

知识概述

微信小程序开发涉及多个方面的知识,以下是详细说明:

一、开发前的准备

  1. 账号注册与开发环境搭建
    • 首先,需要在微信公众平台注册一个小程序账号。这个账号用于管理小程序的基本信息、发布版本等操作。
    • 安装微信开发者工具,它是开发微信小程序的专用工具。可以从微信官方网站下载适合自己操作系统的版本。该工具提供了代码编辑、调试、预览等功能,方便开发者进行小程序开发。
  2. 熟悉开发文档
    • 微信官方提供了详细的小程序开发文档。这些文档涵盖了小程序开发的各个方面,包括框架、组件、API等内容。在开发前,需要仔细阅读并熟悉这些文档,以便更好地利用微信小程序提供的各种功能。

二、小程序框架知识

  1. 架构概述
    • 微信小程序采用了MVVM(Model - View - ViewModel)架构。Model层负责数据存储,View层是用户界面,ViewModel层用于数据绑定和事件处理。这种架构使得数据和视图分离,方便开发者进行维护和更新。
    • 小程序的页面由wxml(类似HTML,用于构建页面结构)、wxss(类似CSS,用于样式设计)和js(用于逻辑处理)文件组成。
  2. 页面路由与生命周期
    • 小程序的页面路由管理着页面之间的跳转。它有多种跳转方式,如navigateTo(保留当前页面,跳转到应用内的某个页面)、redirectTo(关闭当前页面,跳转到应用内的某个页面)等。
    • 每个小程序页面都有自己的生命周期函数,例如onLoad(页面加载时触发)、onShow(页面显示时触发)、onHide(页面隐藏时触发)等。这些生命周期函数可以用于初始化数据、请求网络数据、更新页面状态等操作。

三、小程序组件知识

  1. 常用组件介绍
    • 视图容器组件
      • view:类似于HTML中的div,是一个块级容器,用于布局和包裹其他组件。例如,可以用它来划分页面的不同区域。
      • scroll - view:提供滚动功能,当内容超出容器范围时,可以通过滚动来查看全部内容。常用于长列表或者内容较多的区域。
    • 基础内容组件
      • text:用于显示文本内容,支持长按选中等基本的文本操作。可以通过样式设置文本的颜色、大小等属性。
      • image:用于展示图片。可以设置图片的路径、模式(如缩放模式、裁剪模式)等属性。
  2. 组件属性与事件
    • 每个组件都有自己的属性,这些属性用于控制组件的外观和行为。例如,image组件的src属性用于指定图片的来源路径,width和height属性用于设置图片的尺寸。
    • 组件还可以触发事件,如bindtap事件(当用户点击组件时触发)。开发者可以在js文件中定义事件处理函数,来响应这些事件。例如,当用户点击一个按钮(button组件)时,可以触发一个函数来执行登录、提交表单等操作。

四、小程序API知识

  1. 网络请求API
    • 小程序通过wx.request API来发送网络请求。开发者可以使用这个API向服务器获取数据或者提交数据。例如,可以请求一个接口来获取商品列表信息,或者提交用户的订单信息。在请求时,需要设置请求的URL、请求方法(如GET、POST)、请求头和请求数据等参数。
  2. 用户信息API
    • 小程序可以获取用户的基本信息,如wx.getUserInfo API。不过,由于隐私保护等原因,获取用户信息的方式有所变化。现在需要用户主动授权后,才能获取更详细的信息。这些信息可以用于个性化服务、用户登录等场景。
  3. 本地存储API
    • wx.setStorageSync和wx.getStorageSync等API用于本地存储。可以将一些小型的数据,如用户的设置偏好、登录凭证等存储在本地,方便下次使用。这种本地存储方式类似于浏览器的localStorage,但在小程序中有自己的存储规则和限制。

五、小程序的调试与发布

  1. 调试方法
    • 在微信开发者工具中,可以使用调试器来检查代码中的错误。调试器提供了控制台(可以查看日志信息)、元素检查(查看页面结构和样式)、网络检查(查看网络请求情况)等功能。
    • 还可以在真机上进行调试,通过扫描开发者工具提供的二维码,将小程序安装到手机上进行测试,这样可以更好地发现一些在模拟器中无法发现的问题,如手机性能相关的问题。
  2. 发布流程
    • 当小程序开发完成并经过测试后,需要在微信公众平台提交审核。审核人员会根据微信小程序的相关规则,如内容合规性、功能完整性等进行审核。
    • 审核通过后,就可以将小程序发布到微信小程序商店,供用户搜索和使用。发布后,还可以根据用户反馈和业务需求对小程序进行更新和维护。

语法解析

微信小程序是一套用于构建微信小程序的框架,它包含了一系列的语法和规则,用于描述小程序的结构、样式、行为和配置。以下是对微信小程序语法的详细解析:

一、WXML(WeiXin Markup Language)

WXML是微信小程序的标记语言,类似于HTML,用于描述小程序的结构。它包含标签、属性和事件等元素。

  1. 数据绑定

    • 使用双花括号{{}}进行数据与模板的绑定。例如,<view>{{message}}</view>,其中message是页面数据中的一个变量。
    • 组件属性也可以使用数据绑定。例如,<view id="item-{{id}}"></view>,其中id是页面数据中的一个变量。
  2. 条件渲染

    • 使用wx:ifwx:elifwx:else进行条件渲染。当表达式的值为真时,渲染对应的代码块。例如,<view wx:if="{{condition}}">条件为真时显示的内容</view>
    • 也可以使用hidden属性进行条件渲染,但它是通过控制元素的显示与隐藏来实现的,而不是真正地移除或添加元素。例如,<view hidden="{{condition}}">条件为真时隐藏的内容</view>
  3. 列表渲染

    • 使用wx:for进行列表渲染,通过遍历数组来重复渲染组件。例如,<view wx:for="{{array}}" wx:key="id">{{item.message}}</view>,其中array是页面数据中的一个数组,item是数组中的当前元素,id是元素的唯一标识符。
  4. 事件绑定

    • 使用bind关键字进行事件绑定。例如,<button bindtap="tapHandler">点击我</button>,其中tapHandler是事件处理函数的名称。

二、WXSS(WeiXin Style Sheet)

WXSS是微信小程序的样式表语言,类似于CSS,用于描述小程序的样式。

  1. 尺寸单位

    • WXSS引入了响应式长度单位rpx,可以根据屏幕宽度进行自适应。例如,在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,即1rpx=0.5px=1物理像素。
  2. 样式导入

    • WXSS支持样式导入功能,可以使用@import语句导入外部样式表。例如,@import "common.wxss";
  3. 选择器

    • WXSS支持多种选择器,如元素选择器、类选择器、ID选择器等。但需要注意的是,小程序不支持通配符*选择器。

三、JavaScript

JavaScript在微信小程序中用于描述小程序的交互逻辑,包括数据处理、事件响应等。

  1. 页面构造器Page

    • 使用Page函数来注册一个页面,并指定页面的初始数据、生命周期回调、事件处理函数等。例如:
Page({
  data: {
    message: 'Hello, Mini Program!'
  },
  onLoad: function() {
    // 页面加载时触发
  },
  changeMessage: function() {
    // 修改消息内容
    this.setData({
      message: 'New Message'
    });
  }
});
  1. 全局数据

    • App函数中定义的全局数据可以在各个页面中通过getApp()函数获取到。例如,appData = getApp(); console.log(appData.globalData);
  2. 事件处理

    • 在WXML中绑定的事件会在对应的JavaScript文件中找到相应的事件处理函数进行处理。例如,<button bindtap="tapHandler">点击我</button>对应的事件处理函数为tapHandler

四、JSON

JSON在微信小程序中用于描述小程序的配置信息,包括页面路径、窗口样式等。

  1. 页面配置
    • app.json文件中配置小程序的页面路径、窗口样式等信息。例如:
{
  "pages": [
    "pages/index/index",
    "pages/about/about"
  ],
  "window": {
    "navigationBarTitleText": "My Mini Program"
  }
}
  1. 组件配置
    • 在页面的*.json文件中可以配置该页面的组件信息、样式等。例如,在index.json文件中配置页面的样式信息。

综上所述,微信小程序语法包括WXML、WXSS、JavaScript和JSON四个部分,它们共同构成了微信小程序的结构、样式、交互和配置等方面的内容。

WXML 标签

WXML(WeiXin Markup Language)是微信小程序的标记语言,它类似于HTML,但有一些专为微信小程序设计的特性和标签。WXML主要用于描述微信小程序的页面结构。

以下是一些常见的WXML标签及其用途:

  1. 视图容器标签

    • <view>:一个通用的容器标签,类似于HTML中的<div>
    • <scroll-view>:可滚动的视图容器。
    • <swiper>:滑块视图容器,用于实现轮播图效果。
    • <swiper-item>:仅在<swiper>组件中有效,表示滑块视图容器中的每一项。
  2. 基础内容标签

    • <text>:文本标签,用于显示文本内容。
    • <rich-text>:富文本标签,用于显示富文本内容。
    • <icon>:图标标签,用于显示图标,通常配合type属性使用。
  3. 表单相关标签

    • <input>:输入框标签,用于接收用户输入。
    • <textarea>:多行输入框标签。
    • <button>:按钮标签,用于触发事件。
    • <checkbox>:多选框标签。
    • <radio>:单选框标签。
    • <picker>:选择器标签,用于从预定义的数据集中选择一项。
    • <slider>:滑动选择器标签,用于选择一个范围内的值。
    • <switch>:开关选择器标签,用于表示两种状态之间的切换。
  4. 导航标签

    • <navigator>:页面导航标签,用于跳转到其他页面。
  5. 媒体标签

    • <image>:图片标签,用于显示图片。
    • <video>:视频标签,用于播放视频。
    • <audio>:音频标签,用于播放音频(但在微信小程序中不常用,通常使用<video>组件播放音频)。
  6. 其他标签

    • <canvas>:画布标签,用于绘制图形。
    • <map>:地图标签,用于显示地图。
    • <web-view>:用于显示网页内容的标签(但需要注意,小程序中的<web-view>组件需要在app.json中配置域名白名单)。

WXML标签可以嵌套使用,以构建复杂的页面结构。同时,WXML支持数据绑定和事件处理,这使得开发者可以轻松地实现动态页面和交互功能。

在使用WXML时,开发者需要注意以下几点:

  • 标签名是大小写不敏感的,但推荐使用小写。
  • 标签的属性名是大小写敏感的,必须使用小写。
  • 某些标签具有特定的属性和事件,开发者需要参考微信小程序官方文档来了解这些属性和事件的具体用法。

核心JS语法

微信小程序的核心JavaScript部分主要涉及页面的逻辑处理、数据绑定、事件处理以及与微信小程序的API进行交互。在微信小程序中,每个页面通常都有一个对应的.js文件,该文件包含了页面的逻辑代码。

以下是一些微信小程序核心JavaScript的关键点:

1. 页面配置与生命周期

每个页面的.js文件中,通常会有一个Page函数的调用,用于定义页面的初始数据、生命周期函数、事件处理函数等。

Page({
  data: {
    // 页面的初始数据
  },
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    // options参数包含了打开当前页面路径中的参数
  },
  // 其他生命周期函数,如onReady、onShow、onHide、onUnload等
  // 事件处理函数
  // 其他自定义函数
});

2. 数据绑定

页面的数据通过data对象进行定义,然后在WXML模板中使用双大括号{{ }}进行数据绑定。当数据发生变化时,页面会自动更新。

// 在Page的data对象中定义数据
data: {
  message: 'Hello, World!'
}
<!-- 在WXML模板中使用数据绑定 -->
<text>{{message}}</text>

3. 事件处理

在WXML模板中,可以为组件绑定事件处理函数。当事件发生时,对应的事件处理函数会在页面的JavaScript文件中被调用。

<!-- 在WXML模板中绑定点击事件 -->
<button bindtap="handleTap">Click Me</button>
// 在Page中定义事件处理函数
handleTap: function() {
  // 处理点击事件的逻辑
  wx.showToast({
    title: 'Button Clicked!',
    icon: 'success'
  });
}

4. 微信小程序API调用

微信小程序的JavaScript代码可以调用微信提供的API,以实现各种功能,如网络请求、本地存储、用户授权等。

wx.request({
  url: 'https://example.com/api', // 请求的接口地址
  data: {
    // 请求的参数
  },
  success: function(res) {
    // 请求成功的回调函数
    console.log(res.data);
  },
  fail: function(err) {
    // 请求失败的回调函数
    console.error(err);
  }
});

5. 模块化

微信小程序支持使用ES6模块语法进行模块化开发。可以将常用的功能封装成模块,然后在需要的地方引入。

// utils.js - 定义一个模块
function add(a, b) {
  return a + b;
}

module.exports = {
  add: add
};
// 在其他文件中引入模块
const utils = require('../../utils/utils.js');

Page({
  // ...
  someFunction: function() {
    const result = utils.add(1, 2);
    console.log(result); // 输出3
  }
  // ...
});

6. 全局状态管理

对于复杂的应用,可能需要使用全局状态管理来管理应用的状态。微信小程序没有内置的状态管理工具,但可以使用第三方库(如Redux、MobX等)或自己实现一个简单的全局状态管理方案。

注意事项

  • 避免在页面的onLoadonReady等生命周期函数中执行耗时操作,以免影响页面加载性能。
  • 合理使用微信小程序的API,注意API的调用频率和限制。
  • 保持良好的代码风格和结构,有助于提高代码的可读性和可维护性。

核心Api

微信小程序的API非常丰富,涵盖了网络请求、界面交互、用户信息、媒体操作、地理位置、文件操作、数据缓存、WebSocket通信等多个方面。以下是一些常用的微信小程序API,以表格形式展示:

API类别API名称描述
网络请求wx.request发起网络请求
wx.uploadFile上传文件
wx.downloadFile下载文件
界面交互wx.showToast显示消息提示框
wx.showModal显示模态对话框
wx.showLoading显示加载框
wx.hideLoading隐藏加载框
wx.showActionSheet显示操作菜单
wx.setNavigationBarTitle设置导航栏标题
wx.setNavigationBarColor设置导航栏颜色
用户信息wx.login登录
wx.checkSession检查登录态是否过期
wx.getUserInfo获取用户信息
媒体操作wx.chooseImage从相册或相机中选择图片
wx.previewImage预览图片,支持多张图片预览
wx.saveImageToPhotosAlbum保存图片到相册
wx.playVoice播放语音
wx.pauseVoice暂停语音播放
wx.stopVoice停止语音播放
wx.playBackgroundAudio播放背景音乐
wx.pauseBackgroundAudio暂停背景音乐
wx.seekBackgroundAudio控制背景音乐播放进度
wx.stopBackgroundAudio停止背景音乐播放
地理位置wx.getLocation获取当前地理位置
wx.chooseLocation选择地理位置
wx.openLocation打开地图选择位置
文件操作wx.saveFile保存文件到本地
wx.getSavedFileList获取本地已保存的文件列表
wx.getSavedFileInfo获取本地文件的文件信息
wx.removeSavedFile删除本地文件
wx.openDocument打开文档
数据缓存wx.getStorageSync从本地缓存中获取数据
wx.setStorageSync将数据存储到本地缓存中
WebSocket通信wx.connectSocket创建一个WebSocket连接
wx.onSocketOpen监听WebSocket连接打开事件
wx.onSocketMessage监听WebSocket接受到服务器的消息事件
wx.sendSocketMessage通过WebSocket连接发送数据
wx.onSocketError监听WebSocket错误事件
wx.closeSocket关闭WebSocket连接
其他wx.scanCode扫码
wx.getNetworkType获取网络类型
wx.getSystemInfo获取系统信息
wx.getBatteryInfo获取电池信息
wx.makePhoneCall拨打电话
wx.vibrateLong长时间振动
wx.vibrateShort短时间振动
wx.setClipboardData设置剪贴板数据
wx.getClipboardData获取剪贴板数据
wx.onNetworkStatusChange监听网络状态变化事件
wx.onBatteryStatusChange监听电量变化事件
wx.startAccelerometer开始监听加速度数据
wx.stopAccelerometer停止监听加速度数据
wx.startCompass开始监听罗盘数据
wx.stopCompass停止监听罗盘数据

请注意,这个列表并不完整,微信小程序还在不断更新和扩展其API。为了获取最新和最全面的API信息,建议查阅微信官方文档。

样例展示

开发一个微信小程序,其中包含用户列表页和用户数据编辑页,涉及多个文件的编写和配置。以下是一个简化的示例,帮助你理解如何实现这一功能。

1. 项目结构

首先,我们假设你的项目结构如下:

project-root/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   ├── user-list/
│   │   ├── user-list.js
│   │   ├── user-list.json
│   │   ├── user-list.wxml
│   │   └── user-list.wxss
│   └── user-edit/
│       ├── user-edit.js
│       ├── user-edit.json
│       ├── user-edit.wxml
│       └── user-edit.wxss

2. 全局配置(app.json)

app.json中,你需要配置页面路径:

{
  "pages": [
    "pages/user-list/user-list",
    "pages/user-edit/user-edit"
  ],
  "window": {
    "navigationBarTitleText": "User List"
  }
}

3. 用户列表页(user-list)

user-list.wxml
<view class="container">
  <block wx:for="{{users}}" wx:key="id">
    <navigator url="/pages/user-edit/user-edit?id={{item.id}}">
      <view class="user-item">
        <text>{{item.name}}</text>
      </view>
    </navigator>
  </block>
  <button bindtap="navigateToAddUser">Add User</button>
</view>
user-list.js
Page({
  data: {
    users: [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' }
      // 初始用户数据
    ]
  },
  navigateToAddUser: function() {
    wx.navigateTo({
      url: '/pages/user-edit/user-edit?id=0' // 假设id为0表示添加新用户
    });
  },
  // 可以在这里添加从user-edit页面返回时更新用户列表的逻辑(如果需要)
  onLoad: function(options) {
    // 处理从其他页面返回时的数据更新(如果需要)
  }
});
user-list.wxss
/* 添加你的样式 */

4. 用户编辑页(user-edit)

user-edit.wxml
<view class="container">
  <input type="text" placeholder="Name" value="{{user.name || ''}}" bindinput="updateName" />
  <button bindtap="saveUser">Save</button>
  <button bindtap="navigateBack">Cancel</button>
</view>
user-edit.js
Page({
  data: {
    user: {}
  },
  onLoad: function(options) {
    const id = parseInt(options.id, 10);
    if (id > 0) {
      // 根据id从服务器或本地存储获取用户数据(这里简化处理)
      this.setData({
        user: { id, name: `User ${id}` } // 假设根据id获取到的用户数据
      });
    }
  },
  updateName: function(e) {
    this.setData({
      user: {
        ...this.data.user,
        name: e.detail.value
      }
    });
  },
  saveUser: function() {
    const { user } = this.data;
    // 将用户数据保存到服务器或本地存储(这里简化处理)
    // 然后返回用户列表页
    wx.navigateBack();
    // 如果需要,可以在这里发送事件或调用函数来更新用户列表页的数据
  },
  navigateBack: function() {
    wx.navigateBack();
  }
});
user-edit.wxss
/* 添加你的样式 */

注意事项

  1. 数据持久化:在实际应用中,用户数据通常存储在服务器或本地存储(如wx.setStorage)中。上面的示例为了简化处理,直接在页面中定义了初始数据。

  2. 页面间通信:如果你需要在保存用户后更新用户列表页的数据,可以考虑使用全局事件总线、页面栈操作或存储机制来实现。

  3. 错误处理:在实际应用中,你需要添加错误处理逻辑,例如网络请求失败时的提示。

  4. 导航:上面的示例使用了wx.navigateTo进行页面导航。如果你需要返回上一级页面并传递数据,可以考虑使用wx.navigateBack配合事件或全局状态管理。

  5. 样式:上面的示例没有包含具体的样式定义。你可以根据自己的需求在.wxss文件中添加样式。

相关链接

微信公众平台
微信开发者工具
小程序开发官方文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2272757.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

尚硅谷· vue3+ts 知识点学习整理 |14h的课程(持续更ing)

vue3 主要内容 核心&#xff1a;ref、reactive、computed、watch、生命周期 常用&#xff1a;hooks、自定义ref、路由、pinia、miit 面试&#xff1a;组件通信、响应式相关api ----> 笔记&#xff1a;ts快速梳理&#xff1b;vue3快速上手.pdf 笔记及大纲 如下&#xff…

阻抗(Impedance)、容抗(Capacitive Reactance)、感抗(Inductive Reactance)

阻抗&#xff08;Impedance&#xff09;、容抗&#xff08;Capacitive Reactance&#xff09;、感抗&#xff08;Inductive Reactance&#xff09; 都是交流电路中描述电流和电压之间关系的参数&#xff0c;但它们的含义、单位和作用不同。下面是它们的定义和区别&#xff1a; …

在 SQL 中,区分 聚合列 和 非聚合列(nonaggregated column)

文章目录 1. 什么是聚合列&#xff1f;2. 什么是非聚合列&#xff1f;3. 在 GROUP BY 查询中的非聚合列问题示例解决方案 4. 为什么 only_full_group_by 要求非聚合列出现在 GROUP BY 中&#xff1f;5. 如何判断一个列是聚合列还是非聚合列&#xff1f;6. 总结 在 SQL 中&#…

B树与B+树:数据库索引的秘密武器

想象一下&#xff0c;你正在构建一个超级大的图书馆&#xff0c;里面摆满了各种各样的书籍。B树和B树就像是两种不同的图书分类和摆放方式&#xff0c;它们都能帮助你快速找到想要的书籍&#xff0c;但各有特点。 B树就像是一个传统的图书馆摆放方式&#xff1a; 1. 书籍摆放&…

回归预测 | MATLAB实现CNN-SVM多输入单输出回归预测

回归预测 | MATLAB实现CNN-SVM多输入单输出回归预测 目录 回归预测 | MATLAB实现CNN-SVM多输入单输出回归预测预测效果基本介绍模型架构程序设计参考资料 预测效果 基本介绍 CNN-SVM多输入单输出回归预测是一种结合卷积神经网络&#xff08;CNN&#xff09;和支持向量机&#…

Linux-Ubuntu之裸机驱动最后一弹PWM控制显示亮度

Linux-Ubuntu之裸机驱动最后一弹PWM控制显示亮度 一&#xff0c; PWM实现原理二&#xff0c;软件实现三&#xff0c;正点原子裸机开发总结 一&#xff0c; PWM实现原理 PWM和学习51时候基本上一致&#xff0c;控制频率&#xff08;周期&#xff09;和占空比&#xff0c;51实验…

自定义校验注解

已有的注解不能满足所有的校验需求,特殊的情况需要自定义校验(自定义校验注解) 1.自定义注解,并在注解上指定校验逻辑 Constraint(validatedBy StateValidation.class) // 指定校验逻辑 package com.example.demo.validation;import jakarta.validation.Constraint; import j…

分数阶傅里叶变换代码 MATLAB实现

function Faf myfrft(f, a) %分数阶傅里叶变换函数 %输入参数&#xff1a; %f&#xff1a;原始信号 %a&#xff1a;阶数 %输出结果&#xff1a; %原始信号的a阶傅里叶变换N length(f);%总采样点数 shft rem((0:N-1)fix(N/2),N)1;%此项等同于fftshift(1:N)&#xff0c;起到翻…

Ubuntu 20.04安装gcc

一、安装GCC 1.更新包列表 user596785154:~$ sudo apt update2.安装gcc user596785154:~$ sudo apt install gcc3.验证安装 user596785154:~$ gcc --version二 编译C文件 1.新建workspace文件夹 user596785154:~$ mkdir workspace2.进入workspace文件夹 user596785154:~…

小兔鲜儿:头部区域的logo,导航,搜索,购物车

头部&#xff1a;logo ,导航&#xff0c;搜索&#xff0c;购物车 头部总体布局: 设置好上下外边距以及总体高度&#xff0c; flex布局让总体一行排列 logo&#xff1a; logo考虑搜索引擎优化&#xff0c;所以要使用 h1中包裹 a 标签&#xff0c;a 里边写内容&#xff08;到时候…

Linux C编程——文件IO基础

文件IO基础 一、简单的文件 IO 示例二、文件描述符三、open 打开文件1. 函数原型2. 文件权限3. 宏定义文件权限4. 函数使用实例 四、write 写文件五、read 读文件六、close 关闭文件七、Iseek 绍 Linux 应用编程中最基础的知识&#xff0c;即文件 I/O&#xff08;Input、Outout…

论文解读 | NeurIPS'24 IRCAN:通过识别和重新加权上下文感知神经元来减轻大语言模型生成中的知识冲突...

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 作者简介 史丹&#xff0c;天津大学博士生 内容简介 大语言模型&#xff08;LLM&#xff09;经过海量数据训练后编码了丰富的世界知识。最近的研究表明&#xff0c…

【51单片机零基础-chapter5:模块化编程】

模块化编程 将以往main中泛型的代码,放在与main平级的c文件中,在h中引用. 简化main函数 将原来main中的delay抽出 然后将delay放入单独c文件,并单独开一个delay头文件,里面放置函数的声明,相当于收纳delay的c文件里面写的函数的接口. 注意,单个c文件所有用到的变量需要在该文…

扩散模型论文概述(三):Stability AI系列工作【学习笔记】

视频链接&#xff1a;扩散模型论文概述&#xff08;三&#xff09;&#xff1a;Stability AI系列工作_哔哩哔哩_bilibili 本期视频讲的是Stability AI在图像生成的工作。 同样&#xff0c;第一张图片是神作&#xff0c;总结的太好了&#xff01; 介绍Stable Diffusion之前&…

数据库软考历年上午真题与答案解析(2018-2024)

本题考查计算机总线相关知识。 总线&#xff08;Bus&#xff09;是计算机各种功能部件之间传送信息的公共通信干线&#xff0c;它是由导线组成的传输线束。 根据总线连接设备范围的不同&#xff0c; 分为&#xff1a;1.片内总线&#xff1a;芯片内部的总线&#xff1b; 2.系统…

【three.js】模型-几何体Geometry,材质Material

模型 在现实开发中&#xff0c;有时除了需要用代码创建模型之外&#xff0c;多数场景需要加载设计师提供的使用设计软件导出的模型。此时就需要使用模型加载器去加载模型&#xff0c;不同格式的模型需要引入对应的模型加载器&#xff0c;虽然加载器不同&#xff0c;但是使用方式…

彻底学会Gradle插件版本和Gradle版本及对应关系

看完这篇&#xff0c;保你彻底学会Gradle插件版本和Gradle版本及对应关系&#xff0c;超详细超全的对应关系表 需要知道Gradle插件版本和Gradle版本的对应关系&#xff0c;其实就是需要知道Gradle插件版本对应所需的gradle最低版本&#xff0c;详细对应关系如下表格&#xff0…

预测facebook签到位置

1.11 案例2&#xff1a;预测facebook签到位置 学习目标 目标 通过Facebook位置预测案例熟练掌握第一章学习内容 1 项目描述 本次比赛的目的是预测一个人将要签到的地方。 为了本次比赛&#xff0c;Facebook创建了一个虚拟世界&#xff0c;其中包括10公里*10公里共100平方公里的…

【万字详细教程】Linux to go——装在移动硬盘里的Linux系统(Ubuntu22.04)制作流程;一口气解决系统安装引导文件迁移显卡驱动安装等问题

Linux to go制作流程 0.写在前面 关于教程Why Linux to go&#xff1f;实际效果 1.准备工具2.制作步骤 下载系统镜像硬盘分区准备启动U盘安装系统重启完成驱动安装将系统启动引导程序迁移到移动硬盘上 3.可能出现的问题 3.1.U盘引导系统安装时出现崩溃3.2.不影响硬盘里本身已有…

在 macOS 上,你可以使用系统自带的 终端(Terminal) 工具,通过 SSH 协议远程连接服务器

文章目录 1. 打开终端2. 使用 SSH 命令连接服务器3. 输入密码4. 连接成功5. 使用密钥登录&#xff08;可选&#xff09;6. 退出 SSH 连接7. 其他常用 SSH 选项8. 常见问题排查问题 1&#xff1a;连接超时问题 2&#xff1a;权限被拒绝&#xff08;Permission denied&#xff09…