ホームページ  >  記事  >  WeChat アプレット  >  WeChatミニプログラムにおけるウェルカムページの制作について

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

不言
不言オリジナル
2018-06-26 16:05:144049ブラウズ

この記事では主に、(ソースコードのダウンロード)関連情報を含む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 アプレット開発


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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。