摘要：準(zhǔn)備工作要開發(fā)微信小程序之前，需要做一些準(zhǔn)備工作，首先進入然后再進入，接下來就解壓源碼包和安裝微信開發(fā)工具，安裝好開發(fā)軟件之后，在桌面可以看到然后點擊進入需要手機微信掃碼確認(rèn)登錄，掃碼完之后選擇本地小程序項目選擇添加項目之后如果想要學(xué)習(xí)一下

要開發(fā)微信小程序之前，需要做一些準(zhǔn)備工作，首先進入https://mp.weixin.qq.com/debu...

然后再進入https://mp.weixin.qq.com/debu...，接下來就解壓源碼包和安裝微信開發(fā)工具，安裝好開發(fā)軟件之后，在桌面可以看到

然后點擊進入需要手機微信掃碼確認(rèn)登錄，掃碼完之后選擇本地小程序項目

選擇添加項目之后

如果想要學(xué)習(xí)一下微信小程序，暫時不發(fā)布的，就可以點擊無AppID,如果后期要發(fā)布就去官網(wǎng)申請小程序帳號，會給你發(fā)一個AppID,項目名稱你就隨意取一個，項目目錄就進入剛剛我們下載解壓后的源碼包，然后就會進入微信開發(fā)的界面了

了解完這個開發(fā)界面之后，我們就可以進行簡單的微信小程序開發(fā)了

首先來說下小程序的三個全局文件：
app.js:小程序腳本，聲明全局變量和監(jiān)聽處理小程序的生命周期函數(shù)
app.json:全局配置文件，如小程序有多少個頁面，窗口標(biāo)題顏色內(nèi)容，導(dǎo)航條配置，窗口顏色等等，注意：此頁不可添加任何注釋
app.wxss:存放公共樣式
另外還有兩個文件，一個是utils這個文件里面主要是放一些通用工具類，重點是pages這個文件，他是存放所有頁面的文件夾，小程序頁面主要是由三個文件構(gòu)成，wxml,wxss,js,json,
pages里面的文件你是可以刪除，然后建立屬于自己的文件名稱，目前pages中默認(rèn)兩個文件index和logs你可以刪除，但是如果你新建立你的新頁面文件，得在app.json中聲明，這里要注意一下，在app.json中的pages數(shù)組中，第一個聲明的頁面就是微信小程序會進入的首頁

1. 改變頂部導(dǎo)航樣式

如果要改變某頁面頂部導(dǎo)航樣式，要在當(dāng)前頁面的json文件中修改，例如，要修改index頁面的頂部導(dǎo)航，則在index.json中設(shè)置

{
  "navigationBarTitleText": "首頁",
  "navigationBarBackgroundColor": "black",
  "navigationBarTextStyle": "#fff"
}

如果要修改全部頁面的頂部導(dǎo)航，則要在app.json中修改

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

如果在index.json中也設(shè)置了頂部導(dǎo)航，則優(yōu)先級別是index.json,app.json里面設(shè)置頂部導(dǎo)航是默認(rèn)樣式
index頁面設(shè)置頂部導(dǎo)航，結(jié)果如下：

2.頁面跳轉(zhuǎn)問題

首先微信小程序中有個navigator標(biāo)簽，你可以把他理解成web中的a標(biāo)簽
在wxml文件中：

   
    navigator跳轉(zhuǎn)
   
    redirect跳轉(zhuǎn)

當(dāng)然除了可以在wxml中直接寫跳轉(zhuǎn)，也可以用另外一種方法寫跳轉(zhuǎn)
在wxml中：

   navigator跳轉(zhuǎn)
   redirect跳轉(zhuǎn)

在js文件中：

 enterTest:function(){
    wx.redirectTo({
      url: "../test/test",
    })
  },

  navigatorFunc:function(){
     wx.navigateTo({
       url: "../test/test",
     })
  },

3.創(chuàng)建輪播圖

在wxml中：

swiper不能放在任何元素內(nèi)部，否則輪播會出錯
在wxss中：

.slide-image{
  width: 100%;
}

設(shè)置圖片寬度鋪滿整個屏幕
在js中：

 data: {
      imgUrls: [
        {
          link: "/pages/index/index",
          url: "http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701524.jpg"
        }, {
          link: "/pages/logs/logs",
          url: "http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701516.jpg"
        }, {
          link: "/pages/test/test",
          url: "http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701517.jpg"
        }
      ],
      // 是否需要底部輪播小點 
      indicatorDots: true,
      // 是否自動播放
      autoplay: true,
      // 自動播放時間間隔
      interval: 5000,
      // 滑動動畫時間
      duration: 1000,  

  },

