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

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

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

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

選擇添加項目之后

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

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

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

1. 改變頂部導航樣式

如果要改變某頁面頂部導航樣式，要在當前頁面的json文件中修改，例如，要修改index頁面的頂部導航，則在index.json中設置

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

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

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

如果在index.json中也設置了頂部導航，則優先級別是index.json,app.json里面設置頂部導航是默認樣式
index頁面設置頂部導航，結果如下：

2.頁面跳轉問題

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

   
    navigator跳轉
   
    redirect跳轉

當然除了可以在wxml中直接寫跳轉，也可以用另外一種方法寫跳轉
在wxml中：

   navigator跳轉
   redirect跳轉

在js文件中：

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

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

3.創建輪播圖

在wxml中：

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

.slide-image{
  width: 100%;
}

設置圖片寬度鋪滿整個屏幕
在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,  

  },

其中link為跳轉的鏈接，URL為圖片的地址，但是這個圖片地址不能是本地地址，必須是線上圖片地址或者base64為圖片
運行效果如下：

4.底部導航欄切換

在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為選中時底下圖標，iconPath為未選中底下圖標，pagePath為點擊時切換頁面路徑，text為頂部文字內容，color為底部文字顏色，selectedColor文字選中顏色，注意：底部導航切換按鈕不能超過五個
運行截圖：

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

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

或者在wxml中：

跳轉按鈕

以上兩個是等價的

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中：

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

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

效果如下：

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

6.彈窗

1.模態框
在wxml中：

  modal模態框
  動態創建模態框
     


  

在js中：

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

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

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

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

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

運行結果如下：

2.提示框
在wxml中：

  toast提示框
   動態創建toast提示框
     



    

在js中：

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

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

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

  },

  // 動態創建提示框
  createToast:function(){
     wx.showToast({
       title: "設置成功",
     })
  },

截圖效果如下：

以上這些都是微信小程序里面比較基礎的內容，以后如果有新的發現會再次更新本篇文章。