从0开始，手把手教你制作一个微信小程序（图文详情）

于 2025-03-11 12:38:40 发布
阅读量1.9k 收藏 17
点赞数 21
分类专栏： 小程序定制 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44649780/article/details/146172061
版权

本文从0开始，手把手教你制作一个微信小程序（图文详情），欢迎大家关注！！！

成果展示

点击预定

选择入住和离店时间

点击 确定预定

 

1. 环境准备

(1) 注册微信小程序账号

  1. 访问 微信公众平台。

  2. 注册一个小程序账号（如果没有账号）。

  3. 登录后，在“开发” -> “开发设置”中获取小程序的 AppID。

(2) 安装微信开发者工具

  1. 下载并安装 微信开发者工具。

  2. 打开开发者工具，使用微信扫码登录。

  3. 创建一个新的小程序项目：

    • 项目名称：例如 HotelBooking。

    • 目录：选择一个空文件夹。

    • AppID：填写你刚刚获取的 AppID。

    • 模板：选择“小程序”（不使用云开发）。

2. 项目结构

创建以下文件和文件夹：

/miniprogram
  ├── pages
  │   ├── index
  │   │   ├── index.js
  │   │   ├── index.wxml
  │   │   ├── index.wxss
  │   │   └── index.json
  │   ├── booking
  │   │   ├── booking.js
  │   │   ├── booking.wxml
  │   │   ├── booking.wxss
  │   │   └── booking.json
  │   └── checkout
  │       ├── checkout.js
  │       ├── checkout.wxml
  │       ├── checkout.wxss
  │       └── checkout.json
  ├── app.js
  ├── app.json
  ├── app.wxss
  └── project.config.json

3. 编写代码

(1) 全局配置 (app.json)

{
  "pages": [
    "pages/index/index",
    "pages/booking/booking",
    "pages/checkout/checkout"
  ],
  "window": {
    "navigationBarTitleText": "酒店预订"
  }
}

(2) 首页 (index 页面)

index.wxml

<view class="container">
  <view class="header">
    <text>欢迎来到酒店预订系统</text>
  </view>
  <view class="content">
    <button bindtap="goToBooking">开始预订</button>
  </view>
</view>

index.js

Page({
  goToBooking: function () {
    wx.navigateTo({
      url: '/pages/booking/booking'
    });
  }
});

index.wxss

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.header {
  font-size: 24px;
  margin-bottom: 20px;
}

.content {
  display: flex;
  justify-content: center;
}

(3) 预订页面 (booking 页面)

booking.wxml

<view class="container">
  <view class="header">
    <text>预订房间</text>
  </view>
  <view class="content">
    <picker mode="date" start="2023-01-01" end="2025-12-31" bindchange="bindDateChange">
      <view class="picker">选择入住日期: {{checkInDate}}</view>
    </picker>
    <picker mode="date" start="2023-01-01" end="2025-12-31" bindchange="bindDateChange">
      <view class="picker">选择离店日期: {{checkOutDate}}</view>
    </picker>
    <button bindtap="goToCheckout">确认预订</button>
  </view>
</view>

booking.js

Page({
  data: {
    checkInDate: '请选择入住日期',
    checkOutDate: '请选择离店日期'
  },

  bindDateChange: function (e) {
    const type = e.currentTarget.dataset.type;
    const value = e.detail.value;
    if (type === 'checkIn') {
      this.setData({
        checkInDate: value
      });
    } else if (type === 'checkOut') {
      this.setData({
        checkOutDate: value
      });
    }
  },

  goToCheckout: function () {
    wx.navigateTo({
      url: '/pages/checkout/checkout?checkInDate=' + this.data.checkInDate + '&checkOutDate=' + this.data.checkOutDate
    });
  }
});
 

