微信小程序的wxml、wxss、js、json的理解

微信小程序的基础学习(2)
小程序的有些语言，有时候按照官方的解释来理解非常的吃力，会把初学者搞得很懵很难受，不知道从何下手！
文件夹下四个文件的理解：

文件	中文解释（个人理解）
.wxml	小程序页面视图例如人的脸
.wxss	小程序页面视图修饰例如修饰人脸的胖瘦肤白
.js	小程序逻辑层例如人脸的神经，其作用就是控制整个人脸的运行
.json	小程序全局配置其作用配置导航栏的文字、背景颜色、页面底部tabbar等

wxml----小程序的脸面
官方解释：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

wxml小程序的脸面，顾名思义展示在我们眼前的页面结构。

wxss----修饰wxml内容的胖瘦肤白
官方解释：WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

wxss为wxml的理发整容师；wxml与wxss交流是通过class实现的。

js----小程序的逻辑层

js小程序与数据库、服务器交换信息,控制wxml显隐的”神经中枢"；wxml与js的沟通方式主要为事件的触发与加载。

什么是事件
事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。
演示样例：

json----微信小程序的全局配置/页面配置

json小程序的全局配置与页面配置；json配置页面导航栏（小程序页面顶部）、tabbar（小程序页面底部）等
演示样例：

json源代码：

“window”: {
“backgroundColor”: “#fad81e”,
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#fad81e”,
“navigationBarTitleText”: “锦琅设计”,
“navigationBarTextStyle”: “black” }, “tabBar”: {
“selectedColor”: “#fbc663”,
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “主页”,
“iconPath”: “/image/index_1.png”,
“selectedIconPath”: “/image/index_2.png”
},
{
“pagePath”: “pages/personal/personal”,
“text”: “我的”,
“iconPath”: “/image/my_1.png”,
“selectedIconPath”: “/image/my_2.png”
}
] },

微信小程序的学习绝不是一朝一夕能够完成的，需要花更多的时间来打磨与练习。

本人自己做了一个完整的图文分享、点赞、收藏云开发小程序，可以用来做毕业设计、图文分享项目，操作简单，利用腾讯免费赠送的云开发空间就可以完成所有操作，节省成本、方便快捷，当天就可以上线！
链接：https://download.csdn.net/download/weixin_52658156/20238876

微信小程序的wxml、wxss、js、json的理解相关推荐

【微信小程序】WXML WXSS JS
目录
【微信小程序】--WXML WXSS JS 逻辑交互介绍（四）
微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用
在小程序中,一个完整的页面是由 .js .json .wxml .wxss 四个文件组成: .js 里面编写一些生命周期钩子,事件处理,全局数据- .json 里面编写一些页面配置,页面的 .json ...
微信小程序：未找到 app.json 中的定义的 pages “pages/index/index“ 对应的 WXML 文件
微信小程序:未找到 app.json 中的定义的 pages "pages/index/index" 对应的 WXML 文件前情:本人在自学微信小程序时,遇到了调用模板出现错误的 ...
微信小程序如何实现通过js修改wxml的for循环中的属性值
微信小程序如何实现通过js修改wxml的for循环中的属性值要实现的效果具体代码要实现的效果点击每一个活动选项,实现显示对应的操作按钮具体代码首先要在对应页面的js中给data中定义数组, ...
mpvue微信小程序http请求-fly.js
mpvue微信小程序http请求-fly.js fly.js是什么? 一个支持所有JavaScript运行环境的基于Promise的.支持请求转发.强大的http请求库.可以让您在多个端上尽可能大限度 ...
微信小程序反编译wxss文件缺失_微信小程序反编译~2020年
摘要安装wxappUnpacker小程序反编译工具并使用(2020.03) 关键词: 微信小程序反编译 wxss 介绍上次分享了web前端爬取工具 ,那么这次也同样讲讲微信小程序反编译吧,对于像博 ...
《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）
大家好,这是小程序系列的第十一篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序-基础 ...
微信小程序开发之wxss中的那些事（一）
微信小程序开发之wxss中的那些事微信小程序开发中,页面的布局怎么整? 啥是WXSS? 基本语法什么是rpx 什么是 flex 微信小程序开发中,页面的布局怎么整? 各位道友请留步,如果你是新手, ...
微信小程序：WXML 模板
微信小程序:WXML 模板一.WXML 模板网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来 ...

微信小程序的wxml、wxss、js、json的理解

微信小程序的wxml、wxss、js、json的理解相关推荐

最新文章

热门文章