初探微信ウィジェット

最近のプロジェクトでは、学生側が微信ウィジェットを使う必要があるので、この2,3日ウィジェットの原型を作ってみました.ここで踏んだ穴をまとめてみます.
コンポーネントライブラリの選択
最初の大きな問題はコンポーネントの選択です.微信の原生は本当に面白くないし、使いにくいからです.公式文書はありますが、初心者向けではないと言わざるを得ません.
1回目の選択:WeUI.これは以前先生が言及したコンポーネントライブラリなので、先に試してみました.しかし、効果はあまりよくありません.
2つの問題があります.1.コンポーネントライブラリが強くありません.関連する種類は全面的ですが、ある機能を実現しようとすると、うまくいかないところがあります.
2.ドキュメントがありません.WeUI自体は完璧なドキュメントがありますが、小さなプログラム版はありません.そのため、機能を実現したいと思っています.彼がくれたDemoに基づいてコードを盗むしかありません.
2回目の選択:ZanUI.サードパーティ製コンポーネントライブラリは、上記と比較して、ドキュメントの改善が最大の向上です.コンポーネントも種類がそろっています.基本的に開発のニーズを満たすことができます.
3回目の選択:VantUI.それはZanUIのアップグレードバージョンで、機能的にもっとそろっていて、同じ機能はもっと多くの選択があって、もっと多くの変化するシーンに適応することができます.ドキュメントの面でも優れており、初心者向けの入門チュートリアルだけでなく、同期して展示できることが最大のポイントで、より早く効果を見つけることができます.
最終的にVantUIを使用して原型の製作を行ったが、過程ではもっと考えられない点があるが、代替的な解決策を見つけることができた.全体的に満足しています.
リターンキー
基本的に私たちが見ている小さなプログラムは、上の戻りキーが不可欠です.
最初、ルーティングジャンプは、公式に与えられたAPIを使用してルーティングジャンプを行います.

wx.redirectTo({
    url: '/pages/personal/changePassword/changePassword'
})

次に戻るボタンを追加します.コンポーネントドキュメントを見つけて、戻りキーを追加します.

結果はこんな感じで、まあまあのようで、ちょっと違和感を感じました.微信を開くと、人のスタイルが1行しかないことに気づいた.私のスタイルは少し変に見えた.
Googleでみると、私のルーティングの方法が間違っていることに気づきました.

wx.navigateTo({
  url: 'changePassword/changePassword'
})

このボタンを使用して、戻るボタンを直接表示します.
上記の2つの方法の違いは、1つ目は現在のページを閉じてジャンプすることです.次は、現在のページを保持してジャンプします.だから上のurlにもいくつかの違いが見えます.最初は完全なパスを書きましたが、後者は相対的なパスだけを書きました(もちろん完全でもいいです).
後の利点を使うと、API:wx.navigateBackを利用して戻ることもでき、面倒を省くことができます.
インタフェーススタイル
今回プロトタイプを作る過程で、他の人の小さなプログラムをたくさん見て、cellというコンポーネントが頻繁に使われていることに気づきました.その効果は次のとおりです.
ボタンの代わりに広い面積で使われているので、私もこれを参考にして、ボタンよりも効果があると言わざるを得ません.
まず、ボタンの実装スタイルを見てみましょう.cellのスタイルを比較してみましょう.
ボタンも悪くないようですが、後ろの方がいい感じです.
それだけでなく、私は彼を利用してtableの問題を解決しました.ウィジェット自体にはtableはなく、各コンポーネントライブラリにも見られないため、最後にVantUIライブラリの2つのコンポーネントpanelとcellの組み合わせで実現される.

次のような効果が得られます.
私の予想には達していませんが、第1版としてもいいです.
安利VantUIライブラリには多くのアイコンが追加されていますが、まだあなたのニーズを満たすことができない場合は、ここに行ってインスピレーションを探すことができます.https://www.iconfont.cn/
最後にVantUIの住所を添付します.
https://github.com/youzan/van...https://youzan.github.io/vant...