微信小程序基本目錄

pages:主要存放小程序的頁面文件，其中每個文件夾為一個頁面，每個頁面包含四個文件，.wxml文件是界面文件，.js是事件交互文件，用于處理界面的點擊事件等功能；.wxss為界面美化文件，讓界面顯示的更加美觀；.json為配置文件，用于修改導航欄顯示樣式等，小程序每個頁面必須有.wxml和.js文件，其他兩種類型的文件可以不需要。
注意：文件名稱必須與頁面的文件夾名稱相同，如index文件夾，文件只能是index.wxml、index.wxss、index.js和index.json.
index為第一個界面,app.js,app.json,app.css為全局配置文件,index.logs下為局部配置.

app.json文件如下,pages下內容決定首先顯示哪個界面,我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋。

{"pages":["pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#03bbd5","navigationBarTitleText": "hello","navigationBarTextStyle":"white","enablePullDownRefresh":true,"backgroundColor":"#ccc"} }

app.json其中”window”:中可更改的內容參考
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

微信小程序跳轉頁面

1，在wxml頁面中：

<navigator url="../index/index">跳轉到新頁面</navigator>

2，在js頁面中：

定位實現地圖布局

index.wxml文件如下

<view><view class="mapArea"><map id="map" longitude="113.324520" latitude="23.099994" scale="10" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location style="width: 100%; height: 100%;"></map></view><!-- <button bindtap="bindViewTap">tap</button> --><view class="nav"><view class="publish"><navigator url="../logs/logs">發布</navigator></view><view class="search">搜索</view></view> </view>

index.wxss文件如下

.nav { height: 42px;width: 100%;position: absolute;/* top: 100%; */bottom: 0px;display: flex;color: #fff; } .mapArea{/* height: 500px; */bottom: 42px; width: 100%;top: 0px;left: 0px;right: 0px;position: absolute;/* background-color: black; */ } .publish,.search{text-align: center;line-height: 42px;height: 42px;flex: 1; /*占用1/2,當改成2時,則占用2/3*/} /* 以下的內容可以整合到上方.publish,.search{}中 */ .publish {background-color: #ff9700;/* width: 50%; */ /* float: left; 當下方方塊多了的時候就不好用了*/ } .search {text-align: center;line-height: 42px;/* width: 50%; */background-color: #03bbd5;height: 42px;/* float: right; */flex: 1; }

盒模型

新建目錄

在微信開發者工具app.json中添加”pages/comingsoon/comingsoon”,然后保存即可

"pages":["pages/index/index","pages/comingsoon/comingsoon","pages/logs/logs"],

總結

以上是生活随笔為你收集整理的微信小程序开发-入门基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。