微信小程序学习

你我哈

已于 2024-09-28 15:39:21 修改

阅读量1.1k

点赞数 36

分类专栏：微信小程序文章标签：学习小程序微信小程序

于 2024-09-28 10:36:37 首次发布

本文链接：https://blog.csdn.net/weixin_68226434/article/details/142595174

版权

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

2 篇文章 0 订阅

订阅专栏

文章目录

- 目录
  
  目录
  
  概要
  
  微信小程序和App的区别
  
  认识小程序
  
  微信开发工具
  
  如何下载
  
   导出项目：
  
  导入项目：

概要

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用的即用即走的理念，可以在微信内被便捷地获取和传播，同时具有出色的用户体验。下面是一个简化版的微信小程序项目结构和相关概念的介绍：

1. **项目结构**：
- `pages`：存放所有小程序的页面文件，每个页面由四个基本文件组成：`.js`（脚本）、`.json`（配置）、`.wxml`（结构）、`.wxss`（样式）。
- `utils`：存放工具性质的模块，如数据加密、请求封装等。
- `app.js`：小程序的入口文件，负责全局状态的管理，是程序的启动文件。
- `app.json`：小程序的全局配置文件，用于设置小程序的窗口背景色、导航栏配置等。
- `app.wxss`：小程序的全局样式文件，可以定义全局的样式变量。

2. **页面（Page）**：
- 每个页面都是一个功能或内容的独立单元，用户可以通过导航在不同的页面间切换。

3. **组件（Component）**：
- 组件是页面的基本构成单位，可以看作是独立可复用的代码片段，用于构建页面的特定部分。

4. **开发框架与技术体系**：
- 微信小程序的开发框架和技术体系主要包括 WXML、WXSS、JavaScript 和 JSON 文件。

5. **WXML（WeiXin Markup Language）**：
- 类似于网页开发中的 HTML，用于描述页面的结构。

6. **WXSS（WeiXin Style Sheets）**：
- 类似于网页开发中的 CSS，用于描述页面的样式。

7. **JavaScript**：
- 小程序的逻辑处理部分使用 JavaScript 编写，微信提供了丰富的 API 供开发者调用。

8. **JSON**：
- 每个页面都可以有一个 JSON 配置文件，用于配置页面属性，如导航栏标题、窗口背景颜色等。

微信小程序和App的区别

平台依赖性：
- 微信小程序：依赖于微信平台，只能在微信内部使用。
- App：独立于社交平台，可在操作系统（如iOS或Android）上安装使用。
开发语言和框架：
- 微信小程序：使用微信自己的标记语言WXML、WXSS以及JavaScript进行开发。
- App：iOS使用Swift或Objective-C，Android使用Java或Kotlin。
开发成本和周期：
- 微信小程序：通常开发成本较低，周期短，更新迭代快。
- App：开发成本较高，周期长，需要适配不同设备和操作系统。
分发方式：
- 微信小程序：通过微信平台搜索或扫描二维码直接使用。
- App：需要通过应用商店（如Apple App Store或Google Play）下载安装。
系统权限和功能：
- 微信小程序：权限和功能受限于微信提供的API，访问系统功能有限。
- App：拥有更多系统权限，可以访问更多硬件特性，如摄像头、GPS等。

认识小程序

微信开发工具

微信开发者工具是微信官方推出的一款强大的开发辅助工具，它极大地简化了微信小程序的开发流程，包括代码的编写、查看、编辑，以及小程序的预览和发布等操作。

微信开发者工具可模拟小程序在不同设备上的显示效果。还可以支持WXML、WXSS、JavaScript等文件的编辑和代码提示，包括查看控制台输出、设置断点等。编译代码后可在真实设备上测试小程序，并直接上传代码至微信审核并发布。

1. WXML ( WeiXin Markup Language) ：这是微信小程序用于描述界面结构的一种标记语言，类似于网页开发中的 HTML 。 WXML 文件用于定义页面的基本结构。

2. WXSS ( WeiXin Style Sheets) ：这是微信小程序的样式语言，类似于网页开发中的 CSS ，用于描述页面的样式。 WXSS 文件用于定义页面的外观。

如何下载

安装与注册：
- 访问微信开放平台，注册成为开发者。
- 下载并安装微信开发者工具。
创建项目：
- 打开微信开发者工具，点击“新建项目”。
- 输入或选择项目目录，填写小程序的AppID（如果没有AppID，可以选择无AppID开发，但功能受限）。
- 选择需要的开发框架，如“小程序”或“小游戏”。
- 点击“新建”完成项目创建。
项目结构：
- 熟悉项目结构，包括app.json（全局配置文件）、app.js（全局逻辑文件）、app.wxss（全局样式文件）等。
- 页面文件通常放在pages目录下，每个页面由四个文件组成：.json（配置文件）、.wxml（结构文件）、.wxss（样式文件）、.js（脚本文件）。
编写代码：
- 在编辑器中编写WXML、WXSS、JavaScript和JSON代码。
- 使用代码提示和自动补全功能提高开发效率。
预览与调试：
- 模拟器预览：在开发者工具中，可以直接点击“预览”按钮，模拟器会显示当前编辑的小程序页面。这有助于快速查看页面布局和样式。
- 真机预览：开发者可以通过扫描开发者工具生成的二维码，将小程序预览在手机上。这样可以在真实的设备上测试小程序的用户体验。
真机测试：
- 扫描二维码将小程序预览在手机上，进行真机测试。
云开发：
- 云函数：在云端运行的代码片段，可以执行服务器端逻辑，如数据处理和访问API。
- 云数据库：一个文档型的NoSQL数据库，用于存储结构化数据，支持灵活的查询语言。
- 云存储：提供文件上传、下载和管理能力，常用于图片和视频等内容的存储。
- 云开发控制台：一个可视化界面，用于管理云函数、数据库和文件存储等资源。
- 环境共享：允许开发者将云开发环境共享给其他小程序或公众号，方便协作开发。
编译错误：
- 检查并解决编译过程中出现的错误和警告。
导出与导入：