微信小程序-入门

文章目录

  • 微信小程序
    • 1. 基础知识
      • 1.1 小程序的定义和特点
      • 1.2 小程序的架构
      • 1.3 小程序的目录结构和文件类型
      • 1.4 小程序源文件解析
        • 1.4.1 app.json文件
        • 1.4.2 project.config.json文件
        • 1.4.3 sitemap.json文件

微信小程序

微信小程序开发工具下载：

  1. 微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  2. 微信开放平台：https://open.weixin.qq.com/home
  3. 微信公众平台：https://mp.weixin.qq.com/

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

使用微信扫码

在这里插入图片描述

在这里插入图片描述

创建项目

在这里插入图片描述

在这里插入图片描述

工具支持5种文件的编辑：wxml，wxss，js，json，wxs以及图片文件的预览

1. 基础知识

1.1 小程序的定义和特点

微信小程序是一种运行在微信客户端内部的应用程序，它不需要下载安装，可以直接使用，类似于 Web 应用。微信小程序具有以下特点：

  1. 无需下载安装：微信小程序不需要下载安装，用户可以直接扫码或搜索进入小程序体验。

  2. 跨平台使用：微信小程序可以在 iOS、Android 和其他支持微信客户端的操作系统上运行，实现了跨平台的应用开发和使用。

  3. 轻量级应用：微信小程序的体积很小，启动速度快，可以在微信客户端中快速加载并运行。

  4. 便捷的开发：微信小程序提供了丰富的 API 和组件库，开发者可以使用 HTML、CSS 和 JavaScript 进行开发，降低了开发门槛。

  5. 用户体验优良：微信小程序具有良好的用户体验，提供了优秀的视觉效果和交互体验，同时可以根据用户的使用情况进行智能推荐和个性化服务。

  6. 基础服务支持：微信小程序提供了完善的基础服务支持，包括支付、地图、定位、消息通知等功能，方便开发者集成和使用。

  7. 小程序生态圈：微信小程序生态圈已经逐渐形成，包括开发者社区、第三方组件库、小程序商店等，可以为开发者提供更多的资源和支持。

总之，微信小程序具有开发便捷、体验优良、功能丰富、生态完善等特点，是一种新型的应用程序，正在逐渐改变人们的使用习惯和产生深远的影响。

1.2 小程序的架构

微信小程序的架构和生命周期如下所示：

架构

微信小程序的架构主要包括三个部分：

  1. 视图层（View）：视图层负责展示和渲染页面内容，使用 WXML（类似于 HTML）描述页面结构，WXSS（类似于 CSS）描述页面样式。视图层是基于组件化开发模式的，可以使用内置组件和自定义组件构建页面。

  2. 逻辑层（App Service）：逻辑层负责页面的逻辑处理和数据交互，使用 JavaScript 进行开发。逻辑层通过请求 API 获取数据、处理用户输入、监听事件等，并将结果传递给视图层进行展示。

  3. 基础层（Client）：基础层是微信客户端提供的底层支持，负责小程序的运行环境和基础服务，包括界面渲染、网络请求、缓存、设备接口等。

1.3 小程序的目录结构和文件类型

目录结构

在这里插入图片描述

components               // 小程序可以重复使用的页面元素（重要）    
pages                    // 小程序页面文件夹，用于存放小程序的页面代码和资源
utils                    // 工具库文件夹，用于存放小程序的公共函数和类.eslintrc.js             // 用于配置ESLint工具的规则和选项
app.js                   // 小程序逻辑层入口文件 （重要）
app.json                 // 小程序全局配置文件   （重要）
app.wxss                 // 小程序全局样式文件
package.config.json      // 项目配置文件
README.md                // 项目说明文件
.gitignore               // Git忽略文件列表
.sitemap.json            // 配置小程序以及其他是否允许被微信索引

pages目录

微信小程序官方建议把所有的小程序的页面，都存放到pages目录中，以单独的文件夹存在

在这里插入图片描述

pages                    // 小程序页面文件夹，用于存放小程序的页面代码和资源index                // 小程序的入口页面和主要逻辑代码所在的目录index.js         // 页面的逻辑层文件index.json       // 页面的配置层文件index.wxml       // 页面的结构层文件index.wxss       // 页面的样式层文件logs                 // 开发阶段的调试和错误日志的记录logs.js          // 日志的逻辑层文件logs.json        // 日志逻辑层文件logs.wxml        // 日志的结构文件logs.wxss        // 日志样式文件

