小程序

 入門 qqq   m18303051935@163.com  qqqqqq

 

WePY騰訊團隊推出的小程序組件化開發框架

mpvue框架

 

微信開發者工具：

其中app.js/app.json/app.wxss是必不可少的，是小程序生成的依賴文件

app.js監聽並控制整個程序的生命週期，也是全局變量聲明的地方，

 

apx是尺寸單位，跟px相似。

rem:規定屏幕寬度爲20rem;

1rem=(750/20)rpx

 

<view></view>可看作爲<div></div>

 

index.js文件

getApp():獲取應用實例，

Page:聲明頁面

data:定義數據

bingViewTap:爲在view中綁定的是tap事件定義操做方法

wx.navigateTo:導航到響應頁面

onLoad:定義頁面加載事件

 

 

快捷鍵：

+p 跳轉文件

+e 最近文件

 

app.json

Pages   頁面

Windows 設置導航條、狀態欄、標題、窗口背景色

navigationBarBackgroundColor: 背景色

navigationBarTitleText: 標題

navigationBarTextStylke 標題顏色：只能白色和黑色

navigationStyle: 自定義導航條:default/custom

backgroundTextStyle:dark/light  下拉loading樣式

backgroundColor: 背景色、需下拉刷新

enablePullDownRefresh：true 下拉刷新

tabBar  選項卡

wxml 骨架/頁面:內置組件

組件兩大類：

內置組件如、view,image

自定義組件、epsoide-cmp,like-cmp,img-btn-cmp,movie-cmp

 

代碼規範：駝峯

flex佈局

塊級元素都是獨佔一行、如同div

.chunk{

   /* 行內元素 */

   /* display: inline-block; */

   width:100px;

   height:100px;

 

}

/* flex flexible box 彈性盒子 */

/* flex container 彈性容器

  flex item    彈性容器子元素 */

.containe{ //把r去掉了。因不起做用

  display: flex;

  /* row column row-reverse column-reverse */

  flex-direction: row;

  height: 200px;

 

  /* justify-content對齊方向 flex-start flex-end center space-between space-around 家思踢fi康疼他*/

  justify-content:center;

  /* 主軸justify-content和交叉軸align-items 啊立體愛他姆斯*/

  align-items:baseline;

  /* 屏幕寬度450px */

  flex-wrap:wrap;

}

 

組件開發：建立組件-定義組件-引入組件

相對路徑和絕對路徑

flex rpx自適應

 

只有不多的全局樣式,才能被組件繼承

pages下頁面是能夠繼承全局樣式

 

組件最好不要留有空白間距

組件自適應寬度

 

組件事件：點擊bing:tap="onLike",js中寫

bind不會阻止冒泡事件向上冒泡，catch會阻止冒泡事件向上冒泡

 

數據來源的三種路徑：wxml,js,服務器、js

數據綁定

三元表達式與圖片切換

 

data能夠{{}}顯示，properties屬性也能夠{{}}:涉及到數據的封閉性和開放性：圖片封閉，數字開放.

 

let含塊級做用域、而var不是

 

調用RestAPI拿數據

pages->xxx.js:頁面的聲明周期函數

200 請求成功

201 建立成功

202 更新成功

204 刪除成功

301 永久重定向

400 請求包含不支持參數

401 未受權

403 被禁止訪問

404 請求資源不存在

413 上傳的File體積太大

500 (服務)內部錯誤

wx.request(傳Object):小程序只有異步加載，不可設置同步

url 開發者服務器地址

data 請求的參數

header 設置請求的header,header中不能設置Referer

method (需大寫)OPTIONS/TRACE/CONNECT/GET/PUT/POST/DELETE

dataType 若是設爲json,會對返回的數據作一次JSON.parse

responseType 設置響應的數據類型，合法值：text,arraybuffer

success  收到開發者服務成功的回調函數

fail  接口調用失敗的回調函數

