5-微信小程序開發(小程序頁面跳轉和布局說明)

 

https://www.cnblogs.com/yangfengwu/p/11605209.html

 

新建一個小程序

咱現在新建個頁面

在pages 上右擊,選擇新建目錄

 

 

 

 

 

 

 

 

 

 

 

 

 

會自動添加這幾個文件

 

 

 

 

 

 

現在做個按鈕,點擊按鈕跳轉到咱做的那個頁面,咱先刪除其余的

 

 

 

 

 

 

 

 

 

 

 

 

在做按鈕跳轉之前咱先說個東西

做過網頁的應該都知道DIV,當然沒做過也沒關系

小程序呢用view

關於什么是DIV什么是view  , 我向來學東西呢 只關心所學的知識點是干什么的,可以為了解決什么問題!!

其實DIV和view就相當於咱 做APP時的布局方式,然后呢!把控件放到這種布局方式里面,然后調用布局方式里面的方法對控件的位置進行設定

不過哈,可以按照上面這樣理解,實際上DIV和view 就相當於一個無形的框,然后把控件放到里面,然后對這個無形的框定義一些布局方式,那么處於這個無形的框里面的控件就會按照咱的布局方式排列位置

額,如果沒有做過APP也沒關系...

咱做一個頁面,頁面上肯定有一些控件(按鈕,文本框,圖片....)

有可能有人會問,我直接控制控件的位置不就好了,為嘛還要在外圍加上DIV和view

一個東西的出現然后有很多人的使用,那么必有其使用的價值

現在咱開始使用view了.....

假設咱做一個頁面

 

 

 

注:在做頁面之前咱腦海中一定要有個清晰的布局哈!一般都是先設計好頁面的布局然后着色,然后寫代碼實現...

做之前一定要有思路,別盲目!!!!!!

下面咱呢就用view來簡潔的實現下面的頁面

咱呢看到這個頁面以后

 

 

 

整個頁面可以分為三個部分,這三個部分是一豎排排列的

 

 

 

注意定義 class="main"  是因為咱呢需要控制這個 view,控制這個view可以用 class 也可以用 id....如果沒有網頁基礎...去學哈!

 

 

 

display: flex;/*main這個框里面的元素使用flex布局方式*/

flex-direction: column; /*里面的元素這樣從上到下排列*/

 

大家可以自己去百度 flex 布局方式

然后呢

 

 

 

 

 

 我加上顏色是為了可以看出來哈,,,最后咱會去掉這些顏色

 

/**index.wxss**/
/*  */
.main{
  width:100%; /* 寬度占手機屏幕總寬度的100% */
  height:100%;/* 高度占手機屏幕總寬度的100% */
  
  flex-direction: column; /*里面的元素這樣從上到下排列*/
  display: flex;/*main這個框里面的元素使用flex布局方式*/
}

.TOP{
  width: 100%;/*寬度占總寬度的100%,相對於父 view*/
  height: 250rpx;/* 高度250像素(iPhone6為標准),其它手機等比例放縮 */
  background-color: red;/* 整體的背景顏色紅色 */
}

.middle{
  width: 150rpx;
  height: 150rpx;
  background-color: green;
}

.bottom{
  width: 50rpx;
  height: 150rpx;
  background-color: blue;
}

 

看個地方

 

 

有個線,這個線呢,可以用個 view代替,設置寬度窄一點,顏色是灰色就可以

或者呢

設置一下上面那個View的底層的邊框是那個寬度和顏色

 

 

 

 

 

 

 

 

 

咱設置的再小一點

 

然后再調整一下

 

 

 

/**index.wxss**/
/*  */
.main{
  width:100%; /* 寬度占手機屏幕總寬度的100% */
  height:100%;/* 高度占手機屏幕總寬度的100% */
  
  flex-direction: column; /*里面的元素這樣從上到下排列*/
  display: flex;/*main這個框里面的元素使用flex布局方式*/
}

.TOP{
  width: 100%;/*寬度占總寬度的100%,相對於父 view*/
  height: 300rpx;/* 高度300像素(iPhone6為標准),其它手機等比例放縮 */
  background-color: white;/* 整體的背景顏色白色 */
  border-bottom: 1rpx solid darkgray;/*設置底邊框的寬度10px,顏色是灰色*/
}

.middle{
  width: 100%;
  height: 200rpx;
  background-color: green;
  margin-top: 0px;/*距離上一個元素的距離,這個上一個元素現在是指 class為 TOP 這個view*/
}

.bottom{
  width: 100%;
  height: 200rpx;
  background-color: blue;
  margin-top: 1px;/*距離上一個元素的距離,這個上一個元素現在是指 class為 middle 這個view*/
}

 

 然后搞這兩個

https://www.iconfont.cn/search/index?spm=a313x.7781069.1998910419.dac382181&searchType=icon&q=%E7%99%BB%E5%BD%95&page=2

 

去阿里的矢量圖庫下載個圖標

 

 

 

 

 

 

 

建個名字為 images的文件夾,用來放以后用到的圖片

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<!--index.wxml-->
<view class="main"> <!--整體頁面-->
  <view class="TOP"> <!--最上面-->
    <image class="TOP_ID_Image" src="../../images/ID.png ">  </image>
  </view>

  <view class="middle"> <!--中間-->
  
  </view>


  <view class="bottom"> <!--最下面-->
  
  </view>

