微信小程序开发，从0到1的经验分享

Super易

于 2023-07-05 08:51:52 发布

阅读量1.3k

点赞数

分类专栏：微信小程序开发文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_72668830/article/details/131547390

版权

微信小程序开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

导语：微信小程序是一种快速、便捷的应用开发平台，为开发者提供了构建跨平台应用的能力。本篇博客将带你逐步学习从零开始开发微信小程序的经验和步骤，帮助你成为一名优秀的小程序开发者。

第一步：了解微信小程序基础知识

当开始学习微信小程序开发时，有几个基础知识是需要了解的。下面是一些关键的基础知识点：

微信小程序的定义：微信小程序是一种基于微信平台的应用程序，用户可以在微信客户端内直接使用，无需下载和安装。小程序使用的是前端技术栈，包括HTML、CSS和JavaScript。
小程序的特点：

快速启动：无需下载安装，用户可以直接打开使用。
低门槛：开发成本相对较低，开发者可以使用前端技术进行开发。
跨平台：同一套代码可以在不同的平台（iOS、Android等）上运行。
强大的能力：小程序提供了丰富的API和组件，可以调用设备功能和微信特有能力，如支付、地理位置等。

开发工具：微信开发者工具是官方提供的集成开发环境（IDE），用于开发、调试和发布小程序。你可以在微信官方网站下载并安装该工具。
开发语言和技术栈： - WXML（WeiXin Markup Language）：类似于HTML的标记语言，用于描述小程序的结构和组件。 - WXSS（WeiXin Style Sheets）：类似于CSS的样式定义语言，用于控制小程序的样式。 - JavaScript：负责处理小程序的逻辑和交互，包括事件处理、数据绑定等。 - 小程序框架：微信提供了基于JavaScript的小程序框架，如使用组件化开发的框架WXML+WXS+WXSS，或使用类似Vue的框架Miniprogram Component。
小程序结构： - 小程序由一个个页面组成，每个页面包含一个WXML文件、一个WXSS文件和一个JS文件。 - 小程序的入口是app.js，负责小程序的全局配置和生命周期函数的处理。 - 小程序可以通过路由进行页面之间的跳转和导航。
小程序生命周期：小程序有不同的生命周期函数，用于在不同的阶段执行相应的操作，如onLoad、onShow、onHide等。
小程序的组件和API：微信提供了丰富的组件和API，用于实现各种功能，如视图容器、表单组件、网络请求、本地存储、地理位置等。
以上是微信小程序的基础知识，掌握这些知识后，你就可以开始进行微信小程序的开发了。不断实践和学习，深入理解这些概念和技术，将帮助你在小程序开发中取得更好的成果。

第二步：注册小程序账号并搭建开发环境

在进行微信小程序开发之前，要做好相应的准备工作。你得先注册一个小程序账号，搭建好相应的环境，下载并安装微信开发者工具，该工具提供了小程序的开发、调试和发布功能。

从微信公众平台注册小程序开发账号

在这里插入图片描述

选择小程序

在这里插入图片描述

第三步：了解编辑器各文件的基本功能

微信开发者工具下载完成后，点击创建新项目

项目打开后可以看见如下页面

pages用来存放所有小程序的页面
utils用来存放工具模块
app.js小程序项目的入口文件
app.json小程序项目的全局配置文件
app.wxss小程序项目的全局样式文件
project.config.json项目的配置文件
sitemap.json配置小程序及其页面是否允许被微信索引

app.json文件

小程序的全局配置，包括了小程序的所有页面路径、窗口外观、界面表现、底部tab
4个配置项的作用
pages:用来记录当前小程序所有的页面路径
windows:全局定义小程序所有页面的背景色、文字颜色等
style:全局定义小程序组件所使用的样式版本
sitemaplocation:用来指名sitemap.json的位置