微信小程序入門

1、運行環境

小程序接入流程：註冊 — 小程序信息完善 — 開發小程序 — 提交審覈和發佈

咱們知道，微信小程序運行在三端：iOS、Android 和 用於調試的開發者工具。本文將介紹微信小程序怎樣運行在開發者工具

（1）申請小程序帳號
點擊 https://mp.weixin.qq.com/wxop... 根據指引填寫信息和提交相應的資料，就能夠擁有本身的小程序賬號，這個帳號叫 AppID
申請到小程序帳號以後，咱們能夠在小程序管理平臺進行其餘有關的設置，包括：管理你的小程序權限、查看數據報表、發佈小程序等

（2）下載 「微信開發者工具」

下載地址：https://developers.weixin.qq....

（3）初始化小程序項目

說明：

項目目錄選擇一個空文件夾，項目名稱本身取，AppID就是你剛申請的小程序帳號

點擊「肯定」，能夠看到以下界面，此時你的小程序項目初始化完成：

開發工具界面介紹

一、模擬器：微信小程序界面效果在此展現，開發者能夠選擇不一樣的設備

二、編輯器：在這個地方能夠看到整個項目的文檔目錄結構

三、調試器，包含7大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

    八、 Storage，使用  wx.setStorage  或者  wx.setStorageSync  對數據進行存儲。這裏注意，不須要該數據時應及時銷燬
    九、  AppData,  顯示當前項目運行時小程序 的具體數據，實時地反映項目數據狀況，能夠在此處編輯數據，並及時地反饋到界面上
   十、 Wxml，至關於瀏覽器控制檯的 「Elements」，在這裏開發人員能夠方便的查看 dom 結構，或者能夠進行 CSS  樣式的調整
四、一般使用小程序模式

五、編譯模式。小程序項目啓動的時候，一般選擇 「普通編譯」。在這裏咱們還能夠 「添加編譯模式」， 添加目標頁面進行編譯，這樣咱們每次編譯後就能夠直接看到想要查看的頁面。
 在這裏能夠點擊「預覽」， 彈出一個二維碼，使用手機進行掃描就能夠在手機端進行查看

六、先後臺切換。默認是前臺，這樣在模擬器咱們看到的是頁面展現效果；當選擇切換到後臺的時候，此時用戶能夠在模擬器進行選擇，幫助開發者模擬一些客戶端的環境操做

七、清緩存

十一、Sensor（翻譯爲：感應）。開發者能夠在這裏選擇模擬地理位置，或者調試重力感應 API

十二、顯示該小程序的AppID，項目地址等。一個小程序只有一個AppID，這個AppID至關於該小程序的身份標識

1三、項目設置

     基礎調試庫：能夠在此選擇不懂版本的開發工具

     ES6 轉 ES5：勾選後，會默認使用 babel 將開發者 ES6 語法代碼轉換爲三端都能很好支持的 ES5 的代碼，幫助開發者解決環境不一樣所帶來的開發問題，注意這裏默認開啓 javascript 嚴格模式

    上傳代碼時樣式自動補全。這裏須要開發者在 iOS 和 Android 上分別檢查小程序的真實表現

1四、域名信息。在此將顯示小程序的安全域名信息

1五、騰訊雲狀態。在此顯示騰訊雲狀態、開發環境信息、域名信息

2、目錄結構

初始化項目的目錄結構以下圖：

四種不一樣類型的文件：json、wxml、wxss、js

（1）json 文件
小程序配置 app.json
全局配置，配置項目包括全部頁面的路徑、界面表現、網絡超時時間、底部 tab 等
https://wiki.mobike.com/downl...

• 頁面配置 page.json

局部配置。配置方法和上面的 app.json 配置方法相同

• 工具配置 project.config.json

一般你們在使用一個工具的時候，都會針對各自喜愛作一些個性化配置，例如界面顏色、編譯配置等等，當你換了另一臺電腦從新安裝工具的時候，你還要從新配置。

考慮到這點，小程序開發者工具在每一個項目的根目錄都會生成一個 project.config.json，你在工具上作的任何配置都會寫入到這個文件，當你從新安裝工具或者換電腦工做時，

你只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項

（2）wxml 文件

• WXML 充當的就是相似 HTML 的角色，由標籤、屬性等等構成
• 可是， 和 HTML 有不少不一樣的地方，下面咱們來一一闡述：
  標籤名字有些不同，在小程序裏咱們管這些標籤叫 「組件」。小程序將經常使用的標籤 div、p、span 包裝成一個組件 view，另外還提供了地圖、視頻、音頻等組件

微信小程序使用 MVVM 的開發模式，提倡把渲染和邏輯分離。所以，WXML 具有這樣一些能力：數據綁定、列表渲染、條件渲染、模版、事件、引用（ import 和 include），見以下連接
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
（3）wxss 文件

WXSS 具備 CSS 大部分的特性，小程序在 WXSS 也作了一些擴充和修改。
新增了尺寸單位rpx，小程序底層直接換算，開發者不須要考慮不一樣手機設備的屏幕會有不一樣的寬度和設備像素比

提供全局樣式和局部樣式。能夠寫 app.wxss 做爲全局樣式， 會做用於小程序的全部頁面，寫局部樣式 page.css 只對當前頁面生效

（4）js 文件

咱們經過 js 腳原本處理用戶的操做

• WXML上綁定事件

這裏的事件能夠是：手指觸摸相關的一系列事件（如：手指觸摸動做開始、觸摸後移動、觸摸動做結束等）、小程序動畫相關的一系列事件（好比：動畫開始時、第一次迭代時、動畫完成時等）

• 經過調用小程序的 API 來調起微信提供的能力，小程序能力有下面15種

3、生命週期

（1） 註冊程序

註冊程序的生命週期只有 3 個：onLaunch、onShow、onHide

App() 函數裏除了 3 個小程序生命週期函數外，還有其餘的一些什麼函數能夠調用呢？

咱們還能夠在 App() 函數裏添加錯誤監聽函數、頁面不存在時候的監聽函數、或者其餘任何自定義函數，globalData

（2）註冊頁面

註冊頁面的生命週期有 5 個：onLoad、onReady、onShow、onHide、onUnload

先後臺定義：當用戶點擊左上角關閉，或者按了設備 Home 鍵離開微信，小程序並無直接銷燬，而是進入了後臺；當再次進入微信或再次打開小程序，又會從後臺進入前臺

小程序何時被銷燬（也叫關閉小程序）：當小程序進入到後臺有一段時間，或者系統佔用資源太高，小程序就會被銷燬； 當用戶從掃一掃、轉發等入口進入小程序，而且在沒有置頂小程序的狀況下退出（下面有截圖，分別展現轉發入口、小程序置頂）

4、和H5對比

具有的能力
(1) 什麼是 H5

首先，H5 ！= HTML5。H5 是一種標準，這套標準包含了一系列的技術規範。咱們在談論 H5 的時候，其實是在談論一個問題的解決方案。好比：咱們要作一個炫酷的移動端網站，就要討論出一個解決方案，這個解決方案不只包含了使用 HTLML5 新增的一些標籤，同時也包含了 css三、websocket 通訊、標準盒模型等一切的前端基礎知識。
咱們使用一套標準來開發 web 頁面，這套標準就叫 H5 。一般，能夠把這些 web 頁面嵌入到一些 APP 或者 小程序裏面，小程序裏面使用容器組件 web-view 就能夠承載網頁

(2) 微信小程序 和 H5 有什麼區別

這個題目也能夠這樣解釋：使用微信小程序的標準開發一個項目和 使用 H5 標準開發一個項目有什麼區別