微信小程序开发一

article/2025/10/4 22:57:29

*****22222
微信官方 https://developers.weixin.qq.com
在这里插入图片描述
在这里插入图片描述
*****333
在这里插入图片描述
在这里插入图片描述
*****44444
在这里插入图片描述

*****5555
*****6666
在这里插入图片描述
按钮的使用
组件按钮的使用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击事件

在这里插入图片描述
在这里插入图片描述
动态点击事件
在这里插入图片描述
在这里插入图片描述
微信循环事件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
模板的引用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
点击 事件,长按事件,触摸事件都属于“冒泡事件”
其他都属于非冒泡事件

在这里插入图片描述
在这里插入图片描述

在微信小程序的代码文件中,**

微信小程序中的每一个页面的【路径+页面名】

都需要写在 app.json 的 pages 中,用来激活。


app.js、app.json、app.wxss

** 这三个文件是必不可少的,一般默认生成。其中,

.js后缀的是脚本文件,

调用小程序框架提供的 API—— API 文档

.json后缀的文件是配置文件,

json后缀的文件是对整个小程序的全局配置文件——配置详解

.wxss后缀的是样式表文件

wxss后缀的是样式表文件。
是整个小程序的公共样式表
其他自定义文件夹下的页面中,wxml后缀的文件是页面结构文件。
。微信小程序会读取这些文件,并生成小程序实例。

下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序。

app.js

是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档

app.json

是对整个微信小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
app.json文件的pages属性的路径配置与tabBar内的list属性的路径配置必须一一对应,协调一致,不然调用了哪个页面,二者中有一个没配置都不起作用

app.wxss

是整个微信小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
创建页面
在这个教程里,

我们的微信小程序有两个页面,index 页面和 logs 页面

,即欢迎页和微信小程序启动日志的展示页,

他们都在 pages 目录下

。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中,且 pages 中的第一个页面是小程序的首页。

一个小程序页面是由同路径下同名的四个不同后缀文件的组成

,如:index.js、index.wxml、index.wxss、index.json。
.js后缀的文件是脚本文件,
.json后缀的文件是配置文件,
.wxss后缀的是样式表文件,
.wxml后缀的文件是页面结构文件。
在这里插入图片描述

index.wxml

是页面的结构文件:
本例中使用了、、 来搭建页面结构,绑定数据和交互处理函数。

index.js

是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
微信小程序页面的样式表是非必要的。当有页面样式表时,页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表,也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。

index.json

是页面的配置文件:

微信小程序页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。


http://chatgpt.dhexx.cn/article/TUlBZkW2.shtml

相关文章

微信小程序 - 核心

1、Web页面 2、项目结构 Ps1:应用程序的三个文件app.js、app.json、app.wxss在整个小程序中是唯一的,是全局的;页面级别的会覆盖全局的样式和json(配置),就近原则。 Ps2:project.config.json是自动生成的,…

微信小程序生态15- 批量提交微信小程序审核的一种方式

