微信開發(fā)文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/

報錯在調(diào)試器的console里找

一、結(jié)構(gòu)

Ctrl + +放大字體
Ctrl + - 縮小

設(shè)置 - - - 外觀設(shè)置 - - - 可以修改喜歡的主題顏色

index.js
index.json
index.wxml ==》 html

<view class="box" hover-class="boxhover" hover-stay-time="0" >你好<view class="inner" hover-class="innerbox" hover-stop-propagation>早上好</view>
</view>

index.wxss ==》 css

.box{width: 200px;height: 200px;background: red;
}

logs 日志

utils - - - 工具類 封裝方法
.eslintrc.js - - - 規(guī)定代碼格式化

全局配置
app.js - - - 邏輯文件
app.json - - - 配置項
app.wxss - - - 全局樣式

project.config.json - - - 公用配置
project.private.config.json - - - 私人配置

sitemap.json - - - 地圖 檢索機制

二、組件

1.view

視圖容器 view ==》div

簡寫 輸入下面代碼 敲回車
.box>.top>.bar
------------------------------
<view class="box"><view class="top"><view class="bar"></view></view>
</view>

.row{$}*3  # $ is number
------------------------------
<view class="row">1</view>
<view class="row">2</view>
<view class="row">3</view>

hover-class - - - 指定按下去的樣式類。當 hover-class=“none” 時，沒有點擊態(tài)效果
hover-stop-propagation - - - 指定是否阻止本節(jié)點的祖先節(jié)點出現(xiàn)點擊態(tài)
hover-start-time - - - 按住后多久出現(xiàn)點擊態(tài)，單位毫秒
hover-stay-time - - - 手指松開后點擊態(tài)保留時間，單位毫秒

2.text

基礎(chǔ)內(nèi)容 text ==》 span
常用WebView屬性

user-select - - - 文本是否可選，該屬性會使文本節(jié)點顯示為 inline-block
space - - - 顯示連續(xù)空格
decode - - - 是否解碼

# True在頁面顯示 < 
<text decode="True">&lt;</text>

3.icon 圖標

基礎(chǔ)內(nèi)容 icon
type - - - 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size - - - icon的大小，單位默認為px
color - - - 顏色

4.progress 進度條

vant weapp - - - UI組件庫

5.rpx 像素

指南 - - - 小程序框架 - - - wxss
rpx（responsive pixel）: 可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。
可將圖片改為寬750px

100vw：屏幕的寬度
100vh：屏幕的高度

6.scroll-view 可滾動視圖區(qū)域

<scroll-view class="scroll" scroll-y>.row{$}*7
</scroll-view>

將scroll-y變?yōu)閟croll-x，給row元素添加display:inline-block;，父元素添加white-space:nowrap;不換行

.row:last-child{}最后一個row

可制作bar導航欄等

7.movable-area 可移動區(qū)域

和movable-view搭配使用
movable-view：可移動的視圖容器，在頁面中可以拖拽滑動。movable-view必須在 movable-area 組件中，并且必須是直接子節(jié)點，否則不能移動。

行內(nèi)樣式

<movable-area style="width: 400rpx;height: 400rpx;background: #eee;overflow: hidden;" scale-area="False"><movable-view style="width: 100rpx;height: 100rpx;background: orange;" direction="all" scale x='20rpx' y='20rpx' out-of-bounds>hello</movable-view>
</movable-area>

8.match-media 匹配檢測節(jié)點

可以指定一組 media query 規(guī)則，滿足時，這個節(jié)點才會被展示。
通過這個節(jié)點可以實現(xiàn)“頁面寬高在某個范圍時才展示某個區(qū)域”這樣的效果。

<match-media min-width="300" max-width="600"><view>當頁面寬度在 300 ~ 500 px 之間時展示這里</view>
</match-media>

9.root-portal

使整個子樹從頁面中脫離出來，類似于在 CSS 中使用 fixed position 的效果。主要用于制作彈窗、彈出層、全屏遮擋mask等。
脫離了文檔流，所以樣式要寫到app.wxss里

做布局 重要

z-indes:10 - - - 設(shè)置定位元素及其后代元素或 flex 項目的 Z 軸順序 - - - 數(shù)字越大，在越上面

<root-portal><view class="mask"></view>
</root-portal>

對mask寫樣式，放到app.wxss里

.mask{width: 100vw;height: 100vh;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;}

需要用到定位 position top left等

三、

1.app.json 全局及頁面配置

指南 - - - 配置小程序 - - - 全局配置
框架 - - - 小程序配置 - - - 全局配置|頁面配置

{"pages":["pages/index/index","pages/logs/logs"],"window":{# 下拉 loading 的樣式，僅支持 black / white	"backgroundTextStyle":"light",# 導航欄背景顏色，如 #000000"navigationBarBackgroundColor": "#fff",# 導航欄標題文字內(nèi)容"navigationBarTitleText": "Weixin",# 導航欄標題顏色，僅支持 black / white	"navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json"
}

按Alt + 上下箭頭，可以將該行上下移動 - - - 注意逗號

新增頁面
在pages里添加保存

普通編譯 - - - 添加編譯模式 - - - 啟動頁面 - - - 選擇頁面

更換單獨頁面的導航欄標題，在自己的json文件里修改

{"navigationBarTitleText": "查看啟動日志","usingComponents": {}
}

2.image

src 圖片資源地址 3種引入方式

組件 - - - 媒體組件 - - - image

資源管理器中的pages單擊右鍵，點擊在資源管理器中顯示，新建static文件夾，存放靜態(tài)文件（images，fonts，css等文件夾）

<image src="../../static/images/snake.png" mode=""/>
<!-- 斜杠可以直接來到根目錄 -->
<image src="/static/images/snake.png" mode=""/>
<!-- 在網(wǎng)頁直接復制圖像的地址 -->
<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff3bc3c72-69da-40a6-b8bf-c7f57d43ee64%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1698830501&t=5030ca03d4fe259fdb86c47615375dc1" mode=""/>

mode 圖片裁剪、縮放的模式

image 默認 hieght:240px; width:320px;

默認scaleToFill，縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
常用
widthFix，縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix，高不變，寬度自適應
aspectFit，可以將圖片完整展示出來

webp格式的圖片，需要添加webp屬性

<image src="" webp mode=""/>

3.video 視頻 和 unicloud

盡量不放在本地，占內(nèi)存

可以將視頻放到服務器，或unicloud - - - 新建服務空間 - - - 阿里云 - - - 免費1個月
初始化比較慢，耐心等待（大概10min，手動刷新）
云存儲 - - - 上傳文件 - - - 詳情里有url

<video src="https://mp-95549144-5213-4a30-8bc8-a4b4e2563b57.cdn.bspapp.com/1-2-16.mp4"/>

可能會遇到報錯

給視頻加上 autoplay controls 這兩個屬性，順便加一個muted靜音

詳情 - - - 本地設(shè)置 - - - 將啟用代碼自動熱加載關(guān)掉

4.navigator 頁面鏈接導航

navigator ==》 a - - - <a href=" " target=" "></a>

可以使用文字/圖片跳轉(zhuǎn)

<navigator url="/pages/index/index">index</navigator><navigator url="/pages/logs/logs"><image src="/static/images/snake.png" mode=""/>
</navigator>

open-type 常用

<navigator url="/pages/index/index" open-type="">index</navigator>