微信小程序筆記

本文是在閱讀雷磊老師的《微信小程序開發 入門和實踐》以後總結的筆記。

微信小程序開發

第一章 微信小程序簡介

1、微信小程序：一種不須要下載安裝便可使用的應用

第二章 小程序環境搭建與開發工具介紹

1、微信Web開發者工具

2、新建第一個項目

（一）打開開發者工具，登錄微信號

（二）點擊小程序項目

（三）在填寫AppID時，須要注意，它表明微信雄小程序的id號，必須擁有微信小程序帳號才能夠申請這個id號。能夠去https://mp.weixin.qq.com註冊申請帳號。

（四）那麼開始建立項目，因爲某種緣由，先建立一個無appId的項目

1. 填入項目名稱，最好是英文
2. 選擇一個空的文件夾，放小程序
3. 官方給了一個實例
4. 熟悉開發者工具的用法，以及面板上各個區域分別表明什麼

（五）簡單介紹一下項目配置

1. 開啓ES6轉化爲ES5：爲了保持ios,android和開發者工具模擬器良好兼容
2. 開啓上傳代碼時樣式自動補全
3. 開啓代碼壓縮上傳
4. 監聽文件變化，開發者工具
5. 開發環境不校驗請求域名以及TLS版本

若是開啓了此項，開發工具將不會校驗安全域名以及TLS版本，更方便調試；若是想要使用appid模式，又想要方便調試，開啓此項

（六） 快捷鍵:

1. ctrl+B 編譯

第三章 開始小程序

1、 每次建立一個新頁面時，都須要手動建立一個目錄+4文件，這時在app.json中添加路徑，就會自動建立這些

{

"pages":[

"pages/welcome/welcome",

"pages/orange/orange"

]

}

要是使.wxml文件中的文字顯示出來，要求：1.  .js文件不爲空，調用其自己的方法

Page({

})      2. .json文件不能爲空   {   }

2、 構建welcome頁面的元素和樣式

1．<view> 一般做爲容器來使用，

3、 最好不要將圖片資源放在項目目錄中，微信小程序大小不能超過1MB

4、 小程序中所支持的css選擇器：六種

1．.class

2．#id

3．Element  選擇全部view組件

4．Element,element 選擇全部文檔的view組件和的checkbox組件

5．::after 在view組件後邊插入內容

6．::before 在view組件前邊插入內容

5、 Flex佈局

1．宗旨是使頁面佈局更加簡單，能夠更好的支持響應式佈局

2．Flex-direction這個屬性指定view內元素的排列方向

（1）row 主軸爲水平，自左而右

（2）cloumn 主軸爲垂直，自上而下

（3）row-reverse 主軸爲水平，自右而左

（4）column-reverse 主軸爲垂直，自下而上

3．align-items屬性定義子元素在交叉軸上如何對齊，特別注意，他定義的是交叉軸這個方向上的子元素的對齊方式。

4．小程序自適應單位rpx介紹

（1） 在iPhone 6標準下，1物理像素=1rpx=0.5px

（2） rpx可使組件自適應屏幕的寬度和高度，但px不會

5．全局樣式文件app.wxss 是爲全部頁面設置「默認樣式」。

6．頁面的根元素Page，設置整個頁面的樣式，屬性，這樣的話，他就不會隨着組件的設置樣子

page{

 

}

7．app.json中的window配置項

