本文分为代码版和0代码版的教程，想看0代码制作小程序的企业，可以点击页面右下角的目录，点击0代码小程序制作教程阅读。
代码版小程序制作教程
一、环境准备
1.1 注册账号
- 前往微信公众平台，点击 “注册”，选择 “小程序”。
- 按照提示填写相关信息，完成注册后，你将获得一个用于后续开发的 AppID。
1.2 安装开发工具 - 下载并安装微信开发者工具。安装完成后，打开该工具。
二、创建第一个小程序
2.1 创建项目
- 打开微信开发者工具，选择 “新建小程序”。
- 输入你的 AppID（若没有，可选择 “无 AppID” 进行测试）。
- 填写项目名称和项目路径，点击 “创建”，并选择 “使用默认模板” 快速开始。
2.2 项目结构 - 小程序的基本项目结构清晰明了。以 “project” 为例，其中 “miniprogram” 下包含 “pages” 文件夹，里面有诸如 “index” 等页面文件夹，每个页面文件夹中又有 “index.js”“index.json”“index.wxml”“index.wxss” 等文件。此外，还有 “app.js”“app.json”“app.wxss” 等文件。
三、编写代码
3.1 app.json
- 在这个文件中配置小程序的页面路径和窗口样式。例如：
收起
json
复制
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "我的小程序", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } }
- “pages” 定义小程序的页面路径，“window” 设置小程序的窗口样式。
3.2 app.js - 在此文件中编写小程序的逻辑代码，通常可保持为空。比如：
收起
javascript
复制
App({ onLaunch: function () { // 小程序初始化 console.log("小程序启动"); } });
- “onLaunch” 是小程序初始化时触发的事件。
3.3 index.wxml - 这里编写页面的结构，例如：
收起
xml
复制
<view class="container"> <text class="title">欢迎来到我的小程序！</text> <button bindtap="onTap">点击我</button> </view>
- “” 相当于 HTML 中的 “
”，用于布局；“” 用于显示文本；“” 是按钮组件，“bindtap” 用于绑定点击事件。
3.4 index.wxss - 编写页面的样式，如：
收起
css
复制
.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .title { font-size: 24px; color: #333; margin-bottom: 20px; }
- 使用 CSS 样式来美化页面。
3.5 index.js - 编写页面的逻辑，如：
收起
javascript
复制
Page({ onTap: function() { wx.showToast({ title: '按钮被点击了！', icon: 'success' }); } });
- “Page” 定义一个页面，“onTap” 是按钮点击事件的处理函数。
四、运行和调试
- 在微信开发者工具中，点击 “编译” 按钮，查看效果。
- 使用 “调试” 功能，可以查看控制台输出和网络请求，也可在控制台中使用 “console.log” 输出调试信息。
五、添加更多页面
5.1 创建新页面
- 在 “pages” 文件夹中创建新的页面文件夹，如 “about”。
- 在 “about” 文件夹中创建 “about.js”“about.json”“about.wxml” 和 “about.wxss” 文件。
5.2 配置新页面 - 在 “app.json” 中添加新页面的路径：
收起
json
复制
{ "pages": [ "pages/index/index", "pages/about/about" ] }
5.3 编写新页面代码
- 在 “about.wxml” 中编写页面结构：
收起
xml
复制
<view class="about-container"> <text>这是关于页面</text> <button bindtap="goBack">返回首页</button> </view>
- 在 “about.wxss” 中编写样式：
收起
css
复制
.about-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
- 在 “about.js” 中编写逻辑：
收起
javascript
复制
Page({ goBack: function() { wx.navigateBack(); // 返回上一页 } });
六、路由导航
- 在 “index.wxml” 中添加一个按钮，跳转到关于页面：
收起
xml
复制
<button bindtap="goToAbout">关于</button>
- 在 “index.js” 中添加跳转逻辑：
收起
javascript
复制
Page({ onTap: function() { wx.showToast({ title: '按钮被点击了！', icon: 'success' }); }, goToAbout: function() { wx.navigateTo({ url: '/pages/about/about' }); } });
七、发布小程序
- 在完成开发后，前往微信公众平台，登录你的账号。
- 在 “开发” 菜单中，选择 “上传代码”，将你的代码上传到微信服务器。
- 提交审核，审核通过后即可发布。
八、学习资源
- 官方文档：查看微信小程序官方文档，获取最权威的开发指南。
- 视频教程：在 B 站、YouTube 等平台搜索小程序开发的相关视频教程，通过直观的演示学习。
- 社区：加入小程序开发者社区，参与讨论和交流，分享经验和解决问题。
九、进阶学习
- 学习使用小程序的 API
- 如获取用户信息：
收起
javascript
复制
wx.getUserInfo({ success: function(res) { console.log(res.userInfo); } });
- 发起网络请求：
收起
javascript
复制
wx.request({ url: 'https://api.example.com/data', method: 'GET', success: function(res) { console.log(res.data); } });
- 探索小程序的组件化开发
- 学习如何创建自定义组件，以提高代码的复用性和可维护性。组件的基本结构如下：
收起
plaintext
复制
components/ ├── myComponent/ │ ├── myComponent.js │ ├── myComponent.json │ ├── myComponent.wxml │ └── myComponent.wxss
- 学习使用第三方库和框架
- 如 Taro、uni-app 等框架可以帮助你更高效地开发跨平台的小程序。
十、示例项目
- 为了更好地理解小程序开发，以下是一个简单的示例项目结构：
收起
plaintext
复制
my-mini-program │ ├── miniprogram │ ├── pages │ │ ├── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── about │ │ │ ├── about.js │ │ │ ├── about.json │ │ │ ├── about.wxml │ │ │ └── about.wxss │ ├── app.js │ ├── app.json │ └── app.wxss └──...
十一、代码示例
- 以下是完整的代码示例，供你参考：
收起
json
复制
// app.json { "pages": [ "pages/index/index", "pages/about/about" ], "window": { "navigationBarTitleText": "我的小程序", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } }
javascript
复制
// app.js App({ onLaunch: function () { console.log("小程序启动"); } });
xml
复制
// pages/index/index.wxml <view class="container"> <text class="title">欢迎来到我的小程序！</text> <button bindtap="onTap">点击我</button> <button bindtap="goToAbout">关于</button> </view>
css
复制
// pages/index/index.wxss .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .title { font-size: 24px; color: #333; margin-bottom: 20px; }
javascript
复制
// pages/index/index.js Page({ onTap: function() { wx.showToast({ title: '按钮被点击了！', icon: 'success' }); }, goToAbout: function() { wx.navigateTo({ url: '/pages/about/about' }); } });
xml
复制
// pages/about/about.wxml <view class="about-container"> <text>这是关于页面</text> <button bindtap="goBack">返回首页</button> </view>
css
复制
// pages/about/about.wxss .about-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
javascript
复制
// pages/about/about.js Page({ goBack: function() { wx.navigateBack(); // 返回上一页 } });
十二、运行和调试
- 编译和预览
- 在微信开发者工具中，点击 “编译” 按钮，查看效果。你可以在工具的右侧面板中查看页面的实时预览。
- 调试
- 使用 “调试” 功能，可以查看控制台输出和网络请求。在代码中使用 “console.log” 输出调试信息，例如：“console.log (' 按钮被点击了！')”。
- 模拟器
- 微信开发者工具提供了多种设备模拟器，可以选择不同的设备进行测试。
十三、发布小程序
- 上传代码
- 在微信开发者工具中，选择 “上传” 按钮，将你的代码上传到微信服务器。确保在上传之前，所有的功能都经过测试，确保没有错误。
- 提交审核
- 登录到微信公众平台。在 “开发” 菜单中，选择 “提交审核”。填写相关信息，提交审核。
- 发布
- 审核通过后，你可以在公众平台上选择 “发布” 按钮，将小程序正式上线。
十四、进阶学习
- 使用小程序 API
- 学习如何使用小程序提供的 API，例如获取用户信息、发起网络请求等。
- 组件化开发
- 学习如何创建自定义组件，提高代码的复用性和可维护性。
- 使用第三方库和框架
- 探索一些流行的框架，如 Taro、uni-app 等，以提高开发效率。
十五、示例项目
- 再次为你展示一个简单的示例项目结构，帮助你更好地理解小程序开发：
收起
plaintext
复制
my-mini-program │ ├── miniprogram │ ├── pages │ │ ├── index │ │ │ ├── index.js │ │ │ ├── index.json │ │ │ ├── index.wxml │ │ │ └── index.wxss │ │ ├── about │ │ │ ├── about.js │ │ │ ├── about.json │ │ │ ├── about.wxml │ │ │ └── about.wxss │ ├── app.js │ ├── app.json │ └── app.wxss └──...
十六、代码示例总结
- 以下是完整的代码示例，供你参考：
收起
json
复制
// app.json { "pages": [ "pages/index/index", "pages/about/about" ], "window": { "navigationBarTitleText": "我的小程序", "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black" } }
javascript
复制
// app.js App({ onLaunch: function () { console.log("小程序启动"); } });
xml
复制
// pages/index/index.wxml <view class="container"> <text class="title">欢迎来到我的小程序！</text> <button bindtap="onTap">点击我</button> <button bindtap="goToAbout">关于</button> </view>
css
复制
// pages/index/index.wxss .container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; } .title { font-size: 24px; color: #333; margin-bottom: 20px; }
javascript
复制
// pages/index/index.js Page({ onTap: function() { wx.showToast({ title: '按钮被点击了！', icon: 'success' }); }, goToAbout: function() { wx.navigateTo({ url: '/pages/about/about' }); } });
xml
复制
// pages/about/about.wxml <view class="about-container"> <text>这是关于页面</text> <button bindtap="goBack">返回首页</button> </view>
css
复制
// pages/about/about.wxss .about-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
javascript
复制
// pages/about/about.js Page({ goBack: function() { wx.navigateBack(); // 返回上一页 } });
0代码小程序制作教程
不写一行代码，怎么制作企业类型小程序呢？
无论是想用来卖货，还是用来做企业信息展示、服务预约或者是扫码点餐，通通都能轻松实现，低至每年349元就能够拥有自己的小程序，仅需4个步骤。
编辑
-
1.怎么制作小程序 - 注册一个小程序制作平台账号
这个账号很重要，和你的手机号一样重要，因为它关联着你的小程序设计，内容，数据以及你后续想更新小程序上的产品或者做改动，都需要通过这个小程序制作账号去实现，所以要记录好账号的信息，选择靠谱的小程序制作平台。
首先打开电脑浏览器，打开搜索引擎，搜索【比文云官网】，点击入平台官网。
（搜索引擎建议使用必应/百度）电脑搜！电脑搜！电脑搜！
必应搜索结果：
点击进入官网。
编辑
百度搜索结果如下：
点击进入官网。
编辑
将鼠标移动至网站横幅主题【小程序制作】图片，点击【了解更多】
编辑
我们会进入到一个充满小程序模板的一个网页，它的小程序模板是按行业来分类的，可以根据你想要制作的类型来去选择。
我们可以点击右上角的免费注册按钮。
根据网页提示，完成一个信息的录入。
编辑
这样就可以完成一个小程序制作账号的注册了。
编辑
-
完成账号注册后，接下来可以根据大家不同的需求去做一个小程序。可以进入到【企业中心】页面，在里面开通对应产品来制作对应类型的小程序。
编辑
编辑
如果你是想制作企业展示小程序，可以开通轻站产品。
编辑
如果你其实想制作卖货小程序，可以开通商城产品。
编辑
如果你想制作点餐小程序，或门店服务预约小程序的话，可以开通门店通产品。
编辑
如果你是想制作一个教育机构的小程序的话，可以开通教育产品。
编辑
那接下来我会以一个卖货小程序作为一个接下来的步骤讲解，其他产品的操作都是大同小异的，大家可以参考一下。
-
2.怎么制作小程序 - 套用小程序模板
完成信息填写。
编辑
我们会点击网页右侧的，一个小程序商城中的前往装修按钮。
编辑
进入到一个选取小程序模板的一个环节，因为我这次举例的是商城小程序，里面的模板基本都是用于卖货的。行业覆盖了日用百货、生鲜蔬果，电商，超市等主流的卖货行业，大家可以根据自己店铺或者企业所处的行业，来进行一个小程序模板的选择。
编辑
看到心仪的模板之后呢，可以把你的鼠标移动到那个模板上，点击一下预览按钮。
编辑
觉得满意合适的话，可以点击马上替换。
编辑
那这个选中了的小程序模板，就会马上套用到你的小程序设计页面上了。
编辑
轻站教育门店通这些产品的套用小程序模板的操作也是一样的，大家可以去试一试，不用担心不会操作。
-
对于企业类型的小程序来说，产品展示这个模块是必不可少的，产品分类、产品图片展示、视频这些模块在当前来说是必不可少的，无论是卖货小程序还是其他类型的小程序。
所以接下来，我会以添加产品展示功能，作为小程序设计的操作举例。
-
3.怎么制作小程序 - 小程序设计
所有功能添加的方式都是一样的，非常容易添加。只需要你把你的鼠标，移动到那个模块上，然后摁下你的鼠标左键，然后拖动到小程序页面中，通过页面右侧的提示栏调整参数，即可完成功能的添加和设置。
就像画面当中一样，我点击了产品展示模块，然后把它拖动到小程序页面中。 
编辑
点击产品展示模块中的一个添加产品按钮，页面的右侧就会出现的一个提示，在这里面你可以勾选你想要添加到这个产品展示模块里的产品。
编辑
这些产品是存在在你的产品库里的，你可以优先在后台上添加。
编辑
也可以在这模块里面直接添加，勾选好后，你就可以看到小程序页面中已经出现了你已经添加好的产品。
编辑
其他功能其他模块都是相同的一个操作方式，大家可以亲自去尝试一下，非常简单。
可以点击网页的右上角来保存你的小程序制作进度。
编辑
-
然后接下来是最后一个步骤了，只需要完成了这个步骤，你的小程序就能够正式被你的客户所使用上。
-
4.怎么制作小程序 - 绑定小程序账号
在后台的话你可以点击小程序绑定的一个模块，里面会有两种方式给到大家去绑定小程序。
一个是你已经有小程序账号的，可以直接绑定。
编辑
没有的话就可以通过这个后台，去那些小程序平台上去注册一个账号，根据平台的提示完成小程序账号申请。
编辑
申请通过后回来绑定，绑定好之后，可以返回到小程序设计页面中，点击一下审核。
编辑
-
编辑
审核通过之后，你的客户就能够正式用上你的小程序了。
上述就是小程序制作的全部步骤啦，我们下次见。
