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

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

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

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

選擇添加項(xiàng)目之后

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

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

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

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)先級(jí)別是index.json,app.json里面設(shè)置頂部導(dǎo)航是默認(rèn)樣式
index頁面設(shè)置頂部導(dǎo)航，結(jié)果如下：

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

首先微信小程序中有個(gè)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)部，否則輪播會(huì)出錯(cuò)
在wxss中：

.slide-image{
  width: 100%;
}

設(shè)置圖片寬度鋪滿整個(gè)屏幕
在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"
        }
      ],
      // 是否需要底部輪播小點(diǎn) 
      indicatorDots: true,
      // 是否自動(dòng)播放
      autoplay: true,
      // 自動(dòng)播放時(shí)間間隔
      interval: 5000,
      // 滑動(dòng)動(dòng)畫時(shí)間
      duration: 1000,  

  },

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

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為選中時(shí)底下圖標(biāo)，iconPath為未選中底下圖標(biāo)，pagePath為點(diǎn)擊時(shí)切換頁面路徑，text為頂部文字內(nèi)容，color為底部文字顏色，selectedColor文字選中顏色，注意：底部導(dǎo)航切換按鈕不能超過五個(gè)
運(yùn)行截圖：

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

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

或者在wxml中：

跳轉(zhuǎn)按鈕

以上兩個(gè)是等價(jià)的

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)框
  動(dòng)態(tài)創(chuàng)建模態(tài)框
     


  

在js中：

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

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

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

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

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

運(yùn)行結(jié)果如下：

2.提示框
在wxml中：

  toast提示框
   動(dòng)態(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);

  },

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

截圖效果如下：

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