:-: 小程序01
> 小程序是運行在微信中的應用!!不能直接運行在瀏覽器!是微信團隊自己研發一套開發體系! 對外提供大量API接口! 方便我們通過微信和手機進行各種交互!
# 學習策略:
1. 讀文檔,使用時能快速定位!
2. 做項目
# 本節目標
- 介紹課程和項目
- 微信開發工具
- wxss
- 事件及頁面跳轉
- 數據綁定及輪播
- 編輯視圖
- 數據適配
- 循環加載視圖
- template
# 介紹
>什么是小程序? 如何學習? 環境如何搭建? 我們最終的目標是什么?
## 什么是小程序?
> 小程序是運行在微信中的應用!!不能直接運行在瀏覽器!是微信團隊自己研發一套開發體系! 對外提供大量API接口! 方便我們通過微信和手機進行各種交互!
核心: 運行在微信內部! 大量API和組件
## 官方文檔地址
[Api-小程序](https://developers.weixin.qq.com/miniprogram/dev/)
官方文檔學習目錄:
說明
- 簡易教程: 學前必讀! 自己注冊賬號, 記住`AppId`并下載開發工具!
- 框架: 整體介紹小程序架構!
- 組件: 內置也微信風格一致的組件!
擴展:基本上，組件代表著一些具有圖形界面，并且具有內在邏輯能力的 程序單元。下圖列出了三種用于實現乒乓切換的組件
- API: 小程序內置JS方法! wx.* , 方便調用微信提供的能力! 比如用戶資料,本地存儲,支付等...
## 美文音樂項目
# 簡易教程
- 第一個微信項目
帶appid,支持預覽!可發布!
三個核心文件
1. html--->wxml
2. css----->wxss `小程序對彈性盒模型支持友好`
3. js------->j
- 界面
- 調試(wxml表示頁面)
- 預覽
- 遠程調試
# 框架-目錄結構
# 組件
簡單常用組件介紹
view
text
image
# 框架-視圖層-wxss
1. flex布局
2. 尺寸 rpx
小程序規定: 屏幕寬度為750rpx;則750rpx = 375px = 750物理像素(手機實際分辨率)
場景1: IPhone6設計原稿按照分辨率: 750px*高度
場景2: 效果圖尺寸: rpx 比例: 1:2
```
案例:按照原稿或效果圖切圖!
```
# 實戰1: 歡迎頁制作
歡迎頁布局
```
<view class="container">
<image class='logo' src='../images/logo.png'></image>
<text class='user-name'>Hello,zzy</text>
<view class='fenXiang btn' bindtap='goArtical' >
<text>和音樂一起分享時光</text>
</view>
<view bindtap='lookLocation' class='location btn'>
<text>查看當前位置</text>
</view>
<view bindtap='callMe' class='callMe btn' >
<text>聯系我們</text>
</view>
</view>
```
歡迎頁樣式
```
.container{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
/*logo*/
.logo{
width: 392rpx; /*196*2 100*2 */
height: 200rpx;
margin-top: 200rpx;
}
.user-name{
margin-top: 100rpx;
font-size: 32rpx; /* 16px 32rpx*/
font-weight: bold;
color:#109D59;
}
.fenXiang, .btn{
margin-top: 50rpx;
border: 1px solid #109D59;
width: 300rpx; /*150px* 40px */
height: 80rpx;
border-radius: 5px;
text-align: center;
line-height: 80rpx;
}
.fenXiang text, .btn text{
font-size: 22rpx;
font-weight: bold;
color:#109D59;
}
```
# 實戰2: 首頁tab
# 實戰3:導航欄樣式設置
# 實戰4: 事件和跳轉
# 實戰5: 輪播和動態數據綁定
# 實戰6: 文章視圖html和css制作
# 實戰7: js模擬動態數據-模塊化
位置: 框架-視圖層-模塊化
1. 公用js代碼保存為js文件, export可以導出屬性或方法
2. 其他js復用先引入! require
# 實戰8: 文章數據綁定
# 實戰9: 循環加載視圖
# 實戰10:template
