學習使我happy!!!

作為全(quan)棧的(de)學(xue)習(xi)者，初學(xue)微信(xin)小程序，抱著試試做(zuo)心態(tai)，一個(ge)星期內(nei)初步(bu)完成了這個(ge)項目(mu)。

小程序是何方神圣？

  小(xiao)(xiao)程序(xu)是一(yi)種新的(de)開放能力，開發者(zhe)可以(yi)快(kuai)速(su)地開發一(yi)個小(xiao)(xiao)程序(xu)。小(xiao)(xiao)程序(xu)可以(yi)在微(wei)信內被(bei)便(bian)捷(jie)地獲(huo)取和傳播(bo)，同時具有出色的(de)使用體驗。為什么選(xuan)擇它？

1. 用戶可便捷地獲取服務，無需安裝或下載即可使用
2. 具有更豐富的功能和出色的使用體驗
3. 封裝一系列接口能力，幫助快速開發和迭代切身體驗，你也可以來！

小程序對于新手來說，是很容易上手的，需要你用幾天時間去熟悉小程序的構建過程和說明文檔，你就可以初步做出一個比較完整的小程序。 我覺得小程序最屌地方還是rpx，使得小程序有很大的兼容性，在頁面布局使用這個屬性，可以適應不同的手機，這也使得我們降低工作量。而且小程序是一個不需要下載安裝即可使用的應用，而且它的背后是強大的微信，所以，如果我們能夠用自己的創造思維去看待這個，你會得到很大的收獲O(∩_∩)O哈哈~。
項(xiang)目工具及文檔：

1. 微信web開發者工具：微信小程序官網 微信開發的小程序編輯軟件，下載安裝即可使用，不需要去添加什么的；
2. 開發文檔：微信小程序寶典秘籍 這里面詳細的介紹了小程序的各項信息，包括組件、框架、API等等；
3. Easy Mork： easy-mock 小程序后臺數據可以在這里模擬，利用json格式；
4. 圖標庫： Iconfont-阿里巴巴矢量圖標庫 這個是個好東西，以前我總是為找不到圖標元素煩惱，但是現在有了它就啥也不怕了。頁面注冊

"pages":[
    "pages/index/index",   // 主頁
    "pages/happynotice/happynotice",  //開心通告欄
    "pages/userinfo/userinfo",    //個人信息詳情>
    "pages/queryintegral/queryintegral",  // 積分查詢
    "pages/integralmall/integralmall", // 積分商城
    "pages/user/user",  //個人信息
    "pages/integraldetail/integraldetail",   //  優惠券詳情
    "pages/qrcodenull/qrcodenull", // 請求注冊頁面
    "pages/register/register", // 注冊信息頁面
    "pages/qrcode/qrcode"  //我的二維碼
 ], 
項目功能已實現功能：

• 注冊用戶信息
• 手機號碼驗證(這里實現了頁面)
• 個人信息修改
• 優惠券信息查看
• 優惠券兌換
• 積分查詢
• 開心通告欄未實現功能：

• 麥有禮卡片(這個是剛上線的功能)
• 麥麥同樂會的注冊
• 文字頁面-常見問題、積分規則...
•  
• 項目GIF

部分功能解析(xi)1. 獲取本地(di)信息

