微信小程序小白開發的自我學習之路一

1、什麼是微信小程序

首先咱們先明白什麼是微信小程序，打開百度，直接就能收搜到微信小程序，簡稱小程序英文名Mini Program，是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下便可打開應用。

2、開發的工具和開發環境

明白了小程序是什麼東西以後，咱們就須要在學習以前準備一下學習開發所用的工具和須要的環境，這部分，騰訊的官方微信公衆平臺給出了小程序的設計、介紹、使用、註冊、工具、數據綁定等幾乎所有功能的說明，能夠先去瀏覽一遍，內心對小程序開發有個粗略的認識，將工具下載安裝，帳號註冊，作好一切準備以後，開始學習之路。
微信開發者工具下載入口： https://developers.weixin.qq....
微信小程序官方平臺文檔入口：https://developers.weixin.qq....

三 、建立一個小程序

全部的前置工做都作好以後，咱們打開微信開發者工具，輸入你的AppID建立一個項目，如圖：

建立完成後：

4、小程序的結構

在建立完成以後，咱們會看到這樣的結構

首先咱們看到了兩個文件夾pages、utils 這兩個文件夾，直接通俗易懂頁面跟全局，pages文件夾裏面放的都是小程序的一個個頁面文件，utils裏面放的就是小程序的一些全局文件，會影響全部頁面的一些配置。而後咱們再看一下出現了四種後綴文件：js、json、wxml、wxss。有沒有一種莫名的熟悉感？ 沒錯他們跟javascrip、html、css差很少：
js：相似於JavaScrip文件，負責頁面邏輯。
json：項目配置文件，負責配置一些頁面展現的數據。
wxml：相似HTML文件，負責頁面結構展現。
wxss：相似CSS文件，負責頁面樣式。
明白了每種文件的含義，咱們就能夠跟其餘編程同樣在各自的文件裏寫各自的代碼了。
而後咱們打開項目自動生成的app.json配置文件看看裏面都生成什麼什麼配置：

{

"pages": \[

"pages/index/index",

"pages/logs/logs",
\],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "小程序",

"navigationBarTextStyle": "black"

},
}。

pages下面的表明的是每一個頁面，咱們能夠看到下面有兩個文件index、logs 分別表明的是頁面的主頁面跟日誌，那個頁面在最上面，登錄小程序第一個頁面就是那一個 在編程的時候能夠先把正在編程的頁面放最上面，方便編程，另外說個小技巧在添加頁面是能夠先點添加目錄，而後再添加的目錄上面點擊添加pages就不用來回的手動添加js，json，wxss、wxml文件了。
window下面的則定義的是窗口的配置信息。
backgroundTextStyle": 下拉背景字體、loading 圖的樣式，僅支持 dark/light，
"navigationBarBackgroundColor": 導航定義背景顏色,
"navigationBarTitleText": 定義的是小程序的名稱
"navigationBarTextStyle": 導航欄標題顏色，僅支持 black/white。
其實小程序配置不止這幾個還有：一、tarBar: 用來定義 tabBar的表現，tarBar下面是一個數組，最少配置2個，最多配置五個。二、networkTimeout: 用來設置各類網絡請求的超時時間。

5、頁面的美化

咱們點開wxml、css文件 wxml就跟web的html同樣，用標籤來構建頁面的架構、惟一的區別就是微信小程序推出了一些新的標籤來使用 例如index.wxml裏面的

<view  class\="container">
<view  class\="userinfo">
<button  wx:if\="{{!hasUserInfo && canIUse}}"  open-type\="getUserInfo"  bindgetuserinfo\="getUserInfo"> 獲取頭像暱稱 </button\>
<block  wx:else\>
<image  bindtap\="bindViewTap"  class\="userinfo-avatar"  src\="{{userInfo.avatarUrl}}"  mode\="cover"></image\>
<text  class\="userinfo-nickname">{{userInfo.nickName}}</text\>
</block\>
</view\>
<view  class\="usermotto">
<text  class\="user-motto">{{motto}}</text\>
</view\>
</view\>

相對於html裏的div、p、span、微信是推出了view、text、button來使用 view至關於一個模塊 text表明着段落其餘標籤基本相通，同時咱們發現一些熟悉的東西{{ }}
wx：if wx：else 是否是特別熟悉 有種寫vue的感受？沒錯，微信小程序這裏借用了他們，也有大括號語法，實現渲染和邏輯，例如：在WXML這麼寫 :

<text>{{msg}}</text>

在js裏面就能夠直接

this.setData({ msg: "daydayup" })

還有一些像wx：if/else wx：for的屬性 基本也和vue大體相同，能夠參考官方文檔學習使用：https://developers.weixin.qq....

6、事件的使用

上面說了那麼多都是在對頁面進行美化，可是這是不夠的，沒有事件的加持，作出來的頁面都是死了，並不能讓用戶得到體驗感、互動感全部仍是須要事件來綁定標籤
如bindtap，當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數。

<view bindtap="tapName"> 學習小程序 </view>

在相應的Page定義中寫上相應的事件處理函數

Page({
  tapName:{
    console.log("daydayup")
  }
})

這就是在組件中綁定事件，同時還其餘的一些像響應式的組件在官方的文檔中也都有詳細的說明能夠參考學習https://developers.weixin.qq....以上就是最基本的小程序的搭建，學習更深刻固然能夠進行更深刻的操做 如調用地圖、相機什麼的啦~