微信小程序开发之创建一个自己的项目和项目目录下各个文件的了解

news2024/12/23 10:56:55

1、小程序开发工具基础

在这里插入图片描述
(1)菜单栏:可以对开发工具进行一些简单的设置,还可以在帮助一行获取学习相关api文档
(2)模拟器显示栏:每当我们在进行便写好代码之后,通过编译可以在模拟显示栏上看到效果、
(3)代码编辑栏:对于业务需求,编写我们所需要的相关代码的地方。
(4)编译栏;主要的作用就是我们在编译的过程中可以看到编译的细节,包括编译出现的错误等等。

2、创建一个项目

在这里插入图片描述
备注:appid在邮箱注册的微信小程序中
在这里插入图片描述

3、项目的具体结构

在这里插入图片描述

(1)page:page页面,存放小程序的所以页面
(2)Utils:存放工具性质的模块
(3)app.js:小程序项目的入口文件
(4)app.json:小程序项目的全局配置文件、
(5)app.wxss:小程序项目的格式样式文件
(6)project.config.json:项目配置文件
(7)sitemap.json:用来配置小程序或者页面是否允许被微信索引

3.1page页面的详解

在这里插入图片描述
每个页面都是以单独的文件夹组成;每个文件夹包括四个部分
(1) XXX.js:页面的脚本文件,存放页面的数据、事件处理函数
(2)XXX.json:当前页面的配置文件,配置窗口的外观、表现等
(3)XXX.wxml:当前页面的模板结构文件
(4)XXX.wxss:当前页面的样式表文件

4 小程序代码的详解

4.1JSON配置文件

json是一种数据格式,在小程序开发中充当配置的作用,小程序开发中json一共有四种构成
(1)app.json
app.json是全局配置,包括小程序所有页面的路径、窗口外观、界面的表现、底部的tab等等
在这里插入图片描述
(a)page配置项
用来配置当前小程序的所有页面的路径
(b)window配置项
全局定义小程序所以页面的背景色和文字颜色等等
(c)style配置项
全局定义小程序组件所使用的样式版本
(d)sitemaplocation配置项
用来指明sitemap.json的位置
(2)project.config.json
project.config.json配置主要是记录小程序开发工具所做的个性化设置
在这里插入图片描述
(a)seting配置
保存了编译相关的配置
(b)appid配置
保存了微信小程序账号appid
(3)页面.json
对于页面的窗口外观进行配置,页面的配置会覆盖app.json中的配置
(4)sitemap.json
sitemap.json页面主要的作用就是配置小程序页面是否被允许微信索引
注意:sitemap的索引提示默认是开启的,如果需要关闭,在project.config.json文件中的setting配置项中checkSiteMap:false

5 新建一个小程序页面

在app.json中page配置项目添加一个自己想要新建的页面,如下图,然后保存后,pages文件夹下就会自动生成新建的页面
在这里插入图片描述
如何修改项目首页?
在app.json文件中的pages配置项中的顺序对换,就可以进行项目首页的修改

6 了解wxml模板

6.1什么是wxml

wxml是小程序设计的一套标签语言,用来构建小程序页面的结构。其本质与网页设计的html类似

6.2 wxml与html的区别

(1)标签名称不同

  • html(div、span、img、a)
  • wxml(view、text、image、navigator)

(2)属性节点不同

  • <a href="超链接"></a>
  • <navigator url="pages/list/list"></nabigator``>

(3)提供类似于vue中的模板语法

  • 数据绑定
  • 列表熏染
  • 条件渲染

7 了解wxss

7.1什么是wxss

wxss是一套样式语言,用于描述wxml的组件样式,与网页中的css类似。

7.2 wxss与css的区别

(1)新增了rpx尺寸单位
  • css中要手动进行像素的单位换算,例如rem

  • wxss底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

    (2)提供了全局样式和局部样式

  • 项目中的app.wxss会作用与所有小程序页面

  • 局部的页面.wxss只会作用与当前页面

    (3)wxss仅支持部分css选择器

  • .class和#id

  • element

  • 并集选择器、后代选择器

  • ::after和::before等伪类选择器

8 了解.js文件

8.1 小程序中的.js文件

