欢迎来到我的博客📔博主是一名大学在读本科生，主要学习方向是前端。🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🛠目前正在学习的是🔥React/小程序React/小程序React/小程序🔥，中间穿插了一些基础知识的回顾🌈博客主页👉codeMak1r.小新的博客😇本文目录😇新建小程序页面修改项目首页什么是WXML？什么是WXSS？小程序中的.js文件宿主环境小程序组件本文被专栏【小程序｜原力计划】收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！新建小程序页面只需要在app.json⇒pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建

欢迎来到我的博客📔博主是一名大学在读本科生，主要学习方向是前端。🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🛠目前正在学习的是🔥React/小程序React/小程序React/小程序🔥，中间穿插了一些基础知识的回顾🌈博客主页👉codeMak1r.小新的博客😇本文目录😇新建小程序页面修改项目首页什么是WXML？什么是WXSS？小程序中的.js文件宿主环境小程序组件本文被专栏【小程序｜原力计划】收录🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！新建小程序页面只需要在app.json⇒pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建

目录一、数据处理1.字符数据的绑定2.图片数据的动态绑定3.数据运算4.总代码与测试截图二、事件处理1.概念2.事件绑定（1）bindtap （2）bindinput3.事件传参（1）小程序中的事件传参比较特殊，即不能在绑定事件的同时进行参数的传递。（2）获取参数值4.数据赋值与同步（1）数据赋值 （2）文本框和data之间的数据同步三、条件渲染（1）根据指定条件来选择性的渲染某个页面（2）根据指定条件控制多个组件的展示与隐藏四、列表循环渲染 （1）wx:for循环渲染（2）wx:key提高循环渲染效率一、数据处理原理：在.js文件中的data:{}页面数据块中进行变量的声明，然后在.wxml

如果需要实现将小程序的页面转为图片，第一步是要先把页面转为canvas，再将canvas转为图片。本人使用的是Wxml2Canvas这个插件。其实最开始使用的是wxml-to-canvas这个官方自带的组件。由于这个组件坑太多，本地调试一切正常，但是到了真机调试就会出现创建画布失败的情况，寻找了很久，最多的方法方法就是添加延时器，或者画布的高度设置在1000px以内。但是都没有什么鬼用，最终无可奈何，只能换个插件，重新写。好惨一男的😥那我们废话不多说，准备开始搞事情！！第一步安装插件注意安装之后别忘了构建npmnpminstallwxml2canvas第二步引入import Wxml2Canv

适用范围使用prettier的项目、安装了prettier扩展的vscode和微信开发者工具。原理prettier是根据默认的解析器对相应的文件进行处理，我们可以自定义什么格式的文件用什么解析器。具体看documentSelectors。配置只列出有关的配置编辑器的配置{"editor.defaultFormatter":"esbenp.prettier-vscode","[wxml]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},"[wxss]":{"editor.defaultFormatter":"esbenp.prettie

WXSS(WeiXinStyleSheets)是一套样式语言，用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。与CSS相比，WXSS扩展的特性有：单位尺寸和样式导入一、书写位置1.1内联样式内联样式1.2页内样式写在.wxss文件中.wxsstest01{height:30px;width:200px;background-color:rgba(146,146,236,0.692);font-size:30px;}1.3全局样式全局样式写在app.wxss中，这其中的样式在全局的页面中都是可以直接使用的，而对于组件来说是应用不了的1.4优先级内联>页内>全局；可以通过!

🖥️微信小程序专栏：小程序WXSS-WXML-WXS🧑‍💼个人简介：一个不甘平庸的平凡人🍬✨个人主页：CoderHing的个人主页🍀格言:☀️路漫漫其修远兮,吾将上下而求索☀️👉你的一键三连是我更新的最大动力❤️目录一、WXSS编写程序样式小程序的样式写法WXSS支持的选择器WXSS优先级与CSS类似，权重如图wxss的拓展-尺寸单位二、Mustache语法绑定Mustache语法三、WXML的条件渲染逻辑判断wx:if-wx:elif-wx:elsehidden属性四、WXML的列表渲染列表渲染-wx:for基础block标签列表渲染-item/index名称列表渲染-key作用五、WXS语

🖥️微信小程序专栏：小程序WXSS-WXML-WXS🧑‍💼个人简介：一个不甘平庸的平凡人🍬✨个人主页：CoderHing的个人主页🍀格言:☀️路漫漫其修远兮,吾将上下而求索☀️👉你的一键三连是我更新的最大动力❤️目录一、WXSS编写程序样式小程序的样式写法WXSS支持的选择器WXSS优先级与CSS类似，权重如图wxss的拓展-尺寸单位二、Mustache语法绑定Mustache语法三、WXML的条件渲染逻辑判断wx:if-wx:elif-wx:elsehidden属性四、WXML的列表渲染列表渲染-wx:for基础block标签列表渲染-item/index名称列表渲染-key作用五、WXS语

🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）🐳博客主页：苏凉.py的博客🌐系列专栏：小程序开发基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录条件渲染wx:if结合block使用wx:ifhidden隐藏元素wx:if和hidden的区别列表渲染wx:for手动指定索引和当前项的变量名wx:key的使用wxss模板样式wxss是什么wxss和css的关系rpx单位rpx实现原理条件渲染wx:if在小程序中为了显示不同的信息段，我们可以通过条件渲染来显示，满足条件则显示页面，不满足则隐藏。配合

🐚作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）🐳博客主页：苏凉.py的博客🌐系列专栏：小程序开发基础教程👑名言警句：海阔凭鱼跃，天高任鸟飞。📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！👉关注✨点赞👍收藏📂文章目录条件渲染wx:if结合block使用wx:ifhidden隐藏元素wx:if和hidden的区别列表渲染wx:for手动指定索引和当前项的变量名wx:key的使用wxss模板样式wxss是什么wxss和css的关系rpx单位rpx实现原理条件渲染wx:if在小程序中为了显示不同的信息段，我们可以通过条件渲染来显示，满足条件则显示页面，不满足则隐藏。配合