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

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

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

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

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

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

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

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

　　注册微信小程序账号

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

　　小程序名称和简介

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

　　拿到 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 数组中删除对应的事项并更新页面。

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

　　对比一下：

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

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

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

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

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

　　审核流程

　　第一步，把刚制作好的小程序文件提交到微信开发者后台。

　　等微信那边审核一下，看有没有啥违规内容。一般2-3个工作日内都会有结果。(唉，有时候总想催审!)

　　测试再发布

　　在测试版里，你可以让朋友试一试小程序，看它表现如何!然后再正式上线。小程序发布后，会生成一个专属二维码，扫描就可以访问啦!

　　真心建议： 有朋友吐槽说第一次审核被驳回，好尴尬!主要原因是她“图片不清晰”又没打好标签，所以，大家一定要检查检查再提交!

　　说实话，刚开始摸索小程序时，我还是挺怕麻烦的。但亲手操作一遍之后，我突然发现小程序就像做手工，步骤都拆得很细，你跟着一步步做，真的不难。

　　个人建议：

　　新手们先找现成工具试试，花2小时整一个简单版本的小程序，你就知道成功的“爽感”是什么!

　　如果你对细节要求更高，再慢慢研究官方文档，把小程序打磨得更精致。

　　我们在网上上看到有网友分享，她因为这个过程做出了一个“植物养护日记”的小程序，发布后引来了好多朋友点赞，一路上也让她找到了自信!这个是不是也能给你一点小激励?

　　好了，到这里，微信小程序制作的全过程我已经分享给你啦!从零开始到基本操作，是不是觉得没那么遥远了?制作小程序其实和玩拼图差不多，只要工具选对，做起来很轻松。

　　我觉得呀，微信小程序不仅仅是个“工具”，它还挺适合大学生用来练手，比如：

　　做一个校园活动报名工具，帮大家轻松统计数据;

　　打造一个分享日常心得的小程序，记录生活中的美好时刻;

　　甚至试一试创业，做个“校园失物招领平台”也挺有意义的!

　　看完我的分享，别光顾着收藏!大胆去试试，真心希望下一次你们能和我分享属于你的小程序小故事。别怕搞砸，手把手做一遍后，你会发现自己又学到了新技能!

　　做小程序的体验就像“种下一颗小种子”，让它长成你喜欢的模样。这次小程序简单入门攻略到这里了，如果还有疑问，评论区见呀!一起慢慢摸索更好玩的操作!