complete 接口調用結束的回調函數（成功或失敗都會執行）

(項目設置大√設置不效驗）上線後仍是，必須在後臺帳號中添加小程序訪問的域名

請求沒添加Appkey，

 

funtion(){}和箭頭函數的區別：箭頭函數不會影響this傳值、而 function(){}會影響

Promise解決的問題：異步嵌套、可讓咱們使用return (點擊事件切換心形、獲取數據、config.js、http.js)(config->http.js->pages->xxx.js)

 

import和export只能用相對路徑，而組件二者都支持

res.statusCode.toString()

 

9-6

models中繼承了http->pages-xxx.js

 

/*app.js注意：有時新增組件或文件夾是這邊會多出，有影響*/  

談論夢想的人不少，可爲此默默付出的倒是少數

attached:function(){}//聲明周期函數

observer:function(){}//改變屬性值時會觸發

不要在observer中修改自身屬性,在data中定義,!wxs是最適合的解決方式

組件裏邊css不容許使用#id選擇器

 

小程序中繼承組件機制：Behavior組件(屬性或數據或方法)共用(複用js),//多繼承,繼承時子組件會覆蓋父，（多個子繼承時，選最後一個子覆蓋父）

let classicBeh = Behavior({

屬性

數據

方法

聲明周期函數

...都有

})

export {classicBeh}

 

 

wx.setStorageSync("key","value")存入緩存

wx.getStorageSync()讀取緩存

哪些內容是能夠緩存的，哪些不該該緩存

單獨獲取點贊信息

 

1.console.log('${a}456')//模板字符串

  //classic:res

2....res//擴展運算符

 

小程序中條件渲染是用在wxml,並非用在js中

wx:if="{{}}" 

hidden="{{}}"//標籤的顯示隱藏,默認自定義組件不起做用,需設置！

 

wxss=>@import="../common.wxss";共用(複用css)

wxml=>template模板  共用(複用html)

 

 

新版API，背景音頻播放管理

wx.getBackgroundAudioManager()

屬性

paused 播放狀態

src 控制音樂播放,默認是空字符串，設置新src時會自動播放，

title 標題

方法 

play 播放

pause 暫停

stop 中止

事件監聽函數

onPlay 背景音頻播放事件

onPause 背景音頻暫停事件

onStop  背景音頻中止事件

onEnded 背景音頻天然播放結束事件

 

 

父子組件的通訊，

1.wxml數據綁定:父組件向子組件的指定屬性設置數據，

2.事件：子組件向父組件傳遞數據

組件與組件的通訊

雖不能直接傳遞數據

能間接的傳遞數據,用pages做爲父組件轉發，在經過綁定到子組件

 

切換時，組件隱藏時暫停音樂。 

hidden不會觸發組件的detached//聲明周期函數：切換時觸發

wx:if和hidden的區別

hidden:只是簡單的顯示和隱藏。

wx:if:(切換)渲染條件時會執行完整聲明週期

 

557581284紙短情長

287018 開始懂了

421423198謊言情歌

like.js=>like.wxml pages index.js=>index.wxml

 

http://music.163.com/song/media/outer/url?id=287018.mp3爬取歌曲

小程序要求上線時:服務器端提供的API都是Https的接口

 

加入緩存後對點贊心有影響，解決思路，哪些應該緩存

models->like.js/pages/index.js/index.wxml改過，未成功，註釋了

-----

promise優勢：多個異步等待合併

 

wx.getSystemInfo()//獲取系統信息

promise.then()調用成功或失敗的結果

 

request({url,data={},method='GET'})//解構

 

wx:key="id"

 

wx.navigateTo()//跳轉頁面 到書籍詳情頁

 

<slot>插槽：使組件更靈活，如tag中的標籤/和搜索標籤使可已體現出來。若是是空的不顯示，

和屬性properties類似：從外部向組件傳遞數據或標籤

 

wxs:讓wxml具有調用js