其中l(wèi)ink為跳轉(zhuǎn)的鏈接，URL為圖片的地址，但是這個圖片地址不能是本地地址，必須是線上圖片地址或者base64為圖片
運行效果如下：

4.底部導(dǎo)航欄切換

在app.json中添加：

"tabBar": {
    "color": "#000",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/1-1.png",
        "iconPath": "images/1.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
          "selectedIconPath": "images/1-1.png",
          "iconPath": "images/1.png",
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
          "selectedIconPath": "images/1-1.png",
          "iconPath": "images/1.png",
        "pagePath": "pages/test/test",
        "text": "測試"
      }
    ]
  }

selectedIconPath為選中時底下圖標(biāo)，iconPath為未選中底下圖標(biāo)，pagePath為點擊時切換頁面路徑，text為頂部文字內(nèi)容，color為底部文字顏色，selectedColor文字選中顏色，注意：底部導(dǎo)航切換按鈕不能超過五個
運行截圖：

這里要注意一點，當(dāng)你的頁面路徑已經(jīng)弄成底部導(dǎo)航切換時，其他頁面要進入此頁面路徑切換代碼就不能用普通的切換了，正確代碼如下：
在js中：

  wx.switchTab({
    url: "pages/test/test",
  })

或者在wxml中：

跳轉(zhuǎn)按鈕

以上兩個是等價的

5.表單提交和清空

在wxml中：

   
  
       
          用戶名：
          
             
          
          
       

        
          性別：
          
                 
                  男  
                  女  
                  
          
          
       

       
          food：
          
                
                 蛋糕  
                 牛排  
                 排骨頭  
               
          
          
       

       
          同意：
          
               
          
          
       

       
          提交表單
          清空表單
       
    
  
  

在wxss中：

.clear{
  clear: both;
}
.title{
  float: left;
  width: 100px;
  text-align: right;
}
.cont{
  float: left;
}
input{
  border:1px solid gainsboro;
}
.group{
  margin-top:20px;
}

在js中：

  // 提交表單函數(shù)
  formSubmit:function(e){
      console.log(e);
      console.log("表單已經(jīng)提交!");
      console.log("用戶名："+e.detail.value.username);
      console.log("性別：" + (e.detail.value.gender==1?"男":"女"));
  },

  // 清空表單函數(shù)
  formReset:function(e){
    console.log("表單已經(jīng)清空！");
  },

效果如下：

注意：formSubmit為表單提交后執(zhí)行的函數(shù)，e.detail.value中是表單提交上來的數(shù)據(jù)，這里要注意，存放數(shù)據(jù)的標(biāo)簽一定要有name屬性值才能獲取數(shù)據(jù)

6.彈窗

1.模態(tài)框
在wxml中：

  modal模態(tài)框
  動態(tài)創(chuàng)建模態(tài)框
     


  

在js中：

 data: {
    //false顯示，true為隱藏
    modalHidden:true
  },

  // 模態(tài)框出現(xiàn)
  modalFunc:function(){
    // 顯示提示框
    this.setData({
      modalHidden: false
    });
  },

  // 動態(tài)創(chuàng)建模態(tài)框
  createModal:function(){
    wx.showModal({
      title: "動態(tài)創(chuàng)建模態(tài)框",
      content: "本框測試用的哈",
      success: function (res) {
        if (res.confirm) {
          console.log("用戶點擊確定")
        } else if (res.cancel) {
          console.log("用戶點擊取消")
        }
      }
    })
  },

  // 確認(rèn)函數(shù)
  confirmFunc:function(){
    console.log("點擊了確認(rèn)！");
    // 關(guān)閉提示框
    this.setData({
      modalHidden: true
    });
  },

  // 取消函數(shù)
  cancelFunc:function(){
    console.log("點擊了取消！");
      // 關(guān)閉提示框
    this.setData({
      modalHidden: true
    });
  },

運行結(jié)果如下：

2.提示框
在wxml中：

  toast提示框
   動態(tài)創(chuàng)建toast提示框
     



    

在js中：

  data: {
     //false顯示，true為隱藏
    toastHidden:true
  },

  // 提示框出現(xiàn)
  toastFunc:function(){
    // 顯示提示框
    this.setData({
      toastHidden: false
    });

    // 兩秒后提示框消失
    var that = this;
    setTimeout(function(){
      that.setData({
        toastHidden: true
      });
    },2000);

  },

  // 動態(tài)創(chuàng)建提示框
  createToast:function(){
     wx.showToast({
       title: "設(shè)置成功",
     })
  },

截圖效果如下：

以上這些都是微信小程序里面比較基礎(chǔ)的內(nèi)容，以后如果有新的發(fā)現(xiàn)會再次更新本篇文章。