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

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.mzph.cn/news/762672.shtml

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

相关文章

华为ensp中ospf基础 原理及配置命令(详解)

CSDN 成就一亿技术人&#xff01; 作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; CSDN 成就一亿技术人&#xff01; ————前言———— OSPF 的全称是 Open Shortest Path First&#xff0c;意为“开放式最短路径优先”。是一种内部网关协…

【wpf 应用6】基本控件-Label的详解与示例

在WPF中&#xff0c;Label控件主要用于显示文本信息&#xff0c;通常用于作为其他控件的说明或者展示数据。Label控件本身不支持交互&#xff0c;它仅用于展示目的。与TextBlock控件相比&#xff0c;Label控件提供了一些特定的样式和行为&#xff0c;使其更适合作为说明性文本使…

【算法刷题day3】Leetcode: 203.移除链表元素、707.设计链表、 206.反转链表

链表基础知识 分类&#xff1a; 单链表、双链表、循环连链表 存储方式&#xff1a; 链表中的节点在内存中不是连续分布的 &#xff0c;而是散乱分布在内存中的某地址上&#xff0c;分配机制取决于操作系统的内存管理。 链表的定义&#xff1a; struct ListNode{int val; //节…

【如何安装odl: 1.0.0.dev0】

【如何安装odl: 1.0.0.dev0】 ODL官网 pip install odl可能容易报错&#xff0c;建议使用下述命令安装 pip install https://github.com/odlgroup/odl/archive/master.zip检查是否安装成功 conda list

面试 Java 基础八股文十问十答第十八期

面试 Java 基础八股文十问十答第十八期 作者&#xff1a;程序员小白条&#xff0c;个人博客 相信看了本文后&#xff0c;对你的面试是有一定帮助的&#xff01;关注专栏后就能收到持续更新&#xff01; ⭐点赞⭐收藏⭐不迷路&#xff01;⭐ 1&#xff09;多线程场景下如何使用…

聊聊车载以太网PMA测试解决方案

自2013年起&#xff0c;车载以太网技术日益成熟&#xff0c;在电子电气系统中应用越来越广泛&#xff0c;因此逐渐有很多主机厂和供应商加入到车载以太网技术的开发应用中&#xff0c;同时对传输速率的要求逐步提高&#xff0c;产生了传输速率更高的车载以太网技术&#xff0c;…

排序算法练习——实现合并区间:给定一组区间,将所有重叠的区间合并为一个区间

要实现合并区间&#xff0c;你可以按照区间的起始位置对区间进行排序&#xff0c;然后依次遍历区间&#xff0c;将重叠的区间合并。以下是实现的示例代码&#xff1a; def merge_intervals(intervals):if not intervals:return []# 按照区间的起始位置进行排序intervals.sort(…

低代码开发平台开源:依靠科技力量实现数字化转型!

在竞争激烈的当今社会&#xff0c;数字化转型、流程化办公等字眼早已充斥在我们的职场生活中。虽然如此&#xff0c;但是我们依然要面临着这样一个现实问题&#xff1a;很多中小企业发展面临着资源有限、技术储备不足、人才短缺的现实问题&#xff0c;进入流程化办公困境依然明…

Linux东方通下载及使用

解压文件 mkdir /usr/local/java 加压包拖进去 vi /etc/profile 复制路径修改路径 export JAVA_HOME/usr/local/java/jdk1.8.0_151 export CLASSPATH.:${JAVA_HOME}/jre/lib/rt.jar:${JAVA_HOME}/lib/dt.jar:${JAVA_HOME}/lib/tools.jar export PATH$PATH:${JAVA_HOME}/bin 进入…

Day41:WEB攻防-ASP应用HTTP.SYS短文件文件解析Access注入数据库泄漏

目录 ASP-默认安装-MDB数据库泄漏下载 ASP-中间件-CVE&短文件&解析&写权限 HTTP.SYS&#xff08;CVE-2015-1635&#xff09;主要用作蓝屏破坏&#xff0c;跟权限不挂钩 IIS短文件(iis全版本都可能有这个问题) IIS文件解析 IIS写权限 ASP-SQL注入-SQLMAP使用…