在小程序中我们仅仅是看页面是不够的,需要小程序通过.js文件来处理用户的数据,例如响应用户的点击、和获取位置等等。

8.2 小程序中的js文件分类

  • app.js文件
    是整个小程序的入口文件,通过调用app()函数来启动整个小程序。
  • 页面中的js文件
    是页面的入口文件,通过调用page()函数来创建并运行页面。
  • 普通的js文件
    是普通的功能模块文件,用来封装公共函数或属性供页面使用。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Springboot+vue的医疗挂号管理系统+数据库+报告+免费远程调试

效果介绍: Springbootvue的医疗挂号管理系统&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目 本文设计了一个基于Springbootvue的前后端分离的医疗挂号管理系统&#xff0c;采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;con…

OceanMind海睿思入选中国信通院《2023高质量数字化转型技术解决方案集》

近日&#xff0c;由中国信息通信研究院“铸基计划”编制的《2023高质量数字化转型技术解决方案集&#xff08;第一版&#xff09;》正式发布。 中新赛克海睿思 凭借卓越的产品力以及广泛的行业实践&#xff0c;成功入选该方案集的数据分析行业技术解决方案。 为促进数字化转型…

嵌入式指纹方案——ACM32FP0 二合一(主控+TK)锁控芯片

随着智能设备的持续发展&#xff0c;指纹识别技术成为了现在智能终端市场和移动支付市场中占有率最高的生物识别技术。凭借高识别率、短耗时等优势&#xff0c;被广泛地运用在智能门锁、智能手机、智能家居等设备上。 我们推荐的产品在2015年进入指纹识别应用领域&#xff0c;自…

PR无法在指定轨道上粘贴

在Adobe Premier Pro 2022中&#xff0c;按照视频教程复制(Ctrl C)、粘贴(Ctrl V)一段视频素材时&#xff0c;不能粘贴到点亮的轨道上&#xff0c;尝试了几次都不行。 最后找到了原因。 在快捷键设置中&#xff0c;发现CtrlV快捷键对应的是&#xff0c;粘贴到同一轨道&…

CCTSDB 数据集 VOC/YOLO格式

CCTSDB 数据集是由长沙理工大学的相关学者及团队制作而成的&#xff0c;其有交通标志样本图片有近 20000 张&#xff0c;共含交通标志近 40000 个&#xff0c;但目前只公开了其中的 10000 张图片&#xff0c;标注了常见的指示标志、禁令标志及警告标志三大类交通标志。经过筛选…

Linux/Agile

Agile Enumeration Nmap 扫描发现对外开放了22和80端口&#xff0c;使用nmap详细扫描这两个端口 nmap -sC -sV -oA Agile.nmap -p 22,80 10.10.11.203 详细扫描22和80端口&#xff0c;22端口运行着ssh服务,80端口运行着http服务&#xff0c;nmap揭示了域名superpass.htb&am…

vue中循环数据,添加展开、收起操作

1.在data中定义变量 expandedIndex&#xff0c;默认展开第一条 expandedIndex:0,2.标题栏展开、收起显示判断&#xff0c;并填加点击事件 toggleVisibility <h5 class"titleLine">{{item.checkPart}} <span click"toggleVisibility(index)">…

怎么建设数据中台?详解数据中台架构内的三大平台

一、什么是数据中台&#xff1f; 要知道“中台”是什么&#xff0c;就得先了解“前台”和“后台”。 前台&#xff0c;就是我们日常使用的过程中可以直接看到和感知到的东西&#xff0c;比如你打开某东app买了个3080显卡&#xff0c;在这个过程中你看到的页面以及搜索、点击详…

Java学习笔记20——枚举类型的创建与使用

在实际编程中&#xff0c;存在着这样的“数据集”&#xff0c;它们的数值在程序中是稳定的并且个数是有限的。例如春、夏、秋、冬四个数据元素组成了四季的“数据集”&#xff0c;一月到十二月组成了十二个月份的“数据集”&#xff0c;周一到周五及周六周日组成了每周七天的“…

了解交换机上的SFP和QSFP端口

在当今互联的世界中&#xff0c;可靠、高效的网络通信对于企业的蓬勃发展至关重要。为了实现顺畅的连接&#xff0c;了解能够实现该目标的技术非常重要。其中一项关键技术是交换机上的SFP和QSFP端口。本文将简要介绍这些概念&#xff0c;定义并解释交换机SFP端口和QSFP端口的优…

