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

微信小程序的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交流是通过 alt="在这里插入图片描述">
在这里插入图片描述
在这里插入图片描述
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

特别声明:本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有,并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利,请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。