開發 | 用 7 天時間，他做了個仿麥當勞的小程序

文 | Jerry Lee

作為全棧的學習者，初學微信小程序，抱著試試做心態，一個星期內初步完成了仿「i 麥當勞」小程序的項目。

接下來，我與知曉程序（微信號 zxcx0101）就來跟大家一起回顧一下這個項目的完成過程。

小程序對於新手來說，是很容易上手的。你只需要用幾天時間去熟悉小程序的構建過程和文檔，就可以做出一個比較完整的小程序。

特別是 rpx，有了它，小程序可以自動適應不同的手機屏幕，這也使得開發者的工作量大幅降低。

關注「知曉程序」公眾號，在微信後台回復「rpx」，獲取 rpx 單位詳細解讀文章。

對於用戶來說，小程序是一個不需要下載安裝即可使用的應用，而且它的背後是強大的微信，所以，如果我們能夠用自己的創造思維去看待它，你會有很大的收穫。O(∩_∩)O

• 微信 Web 開發者工具，以及開發文檔：微信開發的小程序編輯軟體，下載安裝即可使用。同時，開發文檔可以解釋小程序的 API 介面用法。
• Easy Mork：用它可以模擬小程序向後端交換數據，可以使用 JSON 格式數據。
• 阿里的矢量圖標庫：這個是個好東西，以前我總是為找不到圖標元素煩惱，現在有了它，基本上能找到需要的圖標。

功能實現1. 優惠券的顯示及頁面傳值

我們從 Easy Mock 模擬獲取到優惠券的信息，並且利用了 wx:for這個控制屬性，綁定一個數組，將信息顯示到頁面上。

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>

data: {
imgs:,
modalHidden: true,
},

我們還可以注意這個信息 navigator，綁定了跳轉頁面的屬性。

在跳轉的過程中，它可以傳遞變數。例如 ?url={{item.url}}。在本例中，我需要傳遞圖片地址信息到下個頁面。

當然，頁面傳值並不只有這種方法，還有設置全局的數據緩存、引入事件訂閱和發布框架 onfire.js等方法。

接下來，我們需要獲取從伺服器發來的數據。我們利用 wx.request向伺服器發起數據請求。

通過這個介面，發起的是 HTTPS 請求，並且同時只能進行 5 個網路請求。

我們從 Easy Mock 中獲取數據信息，利用 setData改變imgs變數的值。

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,
})
}
})

2. 星座選擇器

表單組件 picker支持三種選擇器，通過mode來區分，分別是普通選擇器，時間選擇器，日期選擇器，這裡我們選擇的是普通選擇器。

• range是展示列表值的數組，列表中所有的元素都在裡面聲明。
• mode是設定選擇器模式。在這裡，我們將其設定為selector。
• value表示用戶當前選中的項目。
• 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>

從微信端獲取的個人信息放在本地，並利用 wx.setStorageSync緩存特定的信息。通過picker獲取到的星座，就可以利用這個方法，放到本地。

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",
});
},

關注「知曉程序」微信公眾號，在微信後台回復「源碼」，獲取本文原文地址及項目源碼地址。

剛開始，我對文檔不熟悉，導致自己走了很多的彎路。

例如，我做星座選擇器的時候就不知道 picker這個組件，改而使用了action-sheet。因為action-sheet裡面的數據不能超過 6 項，所以我在這裡卡了一段時間。

在開發小程序時候，至少需要通讀一遍文檔，知道小程序提供什麼組件和 API，避免使用了不合適的組件。

還有，微信小程序的編譯包是不能超過 2 MB 的，如果你不將自己的圖片放在伺服器，也儘可能將你的圖片壓縮一下。我開發的時候，編譯包就超過了 2 MB。

另外，由於之前不了解彈性布局 Flex，頁面總會有些瑕疵。自從用了 Flex 之後，發現它可以完美地解決我的問題，媽媽再也不會擔心我的圖片文字同時居中了。

關注「知曉程序」微信公眾號，在微信後台回復「Flex」，一篇文章帶你了解 Flex 布局。

最後，我們來看下小程序整體運行效果吧。

關注「知曉程序」公眾號，在微信後台回復「開發」，獲取小程序開發技巧精選文章。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！