织梦网站被黑,雁塔区建设局网站,分享代码的网站,自己如何开发一个小程序uni-app是一个使用Vue.js开发所有前端应用的框架#xff0c;开发者编写一套代码#xff0c;可发布到iOS、Android、H5、以及各种小程序#xff08;微信/支付宝/百度/头条/QQ/钉钉/淘宝#xff09;、快应用等多个平台。今天#xff0c;我们来体验uni-app对微信小程序的无障…uni-app是一个使用Vue.js开发所有前端应用的框架开发者编写一套代码可发布到iOS、Android、H5、以及各种小程序微信/支付宝/百度/头条/QQ/钉钉/淘宝、快应用等多个平台。今天我们来体验uni-app对微信小程序的无障碍支持情况。开发uni-app项目需要通过HBuilderX下载地址DCloud官网dcloud.net.cn运行HBuilderX 点击文件菜单-新建-项目进入创建项目窗口运行HBuilderX新建项目窗口截图 在项目类型中选择uni-app单选按钮在模板列表中选择使用uni-app开发的新闻/资讯类App模板项目名称任意填写例如我的新闻App项目路径可选修改或保持默认然后点击创建按钮就完成了一个项目的创建。为了能够在真机上运行小程序项目我们需要在manifest.json文件中的mp-weixinkey下配置appid保存后点击运行-运行到小程序模拟器-微信开发者工具如果没有配置开发者工具的路径和端口请跟随提示或官网说明配置配置正确无误的话此项目会运行到微信开发者工具内。我们在开发者工具内点击预览-自动预览手机上成功运行。首页截图 首页截图接下来浏览一下首页体验一下无障碍情况如何知乎视频www.zhihu.com通过浏览发现首页存在以下无障碍问题选中的分类没有添加选中状态提示每条新闻项目的图片都朗读为图片属于无标签问题每条新闻的焦点拆分太多导致浏览效率降低一条新闻被拆分成了标题、图片、作者、评论数、时间等五个焦点接下来我们就利用微信小程序所支持的无障碍属性对这个新闻小程序进行改造处理方案 为顶部分类添加选中状态提示合并每条新闻的标题、图片、作者、评论数、时间为一个焦点也就是每条新闻为一个焦点便于用户浏览第一步给分类添加选中状态阅读代码我们发现当选中某个分类后会动态修改分类名称text元素的classtext classuni-tab-item-title :classtabIndexindex ? uni-tab-item-title-active : {{tab.name}}/text这里的关键代码是 :classtabIndexindex ? uni-tab-item-title-active : 我们就抄写这句代码中的判断方式为text的容器view添加选定状态view classuni-tab-item v-for(tab,index) in tabList :keytab.id :idtab.id :reftabitemindex:data-idindex :data-currentindex clickontabtap :aria-selectedtabIndexindex text classuni-tab-item-title :classtabIndexindex ? uni-tab-item-title-active : {{tab.name}}/text/view此处的关键代码是aria-selectedtabIndexindex意思是当选定的分类等于当前索引时返回true否则返回false这里的aria-select属性是选定状态属性接受布尔值。添加完选定状态属性结果发现还是读不出选定状态注意知识点来啦要给容器添加选定状态、必须添加控件角色单纯给容器加选定状态不生效。不信我们试试看。尝试给分类容器添加一个无障碍角色buttonview classuni-tab-item v-for(tab,index) in tabList :keytab.id :idtab.id :reftabitemindex:data-idindex :data-currentindex clickontabtap :aria-selectedtabIndexindex aria-rolebuttontext classuni-tab-item-title :classtabIndexindex ? uni-tab-item-title-active : {{tab.name}}/text/view再次编译运行看看效果知乎视频www.zhihu.com第二步合并每条新闻的所有内容为一个大的焦点在index.nvue中我们分析代码发现每条新闻的相关代码在news-item.nvue文件中打开这个文件观察代码结构的确是新闻条目的相关代码。我们需要给每条新闻设置成一个焦点思路就是直接给每条新闻的容器添加一个无障碍角色这样就能达到我们要的效果例如这样注意看第二行代码template view classmedia-item view v-ifnewsItem.title clickclick aria-roletext view classview :style{flexDirection: (newsItem.article_type 1 || newsItem.article_type 2)?(newsItem.article_type 2 ?row:row-reverse):column } text classmedia-title :class{media-title2: newsItem.article_type 1 || newsItem.article_type 2}{{newsItem.title}}/text view v-ifnewsItem.image_list || newsItem.image_url classimage-section flex-row :class{image-section-right: newsItem.article_type 2, image-section-left: newsItem.article_type 1} image :fade-showfalse classimage-list1 :class{image-list2: newsItem.article_type 1 || newsItem.article_type 2} v-ifnewsItem.image_url :srcnewsItem.image_url/image image :fade-showfalse classimage-list3 v-ifnewsItem.image_list :srcsource.url v-for(source, i) in newsItem.image_list :keyi / /view /view view classmedia-foot flex-row view classmedia-info flex-row text classinfo-text{{newsItem.source}}/text text classinfo-text{{newsItem.comment_count}}条评论/text text classinfo-text{{newsItem.datetime}}/text /view view classclose-view click.stopclose view classclose-l close-h/view view classclose-l close-v/view /view /view view classmedia-item-line styleposition: absolute;/view /view/template编译预览到手机我们看下效果知乎视频www.zhihu.com通过本次体验我们发现uni-app跨平台框架可以支持编译微信小程序支持的aria-label、aria-role、aria-select等无障碍属性其他更多的无障碍属性等待大家探索。总结对于想从微信小程序原生开发转uni-app开发的同学不必担心无障碍属性支持情况目前体验uni-app支持编译无障碍相关属性如果要给view容器设置aria-select选定状态必须要给此容器设置无障碍角色aria-role角色值可以是button、text等如果要合并多个项目为一个焦点可以给相关内容的容器设置一个无障碍角色aria-role值可以为text、button等合并后的内容为一个焦点旁白可合并此容器内所有文本元素的内容进行朗读如果需要调整文本朗读顺序、或是修改朗读内容可以手动设置无障碍标签aria-label实现属性的值可以手动拼接要朗读的内容
