WeChatミニプログラムにおけるウェルカムページの制作について

この記事では主に、(ソースコードのダウンロード)関連情報を含むWeChatミニプログラムのウェルカムページの作成について紹介します。ウェルカムページは、アプリケーションの作成を開始するときに使用されます

WeChat。ミニ プログラムのウェルカム ページ :

まずは最終的なレンダリングを見てみましょう:

まず、開発ツールを開き、クイック スタート プロジェクトを作成し、簡単な変更を加えます。

• ようこそとなるように Index フォルダーの名前を変更します。

• 上部のスタイルを変更します。

  ボタンの実装:

welcome.wxml

•  <view class="usermotto">
   <text class="btn">开启小程序之旅</text>
   </view>

  ログイン後にコピー

welcome.wxss

.usermotto {
 margin-top: 200px;
 border: 1px solid #405f80;
 width: 200rpx;
 height: 80rpx;
 text-align: center;
 border-radius: 5px;
}
.btn{
 font-size: 22rpx;
 font-family: MicroSoft Yahei;
 font-weight: bold;
 line-height: 80rpx;
}

背景色の設定:

注: 最も外側のビューで幅と高さを 100% に設定し、背景色は無効です。 WeChatにはデフォルトで外部ページがあるからです。

したがって、次のように書く必要があります:

page{
 height: 100%;
 background: #b3d4db;
}

トップ設定:

app.jason

{
 "pages":[
 "pages/welcome/welcome"

 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#b3d4db",
 "navigationBarTitleText": "欢迎",
 "navigationBarTextStyle":"black"
 }
}

上記がこの記事の全内容です。皆様の学習にお役立てください。関連コンテンツの詳細については、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat アプレットを監視するジェスチャー スライドのページ切り替えの実装

WeChat アプレットを実行する WeChat アプレット開発

以上がWeChatミニプログラムにおけるウェルカムページの制作についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。