在(zai)這里我們首先要登錄利用(yong)(yong)wx.login(OBJECT) 必寫（不然獲取(qu)不到用(yong)(yong)戶(hu)的信息(xi)） 然后利用(yong)(yong)方法wx.getUserInfo(OBJECT)獲取(qu)用(yong)(yong)戶(hu)信息(xi)

 //登錄的信息創建
    wx.login({
      success: function (e) {
        wx.setStorage({
          key: "key",
          data: e.errMsg
        })
      }
    })
    //獲取用戶的信息
    wx.getUserInfo({
      success: function(res) {
        var userInfo = res.userInfo
        var nickName = userInfo.nickName
        var avatarUrl = userInfo.avatarUrl
        var gender = userInfo.gender //性別 0：未知、1：男、2：女
        var province = userInfo.province
        var sex;
        ...


2. 優惠券的顯示及頁面傳值

這(zhe)(zhe)里(li)我(wo)(wo)們(men)從easy-mock獲取到(dao)優惠(hui)券(quan)的(de)(de)信(xin)息(xi)(xi)并(bing)且將信(xin)息(xi)(xi)顯示到(dao)頁(ye)(ye)面(mian)上(shang)，我(wo)(wo)們(men)就(jiu)利(li)用(yong)了wx:for這(zhe)(zhe)個(ge)(ge)(ge)控制屬(shu)性(xing)綁定(ding)一(yi)個(ge)(ge)(ge)數組 這(zhe)(zhe)里(li)我(wo)(wo)們(men)還可以注意這(zhe)(zhe)個(ge)(ge)(ge)信(xin)息(xi)(xi)navigator是(shi)個(ge)(ge)(ge)跳(tiao)轉頁(ye)(ye)面(mian)的(de)(de)屬(shu)性(xing)，在跳(tiao)轉的(de)(de)過程(cheng)中(zhong)它(ta)可以傳(chuan)值,例(li)如**?url={{item.url}}這(zhe)(zhe)里(li)我(wo)(wo)要穿(chuan)的(de)(de)是(shi)圖(tu)片(pian)地址(zhi)信(xin)息(xi)(xi)到(dao)下(xia)個(ge)(ge)(ge)頁(ye)(ye)面(mian)。 當然頁(ye)(ye)面(mian)傳(chuan)值并(bing)不是(shi)只是(shi)這(zhe)(zhe)樣(yang)方法，還有設置全局的(de)(de)數據緩存(cun)**，引入事件訂閱和發布onfire.js，這(zhe)(zhe)里(li)就(jiu)不一(yi)一(yi)介紹了有興趣可以去Google

   <block wx:for="{{imgs}}" wx:key="" class="block" >
    <swiper-item >
        <navigator url="/pages/integraldetail/integraldetail?url={{item.url}}&description={{item.description}}&prompt={{item.prompt}}">
            <image  src="{{item.url}}" class="side-img" />
            <view class="check click">查看詳情view>
        navigator>
        <view class="exchange click" bindtap="exchangetap">立即兌換view>
    swiper-item>

  block>
```    
我們需要在js文件中聲明你的的優惠券數據imgs:[]，**注意這里是json格式加','** 
```javascript
 data: {
    imgs:[],
    modalHidden: true,
  },

 利用wx.request(OBJECT)發起的(de)是https請(qing)求，從easymock中獲取數據(ju)信(xin)息(xi),利用setData()改變imgs得值, 要(yao)注意一(yi)定要(yao)聲明var that = this,因(yin)為wx:request里面是請(qing)求不到當前頁面的(de)data的(de)數據(ju)信(xin)息(xi)，我們需要(yao)將this的(de)賦(fu)值給that。還有一(yi)個微(wei)信(xin)小程序，同時只能有5個網絡請(qing)求連接(jie)。

  var that = this;
  wx.request({
      url: "//www.easy-mock.com/mock/595f3f139adc231f357b0615/McDonald/list",
      method: 'GET',
      success: function (res) {
        console.log(res);
        that.setData({
          imgs: res.data.image,
        })
      }
    })

3. 星座選擇器（這里我踩過坑）

表單組(zu)件picker支持三種選(xuan)(xuan)擇(ze)(ze)(ze)(ze)器，通(tong)過mode來區分，分別是普通(tong)選(xuan)(xuan)擇(ze)(ze)(ze)(ze)器，時間選(xuan)(xuan)擇(ze)(ze)(ze)(ze)器，日期選(xuan)(xuan)擇(ze)(ze)(ze)(ze)器，這(zhe)里(li)我們選(xuan)(xuan)擇(ze)(ze)(ze)(ze)的是普通(tong)選(xuan)(xuan)擇(ze)(ze)(ze)(ze)器。range是顯示(shi)的數組(zu)，只有聲明mode為selector這(zhe)個(ge)才(cai)能實現；value表示(shi)選(xuan)(xuan)擇(ze)(ze)(ze)(ze)的第幾個(ge)（由0開始(shi)）；bindchange是觸發事件

<view class="userdata-name">星座view>
      <view class="userdata-symbol">view>
      <picker mode="selector" class="userdata-input" range="{{actionConItems}}" value="{{conIndex}}" bindchange="pickerConSelected">
           <text>{{actionConItems[conIndex]}}text>
      picker>
 view>      

從微信(xin)端獲(huo)取的個(ge)人信(xin)息(xi)(xi)放(fang)在(zai)本地利(li)用wx.setStorageSync("key", '')存(cun)儲(chu)特定的信(xin)息(xi)(xi)，picker到(dao)的星座就(jiu)可以利(li)用這個(ge)方法，放(fang)到(dao)本地。

 data: {    
    actionConItems: ['白羊座','金牛座','雙子座','巨蟹座','獅子座','處女座','天秤座','天蝎座','射手座','摩羯座','水瓶座','雙魚座'],
    conIndex: 0,
  },
  
    //星座彈出窗口  可以將數據放在本地setStorage
  pickerConSelected: function (e) {
     console.log('picker發送選擇改變，星座為' + e.detail.value);
      wx.setStorageSync("con", e.detail.value);
      this.setData({
             conIndex: e.detail.value,
             btnColor: "#ffc324",
      });
  },

踩過的坑...

1. 開始對文檔不熟悉，導致自己走了很多的彎路，例如啊，我做星座選擇器的時候就不知道picker這個組件，而去使用了action-sheet，因為action-sheet里面的數據不能超過6項，我們都知道啊有12星座，所以我在這里卡了一段時間，后面詳細了看了下文檔才解決了問題。所以在你開發小程序時候，你應該對小程序的文檔有個詳細的了解。
2. 微信小程序的編譯包是不能超過2M的，開始你可能不知道將自己的圖片放在云端得到API，你盡可能將你的圖片壓縮小點來，我開發的時候編譯包就超過了2M。 
3. 目前小程序還有很多的限制，需要去申請合法的域名等等之類的啊，不過相信后面微信團隊會逐漸放開這些限制。
4. 目前我最擅長的也就是切頁面，切頁面...由于之間不知道彈性布局，頁面總顯得不那么整齊。display:flex這里有它的詳細說明，快來點我哦這個可以完美解決我的問題，媽媽再也不會擔心我的圖片文字同時居中了。
5. 作為處女座男生，可能有那么一丟丟的強迫癥，就是特別想做的完美，一直在改圖片的樣式，字體樣式...這也有好處，當然壞處也不少╮(╯▽╰)╭