コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > WeChat アプレット > ミニプログラム開発 > WeChat アプレット制作ホームページの実装

WeChat アプレット制作ホームページの実装

不言
リリース： 2018-06-26 17:39:34
オリジナル
2664 人が閲覧しました

この記事は主にWeChatミニプログラムのホームページ作成の簡単な例に関する関連情報を紹介します。必要な友人はそれを参照してください

WeChatミニプログラムのホームページ作成の簡単な例

。レンダリング:

まず全体像から始めます。側面に関しては、ウィンドウのプロパティを設定することです

"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色
"navigationBarTextStyle": "white",//bar字体颜色
"backgroundColor": "white",//背景颜色
"enablePullDownRefresh": "true"//下拉是否刷新
ログイン後にコピー

tabBarプロパティ

完全なコードは次のとおりです(wxml)

<view>
<navigator url=&#39;/pages/14/1&#39;>
<view class="waylist">
<view class="im im1">1</view>
<view class="way">广从1号线</view>
<view class="ste">市汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/2&#39;>
<view class="waylist">
<view class="im im2">2</view>
<view class="way">广从2号线</view>
<view class="ste">芳村汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/3&#39;>
<view class="waylist">
<view class="im im3">3</view>
<view class="way">广从3号线</view>
<view class="ste">罗冲围汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/4&#39;>
<view class="waylist">
<view class="im im4">4</view>
<view class="way">广从4快号线</view>
<view class="ste">天河客运站 -从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/5&#39;>
<view class="waylist">
<view class="im im4">4</view>
<view class="way">广从4线</view>
<view class="ste">天河客运站 -从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/6&#39;>
<view class="waylist">
<view class="im im5">5</view>
<view class="way">广从5号线</view>
<view class="ste">东站汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/7&#39;>
<view class="waylist">
<view class="im im6">6</view>
<view class="way">广从6号线</view>
<view class="ste">东圃客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/8&#39;>
<view class="waylist">
<view class="im im7">7</view>
<view class="way">广从7号线</view>
<view class="ste">黄埔客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/9&#39;>
<view class="waylist">
<view class="im im8">8</view>
<view class="way">广从8号线</view>
<view class="ste">广园汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/10&#39;>
<view class="waylist">
<view class="im im8">8</view>
<view class="way">广从8快线</view>
<view class="ste">广园汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/11&#39;>
<view class="waylist">
<view class="im im9">9</view>
<view class="way">广从9号线</view>
<view class="ste">滘口汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/12&#39;>
<view class="waylist">
<view class="im im10">10</view>
<view class="way">广从10号线</view>
<view class="ste">越秀南客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/13&#39;>
<view class="waylist">
<view class="im im10">10</view>
<view class="way">广从10快线</view>
<view class="ste">越秀南客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/14&#39;>
<view class="waylist">
<view class="im im11">11</view>
<view class="way">广从11号线</view>
<view class="ste">海珠汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
</view>
ログイン後にコピー

wxss

.waylist{
display: flex;
border-bottom: 1px solid gray;
font-size: 13px;
}
.waylist view{
height:40px;
line-height: 40px;
}
.waylist .im{
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
color:white;
margin-top: 7.5px;
margin-right: 5px;
border-radius: 50px;
margin-left: 5px;
}
.ste{
color:gray;
text-align: left;
font-size: 12px;
width: 60%;
}
.way{
width: 30%;
}
.jian{
text-align: right;
font-size: 20px;
color:gray;
}
.hidden{
visibility: hidden;
}
image{
margin-top:5px;
}
.im1{
}
.im2{
}
.im3{
}
.im4{
}
.im5{
}
.im6{
}
.im7{
}
.im8{
}
.im9{
}
.im10{
}
.im11{
}
ログイン後にコピー

jsonファイル

{
"navigationBarTitleText": "所有广从线"//bar内容
}
ログイン後にコピー

jsファイル 

Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
})
ログイン後にコピー

上記がこの内容の全文です関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat ミニ プログラムで写真を選択または撮影するための画像の選択について

WeChat ミニ プログラムのカスタム モーダル ポップアップ ウィンドウの紹介

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

以上がWeChat アプレット制作ホームページの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
微信小程序首页总结 小程序首页制作
ソース：php.cn
前の記事：写真を選択または写真を撮るための WeChat アプレットのchooseImageについて 次の記事：WeChatミニプログラムでじゃんけんを実施
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2065
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2229
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1873
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1756
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1788
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート