小程序模板網(wǎng)

微信小程序開發(fā)實(shí)例--仿麥當(dāng)勞微信小程序

發(fā)布時(shí)間:2018-04-21 10:07 所屬欄目:小程序開發(fā)教程

學(xué)習(xí)使我happy!!!

作為全棧的學(xué)習(xí)者,初學(xué)微信小程序,抱著試試做心態(tài),一個(gè)星期內(nèi)初步完成了這個(gè)項(xiàng)目。




小程序是何方神圣?

  小程序是一種新的開放能力,開發(fā)者可以快速地開發(fā)一個(gè)小程序。小程序可以在微信內(nèi)被便捷地獲取和傳播,同時(shí)具有出色的使用體驗(yàn)。為什么選擇它?

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

小程序?qū)τ谛率謥碚f,是很容易上手的,需要你用幾天時(shí)間去熟悉小程序的構(gòu)建過程和說明文檔,你就可以初步做出一個(gè)比較完整的小程序。 我覺得小程序最屌地方還是rpx,使得小程序有很大的兼容性,在頁(yè)面布局使用這個(gè)屬性,可以適應(yīng)不同的手機(jī),這也使得我們降低工作量。而且小程序是一個(gè)不需要下載安裝即可使用的應(yīng)用,而且它的背后是強(qiáng)大的微信,所以,如果我們能夠用自己的創(chuàng)造思維去看待這個(gè),你會(huì)得到很大的收獲O(∩_∩)O哈哈~。
項(xiàng)目工具及文檔:

  1. 微信web開發(fā)者工具:微信小程序官網(wǎng) 微信開發(fā)的小程序編輯軟件,下載安裝即可使用,不需要去添加什么的;
  2. 開發(fā)文檔:微信小程序?qū)毜涿丶?nbsp;這里面詳細(xì)的介紹了小程序的各項(xiàng)信息,包括組件、框架、API等等;
  3. Easy Mork: easy-mock 小程序后臺(tái)數(shù)據(jù)可以在這里模擬,利用json格式;
  4. 圖標(biāo)庫(kù): Iconfont-阿里巴巴矢量圖標(biāo)庫(kù) 這個(gè)是個(gè)好東西,以前我總是為找不到圖標(biāo)元素?zé)溃乾F(xiàn)在有了它就啥也不怕了。頁(yè)面注冊(cè)

"pages":[
    "pages/index/index",   // 主頁(yè)
    "pages/happynotice/happynotice",  //開心通告欄
    "pages/userinfo/userinfo",    //個(gè)人信息詳情>
    "pages/queryintegral/queryintegral",  // 積分查詢
    "pages/integralmall/integralmall", // 積分商城
    "pages/user/user",  //個(gè)人信息
    "pages/integraldetail/integraldetail",   //  優(yōu)惠券詳情
    "pages/qrcodenull/qrcodenull", // 請(qǐng)求注冊(cè)頁(yè)面
    "pages/register/register", // 注冊(cè)信息頁(yè)面
    "pages/qrcode/qrcode"  //我的二維碼
 ], 
項(xiàng)目功能已實(shí)現(xiàn)功能:
  • 注冊(cè)用戶信息
  • 手機(jī)號(hào)碼驗(yàn)證(這里實(shí)現(xiàn)了頁(yè)面)
  • 個(gè)人信息修改
  • 優(yōu)惠券信息查看
  • 優(yōu)惠券兌換
  • 積分查詢
  • 開心通告欄未實(shí)現(xiàn)功能:
  • 麥有禮卡片(這個(gè)是剛上線的功能)
  • 麥麥同樂會(huì)的注冊(cè)
  • 文字頁(yè)面-常見問題、積分規(guī)則...
  •  
  • 項(xiàng)目GIF

Alt text

Alt text

Alt text部分功能解析1. 獲取本地信息

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


 //登錄的信息創(chuàng)建
    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. 優(yōu)惠券的顯示及頁(yè)面?zhèn)髦?/pre>
				

這里我們從easy-mock獲取到優(yōu)惠券的信息并且將信息顯示到頁(yè)面上,我們就利用了wx:for這個(gè)控制屬性綁定一個(gè)數(shù)組 這里我們還可以注意這個(gè)信息navigator是個(gè)跳轉(zhuǎn)頁(yè)面的屬性,在跳轉(zhuǎn)的過程中它可以傳值,例如**?url={{item.url}}這里我要穿的是圖片地址信息到下個(gè)頁(yè)面。 當(dāng)然頁(yè)面?zhèn)髦挡⒉皇侵皇沁@樣方法,還有設(shè)置全局的數(shù)據(jù)緩存**,引入事件訂閱和發(fā)布o(jì)nfire.js,這里就不一一介紹了有興趣可以去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文件中聲明你的的優(yōu)惠券數(shù)據(jù)imgs:[],**注意這里是json格式加','** 
```javascript
 data: {
    imgs:[],
    modalHidden: true,
  },

利用wx.request(OBJECT)發(fā)起的是https請(qǐng)求,從easymock中獲取數(shù)據(jù)信息,利用setData()改變imgs得值, 要注意一定要聲明var that = this,因?yàn)閣x:request里面是請(qǐng)求不到當(dāng)前頁(yè)面的data的數(shù)據(jù)信息,我們需要將this的賦值給that。還有一個(gè)微信小程序,同時(shí)只能有5個(gè)網(wǎng)絡(luò)請(qǐng)求連接。


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

3. 星座選擇器(這里我踩過坑)

表單組件picker支持三種選擇器,通過mode來區(qū)分,分別是普通選擇器,時(shí)間選擇器,日期選擇器,這里我們選擇的是普通選擇器。range是顯示的數(shù)組,只有聲明mode為selector這個(gè)才能實(shí)現(xiàn);value表示選擇的第幾個(gè)(由0開始);bindchange是觸發(fā)事件


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

從微信端獲取的個(gè)人信息放在本地利用wx.setStorageSync("key", '')存儲(chǔ)特定的信息,picker到的星座就可以利用這個(gè)方法,放到本地。


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

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23868.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