烟台免费做网站服装公司网站设计

烟台免费做网站,服装公司网站设计,客户可以自主发帖的网站建设,大连网站建设新图闻页面制作概述 WXML 概述 在制作微信小程序页面时#xff0c;页面的结构可以用 WXML 来实现。 WXML 是微信团队为微信小程序开发而设计的一套语言#xff0c;可以结合微信小程序中的各种组件构建页面结构。 WXML 与 HTML 的区别#xff1a; HTML 和 WXML 使用的标签不同。HTM…页面制作概述WXML 概述在制作微信小程序页面时页面的结构可以用 WXML 来实现。WXML 是微信团队为微信小程序开发而设计的一套语言可以结合微信小程序中的各种组件构建页面结构。WXML 与 HTML 的区别HTML 和 WXML 使用的标签不同。HTML 经常使用 div 标签搭建页面结构而 WXML 则使用 view 标签搭建页面结构。HTML 经常使用 span 标签定义行内文本 而 WXML 则使用 text 标签定义行内文本 。WXML 提供了和 Vue.js 中模板语法类似的模板语法如数据绑定、列表渲染、条件渲染等。HTML 页面可以在浏览器中预览而 WXML 页面仅能在微信客户端和微信开发者工具中预览。WXML 中的单标签必须在结尾 前面加上 /否则微信开发者工具会报语法错误而 HTML 中允许省略单标签 前面的 /。WXML 中所使用的标签是微信小程序定义的标签应避免使用 HTML 标签这样才能保证页面被正确转译。WXSS 概述微信小程序提供了一套类似 CSS 的语言 WXSS通过 WXSS 可以美化页面样式。WXSS 与 CSS 的区别不同的手机屏幕分辨率不同如果用 CSS 中的 px 单位会遇到屏幕适配的问题需要手动进行像素单位换算而微信小程序提供了一个新的单位 rpx使用 rpx 单位可以很轻松地适配各种手机屏幕。在微信小程序中项目根目录中的 app.wxss 作为全局样式会作用于当前微信小程序的所有页面而局部页面的 WXSS 样式仅对当前页面生效CSS 则没有这样的功能。在 WXSS 中设置背景图片的时候可以使用网络图片或者以 Base64 格式编码的图片不能使用本地图片。rpx 单位rpxResponsive Pixel自适应像素是微信小程序独有的、用来解决屏幕适配问题的尺寸单位。rpx 单位的设计思想是把所有设备的屏幕在宽度上等分为 750 份即屏幕的总宽度为 750rpx微信小程序在不同设备上运行的时候会自动把 rpx 单位换算成对应的像素单位来渲染从而实现屏幕适配。vw/vh 单位在使用 CSS 编写移动端的页面样式时由于不同手机的屏幕宽高不同屏幕适配会比较麻烦针对这类型问题通过视口单位可以有效解决。视口表示可视区域的大小视口单位主要包括 vwViewport Width和 vhViewport Heightvw、vh 是相对长度单位永远以视口作为参考。在微信小程序中也可以使用 vw 和 vh 单位使用视口单位时系统会将视口的宽度和高度分为 100 份1vw 占用视口宽度的百分之一1vh 占用视口高度的百分之一。样式导入为了避免样式代码冗余可以将相同的样式代码抽为公共样式放到一个单独的文件中通过只修改公共样式实现对所有相关页面样式的修改从而节约时间、方便管理。导入公共样式的基本用法import 公共的wxss路径;页面路径配置在微信小程序中可以通过全局配置文件app.json中的 pages 配置项来配置微信小程序的页面路径。pages 配置项是一个数组该数组用于指定微信小程序由哪些页面组成数组中的每一个元素都对应一个页面的路径信息。pages 数组中的第一项为微信小程序的初始页面开发者可以手动调整数组中元素的顺序以更换初始页面。示例页面路径配置全局配置文件app.json{ pages: [ pages/index/index ] }新建微信小程序页面的方法通过 pages 数组中新增一项来新增页面。通过项目资源管理器新增页面。删除微信小程序页面的方法对页面文件直接进行删除操作不会触发代码的自动更新效果。删除页面需要手动修改全局配置文件app.json中的 pages 配置项。微信小程序页面组件页面组件概述微信小程序页面和普通网页都是通过标签来定义页面结构的但是在微信小程序开发中更习惯将这些标签称为组件这些组件自带微信风格的 UI 样式和特定功能效果。微信小程序提供了丰富的组件通过组合这些组件可以进行高效开发。view 组件view 组件即视图容器用于定义文档中的分区或节实现页面的布局效果。view 组件的基本用法view.../viewview 组件的基本属性名称描述hover-class指定手指按下去的样式类当该属性值为 none 时没有点击态hover-stop-propagation指定是否阻止本节点的祖先节点出现点击态hover-start-time手指按住后多久出现点击态单位为毫秒hover-stay-time手指松开后点击态保留时间单位为毫秒示例view 组件首页页面结构pages/index/index.wxmlview classcontainer view hover-classfont按下我后会改变颜色/view view hover-classfont hover-start-time2000按下我后会改变颜色(2s后)/view /view首页页面样式pages/index/index.wxss.font { color: red; }示例效果scroll-view 组件scroll-view 组件用于实现滚动效果支持横向滚动和纵向滚动。scroll-view 组件的基本用法scroll-view.../scroll-viewscroll-view 组件的基本属性名称描述scroll-x允许横向滚动默认值为 falsescroll-y允许纵向滚动默认值为 falsebindscrolltoupper滚动到顶部/左边时触发的事件bindscrolltoower滚动到底部/右边时触发的事件bindscroll滚动时触发的事件当允许横向滚动、纵向滚动后还需要使 scroll-view 组件中内容的宽度和高度大于 scroll-view 组件本身的宽度和高度这样才能滚动。示例scroll-view 组件首页页面结构pages/index/index.wxmlscroll-view scroll-x view stylewidth: 200%; height: 100px; background-image: linear-gradient(to bottom right, red, yellow);/view /scroll-view示例效果image 组件image 组件用于显示图片。image 组件的基本用法image src.../imageimage 组件的基本属性名称描述src图片资源地址可以是本地路径或 URL 地址mode图片剪裁、缩放的模式可选scaleToFill默认拉伸图片以充满整个 image 组件aspectFit保持宽高比缩放图片使图片的长边能完全显示出来aspectFill保持宽高比缩放图片只保证图片的短边能完全显示出来另一个方向将会发生截取top/bottom/center/left/right不缩放图片只显示图片顶/底/中/左/右区域的部分show-menu-by-longpress是否显示长按图片显示菜单菜单提供发送给朋友、收藏、保存图片、搜一搜等功能binderror当错误发生时触发的函数bindload当图片载入完毕时触发示例image 组件首页页面结构pages/index/index.wxmlview classcontainer image src/images/avatar.jpg/image image src/images/avatar.jpg modeaspectFit/image /view示例效果swiper 组件swiper 组件用于实现滑块视图容器。swiper 组件一般与 swiper-item 组件搭配使用。swiper 组件表示滑块视图容器用于创建一块可以滑动的区域。swiper 组件内部需要嵌套 swiper-item 组件swiper-item 组件表示滑块视图内容。swiper-item 组件可以嵌套 image 组件、view 组件或其他组件。swiper 组件的基本用法swiper swiper-item ... /swiper-item ... /swiperswiper 组件的基本属性名称描述indicator-dots是否显示面板指示点indicator-color指示点颜色indicator-active-color当前选中的指示点颜色autoplay是否自动切换current当前所在滑块的下标索引interval自动切换时间间隔单位为毫秒circular是否采用衔接滑动示例swiper 组件首页页面结构pages/index/index.wxmlswiper swiper-item view stylebackground-color: blue; height: 200px;0/view /swiper-item swiper-item view stylebackground-color: green; height: 200px;1/view /swiper-item swiper-item view stylebackground-color: red; height: 200px;2/view /swiper-item /swiper示例效果text 组件text 组件用于定义行内文本。text 组件的基本用法text.../texttext 组件的基本属性名称描述user-select文本是否可选默认值为 false示例text 组件首页页面结构pages/index/index.wxmltext user-selecttrue stylefont-size: 80rpx;床前明月光/text text\n/text text stylefont-size: 80rpx;疑似地上霜/text示例效果video 组件video 组件用于播放视频。video 组件的基本用法video src.../videovideo 组件的基本属性名称描述src视频的资源地址必须是远程视频路径duration指定视频时长controls是否显示默认播放控件autoplay是否自动播放loop是否循环播放muted是否静音播放poster视频封面的图片网络资源地址bindplay当开始/继续播放时触发 play 事件bindpause当暂停播放时触发 pause 事件object-fit当视频大小与 video 组件大小不一致时调整视频的表现形式可选 contain 包含/fill 填充/cover 覆盖initial-time指定视频初始播放位置示例video 组件首页页面结构pages/index/index.wxmlvideo srchttps://upos-sz-mirrorcos.bilivideo.com/upgcxcode/61/60/334576061/334576061_nb2-1-16.mp4/video示例效果form 组件form 组件表示表单容器没有任何样式需要配合其他表单组件一起使用用于提交用户输入的信息和选择的选项。form 组件的基本用法form ... /formform 组件的基本属性名称描述bindsubmit表单提交时触发事件bindreset表单重置时触发事件button 组件button 组件表示按钮。button 组件的基本用法button.../buttonbutton 组件的基本属性名称描述size按钮的大小可选 default/minitype按钮的样式类型可选 primary/default/warnplain按钮是否镂空disabled按钮是否禁用form-type按钮类型可选 submit/resethover-class指定按钮点击态效果示例button 组件首页页面结构pages/index/index.wxmlbutton按钮/button button typeprimary按钮/button button typewarn按钮/button示例效果input 组件input 组件表示输入框。input 组件的基本用法input/input 组件的基本属性名称描述value输入框的初始内容type输入框的类型可选 text/number/idcard/safe-password 等不同的类型会弹出不同的屏幕键盘password是否是密码类型placeholder输入框为空时的占位符placeholder-style指定 placeholder 的样式示例input 组件首页页面结构pages/index/index.wxmlinput typetext placeholder请输入用户名 styleborder: 1px solid #CCCCCC; / input typetext passwordtrue placeholder请输入密码 styleborder: 1px solid #CCCCCC; /示例效果checkbox 组件checkbox 组件表示复选框。checkbox 组件一般与 checkbox-group 组件搭配使用。checkbox-group 组件表示多项选择器。checkbox-group 组件内部由多个 checkbox 组件组成checkbox 组件表示一项选择器。建议将不同组的 checkbox 组件嵌套在不同的 checkbox-group 组件中从而方便管理和区分。checkbox 组件的基本用法checkbox-group checkbox value....../checkbox ... /checkbox-groupcheckbox 组件的基本属性名称描述valuecheckbox 组件标识checked当前是否选中disabled当前是否禁止选中示例checkbox 组件首页页面结构pages/index/index.wxmlcheckbox-group checkbox value1苹果/checkbox checkbox value2西瓜/checkbox checkbox value3芒果/checkbox /checkbox-group示例效果radio 组件radio 组件表示单选框。radio 组件一般与 radio-group 组件搭配使用。radio-group 组件表示单项选择器。radio-group 组件内部由多个 radio 组件组成radio 组件表示一项选择器。建议将不同组的 radio 组件嵌套在不同的 radio-group 组件中从而方便管理和区分。radio 组件的基本用法radio-group radio value....../radio ... /radio-groupradio 组件的基本属性名称描述valuecheckbox 组件标识checked当前是否选中disabled当前是否禁止选中示例radio 组件首页页面结构pages/index/index.wxmlradio-group radio value1苹果/radio radio value2西瓜/radio radio value3芒果/radio /radio-group示例效果slider 组件slider 组件表示滑动选择器。slider 组件的基本用法slider/slider 组件的基本属性名称描述min最小值默认值为 0max最大值默认值为 100step步长默认值为 1value当前取值默认值为 0bindchange完成一次拖拽后触发的事件示例slider 组件首页页面结构pages/index/index.wxmlslider min0 max100 step2 /示例效果微信小程序页面配置Webview小程序一直以来采用的都是 AppService 和 WebView 的双线程模型的架构方式WebView 主要负责页面的显示和一些基础的交互功能而 AppService 则承担了更多的逻辑处理和数据运算等任务。当小程序基于 WebView 环境时WebView 中的 DOM 树创建、JS 逻辑、CSS 解析、Layout、样式计算等内容都发生在同一个线程中。AppService WebView 双线程模型架构可能存在问题由于 JS 引擎限制内存使用有要求且 JS 解释速度不一。渲染使用 WebView对性能和功耗有一定要求开销较大无法提供媲美原生的流畅体验。在一些硬件配置较低的设备中运行小程序时可能出现无法运行或运行后卡顿的情况。Skyline为了进一步优化小程序性能提供更为接近原生的用户体验微信团队在 WebView 渲染之外新增了一个渲染引擎 Skyline其使用更精简高效的渲染管线并带来诸多增强特性让 Skyline 拥有更接近原生渲染的性能体验。Skyline 渲染引擎的特点界面更不容易被逻辑阻塞进一步减少卡顿。无需为每个页面新建一个 JS 引擎实例Webview减少了内存、时间开销。框架可以在页面之间共享更多的资源进一步减少运行时内存、时间开销。框架的代码之间无需再通过 JSBridge 进行数据交换减少了大量通信时间开销。借助其特点提供了新的页面组件释放更多高级能力。一般情况下微信开发者工具新建的微信小程序项目默认是 Skyline 模式但如果遇到 Skyline 模式下的渲染兼容问题可以尝试切换到 Webview 模式。Skyline 支持按页面粒度开启也可以在全局配置文件app.json中开启。renderer: skyline, rendererOptions: { skyline: { defaultDisplayBlock: true, disableABTest: true, sdkVersionBegin: 3.0.0, sdkVersionEnd: 15.255.255 } }, componentFramework: glass-easel微信开发者工具提供了对齐移动端的 Skyline 渲染引擎支持 WXML 调试、 WXSS 样式错误提示、新增的特性等可以在本地设置中开启 Skyline 渲染渲染调试。在选择渲染模式时需根据实际场景需要进行权衡追求性能选 Skyline追求兼容性选 Webview无论选择 Skyline 还是 Webview均需要关注组件或 API 对于这两种模式的兼容和适配。由于目前 Skyline 存在的问题较多兼容性并不是很好故后续均采用 Webview 模式。{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }页面导航栏在微信小程序中有时为了页面美观需要更改导航栏的样式可以通过页面配置文件xx.json或全局配置文件app.json对导航栏的样式进行配置。页面导航栏全局配置的基本用法window: { navigationBarTextStyle: ..., navigationStyle: default, navigationBarBackgroundColor: ..., navigationBarTitleText: ... }页面导航栏局部配置的基本用法{ navigationBarTextStyle: ..., navigationBarBackgroundColor: ..., navigationBarTitleText: ... }页面导航栏的基本配置项名称描述navigationBarTitleText导航栏标题文字内容navigationBarBackgroundColor导航栏背景颜色navigationBarTextStyle导航栏标题颜色只支持 black/whitenavigationStyle导航栏样式只支持 default/custom示例页面导航栏全局配置文件app.jsonwindow: { navigationBarTextStyle: black, navigationStyle: default, navigationBarBackgroundColor: #ffffff, navigationBarTitleText: WeChat }示例效果首页页面配置文件pages/index/index.json{ navigationBarTitleText: 首页 }示例效果navigation-bar 组件navigation-bar 组件是页面导航条配置节点用于指定导航栏的一些属性需要配合 page-meta 组件一起使用。page-meta 组件是页面属性配置节点用于指定页面的一些属性、监听页面事件page-meta 组件只能是页面内的第一个节点。navigation-bar 组件只能是 page-meta 组件内的第一个节点。navigation-bar 组件的基本用法page-meta navigation title... front-color... background-color.../navigation /page-metanavigation-bar 组件的基本属性名称描述title导航栏标题文字内容background-color导航栏背景颜色front-color导航栏标题颜色只支持 #ffffff 和 #000000示例navigation-bar 组件首页页面结构pages/index/index.wxmlpage-meta navigation-bar title欢迎页面 front-color#000000 background-color#FFFFFF/navigation-bar /page-meta示例效果页面标签栏通过标签栏可以很方便地在多个页面之间进行切换在微信小程序的全局配置文件app.json中添加配置项即可实现标签栏配置。页面标签栏配置的基本用法tabBar: { color: ..., selectedColor: ..., borderStyle: ..., backgroundColor: ..., list: [{ pagePath: ..., text: ..., iconPath: ..., selectedIconPath: ... }, ... ] }页面标签栏的基本配置项名称描述color标签栏上的文字默认颜色selectedColor标签栏上的文字选中时的颜色backgroundColor标签栏的背景色borderStyle标签栏上边框的颜色只支持 black/whitelist标签栏的列表数组中的每个元素都是一个代表标签按钮的对象数组中最少需要配置 2 个标签按钮最多只能配置 5 个标签按钮position标签栏的位置只支持 bottom 底部/top 顶部custom是否启用自定义标签栏页面标签栏标签按钮的基本属性名称描述pagePath页面路径页面必须在 pages 数组中预先定义text标签按钮上的文字iconPath未选中时的图标路径当 position 属性值为 top 时不显示图标selectedIconPath选中时的图标路径当 position 属性值为 top 时不显示图标示例页面标签栏全局配置文件app.jsonpages: [ pages/index/index, pages/about/about ], tabBar: { color: #000000, selectedColor: #FF0000, borderStyle: black, backgroundColor: #FFFFFF, list: [{ pagePath: pages/index/index, text: 首页 }, { pagePath: pages/about/about, text: 联系我们 }] }示例效果