微信小程序怎么制作自己的小程序?手把手带你入门(适合新手小白观看)

　　对于初学者来说，制作一款微信小程序总感觉高大上，又害怕学不会。不过，今天我就用最简单、最有耐心的方式，一步一步给大家讲清楚!让你知道微信小程序的制作，居然可以这么轻松(希望你别吓跑啊!)。文中还加了实战经验，网友案例，看完你也能轻松上手。

　　一：萌新也能搞定?做个小程序听起来真的没那么难!

　　说起微信小程序，我真的一开始觉得，那不都是那些程序员大神才会搞的吗?不过后来我发现，其实它很“贴心”地给咱们普通人也准备好了小工具。没有技术基础?没关系!谁说小白不能做出一个自己的小程序?

　　最简单的做法就是，微信小程序有一套“零代码”的搭建平台，如：微信官方开发者工具，都比较适合新手。

　　总结一句话：先放下“自己做不来”的焦虑，只要工具选得好，不会写代码的小伙伴一样能搞定!至于细节嘛，咱们慢慢来讲。

　　二：准备工作超简单，啥都不会也没事!

　　咳咳!先来和大家聊聊小程序的前期准备工作。有时候，刚入门最大的困难就是“不知道从哪里开始”，真是气死我这种急性子了!

　　注册微信小程序账号

　　打开微信公众平台 → 小程序 → 注册一个新的小程序账号。需要用邮箱哦!(不要问为啥，注册啥都要邮箱，咱也不懂，哈哈~)

　　小程序名称和简介

　　这个时候就要稍微想一想了，咱们的程序是用来做什么的?取一个有意思的名字，然后写一句话简介，比如 “同城吃喝玩乐推荐” 或者 “记账小助手”。这个好像是最简单但又最让人纠结的一步，真怕取完了觉得俗!

　　拿到 AppID(超重要!)

　　小程序后台会给你一个 AppID，后面使用工具、发布的时候都用得上，记得保存。

　　注意：就到这一步，大部分小白还在“无从下手”的困惑中，如果你卡壳了，别怕，慢慢跟着来，看完你就有感觉啦!

　　三：工具选得好，胜过努力造轮子!

　　接下来就是真正的“搭建小程序”步骤了，注意!我们讲的是零代码玩法(程序猿大神请略过，我这里超简单~)。

　　1. 用第三方工具快速生成小程序

　　像杰建云，它提供了超多模板，选一个你喜欢的风格，简单编辑内容，你的小程序就能出来了!基本就是拖拽模块 → 填充文字、图片 → 发布，真的不用写代码!

　　真实案例分享：网上上有个博主@小豆豆分享说，她用一个美食推荐模板，半天时间就做好了“附近宝藏餐厅地图”小程序，流畅又好看，真是佩服她的效率!

　　2. 使用微信开发者工具试试基础版

　　不过如果你更喜欢做个“属于自己的风格”，还是推荐你试试微信官方提供的开发者工具。虽然听起来稍微复杂，但只要你跟着文档来，其实也能慢慢摸懂!

以下是一个使用微信开发者工具搭建简单小程序的代码示例，实现一个显示待办事项列表的小程序，支持添加和删除待办事项：

1. app.js（小程序入口文件）

javascript

// app.js
App({
  onLaunch: function () {
    // 小程序初始化时执行的操作
  },
  globalData: {
    // 可以在这里定义全局数据，方便在多个页面共享数据
  }
})

这个文件主要用于小程序的初始化设置以及定义全局数据，在这个简单示例中，暂未使用到复杂的全局数据操作，但在实际开发中，比如存储用户登录信息、全局配置等场景会很有用。

2. app.json（小程序全局配置文件）

json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000",
    "navigationBarTitleText": "待办事项",
    "navigationBarTextStyle": "white"
  }
}

pages 数组指定了小程序的页面路径，这里只有一个首页 pages/index/index。window 对象则用于设置小程序窗口的一些属性，如导航栏背景颜色、标题文字颜色和背景文字样式等，让小程序界面有一个基本的样式设定。

3. pages/index/index.wxml（首页结构文件）

html

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="input-area">
    <input placeholder="输入待办事项" bindinput="onInput" />
    <button bindtap="addTodo">添加</button>
  </view>
  <view class="todo-list">
    <block wx:for="{{todoList}}" wx:key="index">
      <view class="todo-item">
        <text>{{item}}</text>
        <button bindtap="deleteTodo" data-index="{{index}}">删除</button>
      </view>
    </block>
  </view>
</view>

在这个页面结构中，有一个输入框和添加按钮用于添加待办事项。通过 wx:for 指令循环遍历 todoList 数组来展示已有的待办事项，每个待办事项后面都有一个删除按钮，用于删除对应的事项。

4. pages/index/index.wxss（首页样式文件）

css

/* pages/index/index.wxss */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.input-area {
  display: flex;
  margin-bottom: 20rpx;
}

input {
  flex: 1;
  border: 1rpx solid #ccc;
  border-radius: 5rpx;
  padding: 10rpx;
}

button {
  margin-left: 10rpx;
  padding: 10rpx 20rpx;
  background-color: #007aff;
  color: white;
  border-radius: 5rpx;
}

.todo-list {
  width: 100%;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
  padding: 10rpx 0;
}

此样式文件主要对首页的布局和元素样式进行了设置，如让容器内元素居中显示、输入框和按钮的样式调整、待办事项列表的样式以及每个待办事项项的布局样式等，使页面看起来更加美观和有条理。

5. pages/index/index.js（首页逻辑文件）

javascript

// pages/index/index.js
Page({
  data: {
    todoList: []
  },
  onInput: function (e) {
    // 输入框内容改变时触发，这里暂未做特殊处理，只是接收输入内容
    this.inputValue = e.detail.value;
  },
  addTodo: function () {
    if (this.inputValue) {
      const newTodoList = this.data.todoList.concat(this.inputValue);
      this.setData({
        todoList: newTodoList
      });
      this.inputValue = "";
    }
  },
  deleteTodo: function (e) {
    const index = e.currentTarget.dataset.index;
    const newTodoList = this.data.todoList.filter((_, i) => i!== index);
    this.setData({
      todoList: newTodoList
    });
  }
})

在首页逻辑文件中，data 里定义了 todoList 数组用于存储待办事项。onInput 函数获取输入框的输入内容并存储在 inputValue 变量中。addTodo 函数在点击添加按钮且输入框有内容时，将新的待办事项添加到 todoList 数组并更新页面数据，同时清空输入框。deleteTodo 函数根据点击删除按钮时传递的索引值，从 todoList 数组中删除对应的事项并更新页面。

在微信开发者工具中创建一个新的小程序项目后，将上述代码分别放置在对应的文件位置，就可以运行这个简单的待办事项小程序了。它能够实现待办事项的添加和删除功能，用户可以在输入框输入待办事项后点击添加按钮将其添加到列表中，点击列表中每个事项后面的删除按钮则可以删除该事项。

　　对比一下：

　　第三方平台 → 简单省事，适合新手。

　　官方开发工具 → 自定义更强大，但是上手稍慢。

　　看到这里，可能有同学开始慌：哪个更适合我?没事，我觉得第三方先练手，微信工具后面再慢慢琢磨，一步一个脚印。

　　四、上传发布是不是很复杂?别慌，带你走一遍!

　　哈哈，这可能是小程序制作最让人忐忑的一步了!传说中，“发布”是不是会失败?我试了几次，结果还是挺顺利的。虽然发布前确实有点小紧张，但搞清楚流程其实特别简单：