【微信小程序】1 - 基礎配置、頁面創建、生命週期

1、關於微信小程序

• 不需要下載安裝即可使用
• 觸手可及（掃一掃，搜一下打開應用）
• 用完即走
• 利用了html/css/js的語法，可以完成像安卓/ios一樣的功能、界面的製作（h5只能模仿安卓/ios來做界面，無法完成一些功能性的操作；h5 沒辦法調手機的相機拍照，小程序可以）

2、開發準備工作

1. 微信小程序賬號申請 - 獲得appid

• 雲操作必須有appid
• 發佈到微信上正式使用也需要appid

郵箱激活 - 郵箱需要是不能在微信 或 騰訊系裏用過
申請完賬號， 點擊“設置”完善資料後， 找到appid 保存下，後期會用

2. 下載微信開發者工具
   使用微信開發者工具時 ，需要先關掉windows防火牆，防火牆默認把所有接口都關了
   點擊 編譯—進行保存

3、修改配置文件App.json

創建項目後第一步，修改配置文件App.json：

• 裏面不能寫註釋
• 最後一項不能加, 加了， 編譯會報錯

3.1 配置導航頭

{
  "pages": [  //頁面
    "pages/index/index",   //不能加後綴，由4個文件組合而成
    "pages/logs/logs"    //每個{}內最後一項不能加, 加了， 編譯會報錯
  ],
  "window": {  //窗口配置--全局配置
    "backgroundTextStyle": "dark",    //light/dark --頁面刷新時loading點的變化效果
    "navigationBarBackgroundColor": "#000",   //頭部背景色
    "navigationBarTitleText": "我的微信",    //導航頭部的文本
    "navigationBarTextStyle": "white",   //頭部文字顏色
    "enablePullDownRefresh": true,    //開啓下拉刷新
     "backgroundColor": "#ddd"   //下拉刷新時的背景色
  },
  "sitemapLocation": "sitemap.json"   //站內地圖/站內導航/站內搜索，具體搜索情況在sitemap.json中寫的，搜索小程序時，是否被收錄
}

3.2 配置底部觸摸欄

觸摸欄不是菜單，至少放2項，最多放5項

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "我的微信",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true,
     "backgroundColor": "#ddd"
  },
  "sitemapLocation": "sitemap.json",
  //--------------配置底部觸摸欄--------輸入“tabbar"  回車，會幫我們補全代碼---------
  "tabBar": {   //底部觸摸欄
    "borderStyle": "black",  //邊框色
    "selectedColor": "#000000",//選中色，選中時字體的顏色
    "list": [
      {
        "pagePath": "pages/index/index",   //點擊跳轉的路徑，路徑格式按照pages裏的路徑格式來寫，如果這個鏈接在頁面中有跳轉，設置爲底部觸摸欄後，頁面的跳轉就會失效
        "text": "首頁",    //文本
        "iconPath": "/images/icon_1.png",   //圖標，新建一個和pages同級的文件夾images
        "selectedIconPath": "/images/icon_11.png"   //選中圖標
      },{
        "pagePath": "pages/logs/logs",
        "text": "日誌",
        "iconPath": "/images/icon_2.png",
        "selectedIconPath": "/images/icon_22.png"
      }
    ]
  }
}

4、新頁面的創建及組成

4.1 微信新頁面的創建方式有3種

1.從app.json文件開始創建

app.json中的pages里加一條路徑，然後編譯就會生成對應的文件夾
一個頁面由4個文件組成，

2.單個文件逐一創建

pages右鍵新建目錄（寫文件夾名）–然後再右鍵新建page 就會生成對應的文件夾，同時在app.json中生成對應的路徑

3.刪除文件後的編譯自動創建

4.2 展示新建頁面

1.app.json中：把要查看的頁面放在第一個路徑的位置

  "pages": [
    "pages/index/index",   //第一個路徑稱爲基礎路徑，默認顯示這個路徑裏的內容，起始頁位置
    "pages/logs/logs",
    "pages/about/about"
  ],

2. 添加編輯模式
   

4.3 組成頁面結構的不同文件

WXML -> HTML
WXSS -> CSS
JS -> Javascript
JSON -> Javascript（json對象）
App -> application

編碼要求：

• 不能直接使用HTML文件，沒有div,span等

• 可以全部使用CSS文件

• Js腳本文件沒有Window對象

wxml中常用標籤：
text標籤：相當於html裏的font+span,內聯級元素
view標籤：相當於div標籤，塊級元素

5、生命週期

微信小程序每個頁面都有一個生命運行週期可以操作，同時小程序本身也自帶對象的創建生命週期

生命週期名稱，事件名

• onLaunch： -> 創建小程序最開始的對象的一個初始化的方法，完成剛開始結構化的操作，小程序App的對象初始化（打開那一刻）要完成的功能
• onload -> 生命週期函數 - 監聽頁面加載
  pages裏每個頁面打開的時候，每個頁面初始化的時候會啓動onload
• onReady -> 生命週期函數 - 監聽頁面初次渲染
  所有渲染都完成後的方法提示
• onShow -> 生命週期函數 - 監聽頁面顯示
• onHide -> 生命週期函數 - 監聽頁面隱藏
• onUnload -> 生命週期函數 – 監聽頁面卸載
  不需要我們操作，微信給我們完成

---

• onPullDownRefresh -> 頁面監聽相關處理函數 – 監聽用戶下拉動作
• onReachBottom -> 頁面上拉觸底事件的處理函數
• onShareAppMessage -> 用戶點擊右上角分享

任何一個小程序都是一個叫做App的對象，所以小程序的入口是從app.js 裏創建app開始的

6、微信小程序調試步驟

1. 邏輯代碼調式方法

• 控制檯顯示方式 console.log() console.info()
• 彈出框(API框架時介紹)

show(){
	wx.showToast({     //等於alert,但因爲小程序裏沒有window，所以不能alert
		title:'彈窗內容',
	})
}

2. 模擬，真機調式模式
   點擊編譯，預覽，真機調試

7、微信小程序上線審覈 和 發佈

1. 點擊上傳 是上傳到微信雲，這個雲關聯到我們的公衆號，也就是上傳時上傳到微信公衆平臺（訂閱號 或者服務號）—進入小程序管理 進行關聯
2. 只有關聯後，以後上傳就上傳到公衆平臺，由公衆平臺進行發佈

• 微信開放平臺 – 主要是安卓，ios移動端原生開發的接口的操作
• 微信公衆平臺 – 主要是微信的小程序，小遊戲的操作（微信公衆平臺需要是訂閱號 或者服務號）

8、基礎組件的使用-icon/text/button/input

8.1 Icon圖標組件

• type:圖標類型，值有：success，success_no_circle,info,warn,waiting,cancel,download,search,clear
• size:圖標大小， 23默認值，單位像素
• color：圖標顏色

<view class="container">
  <icon type='success' size='28'></icon>
  <icon type='success_no_circle' color='red'></icon>

  <icon type='warn' size='23'></icon>
  <icon type='clear'></icon>
</view>