最近、会社が事業を拡大して大画面とセンサーを監視するスマートトイレのプロジェクトを行う予定で、私は大画面の描画とデータ受信を担当しています。現在、プロジェクトの一部が完了しましたので、この機会にステージの概要を作成します。
この記事では、主にプロジェクトのいくつかのアイデアを説明し、uniapp を使用して大画面の表示と適応を実現します。
使用されるツールとテクニック
- uniapp + ネイティブプラグイン開発
- Android タブレットまたはテレビ
- アシュアRP9
全体的な構造:
この開発は uniapp を使用して実行されます。ネイティブ プラグインは TCP サービスをカプセル化します。具体的なプラグイン開発プロセスについては、「Android ネイティブ プラグインの uniapp 開発」を参照してください。これはこのセクションの焦点ではありません。
1.トイレのレイアウトに合わせて設計図を描く
ユーザーは開発・設計するレイアウト図を提供し、AxureRP9を通じて設計案を描画します。
デザイン案を作成することで、後で大画面を描画するときに各要素に対応する x と y を正確に知ることができるため、大画面をより速く描画することができます。
例：描画
例：最終効果
2. 設計案に従ってフロントエンドのレイアウトを実行します
2.1 Canvas は大画面ページを描画します
開発プロセスでは、中央トイレのレイアウトを描画するためにキャンバスが使用されますが、基本的に同じではないため、カスタム開発が必要です。側面、頭、上面も通常通りに描けるので、書くのも早くなります。開発プロセス中、各トイレは独立したページに属します。その後の開発を容易にするために、キャンバス部分のロジックを個別に抽出します。
使用される主なcanvasAPI
// 获取 canvas画布
ctx = uni.createCanvasContext('toilet1Canvas');
/**
* 绘制 可以使用/正在使用图标
*/
async function drawUseIcon() {
let {
path: successImgUrl
} = await getImageInfo(successImg);
let {
path: errorImgUrl
} = await getImageInfo(errorImg);
ctx.drawImage(successImgUrl, 645, 25, 140, 30);
ctx.drawImage(errorImgUrl, 805, 25, 140, 30);
ctx.draw(true);
// 绘制文字
ctx.setFontSize(16);
ctx.setFillStyle('#ffffff');
ctx.fillText('可以使用', 710, 45);
ctx.fillText('正在使用', 870, 45);
ctx.draw(true);
}
// 绘制线条
ctx.beginPath();
ctx.setLineWidth(10);
ctx.strokeStyle = "#1e7bf2";
ctx.moveTo(0, 79);
ctx.lineTo(1035, 79);
ctx.closePath();
ctx.stroke();
2.2 大画面ページへの適応
実際、開発プロセスにおいて、大画面のページ描画やキャンバス描画はそれほど支障はなく、インターネットで検索してキャンバス API を見つければ、必要に応じて描画を完成させることができます。
少し面倒なのは、開発用に設計されたページを適応させることです。
- 最終プロジェクトはAndroid TVに適用予定、具体的なモデルは未定
- 現在のデザイン案のサイズ比率はテレビと必ずしも一致していません
- 在开发的过程中采用的是浏览器、平板进行的测试，怎样让完成适配的页面，无论什么环境设备下都能合理的展示呢
我所经历过与适配相关的也就是 rem、rpx 或者 通过一些三方适配插件进行，但是这些都不适合当下的场景，因为它不仅仅有文字还有 canvas。
最终，我想到了 —— scale，直接对当前页面W、H 进行缩放不就可以了吗。
针对问题三：如果当前设备的比例与设计稿的比例不一致，那么按设计稿比例进行缩放，根据设备W、H 与 设计稿进行比较，等比占满其中的一项；然后使用一个合适的背景图，那不就满足了嘛！！
备注：
- 在后续的实际开发中，还发现了个问题：我们需要将适配后的页面，居于当前设备屏幕的中心，因此我们还需要设置一下原点
transformOrigin； - 屏幕的分辨率与尺寸是没关系的，在实际测试中通过
uni.getSystemInfo获取的windowWidth windowHeight，在 TV 中并不一定会比你使用的 电脑显示器大。
以下适配方法的代码，大家可以进行参考：
页面的设计稿：1920 * 969；
/**
* 处理当前 页面视图的适配
* 用于适配 不同大小的 TV
*/
function viewAdaptive() {
// 获取当前视图大小
return new Promise((resolve, reject) => {
uni.getSystemInfo({
success: (res) => {
let {
windowWidth,
windowHeight
} = res;
// 设计稿的尺寸
let designWidth = 1920;
let designHeight = 969;
let designScale = designWidth / designHeight; // 约为 1.98
// 计算当前按设计比例 应有的大小
let width = designScale * windowHeight;
let height = windowWidth / designScale;
// 分别存储当前 X Y 的缩放比
let scaleX, scaleY;
let scaleWidth, scaleHeight;
if (!(width > windowWidth)) {
// 以宽度为基准，等比例缩放
scaleWidth = width;
scaleHeight = scaleWidth / designScale;
} else if (!(height > windowHeight)) {
// 以高度为基准等比例缩放
scaleHeight = height;
scaleWidth = scaleHeight * designScale;
}
scaleX = scaleWidth / designWidth;
scaleY = scaleHeight / designHeight;
let originX = 0, originY = 0;
originX = windowWidth - scaleWidth;
originY = windowHeight - scaleHeight;
resolve({
windowWidth,
windowHeight,
scaleX,
scaleY,
originX,
originY,
})
}
})
})
}
在之后的阶段中，可预见的问题有：
- TV 中怎样自启动应用App（因为大部分TV是在安卓做的二次封装，之前采用的自启动插件测试无效，目前暂无思路）
- 通过原生安卓插件启 TCP 服务与 硬件进行通讯(已封装完成，但是测试过程中还是有瑕疵)
- TV 连接wifi 将本地
SQLite数据库数据上传到云（已测试 获取wifi状态、请求云端数据无误）
さて、スマート トイレの大画面の最初の段階の概要はこれで終わりです。他の質問やより良い方法がある場合は、時間内にコメント エリアで削除できます。経験やアイデアは弟を指導してください。
先は長い、たとえ環境が激動しても、やるべきことをやって、もっと学んで、もっとまとめて、過度な不安は良い影響を与えないよ！知識を求める道を一緒に応援したいと思います。！！