小程序教程1

微信小程序開發教程

1. 簡介
   它是一個基於微信提供的一個過橋工具實現不少h5在公衆號很難實現的功能，有點相似於hybrid開發，不一樣於hybrid開發的方式是：微信開放的接口更爲嚴謹，結構必須採用他提供給咱們的組件，外部的框架和插件都不能在這裏使用，讓開發者徹底脫離操做DOM，開發思想轉變很大，理解他的核心功能很是重要，接下來一些列教程將會逐漸介紹小程序。

2. 環境搭建
   • 下載demo代碼
   • 獲取微信小程序的 AppID,這個我的身份是不能申請的，因此這步跳過
   • 下載開發工具，點擊這裏,登錄須要掃描二維碼
   • 工具打開以後，選擇新建項目
     • APPID因爲沒有，因此不填寫，選擇無APPID
     • 項目名稱隨意
     • 項目地址就是把最開始下載的demo解壓以後的路徑（剛開始只是作案例，之後目錄隨意定）
3. 代碼結構分析
   • 點擊左側導航的編輯，咱們能夠看到這個項目中初始化的文件，其中最關鍵的是 app.js、app.json、app.wxss 這三個文件，.js文件是腳本文件，.json文件是配置文件，.wxss是樣式文件，小程序會讀取這些文件而且聲稱小程序實例
   • app.js文件是小程序的腳本文件，在這個文件中監聽和處理小程序的聲明周期函數，聲明全局變量，調用MINA通信框架提供的API，
   • app.json是整個小程序的全局配置，咱們在這個文件中配置小程序由哪些文件組成，配置小程序的窗口背景色，導航條樣式，默認標題等（該文件不可添加任何註釋）
   • app.wxss是整個小程序的公共樣式文件，在組件中能夠直接使用在app.wxss中定義的樣式規則
   • pages目錄專門放咱們的頁面文件，微信小程序中的每個頁面的路徑（路徑+頁面名）都須要些在app.json中的pages中，而且pages中的第一個就是小程序首頁。
   • pages文件夾下的每一個頁面組件都是一個文件夾，該文件夾下由.js,.wxml,.json,.wxss四個文件組成，.js文件是腳本文件，.json文件是配置文件，.wxml文件是頁面結構文件，.wxss文件頁面的樣式文件
   • 頁面的樣式和配置文件都不是必須的，當你添加了這兩個文件的話會覆蓋app.wxss和app.json，不添加的話會使用這兩個全局文件的樣式和配置
4. 生命週期
   • 它的生命週期是App Launch-->App Show-->onload-->onShow-->onReady
   • 首先是整個app的啓動與顯示，app的啓動在app.js裏面能夠配置，其次再進入到各個頁面加載顯示（後面會詳細介紹聲明週期）

5. 路由

   微信對路由的介紹不多，只提供了三個方法，已經基本夠用了，開發者能夠不用像其餘框架那樣繁瑣的去配置路由了

   • wx.navigateTo(object)：保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack能夠返回到原頁面。
   • wx.redirectTo(object)：關閉當前頁面，跳轉到應用內的某個頁面。
   • wx.navigateBack()：關閉當前頁面，回退前一頁面。

6. 組件

   微信在組件方面也是提供的很是全面，基本上知足項目開發需求，因此開發速度應該會很快，開發以前須要認真的看幾遍，開發速度會很高

7. 其餘
   • 任何的外部框架都沒法使用，就算是原生的js插件也很難使用，主要是因爲微信小程序這次的架構不容許操做DOM
   • 這次微信提供了webSocket，能夠直接用它作聊天，能夠開發的空間很是大
   • wxss樣式文件能夠直接在裏面寫樣式，也能夠採用引入的方式,公共樣式能夠在app.wxss中引入

   @import "wxss/index.css";
       body {
           background:'#f00';
       }

   • 寫配置項的時候不管鍵值都要用雙引號包裹，不然會編譯錯誤