微信小程序之项目基本结构、页面的基础及宿主环境

文章目录

  • 前言
  • 一、基本组成结构
    • 基本组成
    • 小程序页面的组成部分
    • JSON配置文件作用
  • 二、页面基础
    • pages
    • WXML和HTML的区别
    • WXSS和CSS的区别
    • 小程序中js文件分类
  • 三、小程序宿主环境
  • 总结


前言

微信小程序的项目基本结构、页面的基础及宿主环境


一、基本组成结构

基本组成

新建一个微信小程序项目,其项目基本结构如下:
在这里插入图片描述

  • pages用来存放所有小程序的页面
  • utils用来存放工具性质的模块(例如:格式化时间的自定义模板)
  • app.js小程序项目的全局配置文件
  • app.json小程序项目的全局配置文件
  • app.wxss小程序项目的全局样式文件
  • project.config.json项目的配置文件
  • sitemap.json用来配置小程序及其页面是否允许被微信索引

小程序页面的组成部分

小程序官方建议把所有小程序的页面都存放在pages目录中,以单独的文件夹存在,如下:
在这里插入图片描述
其中每个页面由4个基本文件组成:

  • .js文件:页面的脚本文件,存放页面的数据、事件处理函数等。
  • .json文件:当前页面的配置文件,配置窗口的外观、表现等。
  • .wxml文件:页面的模板结构文件。
  • .wxss文件:当前页面的样式表文件。

JSON配置文件作用

JSON是一种数据格式,在实际开发中JSON总是以配置文件的形式出现。小程序项目中也不例外:通过不同的,json配置文件,可对小程序项目进行不同级别的配置。

小程序项目中的4种json配置文件:

  • 项目根目录中的app.json配置文件:是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部tab等。
    在这里插入图片描述
    在这里插入图片描述

  • 项目根目录中的project.config.json配置文件:项目配置文件,用来记录我们对微信小程序开发工具所做的个性化配置。
    在这里插入图片描述
    在这里插入图片描述

  • 项目根目录中的sitemap.json配置文件:微信现已开放小程序内搜索,效果类似于PC网页的SEO。其用来配置小程序页面是否允许微信索引。(当用户允许时,微信会通过爬虫的形式为小程序内容建立索引。当用户搜索的关键字和页面的索引匹配成功的时候,小程序页面将尽可能展示在搜索结果中。)在这里插入图片描述
    在这里插入图片描述

  • 每个页面文件夹中的.json配置文件:小程序的每个页面可以使用.json文件对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中的相同的配置项。(就近原则)
    app.json全局设置导航栏背景颜色:
    在这里插入图片描述
    改变首页indx的index.json:
    在这里插入图片描述

二、页面基础

pages

在这里插入图片描述

  • 改变项目首页:app.json内的pages内配置页面路径,注意的是哪个页面的路径写在最前面,启动就展示哪个页面。
  • 新建项目页面:只需要在pages内写出路径,保存后自动生成。
    在这里插入图片描述

WXML和HTML的区别

WXML(WeiXin Markup Language)是小程序框架 设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。

在这里插入图片描述

WXSS和CSS的区别