文章导航 微信小程序生态1-初识小程序 微信小程序生态2-创建一个微信小程序 微信小程序生态3-微信小程序登录流程设计 微信小程序生态4-扫普通二维码进入小程序、打开短链接进入小程序 微信小程序生态5-微信公众号扫码登录PC端网页 微信小程序生态6-微信公众号授权登录(适用于…

微信小程序订阅消息定时发送消息

微信小程序订阅消息定时发送消息 本人专注使用云开发,实现一个前端可以做后端以及整个项目的部署与上线。 如果觉得我讲的好就可以给我点个赞。也可以加我微信了解详情。 1.我们先要了解什么是订阅消息 而现在小程序支持云开发,使用云函数可以免鉴权。…

java 基本微信小程序的一起考研资料学习系统 uniapp 小程序

随着移动互联网技术的迅速发展,要求人们的知识水平和综合素质越来越高。自学能力成为提高自己水平的关键,因此出现了各种适合自学的在线学习网站。如手机APP,电脑软件,书本等等,其中用户量最多的还是不受时间,地点限制的手机应用,和各类微信小程序。其原因是手机及微信已经成了…

java后端-微信小程序使用七牛云存储

微信小程序使用七牛云存储 导读开发前的准备七牛云配置微信小程序测试号配置java配置-spring-boot 正式开始java端代码七牛云工具类编写响应类编写七牛云响应结果获取token的控制器 小程序代码七牛云工具类工具类的调用 总结查阅资料七牛云 导读 最近在做一个微信小程序项目&a…

微信小程序开发前端基础知识

文章目录 一、简介1、是什么2、为什么 二、准备工作1、环境准备1.1、注册账号1.2、获取APPID1.3、开发工具 2、创建微信小程序 三、组件1、目录及其作用介绍2、页面操作3、view 块级元素4、<navigator>导航跳转5、scroll-view滚动6、text 行标签7、swiper 轮播8、常用表单…

微信小程序——图片识别

我的微信小程序 期末大作业——基于百度大脑API的图片识别小程序 具体实现了动物识别、植物识别、车辆识别 三个功能 实验源码已经放到了我的GitHub&#xff0c;欢迎测试修改 GitHub仓库地址&#xff1a;https://github.com/ZHJ0125/ImageMaster 备用码云仓库地址&#xff1a;h…

微信小程序使用云开发

微信小程序使用云开发 1.序言2.初识云开发3.环境搭建4.正式使用5.使用感受6.结语 1.序言 最近给一位即将毕业的同学做了一个毕设(需求是一个小程序)&#xff0c;最开始我是使用自身最为熟悉的语言(Java) 进行编写的后端接口。然后做了几天&#xff0c;哪怕最熟悉&#xff0c;但…

微信小程序学习笔记

1. 小程序简介 小程序是一种全新的连接用户与服务的方式&#xff0c;它可以在微信内被便捷地获取和传播&#xff0c;同时具有出色的使用体验。 2.小程序运行环境 微信小程序API文档 boolean wx.canIUse(string schema) | 微信开放文档https://developers.weixin.qq.com/minipr…

微信小程序 audio 音频 组件

完整微信小程序(Java后端) 技术贴目录清单页面&#xff08;必看&#xff09; 音频。1.6.0版本开始&#xff0c;该组件不再维护。建议使用能力更强的 wx.createInnerAudioContext 接口 属性类型默认值必填说明最低版本idstring否audio 组件的唯一标识符1.0.0srcstring否要播放…

微信小程序三级分类

今天&#xff0c;在做一个电商小程序的分类页面&#xff0c;要实现三级分类。首先&#xff0c;先上图。 要完成这样一个功能&#xff0c;前端的界面就不说了&#xff0c;具体说说怎么实现的吧&#xff0c;说复杂也挺复杂的&#xff0c;说简单只要会了思路就不难了。其实思路就…

微信小程序如何获取数组下标

我们在写代码的时候我们经常会用到获取数组下标的方法&#xff0c;我们知道java通常是用for循环&#xff0c;i,输出i就出来了&#xff0c;那对于小程序该怎么实现呢&#xff0c;首先我们会想到直接用index,但是这种方法是不可行的。 1.首先要在js文件里写一个方法&#xff0c;…

Maven项目无法使用JSONObject.fromObject方法的解决方案

JSONArray jsonArray JSONArray.fromObject (arrayStr); 解决方案 导包依赖 import net.sf.json.JSONObject;<!-- JSONObject对象依赖的jar包 --> <dependency> <groupId>commons-beanutils</groupId> <artifactId>commons-beanutils<…

Cannot deserialize value of type `java.lang.Integer` from Object value (token `JsonToken.START_OBJEC

错误信息&#xff1a;org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type java.lang.Integer from Object value (token JsonToken.START_OBJECT); nested exception is com.fasterxml.jackson.databin…

cannot deserialize from Object value (no delegate- or property-based Creator) 解决方法

问题描述 直接上图 报错 cannot deserialize from Object value (no delegate- or property-based Creator) 无法从Object值反序列化&#xff08;没有基于委托或属性的创建者&#xff09; 原因分析&#xff1a; 返回的pojo类&#xff0c;里面添加了一个全参构造函数&#x…

JsonArray.fromObject()将集合转换成字符串(案例学习)

【辰兮要努力】&#xff1a;hello你好我是辰兮&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行&#xff01; 博客来源于项目以及编程中遇到的问题总结&#xff0c;偶尔会有读书分享&#xff0c;我会陆续更新Java前端、后台、…

JSONObject没有fromObject方法(Json lib 库的使用)

刚开始还不知道为啥&#xff0c;最后到 jsonlib 网站上查看了原因&#xff0c;这个是连接地址 Json-lib comes in two flavors, depending on the jdk compatibility. json-lib-x.x-jdk13 is compatible with JDK 1.3.1 and upwards. json-lib-x.x-jdk15 is compatible with J…

关于JSONObject.fromObject方法报错解决方法

最近在学习web开发时&#xff0c;遇到了这样的一个报错&#xff1a; 查了很久才发现错误。 解决方案&#xff1a; 1、查看架包 一共是6个架包 下面是IDEA环境添加架包语句&#xff1a; <dependency><groupId>commons-beanutils</groupId><artifactId&…

JSONArray.fromObject(str)

com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex 根源 所在 引入的jar包重复了 &#xff01; 本次问题场景 &#xff1a; 使用 json 解析 [{"num":"D30","data":"23.6"},{"num":"D…

JSONObject.fromObject 日期类型转换问题

今天在开发的时候遇到的问题&#xff1a; 由于需要调用rest服务&#xff0c;所以将dto对象转换为JSON的时候出现了日期格式不正确的问题&#xff1a; 首先查看接收的DTO&#xff1a; 由于接口需要以数组的方式传输&#xff1a; JSONArray jsonArray array.fromObject ( Arra…