簡單點餐用戶端展現目前基本告一段落了。隻說代碼的大餅整理了下用戶端項目用到的知識點。
一.底部導航欄配置(tabbar)：
在app.json檔案中配置“tabbar”
二.首頁輪播圖實作：
三.圖檔左右滑動實作：
四.左側是菜單，右側是内容實作：
兩個标簽，都設定豎向滾動，并且左側位置設定為absolute。
.left {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 145rpx;
text-align: center;
font-size: 28rpx;
}
.right {
margin-left: 145rpx;
height: 100%;
overflow: hidden;
width: auto;
background: #fff;
}
五.代碼複用：
1.模闆起到代碼複用作用，模闆目前支援wxml、wxss兩個檔案，不能進行邏輯控制，需要在應用模闆的頁面處理邏輯。
模闆使用：
a.在wxml頁面頂部使用插入，然後再使用展示，is屬性要指派為模闆name屬性的名字。
b.模闆樣式引入，在對應的wxss頁面@import 引入。
@import "../../template/list-temp.wxss"
- 元件也起到代碼複作用，隻是比模闆多了.js檔案和wxss檔案，可以自己處理邏輯。
元件使用：
a.在要使用元件的頁面的json檔案中配置：
b.wxml頁面使用json中定義的元件名：
六.頁面與元件互相傳值：
- 頁面傳值給元件：
a.在自定義元件屬性properties裡定義屬性searchcompdata。
properties: {
searchcompdata: {
type: String,
value: "查找 大餅"
}
},
b.在使用元件頁面{{}}綁定值然後指派給元件中定義的屬性searchcompdata，這樣元件就能接收到資料啦。
- 元件傳值給頁面：
a.在元件對應事件裡使用triggerEvent()觸發頁面定義的事件,第一個(searchtxt)參數是頁面的事件名稱，第二個(e.detail)參數是要傳給頁面的值對象。
bindSearch: function (e) {
console.log(e);
this.triggerEvent("searchtxt", e.detail);
},
b.頁面中定義事件(searchtxt)。
searchtxt: function (e) {
//這裡的e就是search-comp元件給頁面的值。
console.log(e.detail.value);
wx.showModal({
title: "提示:",
content: e.detail.value,
showCancel: true
})
},
七.wxs使用。其作用就是能在wxml頁面中寫js代碼處理邏輯，如果不使用wxs的話，就必須得在.js檔案中寫邏輯。
1.在wxml頁面中使用标簽，并且給wxs的module屬性指派。
var showtxt= "我是隻說代碼的大餅"
module.exports={
showtxt:showtxt
}
2.在頁面中使用wxs中的module名字調用導出的對象變量或者方法。
{{mymodue.showtxt}}
八.在.js檔案中使用require()函數引入公共方法。
1.直接在需要調用公共方法的js檔案中使用require()函數引入公共js檔案，該js檔案要使用module.exports 導出對象。
var utils = require("../../utils/util.js")；
2.引入後使用utils裡的方法formatTime()是util.js裡的方法。
utils.formatTime(new Date()))；
九.元件共享代碼observers，和第八點有點類似。
總結：
以上就是小程式前端項目大概的知識點，熟練掌握以上知識點就能做一般的前端小程式項目了。
我是隻說代碼的大餅，謝謝浏覽，覺得對你有用的話，記得關注我喲，後面持續教你做項目。