微信小程序开发视图组件标签，以及内置标签对应的知识点
发表时间：2023-10-18 17:30:04
文章来源：炫佑科技
浏览次数：166
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序开发视图组件标签，以及内置标签对应的知识点
本文内容列表： 大新闻：微信小程序发布WeUI.js官方视觉组件库！
12月16日，微信正式发布WeUI.js动态可视化组件库。 WeUI是一个与微信原生视觉体验一致的基础样式库。 由微信官方设计团队针对微信网页和微信小程序进行设计，可以让用户的使用感知更加统一。 WeUI.js动态可视化组件库包含cell、toast、icon等多种元素。
1.weui.js是什么？
weui.js是WeUI的轻量级JS包。 它不需要依赖其他库，GZIP 后只有 9.0 KB。
2. weui.js包含哪些组件？
警报
形式
标签
吐司
3、使用方法：
:
详细文档：
4、微信团队为何在这个时候公布官方视觉组件库：
1.为了更像微信OS
与之前的轻应用平台相比，微信团队并不是简单地提供开发和用户之间的平台连接，也不仅仅是做一个流量入口平台，而是要打造一个完善的微信OS生态。 当时，百度、UC等平台推出的轻应用仅充当回流和连接的平台。 开发框架和设计规范没有统一的规范和要求。 现在看来，*好的生态系统当然是类似于苹果的操作系统，所有应用程序都有统一的开发框架和接近OS生态系统的完美体验。
2. 追求极致的用户体验
小程序内测到公测，已经过去了三个月的时间。 我们有理由相信，微信团队已经收到了很多来自小程序开发审核请求。 其中，让微信团队*头疼的应该是开发设计规范不符合微信团队。 无法满足微信团队想要的用户体验。 微信官方推出Weui就是为了让开发提交的所有小程序都能拥有接近微信APP的体验，从而给微信用户带来*好的用户体验。 这也是小程序生态未来能够提升8亿用户普及度的原因。 也是频率的重要指标。
3、倒逼第三方服务商转型
早年微信公众号推出时，微信团队就推出了“开发模式”。 当时，微信团队鼓励第三方企业利用微信公众号的开放接口开发各种微应用，例如：微网站、微商城、微信公众号等。 工具和其他应用程序。 但微信团队早期对于这些接入应用的开发框架和设计规范并没有统一的定义和严格的要求。 导致各个服务接入商基本上都是按照自己的开发框架和设计标准开发和设计，使得市场上看到的应用页面五花八门，用户体验极差。 这也导致早期的应用服务难以被用户接受，无法给企业带来实际价值。 随着微信小程序的出现，微信团队重新塑造了统一的开发框架和设计规范，迫使这些第三方服务机构重新定义后续策略，按照新的开发规范重新提供新的平台服务。 或许，现有的微信第三方服务组织结构将被打破，第三方服务组织将面临新一轮的洗牌。
5.WeUI.js给小程序开发带来什么好处？
1、使用Weui设计的小程序与用户使用微信客户端具有相同的视觉效果，可以让小程序体验更强。
2、使用Weui设计小程序可以提高开发的开发效率，降低开发的开发成本，让开发更快地开发符合规范的小程序。
3、使用Weui设计小程序，就像聘请了国内顶尖的设计团队，帮你打造近乎完美的视觉框架。
6、微信小程序给前端设计领域带来了哪些影响和推动：
1. 兼容全平台
微信小程序重新定义APP，让应用可以用，
它可以运行在任何手机上，对于前端来说，实现了“一次编译，到处运行”的理念。
2.前端开发思维的转变
设计理念需要从传统PC思维转向移动优先思维。 主要考虑的差异是屏幕尺寸、网络带宽、输入设备等方面的差异。 同时，很多之前iOS和设备可用的控件需要在小程序上重新调整和创新。
3、推动前端技术发展
微信小程序以其简单的开发环境，让基于HTML5和HTML5的前端技术真正成为主流。 越来越多的人开始涉足前端开发微信小程序开发视图组件标签，以及内置标签对应的知识点，为前端技术的发展做出贡献。
4、前端投资成本增加
本来，传统企业的前端开发需要覆盖PC、移动、APP应用等各种平台。 微信小程序的出现，将导致未来前端开发也需要参与小程序的前端开发和设计，这将会有一定程度的增加。 降低了前端开发的学习和工作成本，也给企业带来了更多的人才投入成本。
5、前端人才竞争更加明显
微信小程序的诞生将吸引大量后端开发和APP开发程序员加入前端开发大军，进一步冲击现有前端开发的知识结构，加剧前端开发岗位的竞争，迫使一些低端、知识渊博、结构不完整的前端开发面临被淘汰或失业的风险。
6、全栈工程师将越来越受欢迎
随着微信小程序的出现微信小程序开发组件库，既懂后端又懂前端的人才将越来越受到企业的重视和欢迎。 尤其对于创业团队和互联网公司来说，一个具有全局思维、熟悉各种技术的人才非常重要。 重要的。 作为技术人员，我们需要不断拥抱变化，不断学习新技能，努力成为一名全栈工程师。
微信官方发布了WeUI.js动态可视化组件库，这意味着你可以在小程序中直接使用官方设计文档附录中的可视化组件（无需引入其他库）。 微信团队真的在努力打造小程序生态，作者也真的在努力给大家带来更多有用的信息。 这也是笔者立即为大家带来的解读。 编码并不容易。 如果这篇文章对您和您的朋友有所启发，感谢您的转发。 您的支持是我们码农*大的动力。
微信小程序-view可滚动视图区域
组件说明：
可滚动的视图区域。
组件使用：
垂直滚动使用
提示：
使用垂直滚动时，需要给定一个固定的高度，并通过WXSS设置，否则滚动不起作用。
滚动到顶部时会触发该事件（具体请关注GIF输出）
滚动到底部时会触发该事件（具体请关注GIF输出）
渲染：
wxml
-view -y="true" ="upper" ="lower" ="" -into-view="{{}}" -top="{{}}"
查看/查看
查看/查看
查看/查看
查看/查看
/-看法
看法
size="mini" ="tap"点击我查看/
size="mini"=""点我/
/看法
js
var order = ['红色', '', '蓝色', '绿色', '红色']
页（{
数据： {
： '绿色的'，
：100，
: 0
},
//滚动条滚动到顶部时触发
上：(e) {
.log(e)
},
//滚动条滚动到底部时触发
较低：(e) {
.log(e)
},
//滚动条滚动后触发
: (e) {
.log(e)
},
//点击按钮切换到下一个视图
磁带） {
for (var i = 0; i order.; ++i) {
if (order[i] === this.data.) {
这。（{
：顺序[i + 1]
})
休息
},
//通过设置滚动条位置实现屏幕滚动
: (e) {
这。（{
: 这个.数据。 + 10
})
})
CSS
.-{
空白：;
。-查看项目{
: 200 像素;
。-看法-{
： -堵塞;
宽度：100%；
: 200 像素;
水平滚动使用
提示：
水平滚动不能使用 -into-view 属性。
滚动到*左侧时会触发该事件（具体请关注GIF输出）
滚动到*右侧时会触发该事件（具体请关注GIF输出）
渲染：
wxml
-view -x="true" ="上" ="下" ="" -left="{{}}"
查看/查看
查看/查看
查看/查看
查看/查看
/-看法
js
var order = ['红色', '', '蓝色', '绿色', '红色']
页（{
数据： {
： '绿色的'，
：100，
: 0
},
//滚动条滚动到顶部时触发
上：(e) {
.log(e)
},
//滚动条滚动到底部时触发
较低：(e) {
.log(e)
},
//滚动条滚动后触发
: (e) {
.log(e)
},
//点击按钮切换到下一个视图
磁带） {
for (var i = 0; i order.; ++i) {
if (order[i] === this.data.) {
这。（{
：顺序[i + 1]
})
休息
},
//通过设置滚动条位置实现屏幕滚动
: (e) {
这。（{
: 这个.数据。 + 10
})
})
西西
.-{
空白：;
。-查看项目{
: 200 像素;
。-看法-{
： -堵塞;
宽度：100%；
: 200 像素;
主要属性：
属性类型默认值说明
- 允许水平滚动
- 允许垂直滚动
upper-距离上/左多远（单位px），触发事件
lower-距离底部/右侧多远（单位px），触发事件
-设置垂直滚动条位置
- 设置水平滚动条位置
-into-值应该是某个子元素的id，然后滚动到该元素并将该元素的顶部与滚动区域的顶部对齐
滚动到顶部/左侧，事件将被触发
滚动到底部/右侧，事件将被触发
e 滚动时触发，事件。 = {,,,,,,,}
微信小程序的视图层和逻辑层的作用是什么？
视图层采用WXML和WXSS编写，通过组件显示。
将逻辑层的数据反映到视图中，并将视图层的事件发送到逻辑层。
WXML用于描述页面的结构，WXSS用于描述页面的样式，组件()是视图的基本组件。 逻辑层处理数据并发送给视图层，同时接受视图层的事件反馈。
微信小程序（一）
注册开发账号：
安装小程序开发工具：
创建项目
页面目录：用于存放所有页面。
utils目录：用于存放工具文件。
app.js：入口文件。 程序运行时，必须先执行该文件。
app.json：全局配置文件，用于配置小程序的信息（全局信息都在里面配置）。
app.wxss：是一个全局样式文件。 全局样式文件中定义的选择器在所有页面中生效。
..json：是项目配置文件。
.json：是SEO配置文件，方便用户搜索小程序。
(1)页面配置项
pages中注册的是view。用于指定小程序由哪些页面组成。 每一项对应一个页面的路径（包括文件名）信息。
(2)配置项
是全局窗口配置。
设置文本样式（下拉样式），仅支持深色/浅色。
设置导航栏背景。
xt 设置导航栏文本。
le 设置导航栏标题颜色，仅支持黑/白。
(3)风格
style 设置样式级别，默认为v2。
(4)
指定.json的位置； 默认为“.json”，即与 app.json 位于同一目录中的 .json 文件。
每个页面由四个文件组成：xxx.wxml文件、xxx.wxss文件、xxx.js文件和xxx.json文件。
(1)xxx.wxml文件
xxx.wxml 文件相当于html 文件。 wxml文件中不能写入传统的html标签，只能写入微信提供的组件。
①视图组件
相当于div标签。
② 文本组件
相当于span标签。
③
它是一个滑块视图容器，里面只能放置-item组件。
组件的共同属性：
这是一个连接滑梯
是自动切换的
是自动切换时间间隔
-dots 是否显示面板指示点
-color表示点颜色
--color当前选中的指示点的颜色
④图像
图像是一个图片组件。 *好全部使用网络图片，因为小程序的总大小不允许超过2MB。
(2)xxx.wxss文件
xxx.wxss文件相当于一个css文件。 在wxss文件中，*好不要写标签选择器和id选择器，而是统一写类选择器。
为了让小程序中的内容能够在各种设备上自适应展示，微信推出了响应式单元：rpx。 中，2rpx=1px。
(3)xxx.js文件
xxx.js 文件是一个交互式文件（核心文件）。
Page() 函数返回页面对象。 该函数需要传递一个配置参数，该参数是一个对象。 在这个配置对象中，定义了当前页面的所有内容。
①数据
定义页面的数据。
② 自定义功能
开发可以在参数中添加任何函数或数据，可以在页面的函数中使用它来访问这些参数。
(4)xxx.json文件
xxx.json文件是页面的配置文件（包含当前页面信息）。
WXML中的动态数据来自于对应Page的数据。
(1)获取data中的数据
通过插值表达式{{}}，可以将js中定义的data中的数据显示出来。
（2）组件属性（需要用双引号括起来）
(3) 操作
可以在{{}}内执行简单的操作。
① 三元运算
② 逻辑判断
是触摸屏事件，实际上相当于网页上的点击事件。
小程序中绑定方法时不能传递参数。 所以组件通过data-xxx传递数据。
注意：自定义属性应使用驼峰或大写命名，小程序内部会自动转换为小写。
8.()方法
() 方法更新页面中的数据。 页面数据更新后，调用()方法重新渲染到页面。