WXSS(WeXin Style Sheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS

在这里插入图片描述

小程序中js文件分类

在这里插入图片描述

三、小程序宿主环境

在这里插入图片描述

宿主环境包含通信模型、运行机制、组件、API

通信主体:
在这里插入图片描述
通信模型:
在这里插入图片描述
小程序启动过程:

  • 把小程序的代码包下载到本地
  • 解析app.json全局配置文件
  • 执行app.js小程序入口文件,调用App()创建小程序实例
  • 渲染小程序首页
  • 小程序启动 完成
    页面渲染过程:
  • 加载解析页面的.json配置文件
  • 加载页面的.wxml模板和.wxss样式
  • 执行页面的.js文件,调用Page()创建页面实例
  • 页面渲染完成

总结

以上就是微信小程序的基础入门,偏理论。

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

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

相关文章

迁移 MySQL 数据到 OceanBase 集群

使用 mysqldump 将 mysql的表结构和数据同步到 OceanBase 的MySQL 租户中 Mysql数据库导出 mysqldump -h127.0.0.1 -P3306 -uroot –p --single-transaction --hex-blob --routines --events --triggers --set-gtid-purgedOFF --databases teller >teller.sql mysql> …

网络编程day05(IO多路复用)

今日任务&#xff1a; TCP多路复用的客户端、服务端&#xff1a; 服务端代码&#xff1a; #include <stdio.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <netinet/in.h> #include <unistd.h> …

网络隔离下实现的文件传输,现有的方式真的安全吗?

在当今的信息化时代&#xff0c;网络安全已经成为了各个企业和机构不可忽视的问题。为了保护内部数据和系统不受外部网络的攻击和泄露&#xff0c;一些涉及国家安全、商业机密、个人隐私等敏感信息的企业和机构&#xff0c;通常会对内外网进行隔离&#xff0c;即建立一个独立的…

Xilinx FPGA 7系列 GTX/GTH Transceivers (4) Aurora 8b10b 递增数收发验证

第一节:Xilinx FPGA 7系列 GTX/GTH Transceivers (1)–了解了GTX硬件的基础知识 第二节:IBERT GTX --通过Ibert IP测试链路通信 第三节:aurora 8b10b single lane 4byte–学习官方历程 递增数验证 自行编写data_gen和data_check 验证aurora 8b10b SFP 1.25G 收发正确。 组…

CentOS在应用程序菜单中创建快捷方式

背景&#xff1a; 在CentOS系统中&#xff0c;安装一些应用软件的时候&#xff0c;我们可能会自定义安装路径&#xff1b;这样在安装完应用程序后&#xff0c;在“Application”下&#xff0c;可能找不到对应的快捷键&#xff1b;这是就需要手动去创建跨界方式。 应用&#xf…

CNN(九):Inception v3算法实战

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 1 理论基础 Inception v3论文 Inception v3由谷歌研究员Christian Szegedy等人在2015年的论文《Rethinking the Inception Architecture f…

ubuntu samba文件共享服务器搭建

目的&#xff1a; 为了实现Android源码在ubuntu的编译&#xff0c;在windows上进行源码的修改和验证&#xff0c;需要在ubuntu系统上搭建共享文件夹&#xff0c;这里将ubuntu的/home/用户/路径下的所有内容共享&#xff0c;方法如下 ubuntu端&#xff1a; 一、samba安装 sud…

【暴力DP】CF1409 F

Problem - F - Codeforces 题意&#xff1a; 思路&#xff1a; 首先有个很明显的结论是&#xff1a;替换的字符一定是那两个字符之一 那么替换成哪个字符贡献更大不确定&#xff0c;因此考虑DP 因为有操作次数限制&#xff0c;直接把操作放进状态里 为了计算贡献&#xff…

机器学习第十一课--K-Means聚类

一.聚类的概念 K-Means算法是最经典的聚类算法&#xff0c;几乎所有的聚类分析场景&#xff0c;你都可以使用K-Means&#xff0c;而且在营销场景上&#xff0c;它就是"King"&#xff0c;所以不管从事数据分析师甚至是AI工程师&#xff0c;不知道K-Means是”不可原谅…

spring:实现初始化动态bean|获取对象型数组配置文件

0. 引言 近期因为要完成实现中间件的工具包组件&#xff0c;其中涉及要读取对象型的数组配置文件&#xff0c;并且还要将其加载为bean&#xff0c;因为使用了spring 4.3.25.RELEASE版本&#xff0c;很多springboot的相关特性无法支持&#xff0c;因此特此记录&#xff0c;以方…

Mac配置iTerm样式终端

一、MacOs系统 MacOs中终端使用iTerm2 1. 配置oh-my-zsh oh my zsh 的地址&#xff1a; https//github.com/ohmyzsh/ohmyzsh 插件存放位置&#xff1a;~/.oh-my-zsh/plugins 下载常用的插件 git clone http://github.com/zsh-users/zsh-syntax-highlighting.git 修改配…

怎么将几张图片做成pdf合在一起

怎么将几张图片做成pdf合在一起&#xff1f;在我们平时的工作中&#xff0c;图片和pdf都是非常重要的电脑文件&#xff0c;使用也非常频繁&#xff0c;图片能够更为直观的展示内容&#xff0c;而pdf则更加的正规&#xff0c;很多重要文件大多会做成pdf格式的。在职场人的日常工…

TypeError: res.data.map is not a function微信小程序报错

从数据库查&#xff1a; 调用的是&#xff1a; 访问的springboot后端是这个&#xff1a; 打印出来如下&#xff1a; 看到是json格式的数据 [Users [id3, name刘雨昕, phone18094637788, admintrue, actionsJsonadmin, createAtSat Sep 16 10:11:20 CST 2023, tokentest], User…

深入了解队列数据结构:定义、特性和实际应用

文章目录 &#x1f34b;引言&#x1f34b;队列的定义&#x1f34b;队列的实现&#x1f34b;队列的应用&#x1f34b;练习题&#x1f34b;结语 &#x1f34b;引言 队列&#xff08;Queue&#xff09;是计算机科学中一种重要的数据结构&#xff0c;它常用于各种应用程序中&#x…

拼多多API接口解析,实现根据ID取商品详情

拼多多是一个流行的电商平台&#xff0c;它提供了API接口供开发者使用。要根据ID获取商品详情&#xff0c;您需要使用拼多多API接口并进行相应的请求。 以下是使用拼多多API接口根据ID获取商品详情的示例代码&#xff08;使用Python编写&#xff09;&#xff1a; import requ…

​专业图像处理软件 Photoshop 2023 mac版本更新(ps2023中文)

​Photoshop 2023 mac是一款图像编辑和图形设计软件&#xff0c;广泛应用于专业人士和爱好者。它提供了许多工具和功能&#xff0c;用于创建、编辑和增强数字图像&#xff0c;包括图层、蒙版、滤镜和各种选择工具。Photoshop还支持多种文件格式&#xff0c;包括psD、JPEG、PNG和…

全套办公软件Office 2019 mac专业版功能

Microsoft office 2019 Beta for Mac 是一款办公软件套装&#xff0c;它包含常用的办公应用程序&#xff0c;如 Word、Excel、PowerPoint 和 Outlook 等。office 2019 Beta 版本是一个测试版本&#xff0c;旨在让用户提前体验下一个版本的 office 套件&#xff0c;以便用户可以…

全国职业技能大赛云计算--高职组赛题卷③(私有云)

全国职业技能大赛云计算--高职组赛题卷③&#xff08;私有云&#xff09; 第一场次题目&#xff1a;OpenStack平台部署与运维任务1 基础运维任务&#xff08;5分&#xff09;任务2 OpenStack搭建任务&#xff08;15分&#xff09;任务3 OpenStack云平台运维&#xff08;15分&am…

2023!6招玩转 Appium 自动化测试

Appium是个什么鬼 Appium是一个移动端的自动化框架&#xff0c;可用于测试原生应用&#xff0c;移动网页应用和混合型应用&#xff0c;且是跨平台的。可用于IOS和Android以及firefox的操作系统。原生的应用是指用android或ios的sdk编写的应用&#xff0c;移动网页应用是指网页…

Leetcode198. 打家劫舍

https://leetcode.cn/problems/house-robber/description/ 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&…