C语言实现射击小游戏

以下是一个简单的C语言射击小游戏的实现示例。这个游戏中&#xff0c;玩家控制一个飞船&#xff0c;敌方飞船会随机出现并向玩家移动。如果玩家的飞船与敌方飞船相撞&#xff0c;玩家就失去一条生命&#xff0c;代码如下&#xff1a; #include <stdio.h> #include <s…

1.1-编程语言是什么

编程语言是什么 正式学习 Python 之前&#xff0c;我们有必要先搞清楚【编程语言】这个概念。 在我们很小的时候&#xff0c;父母就教我们开口说话&#xff0c;也教我们如何理解别人讲话的意思。经过长时间的熏陶和自我学习&#xff0c;我们在不知不觉中学会了说话&#xff0…

软件推荐 篇三十七:安卓软件推荐IP Tools「IP工具」:全面解析网络状态与管理的必备神器

引言&#xff1a; 随着互联网的普及&#xff0c;网络已经成为我们日常生活中不可或缺的一部分。无论是工作、学习还是娱乐&#xff0c;我们都需要通过网络来进行各种操作。然而&#xff0c;网络问题的出现往往会给我们带来诸多困扰。为了更好地管理和优化网络&#xff0c;我们…

SunFMEA冠翔(台山)工业FMEA培训会圆满结束

近日&#xff0c;SunFMEA软件成功在冠翔&#xff08;台山&#xff09;工业有限公司举办了为期三天的FMEA软件系统培训&#xff0c;通过重要知识讲解、现场答疑、演练互动、软件实操等环节&#xff0c;把培训氛围推向高潮。 ​ 此次培训分为DFMEA与PFMEA两部分&#xff0c;按照七…

LiveGBS流媒体平台GB/T28181常见问题-如何订阅设备状态在线离线状态redis订阅设备或是通道状态subscribe device操作及示例

LiveGBS如何订阅设备状态在线离线状态redis订阅设备或是通道状态subscribe device操作及示例 1、如何监听设备状态2、device订阅2.1、设备上线消息2.2、设备离线消息2.2、通道上线消息2.2、通道离线消息 3、订阅示例3.1、连接REDIS3.2、订阅device示例3.3、设备上线示例3.3.1、…

Oracle数据库进行sql优化的思路和方法

1. 查询语句优化 精简SQL: 避免使用 SELECT *&#xff0c;只选择需要的列&#xff0c;减少数据传输量。避免NOT IN 和 NOT EXISTS: 当可行时&#xff0c;改用 LEFT JOIN 或其他形式的查询&#xff0c;因为NOT IN和NOT EXISTS往往导致全表扫描或较差的执行计划。避免在WHERE子句…

binary.write 和 binary.read

golang中encoding/binary包 1、golang包中的binary包是什么&#xff1f; 2、binary为我们开发者提供了哪些内容&#xff1f;以及怎么使用&#xff1f; 3、编解码有哪几种方法&#xff1f; 转化成二进制格式与原本数据转字符串相比会更节省空间 一、golang包中的binary包是什…

用DevOpsGPT 5分钟开发一个网页小游戏

前言&#xff1a; 今天教大家如何制作一个简易的网页小游戏&#xff0c;步骤很简单&#xff0c;我们只需要用到一个智能开发软件&#xff0c;即可自动帮助我们完成开发。话不多说&#xff0c;接下来&#xff0c;我们直接上教程&#xff01; ​ 官网&#xff1a;KUAFUAI - AI 驱…

ESP32通过USB/UART/ble/其他协议OTA报错解决

1、乐鑫官方例程 ESP32的OTA 例程是基于HTTP接口&#xff0c;需要连接WIFI和HTTP服务器&#xff0c;使用上不是很灵活&#xff0c;根据ESP32 idf component OTA相关API接口&#xff0c;理论上可以通过任何通信方式和协议进行升级&#xff0c;只要保证文件传输准确、flash空间足…

基于Matlab的视频人体动作识别,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…