booking.wxss
 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.header {
  font-size: 24px;
  margin-bottom: 20px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.picker {
  margin: 10px 0;
}
 

 

 

(4) 结账页面 (checkout页面)
 

checkout.wxml
 

<view class="container">
  <view class="header">
    <text>结账信息</text>
  </view>
  <view class="content">
    <text>入住日期: {{checkInDate}}</text>
    <text>离店日期: {{checkOutDate}}</text>
    <button bindtap="confirmBooking">确认支付</button>
  </view>
</view>
 

checkout.js
 

Page({
  data: {
    checkInDate: '',
    checkOutDate: ''
  },

  onLoad: function (options) {
    this.setData({
      checkInDate: options.checkInDate,
      checkOutDate: options.checkOutDate
    });
  },

  confirmBooking: function () {
    wx.showToast({
      title: '预订成功',
      icon: 'success',
      duration: 2000
    });
  }
});
 

 

checkout.wxss
 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.header {
  font-size: 24px;
  margin-bottom: 20px;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content text {
  margin: 10px 0;
}
 

 

 

 

4. 调试与运行
 

  1.  
    打开微信开发者工具，加载项目。
     
  2.  
    在模拟器中查看页面效果。
     
  3.  
    使用调试工具检查控制台是否有报错。
     
  4.  
    测试页面跳转、数据加载和交互功能。
     
 

 

5. 发布小程序
 

  1.  
    在微信开发者工具中，点击“上传”按钮，填写版本号和备注。
     
  2.  
    登录微信公众平台，进入“版本管理”页面，提交审核。
     
  3.  
    审核通过后，发布小程序。
     
 

 

更换部分模板
 

 

微信小程序的 UI 设计，使其更接近希尔顿官方预订的样式。以下是修改后的代码：
 

<view class="container">
  <view class="header">
    <text class="title">MY酒店官方预订</text>
    <button class="register-btn">立即加入</button>
    <button class="login-btn">已有账号？登录</button>
  </view>
  <view class="content">
    <text class="promo-text">春启 欲会 七果</text>
    <view class="search-box">
      <picker mode="date" start="2023-01-01" end="2025-12-31" bindchange="bindCheckInDateChange">
        <view class="picker">入住 {{checkInDate}}</view>
      </picker>
      <picker mode="date" start="2023-01-01" end="2025-12-31" bindchange="bindCheckOutDateChange">
        <view class="picker">退房 {{checkOutDate}}</view>
      </picker>
      <picker mode="selector" range="{{roomOptions}}" bindchange="bindRoomChange">
        <view class="picker">{{roomCount}} 间房</view>
      </picker>
      <picker mode="selector" range="{{guestOptions}}" bindchange="bindGuestChange">
        <view class="picker">{{guestCount}} 位成人</view>
      </picker>
      <button class="search-btn" bindtap="goToBooking">查找酒店</button>
    </view>
  </view>
  <view class="footer">
    <text class="footer-text">获得更佳体验</text>
    <view class="footer-links">
      <text>首页</text>
      <text>发现</text>
      <text>行程</text>
      <text>账户</text>
      <text>绑定</text>
      <text>客服</text>
    </view>
  </view>
</view>
 

 index.js
 

Page({
  data: {
    checkInDate: '3月11日',
    checkOutDate: '3月12日',
    roomCount: '1',
    guestCount: '1',
    roomOptions: ['1', '2', '3', '4'],
    guestOptions: ['1', '2', '3', '4']
  },

  bindCheckInDateChange: function (e) {
    this.setData({
      checkInDate: e.detail.value
    });
  },

  bindCheckOutDateChange: function (e) {
    this.setData({
      checkOutDate: e.detail.value
    });
  },

  bindRoomChange: function (e) {
    this.setData({
      roomCount: this.data.roomOptions[e.detail.value]
    });
  },

  bindGuestChange: function (e) {
    this.setData({
      guestCount: this.data.guestOptions[e.detail.value]
    });
  },

  goToBooking: function () {
    wx.navigateTo({
      url: '/pages/booking/booking?checkInDate=' + this.data.checkInDate + '&checkOutDate=' + this.data.checkOutDate + '&roomCount=' + this.data.roomCount + '&guestCount=' + this.data.guestCount
    });
  }
});
 

index.wxss
 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.header {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.register-btn, .login-btn {
  margin: 10px 0;
  width: 80%;
}

.content {
  width: 100%;
}

.promo-text {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.picker {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 80%;
}

.search-btn {
  margin-top: 20px;
  width: 80%;
}

.footer {
  margin-top: 40px;
  text-align: center;
}

.footer-text {
  font-size: 16px;
  margin-bottom: 10px;
}

.footer-links {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
 

 

2. 预订页面 (booking 页面)
 

booking.wxml
 

<view class="container">
  <view class="header">
    <text class="title">预订详情</text>
  </view>
  <view class="content">
    <text>入住日期: {{checkInDate}}</text>
    <text>退房日期: {{checkOutDate}}</text>
    <text>房间数量: {{roomCount}} 间</text>
    <text>入住人数: {{guestCount}} 位成人</text>
    <button class="confirm-btn" bindtap="goToCheckout">确认预订</button>
  </view>
</view>
运行 HTML

booking.js
javascript

复制

Page({
  data: {
    checkInDate: '',
    checkOutDate: '',
    roomCount: '',
    guestCount: ''
  },

  onLoad: function (options) {
    this.setData({
      checkInDate: options.checkInDate,
      checkOutDate: options.checkOutDate,
      roomCount: options.roomCount,
      guestCount: options.guestCount
    });
  },

  goToCheckout: function () {
    wx.navigateTo({
      url: '/pages/checkout/checkout?checkInDate=' + this.data.checkInDate + '&checkOutDate=' + this.data.checkOutDate + '&roomCount=' + this.data.roomCount + '&guestCount=' + this.data.guestCount
    });
  }
});
 

 

booking.wxss
 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.header {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.content {
  width: 100%;
}

.content text {
  display: block;
  margin: 10px 0;
}

.confirm-btn {
  margin-top: 20px;
  width: 80%;
}
 

 

3. 结账页面 (checkout 页面)
 

checkout.wxml
 

 

<view class="container">
  <view class="header">
    <text class="title">结账信息</text>
  </view>
  <view class="content">
    <text>入住日期: {{checkInDate}}</text>
    <text>退房日期: {{checkOutDate}}</text>
    <text>房间数量: {{roomCount}} 间</text>
    <text>入住人数: {{guestCount}} 位成人</text>
    <button class="pay-btn" bindtap="confirmBooking">确认支付</button>
  </view>
</view>
 

checkout.js
 

 

Page({
  data: {
    checkInDate: '',
    checkOutDate: '',
    roomCount: '',
    guestCount: ''
  },

  onLoad: function (options) {
    this.setData({
      checkInDate: options.checkInDate,
      checkOutDate: options.checkOutDate,
      roomCount: options.roomCount,
      guestCount: options.guestCount
    });
  },

  confirmBooking: function () {
    wx.showToast({
      title: '预订成功',
      icon: 'success',
      duration: 2000
    });
  }
});
 

checkout.wxss
 

 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.header {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
}

.content {
  width: 100%;
}

.content text {
  display: block;
  margin: 10px 0;
}

.pay-btn {
  margin-top: 20px;
  width: 80%;
}
 

 

4. 运行效果
 

  •  
    首页显示希尔顿官方预订的样式，包含日期选择、房间和人数选择。
     
  •  
    点击“查找酒店”后跳转到预订页面，显示预订详情。
     
  •  
    在结账页面确认支付后，显示成功提示。
     
 

以上代码是基于最基础框架的修改，并不是实现全部功能，可方便进行代码理解
 

成果展示2
 

 

 
 

 
 

 
 

过程中遇到的错误
 

1.依旧显示模拟器启动失败，Error:app.json :在根项目录未找到app.json
 

 

错误描述：明明在根目录下有app.json,却提示没有
 

模板引用错误，用了TS模板，代码无法引用，不能删除相关代码。
 

2.出现错误，不显示js图像
 

 

点击绿色箭头，直到提示明显错误 
 

查看wxml文件是否正确！

                

        

    

  


            

                    
            


    


                



	

		

			

				
					
图文全程手把手教你微信小程序WebView逆向抓包和调试全过程和方法

				
			

			

				

					代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
				

				

					03-17
					
					1693
					
				

			

		

		

			
				
ADB（Android Debug Bridge）是安卓的调试工具，可以让电脑与手机进行通信，必要时还能直接获取调试信息。先启用安装ADB并连接手机用远程调试刷新 WebView 抓取数据这样，就能轻松搞定小程序 WebView 的抓包分析了，有了这个方法，基本上微信小程序里的网页请求都能一网打尽！

			
		

	



                

            
              



	

		

			

				
					
Java版点餐小程序2024最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序

				
			

			

				

					2401_85111748的博客
				

				

					05-25
					
					887
					
				

			

		

		

			
				
1， 管理后台。

			
		

	



              


  
              

                


	

		

			

				
					
4分钟手把手教你做出第一个微信小程序

				
			

			

				

					前端琅琊阁
				

				

					06-14
					
					5292
					
				

			

		

		

			
				
4分钟手把手教你做出第一个微信小程序大家直接通过链接，或者进入到我微信公众号看吧，因为有视频，我就不复制过来了。

			
		

	





	

		

			

				
					
微信小程序详细图文教程-10分钟完成微信小程序开发部署发布（3元获取腾讯云服务器带小程序支持系统）

					
热门推荐

				
			

			

				

					wyx100的专栏
				

				

					01-11
					
					10万+
					
				

			

		

		

			
				
很多朋友都认为微信小程序申请、部署、发布很难，需要很长时间。

实际上，微信和腾讯云同是腾讯产品，已经提供了10分钟（根据准备资源情况，已完成小程序申请认证）完成小程序开发、部署、发布的方式。当然，实现的是基础功能。但是，可以给学习者很便捷的体验和很好的启发。

不过，随着微信平台和云服务的发展，真担心，程序猿会失业！

案例下载：

https://pan.baidu.com/s/1BQSb0B...

			
		

	



		

			
		



	

		

			

				
					
微信小程序开发教程-从零开始

				
			

			

				

					pwh0996的专栏
				

				

					09-29
					
					3214
					
				

			

		

		

			
				
从零开始小程序首先一个小程序APP需要三个文件，且名字不可更改，这三个文件会作为程序入口和项目的配置文件
  
  app.js  
  app.json
  app.wxss
  
好我们从零开始写着三个文件app.jsapp.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。首先 APP()函数表示一个程序实例，当你在微信IDE中输入APP()函数时候回自

			
		

	





	

		

			

				
					
微信小程序开发（超详细保姆式教程）

					
最新发布

				
			

			

				

					qq_40858969的博客
				

				

					02-09
					
					1265
					
				

			

		

		

			
				
首先，安装微信小程序的开发工具。推荐使用Visual Studio Code（VS Code）或微信提供的开发者工具。通过以上步骤，可以系统地掌握微信小程序开发的技能，逐步构建复杂的小程序，提升开发效率和用户体验。使用Reactive:Vue或Redux等库来管理全局状态。Reactive:Vue简单易用。在微信公众平台注册小程序，生成AppID和小程序ID，提交项目审核。使用微信调试工具或USB连接手机进行远程调试，检查控制台日志。

			
		

	





	

		

			

				
					
微信小程序开发入门教程.pdf

				
			

			

				

					03-29
				

			

		

		

			
				
。

			
		

	





	

		

			

				
					
从零开始开发微信小程序：全面指南

				
			

			

				

					百态老人的博客
				

				

					06-03
					
					3430
					
				

			

		

		

			
				
学习制作微信小程序，希望通过这次学习能够实现跨平台的统一开发，从而提高自己的编程和开发能力。

			
		

	





	

		

			

				
					
微信小程序从零开始开发步骤（一）搭建开发环境

				
			

			

				

					祈澈菇凉
				

				

					03-15
					
					1万+
					
				

			

		

		

			
				

  
    
            从零到有写一个小程序系列专题，很早以前就想写来分享，但由于项目一直在进展，没有过多的时间研究技术，现在可以继续分享了。
1：注册
用没有注册过微信公众平台的邮箱注册一个微信公众号， 申请帐号 ,网址： https://mp.weixin.qq.com/ 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。注册完成之后开始登录。





imag...

			
		

	





	

		

			

				
					
微信小程序项目开发【从0到1~入门篇】

				
			

			

				

					m0_49263811的博客
				

				

					08-07
					
					3万+
					
				

			

		

		

			
				
打开刚下载好的微信开发者工具，扫码登录、创建小程序项目。登录微信公众号平台，在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。

			
		

	





	

		

			

				
					
微信小程序入门教程

				
			

			

				

					程序像一种魔法
				

				

					10-13
					
					4018
					
				

			

		

		

			
				
本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像，可以在新开的页面中查看当前小程序的启动日志。

			
		

	





	

		

			

				
					
微信小程序——从零搭建

				
			

			

				

					weixin_40571358的博客
				

				

					05-23
					
					613
					
				

			

		

		

			
				
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录前言一、确定开发权限二、IDE三、创建项目四、基本结构

前言
这篇主要给微信小程序菜鸟参考。
有时候，后端猿猴也需要撸一把微信小程序。前几年弄过微信小程序，太久不用，又忘了，重新摸索了一遍，记录一下，避免一坑重踩。
一、确定开发权限

打开“微信公众平台”，使用手机微信扫描登录二维码，手机上弹出的选项中若有目标小程序，则表明可以对此小程序进行开发；否则需要目标小程序的管理员将你的微信设为开发者（或管理员），然后重复如前步骤
点击.

			
		

	





	

		

			

				
					
微信小程序源码论坛系列.rar

				
			

			

				

					02-23
				

			

		

		

			
				
微信小程序源码包含cncode论坛、微赞论坛，此外，还包括详细图文文档教程、源码导入视频教程、源码导入文档教程，手把手详细教学部署运行。 微信小程序源码包含cncode论坛、微赞论坛，此外，还包括详细图文文档教程...

			
		

	





	

		

			

				
					
微信小程序毕业设计源码

				
			

			

				

					02-23
				

			

		

		

			
				
包含四个餐饮美食类小程序源码，供您选择，文件内附详细图文文档教程、源码导入视频教程、源码导入文档教程，手把手教学。 包含四个餐饮美食类小程序源码，供您选择，文件内附详细图文文档教程、源码导入视频教程、...

			
		

	





	

		

			

				
					
微信小程序开发指南：精通一切的秘籍（保姆级别+超详细）

				
			

			

				

					老高的博客
				

				

					07-01
					
					2万+
					
				

			

		

		

			
				
小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。

			
		

	





	

		

			

				
					
Java版点餐小程序2022最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序

				
			

			

				

					编程小石头
				

				

					03-19
					
					1万+
					
				

			

		

		

			
				
今天来给大家讲解一个完整的微信小程序点餐项目。java后台+微信小程序实现点餐系统。

第一章，技术选型
1,后台技术选型：

JDK8/Java11
Mysql5.7/Mysql8
Spring-boot2.2.4
Spring-data-jpa
Lombok
Freemarker
Bootstrap4.3
Websocket即时通讯
Tomcat服务器
Excel数据的批量导入与导出

2,小程序端技术选型

微信小程序
css3
JavaScript

第二章，效果图
1， 管理后台







.

			
		

	





	

		

			

				
					
详解微信小程序开发教程

				
			

			

				

					karamos的专栏
				

				

					09-22
					
					7240
					
				

			

		

		

			
				
微信应用开放的服务和组件包含如下：
视图容器：视图(View)、滚动视图、Swiper
基础内容：图标、文本、进度条
表单组件：按钮、表单等等
操作反馈
导航
媒体组建：音频、图片、视频。
地图
画布
文件操作能力
网络：上传下载能力、WebSocket
数据：数据缓存能力
位置：获取位置、查看位置
设备：网络状态、系统信息、重力感应、罗盘
界面：设置导航条、导航、动画、绘图等等
开放接口：登录，...

			
		

	





	

		

			

				
					
从零开始开发微信小程序-开发环境

				
			

			

				

					superpole的专栏
				

				

					08-26
					
					3292
					
				

			

		

		

			
				
本文主要介绍前端开发工具和微信调试工具，希望对后端想研究前端的同学有所帮助。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
夏天｜여름이다

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值