面试官:对于 Java 中多态的理解是什么?

面试官&#xff1a;对于 Java 中多态的理解是什么&#xff1f; 题目 面试官&#xff1a;对于 Java 中多态的理解是什么&#xff1f; 推荐解析 1.父类的引用指向子类的对象 子类重写父类的方法&#xff1a;子类可以继承父类的方法&#xff0c;并对其进行重写。当通过父类的…

Python炒股自动化(5):通过接口查询订单,查询账户资产

上一节我们演示了报单撤单&#xff0c;也叫提交委托和撤销委托&#xff0c;我习惯说下单撤单&#xff0c;与交易所建立连接这里不演示了&#xff0c;没看的可以点下面链接了解一下 Python炒股自动化&#xff08;4&#xff09;&#xff1a;通过接口向交易所发送订单https://cai…

关于msvcp140.dll丢失的解决方法详情介绍,修复dll文件的安全注意事项

在使用电脑的过程中&#xff0c;是否有遇到过关于msvcp140.dll丢失的问题&#xff0c;遇到这样的问题你是怎么解决的&#xff0c;都有哪些msvcp140.dll丢失的解决方法是能够完美解决msvcp140.dll丢失问题的&#xff0c;今天小编将带大家去了解msvcp140.dll文件以及分析完美解决…

2024年是否值得投资购买Photoshop?优势与劣势解析

相信所有的设计师都是对的 Adobe Photoshop 非常熟悉&#xff0c;它是一款专业的照片编辑软件应用程序。如果您有兴趣购买&#xff0c;请购买。 Adobe Photoshop&#xff0c;也许你想知道Adobe Photoshop价格。Adobe Photoshop的价格反映了它强大的使用价值&#xff0c;下面是不…

Vuex状态、数据持久化(vue2、vue3状态数据持久化)

简介&#xff1a;Vuex是一个仓库&#xff0c;是vue的状态管理工具&#xff0c;存放公共数据&#xff0c;任何组件都可以使用vuex里的公共数据。Vuex提供了插件系统&#xff0c;允许我们使用 vuex-persistedstate插件&#xff0c;将Vuex的状态持久化到本地存储中&#xff0c;解决…

@arco.design radioGroup 组件手写 beforeChange 方法

官方是没有提供 beforeChange 事件的&#xff0c;只能自己写一个 子组件&#xff08;CustomRadioGroup&#xff09; <template><a-radio-group :model-value"modelValue" change"onRadioChange"><a-radio v-for"item in list" …

【C语言】基础(与python语法比较)

1、【C#】 printf ① 头文件stdio.h&#xff0c;② 注意语法格式&#xff0c;③ printf的文本结尾不换行&#xff0c;④ printf中参数是字符&#xff0c;其它类型可以转为文本&#xff0c;例如"%i","%f"等。 #include <stdio.h>int main(void) {in…

今日问题:动态分配内存出错

2024.3.22 在搜素了许多文章和查阅了许多博客后依然没有找到问题所在&#xff0c;最后无意之间翻看以前的关于动态内存管理的代码后发现&#xff1a; 没加头文件&#xff1a;#include<stdlib.h> 苦笑不得了属于是 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio…

抖音,剪映,TikTok,竖屏短视频转场pr模板视频素材

120个叠加效果视频转场过渡素材&#xff0c;抖音,剪映,TikTok,短视频转场pr模板项目工程文件。 效果&#xff1a;VHS、光效、胶片、霓虹灯闪光、X射线、信号、老电影等。 适用软件&#xff1a;Adobe Premiere Pro 2018 12.0或更高版本。 视频素材与大多数应用程序兼容&#xff…

JavaWeb:AOP、配置优先级、Bean管理、SpringBoot原理、Maven高级

1 AOP 1.1 基本语法 面向切面编程、面向方面编程&#xff0c;面向特定方法编程 在管理bean对象的过程中&#xff0c;主要通过底层的动态代理机制&#xff0c;对特定的方法进行编程 应用&#xff1a;统计每一个业务方法的执行耗时 xml引入依赖 <!-- AOP-->&l…