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元素的class

<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>

這里的關鍵代碼是

" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''"

我們就抄寫這句代碼中的判斷方式，為text的容器view添加選定狀態

<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
:data-id="index" :data-current="index" @click="ontabtap" :aria-selected="tabIndex==index" >
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
</view>

此處的關鍵代碼是

aria-selected="tabIndex==index"

意思是當選定的分類等于當前索引時返回true，否則返回false，這里的aria-select屬性是選定狀態屬性，接受布爾值。

添加完選定狀態屬性，結果發現還是讀不出選定狀態，注意知識點來啦：

要給容器添加選定狀態、必須添加控件角色，單純給容器加選定狀態不生效。

不信我們試試看。

嘗試給分類容器添加一個無障礙角色button

<view class="uni-tab-item" v-for="(tab,index) in tabList" :key="tab.id" :id="tab.id" :ref="'tabitem'+index"
:data-id="index" :data-current="index" @click="ontabtap" :aria-selected="tabIndex==index" aria-role="button">
<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
</view>

再次編譯運行看看效果：

知乎視頻?www.zhihu.com

第二步，合并每條新聞的所有內容為一個大的焦點

在index.nvue中我們分析代碼發現，每條新聞的相關代碼在news-item.nvue文件中，打開這個文件，觀察代碼結構，的確是新聞條目的相關代碼。

我們需要給每條新聞設置成一個焦點，思路就是直接給每條新聞的容器添加一個無障礙角色，這樣就能達到我們要的效果，例如這樣：（注意看第二行代碼）

<template>
<view class="media-item view" v-if="newsItem.title" @click="click" aria-role="text">
<view class="view" :style="{flexDirection: (newsItem.article_type === 1 || newsItem.article_type === 2)?(newsItem.article_type === 2 ?'row':'row-reverse'):'column' }">
<text class="media-title" :class="{'media-title2': newsItem.article_type === 1 || newsItem.article_type === 2}">{{newsItem.title}}</text>
<view v-if="newsItem.image_list || newsItem.image_url" class="image-section flex-row" :class="{'image-section-right': newsItem.article_type === 2, 'image-section-left': newsItem.article_type === 1}">
<image :fade-show="false" class="image-list1" :class="{'image-list2': newsItem.article_type === 1 || newsItem.article_type === 2}"
v-if="newsItem.image_url" :src="newsItem.image_url"></image>
<image :fade-show="false" class="image-list3" v-if="newsItem.image_list" :src="source.url" v-for="(source, i) in newsItem.image_list"
:key="i" />
</view>
</view>
<view class="media-foot flex-row">
<view class="media-info flex-row">
<text class="info-text">{{newsItem.source}}</text>
<text class="info-text">{{newsItem.comment_count}}條評論</text>
<text class="info-text">{{newsItem.datetime}}</text>
</view>
<view class="close-view" @click.stop="close">
<view class="close-l close-h"></view>
<view class="close-l close-v"></view>
</view>
</view>
<view class="media-item-line" style="position: 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實現，屬性的值可以手動拼接要朗讀的內容；

總結

以上是生活随笔為你收集整理的uni app input添加获取验证码按钮_uni-app跨平台框架对微信小程序的无障碍支持探索...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。