文件类型

文件作用
.js小程序逻辑层文件，包括页面逻辑、组件逻辑和工具函数等
.wxml小程序页面结构文件，类似于 HTML，用于描述页面的结构和内容。
.wxss小程序页面样式文件，类似于 CSS，用于设置页面的样式和布局。
.json小程序配置文件，包括页面路径、底部标签栏、导航栏等配置信息。
.wxs是一种特殊的脚本文件，用于编写小程序中的逻辑部分
.png , .jpg小程序资源文件，包括图片、音频、视频等。

1.4 小程序源文件解析

1.4.1 app.json文件
{// 记录当前小程序的所有页面的路径"pages": ["pages/index/index",   // 定义小程序的主页面路径为 pages/index/index "pages/logs/logs"      // 定义小程序的日志页面路径为 pages/logs/logs],// 全局定义小程序外观表现"window": {"navigationBarTextStyle": "black",   // 导航栏样式为黑色文字"navigationStyle": "custom"          // 自定义导航栏样式},// 定义全局小程序组件的所使用的样式版本"style": "v2",                         // 使用 v2 版本的组件样式"rendererOptions": {"skyline": {"defaultDisplayBlock": true,       // 默认显示块级元素"disableABTest": true,             // 禁用 A/B 测试"sdkVersionBegin": "3.0.0",        // 开始支持的 SDK 版本号"sdkVersionEnd": "15.255.255"      // 结束支持的 SDK 版本号}},"componentFramework": "glass-easel",   // 使用 glass-easel 组件框架"sitemapLocation": "sitemap.json",     // 网站地图的位置为 sitemap.json"lazyCodeLoading": "requiredComponents" // 使用懒加载模式，仅加载必需的组件
}
1.4.2 project.config.json文件
{"appid": "wx8c56f524e410b5a7",          // 微信小程序的 appid，用于标识小程序的唯一性"compileType": "miniprogram",           // 编译类型，目前只支持小程序"libVersion": "3.2.1",                  // 开发工具基础库版本号，用于指定开发工具的基础库版本// 指定小程序包中的文件和目录的信息"packOptions": {"ignore": [],                         // 指定需要忽略的文件和目录"include": []                         // 指定需要包含的文件和目录。},// 小程序开发工具设置，包括使用的特性和插件等"setting": {"coverView": true,                    // 表示是否启用 cover-view 组件"es6": true,                          // 是否启用 ES6 转 ES5"postcss": true,                      // 是否启用 PostCSS"minified": true,                     // 是否压缩代码"enhance": true,                      // 是否开启增强编译模式"showShadowRootInWxmlPanel": true,    // 是否在 WXML 面板中显示 ShadowRoot"packNpmRelationList": [],            // 用于指定 npm 包的依赖关系列表// 用于配置 Babel 转换设置"babelSetting": {  "ignore": [],"disablePlugins": [],"outputPath": ""}},// 条件编译选项，用于指定在不同平台或环境下需要编译的代码。"condition": {},// 编辑器设置，包括缩进类型和大小等。"editorSetting": {"tabIndent": "auto",                   // 指定缩进类型，可以是"auto"、"space"或"tab""tabSize": 2                           // 指定缩进大小},// 模拟器插件库版本号，用于指定开发工具模拟器的插件库版本。"simulatorPluginLibVersion": {}
}

也可以通过详情来设置project.config.json项目配置文件

在这里插入图片描述

1.4.3 sitemap.json文件

配置小程序以及其他是否允许被微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候，小程序的页面就会展示到搜索结果中

