アップルトでweuiコンポーネントライブラリを使用する

プロジェクトを作成する

WeChat開発者ツールを開き、新しいプロジェクトを作成します

作成後に不要なコンテンツをすべてクリーンアップする

weuiを紹介します

以前はnpmの形で導入されていましたが、導入後は構築する必要があり、面倒でした。新バージョンでは直接インポートの機能が追加されています。具体的には、app.jsonに設定を追加してください。

{
    
    
  "pages": [
    "pages/index/index"
  ],
  "window": {
    
    
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "云开发 QuickStart",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "style": "v2",
  "useExtendedLib": {
    
    
    "weui": true
  }

}

weuiをtrueに設定するだけです。導入が成功したかどうかを確認するために、インデックスページにポップアップボックスを追加します。
まず、index.jsonにカスタムコンポーネントを追加します

{
    
    
  "usingComponents": {
    
    
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

次に、index.wxmlに必要なコンポーネントを導入します

<!--index.wxml-->
<view class="container">
<text>这是一个云开发</text>
<mp-dialog title="test" show="{
    
    {true}}" bindbuttontap="tapDialogButton" buttons="{
    
    {[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>
</view>

導入後の効果は

とても便利ですか？coloruiを使うのが好きな人もいれば、便利なuiフレームワークもあります。個人的にはweuiが好きで、スタイルはWeChatと統合されており、使いやすく、互換性のない効果を心配する必要はありません。