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

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;意为“开放式最短路径优先”。是一种内部网关协…

【算法刷题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

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

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

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

在竞争激烈的当今社会&#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使用…

软件推荐 篇三十七:安卓软件推荐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、…

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

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

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

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

智过网:一级建造师必须两年考过吗?有效期多久?

在建筑行业&#xff0c;一级建造师的职业资格证书是众多从业者追求的目标。然而&#xff0c;获得这一证书并非易事&#xff0c;它要求考生不仅具备扎实的专业知识&#xff0c;还需要在限定的时间内完成所有科目的考试。那么&#xff0c;一级建造师是否必须在两年内考完所有科目…

鸿蒙Harmony应用开发—ArkTS-全局UI方法(文本滑动选择器弹窗)

根据指定的选择范围创建文本选择器&#xff0c;展示在弹窗上。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 本模块功能依赖UI的执行上下文&#xff0c;不可在UI上下文不明确的地方使用&#xf…

ArkTS编写的HarmonyOS原生聊天UI框架

简介 ChatUI&#xff0c;是一个ArkTS编写的HarmonyOS原生聊天UI框架&#xff0c;提供了开箱即用的聊天对话组件。 下载安装 ohpm install changwei/chatuiOpenHarmony ohpm 环境配置等更多内容&#xff0c;请参考如何安装 OpenHarmony ohpm 包 接口和属性列表 接口列表 接…

day15-maven高级

1. 分模块设计与开发 步骤 创建 maven 模块 tlias-pojo&#xff0c;存放实体类。创建 maven 模块 tlias-utils&#xff0c;存放相关工具类。 <dependency><groupId>com.itheima</groupId><artifactId>tlias-pojo</artifactId><version>1.0…

线性表:关于链表(主要以单链表为例)的相关理解和应用

多清澈这天空 晴雨相拥 同心逐梦&#xff01; 坚守我信心 一路出众&#xff01;&#xff01; 首先&#xff0c;按照惯例&#xff0c;欢迎大家边听歌边观看本博客 ▶ 紫荆花盛开 (163.com)&#xff08;建议复制链接&#xff0c;浏览器打开&#xff0c;csdn打开太慢了&#x…

Error Lens插件

最近在看视频学习的时候&#xff0c;发现了一个我认为很好用的插件。 就是Error Lens&#xff0c;这个插件它能够以高亮、内联显示代码中的错误、警告和其他诊断信息&#xff0c;让开发者无需查看控制台或问题面板&#xff0c;就能在编辑代码的过程中直观地看到并快速定位到代码…

Java-Java基础学习(4)-多线程(2)

3.7. Lambda表达式 为什么要使用lambda表达式 避免匿名内部类定义过多&#xff1b;可以让代码看起来更简洁&#xff1b;去掉一堆没有意义的代码&#xff0c;只留下核心逻辑 属于函数式编程的概念&#xff0c;格式 (params) -> expression [表达式](params) -> statement…

【MySQL】存储过程、存储函数、触发器

目录 存储过程介绍技术背景存储过程的作用与优势存储过程跟自定义函数很像。它们的区别是&#xff1a; 存储过程的缺点存储过程的特性基本存储过程使用1.创建语法语法说明&#xff1a;使用案例1.创建获取新闻类别数量的存储过程2.创建获取指定新闻类别ID下新闻数量的存储过程 2…