WeChat Mini 프로그램 홈페이지 제작 실시
이 글은 위챗 미니 프로그램의 홈페이지 제작에 대한 간단한 예시를 중심으로 소개하고 있으니, 필요한 친구들은 참고하시면 됩니다.
위챗 미니 프로그램의 홈페이지 제작에 대한 간단한 예시
구현 렌더링:
우선 큰 그림부터 시작하세요. 측면에서는 창 속성을 설정하는 것입니다
"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色 "navigationBarTextStyle": "white",//bar字体颜色 "backgroundColor": "white",//背景颜色 "enablePullDownRefresh": "true"//下拉是否刷新
로그인 후 복사
tabBar 속성
전체 코드는 다음과 같습니다. (wxml)
<view> <navigator url='/pages/14/1'> <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='/pages/14/2'> <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='/pages/14/3'> <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='/pages/14/4'> <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='/pages/14/5'> <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='/pages/14/6'> <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='/pages/14/7'> <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='/pages/14/8'> <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='/pages/14/9'> <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='/pages/14/10'> <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='/pages/14/11'> <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='/pages/14/12'> <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='/pages/14/13'> <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='/pages/14/14'> <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 중국어 홈페이지를 주목해 주세요!
관련 추천:
ChooseImage에 대하여 WeChat 미니 프로그램에서 사진을 선택하거나 사진을 찍으세요
WeChat 미니 프로그램의 사용자 정의 모달 팝업 창 소개
위 내용은 WeChat Mini 프로그램 홈페이지 제작 실시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전
By DDD

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7325
9


자바 튜토리얼
1625
14


Cakephp 튜토리얼
1350
46


라라벨 튜토리얼
1262
25


PHP 튜토리얼
1209
29

