開發工具下載地址
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
目錄檔案
- （1）后綴wxss為樣式，app.wxss全域樣式
（2）app.json全域組態檔
（3）app.js邏輯層 - （1）pages里為頁面
（2） untils工具包
app.js
"pages":[
"pages/index/index",
"pages/logs/logs",
//"pages/new/new"
],
放在第一個上的頁面是首頁，可在這創建新頁面，ctrlS后新建new頁面
組件
- view
<view
hover-class="" 指定按下去的樣式，需要在wxss中寫出
hover-start-time="" 按住后多久出現點擊態，單位毫秒
>
display: inline; //view中的view變成一行
- text
<text user-select="是否可選" space="ensp是否顯示文本中的空格" decode是否解碼> $ensp <等</text>
- image
<image class="img" src="/表示根目錄" mode=""></image>
src可以參考網路鏈接
image默認樣式
display: inline-block;
height: 240px;
overflow: hidden;
width: 320px;
rpx單位是可以根據螢屏寬度進行自適應
可用class指定，用mode屬性控制圖片裁剪、縮放的模式
mode常用值
aspectFit 使圖片的長邊能完全顯示出來，長邊填滿box
aspectFill 只保證圖片的短邊能完全顯示出來，短邊填滿box
widthFix 寬度不變，高度自動變化（填滿），保持原圖寬高比不變
heightFix 高度不變，寬度自動變化（填滿），保持原圖寬高比不變
- 導航（超鏈接） navigator頁面鏈接
<!-- 保留原頁面 -->
<navigator url="/pages/logs/logs">跳轉頁面</navigator>
<!-- 不保留原頁面，只能回首頁 -->
<navigator url="/pages/logs/logs" open-type="redirect">跳轉頁面</navigator>
<navigator url="/pages/logs/logs" open-type="switchTab">跳轉頁面</navigator>
<navigator url="/pages/logs/logs" open-type="reLaunch">跳轉頁面</navigator>
open-type取值:
默認 navigate
switchTab 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面，url不能帶引數
reLaunch 關閉所有頁面，打開到應用內的某個頁面，能帶參，有tabBar
- scroll-view（滾動）
<!-- 橫向滑動， 從左邊100px開始 -->
<scroll-view scroll-x scroll-left="100">
<view class="out">
<view class="vbox">111</view>
<view class="vbox">222</view>
<view class="vbox">333</view>
<view class="vbox">444</view>
<view class="vbox">555</view>
</view>
</scroll-view>
.out{
border: 1px solid rebeccapurple;
display: flex;
flex-wrap: nowrap;
}
.vbox{
margin-left: 1px;
background: red;
width: 100px;
height: 100px;
flex: 0 0 100px;
}
縱向，當顯示外邊盒子大小時，輸入scroll-y開啟滑動
- swiper滑塊容器
<swiper class="banner" indicator-dots indicator-color="rgb(255,255,255,0.5)"
indicator-active-color="#fff" autoplay interval="1000" circular>
<swiper-item>
<image src="/image/無標題.png"></image>
</swiper-item>
<swiper-item>
<image src="/image/無標題.png"></image>
</swiper-item>
<swiper-item>
<image src="/image/無標題.png"></image>
</swiper-item>
</swiper>
給swiper-item的樣式加padding 可以漏出下一張照片用來預告
indicator-dots顯示點，indicator-color點的顏色，indicator-active-color選中的顏色
autoplay自動播放，interval切換時間
circular回圈
vertical縱向滑動
flex彈性盒子
flex-wrap 指定 flex 元素單行顯示還是多行顯示
第一個值必須為一個無單位數，并且它會被當作< flex-grow >的值，
第二個值必須為一個無單位數，并且它會被當作 <flex-shrink> 的值，
第三個值必須為一個有效的寬度值， 并且它會被當作 <flex-basis> 的值，
To Be Continue 學完整理
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/291007.html
標籤：其他
下一篇：2021-07-29（補）