微信小程序–》组成结构 文件作用 宿主环境

生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

导读:本篇文章讲解 微信小程序–》组成结构 文件作用 宿主环境,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页:亦世凡华、

🛺系列专栏:微信小程序

🚲座右铭:人生亦可燃烧,亦可腐败,我愿燃烧,耗尽所有光芒。

目录

🍇项目组成结构

🌑基本文件构成

🌒基本文件含义

🍈项目开发准备

🌑解决索引问题

🌒解决自动热重载问题

🌓配置首页颜色

🌔新建页面

🌕修改页面首页

🍉WXML模板

🌑什么是WXML

🌒WXML 和 HTML 的区别

🍊WXSS样式

🌑什么是WXSS

🌒WXSS 和 CSS 的区别

🍋宿主环境

🌑小程序宿主环境——通信与运行


👀引言

       ⚓经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助。

🍇项目组成结构

在项目开始之前首先先了解一下创建项目的基本组成结构(标准划重点

微信小程序--》组成结构 文件作用 宿主环境

🌑基本文件构成

pages:用来存放所有小程序的页面

utils:用来存放工具性质的模块(例如:格式化时间的定义模块)

.eslintrc.js:是一个名为 ESLINT 的工具的配置文件,目标是使代码更加一致并避免错误

app.js:小程序的项目入口文件

app.json:小程序项目的全局配置文件

app.wxss:小程序项目的全局样式文件

project.config.json:项目公共配置文件

project.private.config.json:项目个人配置文件,相同设置优先级高于公共配置文件

sitemap.json:用来配置小程序及其页面是否允许被微信索引

🌒基本文件含义

.js文件:页面的脚本文件,存放页面的数据,事件处理函数等

.json文件:页面配置文件,配置窗口的外观,表现等

.wxml文件:页面的模板结构文件

.wxss文件:页面的样式表文件

🍈项目开发准备

在日常开发中可能会遇到一些不舒服的警告或要根据自己的喜好设置风格,现在开始解决。

🌑解决索引问题

微信小程序--》组成结构 文件作用 宿主环境

出现以上索引问题,我们一般会通过 project.config.json 配置文件解决。

微信小程序--》组成结构 文件作用 宿主环境

通过设置 checkSiteMap 为 false 即可,新版本可能没有 checkSiteMap 可以手动添加。

🌒解决自动热重载问题

微信小程序--》组成结构 文件作用 宿主环境

点开详情找到本地设置关闭热重载按钮即可。

微信小程序--》组成结构 文件作用 宿主环境

微信小程序--》组成结构 文件作用 宿主环境

🌓配置首页颜色

找到pages页面文件下的.json文件,配置如下命令,个人配置会覆盖app.json下的全局配置

微信小程序--》组成结构 文件作用 宿主环境

🌔新建页面

在app.json下的pages中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件。

微信小程序--》组成结构 文件作用 宿主环境

🌕修改页面首页

将自己想要放到首页的文件,提到app.json文件下,pages配置中的首位就可以了。

微信小程序--》组成结构 文件作用 宿主环境

🍉WXML模板

🌑什么是WXML

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

🌒WXML 和 HTML 的区别

标签名称的不同

HTML(div,span,img,a)

WXML(view,text,image,navigator)

属性节点的不同

<a href=”#”>超链接</a>

<navigator url=”/pages/home/home”></navigator>

提供了类似于 Vue 中的模板语法

数据绑定、列表渲染、条件渲染

🍊WXSS样式

🌑什么是WXSS

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

🌒WXSS 和 CSS 的区别

新增了 rpx 尺寸单位

CSS中需要手动进行像素单位换算,例如 rem

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

提供了全局样式和局部样式

项目根目录中的 app.wxss 会作用于所有小程序页面

局部页面的 .wxss 样式仅对当前页面生效

WXSS 仅支持部分 CSS 选择器

.class 和 #id

element

并集选择器、后代选择器

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

🍋宿主环境

宿主环境 (host environment) 指的是程序运行所必须依赖的环境

Android 系统和 iOS 系统是两个不同的宿主环境。安卓版的微信App是不能在iOS环境下运行的,所以,Android是安卓软件的宿主环境,脱离了宿主环境的软件是没有任何意义的!

手机微信是小程序的宿主环境,小程序借助宿主环境提供的能力,可以完成许多普通网页无法完成的功能。例如:微信扫码、微信支付、微信登录、地理定位等

🌑小程序宿主环境——通信与运行

小程序的通信主体是 渲染层 逻辑层 ,其中:

WXML 模板和 WXSS 样式工作在渲染层

JS脚本工作在逻辑层

通信模型

小程序的通信模型分为两部分

渲染层 与 逻辑层 之间的通信:由微信客户端进行转发

逻辑层 与 第三方服务器 之间的通信 :由微信客户端进行转发

运行机制

小程序启动过程

1、把小程序的代码包下载到本地

2、解析 app.json 全局配置文件

3、执行app.js 小程序入口文件,调用 App() 创建小程序实例

4、渲染小程序首页

5、小程序启动完成

页面渲染过程:

1、加载解析页面的 .json 配置文件

2、加载页面的 .wxml 模板和 .wxss样式

3、执行页面的 .js 文件,调用Page()创建页面实例

4、页面渲染完成

今天的讲解就到这,下期继续讲解认知小程序的开发 !

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/140110.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!