</view>

 

然后調整下大小

 

 

 

然后放一個文本

 

然后呢咱想的是讓

 

 

 

咱還是用 

 

 

 

 

關於這些方法哈,先看看基礎知識,然后自己寫寫練練手,腦海里稍微有個印象就可以,其實如果不會了

 

 

 

自己百度,然后自己測試,然后慢慢就弄好了,沒有誰可以把所有的方法記下來的,關鍵是自己要知道自己需要什么樣的方法

 

接着調整

 

 

 

 

 

 

 

上面算是做好了,接着做下面

咱就做一個哈,另一個大家自己弄

去搞三張圖片

首先咱知道

 

 

 

所以

 

 

 

 

 

 

 

<!--index.wxml-->
<view class="main"> <!--整體頁面-->
  <view class="TOP"> <!--最上面-->
    <image class="TOP_ID_Image" src="../../images/ID.png ">  </image>
    <text id="TOP_ID_Text">hello 小程序 </text>
  </view>

  <view class="middle"> <!--中間-->
    <image class="middle_Image" src="../../images/wave.png ">  </image>
    <image class="middle_Image" src="../../images/router.png ">  </image>
    <image class="middle_Image" src="../../images/link.png ">  </image>
  </view>


  <view class="bottom"> <!--最下面-->
  
  </view>

</view>

 

后來想了想,咱呀還是用按鈕,然后設置按鈕的背景圖片

 

 

 

 

 

 

 

/**index.wxss**/
/*  */
.main{/*最外面的view */
  width:100%; /* 寬度占手機屏幕總寬度的100% */
  height:100%;/* 高度占手機屏幕總寬度的100% */
  
  flex-direction: column; /*里面的元素這樣從上到下排列*/
  display: flex;/*main這個框里面的元素使用flex布局方式*/
}

.TOP{/*最上面的view */
  width: 100%;/*寬度占總寬度的100%,相對於父 view*/
  height: 400rpx;/* 高度400像素(iPhone6為標准),其它手機等比例放縮 */
  background-color: white;/* 整體的背景顏色白色 */
  border-bottom: 1rpx solid darkgray;/*設置底邊框的寬度10px,顏色是灰色*/

  display: flex;/*這個框里面的元素使用flex布局方式*/
  flex-direction:row;/*左右排列控件,從左到右,水平線就叫做主軸,豎直的就叫做交叉軸*/
  align-items: center;/*里面元素垂直方向居中*/
}
.TOP_ID_Image{/*設置上面的View里面的圖片大小*/
  width: 200rpx;
  height: 200rpx;
  margin-left: 100rpx;/*設置當前距離父控件左端的距離*/
}

#TOP_ID_Text{/*最上面的view里面顯示的文字 */
  font-size:25px;/*設置字體大小*/
  margin-top: -100rpx;/*設置當前距離父控件頂端的距離,以當前位置作為起點*/
  margin-left: 30rpx;/*設置當前距離父控件左端的距離,以當前左端位置作為起點*/
}

/*另外的元素左對齊,記錄,防止后期用到*/
/*
#TOP_ID_Text{
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}
*/


.middle{/*中間的view */
  width: 100%;
  height: 300rpx;
  /*background-color: green;*/
  margin-top: 0px;/*距離上一個元素的距離,這個上一個元素現在是指 class為 TOP 這個view*/

  display: flex;/*這個框里面的元素使用flex布局方式*/
  flex-direction:row;/*左右排列控件,從左到右,水平線就叫做主軸,豎直的就叫做交叉軸*/
  align-items: center;/*里面元素垂直方向居中*/
}

.button{/*中間的view 里面的按鈕設置 */
  width: 200rpx;
  height: 200rpx;

  background-repeat:no-repeat;/* 背景圖像將僅顯示一次。 */
  background-position: center;/*背景圖像居中顯示*/
}

.bottom{/*最下面的view */
  width: 100%;
  height: 200rpx;
  background-color: blue;
  margin-top: 1px;/*距離上一個元素的距離,這個上一個元素現在是指 class為 middle 這個view*/
}

 

<!--index.wxml-->
<view class="main"> <!--整體頁面-->
  <view class="TOP"> <!--最上面-->
    <image class="TOP_ID_Image" src="../../images/ID.png ">  </image>
    <text id="TOP_ID_Text">hello 小程序 </text>
  </view>

  <view class="middle"> <!--中間-->
    <button class="button" style="background-image:url(../../images/wave.png); " > </button>
    <button class="button" style="background-image:url(../../images/router.png);" >  </button>
    <button class="button" style="background-image:url(../../images/wave.png);"> </button>
  </view>

  <view class="bottom"> <!--最下面-->
  
  </view>

</view>

 

然后呢 加上顯示的文字...不過沒有找到方法把文字調整到右下角

 

 

 

 

 

 

 

 

 

...........................巨丑.....巨丑.....................

額,大家想想辦法吧!!!!誰要是搞定了一定告訴我哈....感謝

好了現在說一下按鈕跳轉

其實

 

 

 

 

 

 

 

 

 

 

 

 

 

現在跳轉到新的頁面