微信小程序学习

标签：文件 微信 程序 学习 开发 开发者 页面

文章目录

• • 目录

    目录

    概要

    微信小程序和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的区别

1. 平台依赖性：

   • 微信小程序：依赖于微信平台，只能在微信内部使用。
   • App：独立于社交平台，可在操作系统（如iOS或Android）上安装使用。

2. 开发语言和框架：

   • 微信小程序：使用微信自己的标记语言WXML、WXSS以及JavaScript进行开发。
   • App：iOS使用Swift或Objective-C，Android使用Java或Kotlin。

3. 开发成本和周期：

   • 微信小程序：通常开发成本较低，周期短，更新迭代快。
   • App：开发成本较高，周期长，需要适配不同设备和操作系统。

4. 分发方式：

   • 微信小程序：通过微信平台搜索或扫描二维码直接使用。
   • App：需要通过应用商店（如Apple App Store或Google Play）下载安装。

5. 系统权限和功能：

   • 微信小程序：权限和功能受限于微信提供的API，访问系统功能有限。
   • App：拥有更多系统权限，可以访问更多硬件特性，如摄像头、GPS等。

认识小程序

微信开发工具

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

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

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

如何下载

1. 安装与注册：

   • 访问微信开放平台，注册成为开发者。
   • 下载并安装微信开发者工具。

2. 创建项目：

   • 打开微信开发者工具，点击“新建项目”。
   • 输入或选择项目目录，填写小程序的AppID（如果没有AppID，可以选择无AppID开发，但功能受限）。
   • 选择需要的开发框架，如“小程序”或“小游戏”。
   • 点击“新建”完成项目创建。

3. 项目结构：

   • 熟悉项目结构，包括app.json（全局配置文件）、app.js（全局逻辑文件）、app.wxss（全局样式文件）等。
   • 页面文件通常放在pages目录下，每个页面由四个文件组成：.json（配置文件）、.wxml（结构文件）、.wxss（样式文件）、.js（脚本文件）。

4. 编写代码：

   • 在编辑器中编写WXML、WXSS、JavaScript和JSON代码。
   • 使用代码提示和自动补全功能提高开发效率。

5. 预览与调试：

   • 模拟器预览：在开发者工具中，可以直接点击“预览”按钮，模拟器会显示当前编辑的小程序页面。这有助于快速查看页面布局和样式。
   • 真机预览：开发者可以通过扫描开发者工具生成的二维码，将小程序预览在手机上。这样可以在真实的设备上测试小程序的用户体验。

6. 真机测试：

   • 扫描二维码将小程序预览在手机上，进行真机测试。
   • 

7. 云开发：

   • 云函数：在云端运行的代码片段，可以执行服务器端逻辑，如数据处理和访问API。

   • 云数据库：一个文档型的NoSQL数据库，用于存储结构化数据，支持灵活的查询语言。

   • 云存储：提供文件上传、下载和管理能力，常用于图片和视频等内容的存储。

   • 云开发控制台：一个可视化界面，用于管理云函数、数据库和文件存储等资源。

   • 环境共享：允许开发者将云开发环境共享给其他小程序或公众号，方便协作开发。

8. 编译错误：

   • 检查并解决编译过程中出现的错误和警告。
   • 

9. 导出与导入：

导出项目：

• 在微信开发者工具中打开你的小程序项目。
• 点击左上角的“文件”菜单，选择“导出项目”选项。
• 在弹出的对话框中，选择导出的路径和文件名。
• 点击“确定”按钮，开发者工具将自动打包项目文件并导出为一个ZIP压缩包。

        导入项目：

• 打开微信开发者工具。
• 点击工具界面左上角的“文件”菜单，选择“导入项目”选项。
• 在弹出的对话框中，输入或选择项目在本地的路径。
• 输入小程序的AppID，如果你的项目是测试项目，可以选择“无AppID”进行开发。
• 点击“导入”按钮，开发者工具将把项目代码导入到工具中，你可以开始编辑和调试。

标签：文件,微信,程序,学习,开发,开发者,页面
From： https://blog.csdn.net/weixin_68226434/article/details/142595174