（1）「window」:{「navigationBarBckgroundColor:’#ffffff’」 }這樣設置導航欄，不是被隱藏，只是換了顏色

（2）它的屬性還有 ：

①navigationBarTextStyle 配置導航欄文字顏色，只支持black/white

②navigationBarTitleText 配置導航欄文字內容

③backgroundColor配置窗口顏色

④backgroundTextStyle 下拉背景字體，支持dark/light

⑤enablePullDownRefresh 是否開啓下拉刷新

須要往小程序中加入圖片時，必定要在對應文件夾下進行復制，不能在開發者工具裏面ctrl+c 和ctrl+v

第三章 文章列表頁面

1、Swiper組件

1．自帶輪播圖效果的組件

<view>

  <swiper>

    <swiper-item>

      <image src='/images/post/city.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/post/butterfly.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/post/desert.jpg'></image>

    </swiper-item>

    <swiper-item>

      <image src='/images/post/flowers.jpg'></image>

    </swiper-item>

  </swiper>

</view>

2．還能夠設置swiper的樣式，以及image的樣式，可是swiper和image的寬高要同時設置，才能夠達到預期的效果

3．Swiper的一些屬性

（1）indicator-dots='true' 用來顯示面板上的指示點,默認時false

（2）autoplay='true' 用來決定是否自動播放

（3）interval='5000' 切換的時間間隔

（4）Circular=」true」 使輪播圖循環滾動

4．切換方式能夠經過拖動圖片切換，也能夠經過點擊面板指示點切換

5．vertical='true'，表示輪播圖的指示點豎直排列

6．Boolean的陷阱，當須要設定屬性值爲false時，就應該寫成空字符串的形式。

2、構建文章列表的骨架和樣式

1．Image組件的4種縮放模式

（1）scaleToFill 按比例填充，默認模式，不保持縱橫比縮放圖片，使圖片的寬高徹底拉伸至填滿image元素

（2）aspectFit 方位固定，保持縱橫比縮放圖片，使圖片的長邊能徹底顯示出來。也就是說，能夠完整的將圖片顯示出來

（3）aspectFill 方位填充，保持縱橫比縮放圖片，只保證圖片的短邊能徹底顯示出來。也就是說，圖片一般只在水平和垂直方向是完整的，另外一個方向將會發生截取

（4）widthFix 寬度不變，高度自動變化，保持原圖寬高比不變

2．9種裁剪模式，不會縮放圖片的

（1）Top

（2）Bottom

（3）Center

（4）Left

（5）Right

（6）Top left

（7）Top right

（8）Bottom left

（9）Bottom right

3．頁面的生命週期 post.js

// pages/post/post.js

Page({

 

/**

* 頁面的初始數據

*/

data: {

 

},

 

/**

* 生命週期函數--監聽頁面加載

*/

onLoad: function (options) {

 

},

 

/**

* 生命週期函數--監聽頁面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命週期函數--監聽頁面顯示

*/

onShow: function () {

 

},

 

/**

* 生命週期函數--監聽頁面隱藏

*/

onHide: function () {

 

},

 

/**

* 生命週期函數--監聽頁面卸載

*/

onUnload: function () {

 

},

 

/**

* 頁面相關事件處理函數--監聽用戶下拉動做

*/

onPullDownRefresh: function () {

 

},

 

/**

* 頁面上拉觸底事件的處理函數

*/

onReachBottom: function () {

 

},

 

/**

* 用戶點擊右上角分享

*/

onShareAppMessage: function () {

 

}

})

4．數據綁定

（1）初始化數據綁定顯示數據

Post.js--------------------------------》

data: {

object:{

date: "May 18th 2019",

},

title:"小時候的冰棍與雪糕",

postImg:"/images/post/flower.jpg",

avatar:"/images/avatar/avatar-1.png",

content:" 6．Boolean的陷阱，當須要設定屬性值爲false時，就應該寫成空字符串的形式。6．Boolean的陷阱，當須要設定屬性值爲false時，就應該寫成空字符串的形式。",

//readingNum:"108",

//collectingNum:"92",

commentNum:{

array:[108,22,11]

},

Post.wxml--------------------------------》

 <view class='post-author-date'>

    <image src="{{avatar}}"></image>

    <text class='post-date'>{{object.date}}</text>

  </view>

  <text class='post-title'>{{title}}</text>

  <image class='post-image' src='{{postImg}}' mode='aspectFill'></image>

  <text class='post-content'>

   {{content}}

  </text>

  <view class='post-like'>

    <image src='/images/post/city.jpg'></image>

    <text>{{commentNum.array[2]}}</text>

    <image src='/images/post/city.jpg'></image>

    <text>{{commentNum.array[1]}}</text>

    <image src='/images/post/city.jpg'></image>

    <text>{{commentNum.array[0]}}</text>

  </view>

（2）數據綁定更新

setData函數來作數據綁定，這個方法位於Page對象的原型鏈上：Page.prototype.setData.

setData的參數接受一個對象，以key和value的形式將this.data中的key對應的值設置成value

注意：setData會改變this.Data變量相同key的值，

setData執行後，會通知邏輯層執行Rerender，並馬上從新渲染視圖。

5．頁面的json文件配置和app.json文件的配置有什麼不一樣

（1）頁面json只可以配置和window相關的屬性。但app.json除了能配置window外還能夠配置pages，tabBar等選項

（2）頁面的json配置不須要像app.json那樣，加上window選項，直接編寫window下面的配置項便可

6．跳轉頁面

（1）什麼是事件

事件是視圖層(wxml)到邏輯層(js)的通訊方式。

屬性：catchTap

（2）關於跳轉

wx.redirectTo 將關閉當前頁面，跳轉至指定頁面

wx.navigateTo 保留當前頁面，跳轉至指定頁面

wx.switchTap 只能用於跳轉到帶tabbar的頁面，並關閉其餘全部非tabBar頁面

重點：redirectTo和navigateTo 的區別

使用方式相同，都要注意url的頁面路徑，不須要加上跳轉文件的擴展名

Object參數能夠接收三個方法，

success:頁面跳轉成功時，MINA框架將調用此函數

fail:頁面跳轉失敗時，MINA框架將調用此函數

complete:頁面跳轉成功或失敗時，MINA框架將調用此函數

7．冒泡事件與非冒泡事件

冒泡事件是指某個組件上的事件被觸發後，事件還會向父級元素傳遞；父級元素還會繼續向父級的父級傳遞，一直到頁面的頂級元素。

非冒泡事件則不會向父級元素傳遞事件

常見的冒泡事件

（1）touchstart 手指觸摸動做開始

（2）touchmove手指觸摸後開始移動

（3）touchcancel手指觸摸動做被打斷，如來電提醒，彈窗

（4）tap手指觸摸後立刻離開

（5）longtap手指觸摸後，超過350ms再離開

8．在wxml裏面註冊組件，須要在事件名以前添加catch或者bind前綴

9．bind和catch的區別

對於以上幾個冒泡事件，catch將阻止事件繼續向父節點傳播，而bind不會阻止事件的傳播。

10．某些組件特有的事件

（1）<form>的submit

（2）<input>的input

（3）<scroll-view>的scroll事件