{// 描述字段，用于提供关于该文件的更多信息，"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",// 规则字段，用于定义网站地图的规则"rules": [{"action": "allow",        // 规则动作，可以是“allow”或者“disallow”,使用了“allow”，标识允许搜索引擎索引所有页面。"page": "*"               // 页面字段，用于指定要应用规则的页面路径。通过使用通配符“*”表示匹配所有页面。}]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/228872.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【深度学习-图像分类】02 - AlexNet 论文学习与总结

【深度学习-图像分类】02 - AlexNet 论文学习与总结

论文地址：ImageNet Classification with Deep Convolutional Neural Networks 论文学习 1. 摘要 本研究训练了一个大型深度卷积神经网络（CNN），用于对ImageNet LSVRC-2010比赛中的1.2百万高分辨率图像进行分类，这些图…
阅读更多...
十大排序总结之——冒泡排序、插入排序

十大排序总结之——冒泡排序、插入排序

同样，这两几乎也是被淘汰了的算法，尽管它们是稳定的，但是时间复杂度没人喜欢，了解一下就好，没啥好说的，注意最后一句话就行了 一，冒泡排序 1. 算法步骤 共n-1趟，谁两敢冒泡就换了…
阅读更多...
Stable Diffusion API入门：简明教程

Stable Diffusion API入门：简明教程

Stable Diffusion 是一个先进的深度学习模型，用于创造和修改图像。这个模型能够基于文本描述来生成图像，让机器理解和实现用户的创意。使用这项技术的关键在于掌握其 API，通过编程来操控图像生成的过程。 在探索 Stable Diffusion API 的世界…
阅读更多...
相机内参标定理论篇------相机模型选择

相机内参标定理论篇------相机模型选择

相机种类&#xff1a; 当拿到一款需要标定内参的相机时&#xff0c;第一个问题就是选择那种的相机模型。工程上相机类型的划分并不是十分严格&#xff0c;一般来说根据相机FOV可以把相机大概分为以下几类&#xff1a; 长焦相机&#xff1a;< 标准相机&#xff1a;~&…
阅读更多...
2022年全国职业院校技能大赛（高职组）“云计算”赛项赛卷①第一场次：私有云

2022年全国职业院校技能大赛（高职组）“云计算”赛项赛卷①第一场次：私有云

2022年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算”赛项赛卷1 第一场次&#xff1a;私有云&#xff08;30分&#xff09; 目录 2022年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算”赛项赛卷1 第一场次&#xff1a;私有云&#xff0…
阅读更多...
千里马2023年终总结-android framework实战

千里马2023年终总结-android framework实战

背景&#xff1a; hi粉丝朋友们&#xff1a; 2023年马上就过去了&#xff0c;很多学员朋友也都希望马哥这边写个年终总结&#xff0c;因为这几个月时间都忙于新课程halsystracesurfaceflinger专题的开发&#xff0c;差点都忘记了这个事情了&#xff0c;今天特别花时间来写个bl…
阅读更多...
最优化方法Python计算：无约束优化应用——神经网络回归模型

最优化方法Python计算：无约束优化应用——神经网络回归模型

人类大脑有数百亿个相互连接的神经元&#xff08;如下图(a)所示&#xff09;&#xff0c;这些神经元通过树突从其他神经元接收信息&#xff0c;在细胞体内综合、并变换信息&#xff0c;通过轴突上的突触向其他神经元传递信息。我们在博文《最优化方法Python计算&#xff1a;无约…
阅读更多...
SpringMVC框架

SpringMVC框架

SpringMVC 三层架构MVC模式SpringMVC入门案例总结 三层架构 表现层&#xff08;web&#xff09; 页面数据的收集&#xff0c;产出页面 业务逻辑层&#xff08;service&#xff09; 业务处理 数据访问层&#xff08;Dao&#xff09; 数据持久化 MVC模式 SpringMVC 基于Java…
阅读更多...
影视后期：PR 调色处理,灰片还原,校色偏色素材

影视后期：PR 调色处理,灰片还原,校色偏色素材

灰片还原 确定拍摄灰片的相机型号品牌官网下载专用log文件LUT-浏览-导入slog3分析亮部波形-增加画面对比分析矢量示波器-提高整体饱和 校正LUT可以将前期拍摄的log色彩模式的视频转换为成709色彩模式&#xff0c;即将灰度视频转换为正常效果(灰片还原) 各个相机有对应的校正L…
阅读更多...
开源预约挂号平台 - 从0到上线

开源预约挂号平台 - 从0到上线

文章目录 开源预约挂号平台 - 从0到上线演示地址源码地址可以学到的技术前端技术后端技术部署上线开发工具其他技术业务功能 项目讲解前端创建项目 - 安装PNPM - 使用VSCODE - 安装插件首页顶部与底部 - 封装组建 - 使用scss左右布局中间内容部分路由 - vue-routerBANNER- 走马…
阅读更多...
RFC6749-OAuth2.0

RFC6749-OAuth2.0

前言 最近在项目中需要实现SSO(单点登录)功能,以实现一处注册,即可在任何平台之间登录的功能。我们项目中并没有直接对接第三方认证系统而是通过集成keycloak 完成一系类安全协议的对接工作。如果我们在代码级别自己完成各种安全协议的对接是一项十分大的工程。不仅要走统一的…
阅读更多...
jsp介绍

jsp介绍

JSP 一种编写动态网页的语言&#xff0c;可以嵌入java代码和html代码&#xff0c;其底层本质上为servlet,html部分为输出流&#xff0c;编译为java文件 例如 源jsp文件 <% page contentType"text/html; charsetutf-8" language"java" pageEncoding&…
阅读更多...
Django 学习教程-介绍与安装

Django 学习教程-介绍与安装

系列 Django 学习教程- Hello world入门案例-CSDN博客 介绍 Django 是一个由 Python 编写用于Web 应用程序开发的高级 Python Web 框架 Django 提供了一套强大的工具&#xff08;无需重新发明轮子&#xff09;&#xff0c;使得开发者能够快速构建 Web 网站。 Django 采用了…
阅读更多...
【每日一题】收集巧克力

【每日一题】收集巧克力

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;枚举操作数 写在最后 Tag 【枚举】【数组】【2023-12-28】 题目来源 2735. 收集巧克力 题目解读 有长度为 n, 下标从 0 开始的整数数组 nums, 表示收集不同类型的巧克力的成本. nums[i] 表示收集类型 i 巧克力的成本…
阅读更多...
linux下docker搭建Prometheus +SNMP Exporter +Grafana进行核心路由器交换机监控

linux下docker搭建Prometheus +SNMP Exporter +Grafana进行核心路由器交换机监控

一、安装 Docker 和 Docker Compose https://docs.docker.com/get-docker/ # 安装 Docker sudo apt-get update sudo apt-get install -y docker.io# 安装 Docker Compose sudo apt-get install -y docker-compose二、创建配置文件及测试平台是否正常 1、选个文件夹作为自建…
阅读更多...
simulink代码生成（六）——多级中断的配置

simulink代码生成（六）——多级中断的配置

假如系统中存在多个中断&#xff0c;需要合理的配置中断的优先级与中断向量表&#xff1b;在代码生成中&#xff0c;要与中断向量表对应&#xff1b;中断相关的知识参照博客&#xff1a; DSP28335学习——中断向量表的初始化_中断向量表什么时候初始化-CSDN博客 F28335中断系…
阅读更多...
WPF Button使用漂亮 控件模板ControlTemplate 按钮使用控制模板实例及源代码 设计一个具有圆角边框、鼠标悬停时颜色变化的按钮模板

WPF Button使用漂亮 控件模板ControlTemplate 按钮使用控制模板实例及源代码 设计一个具有圆角边框、鼠标悬停时颜色变化的按钮模板

续前两篇模板文章 模板介绍1 模板介绍2 WPF中的Button控件默认样式简洁&#xff0c;但可以通过设置模板来实现更丰富的视觉效果和交互体验。按钮模板主要包括背景、边框、内容&#xff08;通常为文本或图像&#xff09;等元素。通过自定义模板&#xff0c;我们可以改…
阅读更多...
jmeter的常用功能及在测试中的基本使用和压测实战

jmeter的常用功能及在测试中的基本使用和压测实战

Jmeter基础功能 了解Jmeter的常用组件 元件&#xff1a;多个类似功能组件的容器&#xff08;类似于类&#xff09; 一&#xff1a;Test Plan&#xff08;测试计划&#xff09; 测试计划通常用来给测试的项目重命名&#xff0c;使用多线程脚本运行时还可以配置线程组运行方式…
阅读更多...
SQLSERVER排查CPU占用高

SQLSERVER排查CPU占用高

操作系统是Windows2008R2 ,数据库是SQL2008R2 64位 64G内存，16核CPU 硬件配置还是比较高的，他说服务器运行的是金蝶K3软件，数据库实例里有多个数据库 现象 他说是这几天才出现的，而且在每天的某一个时间段才会出现CPU占用高的情况 内存占用不太高，只占用了30个G CPU…
阅读更多...
Java---网络编程

Java---网络编程

文章目录 1. 网络编程概述2. InetAddress3. 端口和协议4. Java网络API5. URL6. URLConnection类 1. 网络编程概述 1. 计算机网络&#xff1a;是指将地理位置不同的具有独立功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在网络操作系统、网络管理软…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023