电脑两个小程序开发教程

傲晴 . 发布于 2025-09-18 07:00:23 27 浏览

电脑两个小程序开发教程🌟

随着科技的不断发展,小程序已经成为了我们生活中不可或缺的一部分，我将为大家带来两个简单易学的小程序开发教程，让你轻松入门，开启编程之旅！🚀

使用微信小程序开发工具开发一个简单的计算器🔢

准备工作

你需要下载并安装微信小程序开发工具,打开官网（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）下载最新版本，然后按照提示完成安装。

创建项目

打开微信小程序开发工具,点击“新建项目”，填写项目名称、项目目录等信息，然后点击“确定”。

编写代码

在项目目录中,找到“app.js”、“app.json”和“app.wxss”三个文件，分别进行以下操作：

app.js：在这个文件中，我们需要定义计算器的功能，以下是计算器的基本代码：

// app.js
App({
  data: {
    // 定义计算器的数据
    result: 0,
    operator: '',
    currentNum: 0
  },
  // 定义计算器的计算方法
  calculate: function() {
    // 根据operator进行计算
    switch (this.data.operator) {
      case '+':
        this.setData({
          result: this.data.currentNum + this.data.result
        });
        break;
      case '-':
        this.setData({
          result: this.data.currentNum - this.data.result
        });
        break;
      case '*':
        this.setData({
          result: this.data.currentNum * this.data.result
        });
        break;
      case '/':
        this.setData({
          result: this.data.currentNum / this.data.result
        });
        break;
    }
    // 重置操作符和当前数字
    this.setData({
      operator: '',
      currentNum: 0
    });
  }
});

app.json：在这个文件中，我们需要设置小程序的页面路径等信息，以下是计算器的配置代码：

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "计算器",
    "navigationBarTextStyle": "black"
  }
}

app.wxss：在这个文件中，我们可以设置小程序的样式，以下是计算器的样式代码：

/* app.wxss */
page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
input {
  width: 80%;
  height: 40px;
  margin-bottom: 10px;
}
button {
  width: 80%;
  height: 40px;
  margin-bottom: 10px;
}

运行小程序

在微信小程序开发工具中,点击“预览”按钮，选择“微信开发者工具”，然后在手机上打开微信，扫描二维码即可预览你的计算器小程序。

使用HTML5和CSS3开发一个简单的个人博客📝

准备工作

你需要安装一个文本编辑器,如Visual Studio Code、Sublime Text等，创建一个名为“blog”的文件夹，用于存放你的博客代码。

编写代码

在“blog”文件夹中，创建以下文件：

index.html：这是你的博客首页文件，以下是基本代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">我的个人博客</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>我的个人博客</h1>
  </header>
  <main>
    <article>
      <h2>第一篇文章</h2>
      <p>这里是第一篇文章的内容...</p>
    </article>
    <article>
      <h2>第二篇文章</h2>
      <p>这里是第二篇文章的内容...</p>
    </article>
  </main>
  <footer>
    <p>版权所有 &copy; 2021 我的个人博客</p>
  </footer>
</body>
</html>

style.css：这是你的博客样式文件，以下是基本样式代码：

/* style.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}
header {
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
}
main {
  padding: 20px;
}
article {
  margin-bottom: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}