简单点餐客户端展现目前基本告一段落了。只说代码的大饼整理了下客户端项目用到的知识点。
一.底部导航栏配置(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，和第八点有点类似。
总结：
以上就是小程序前端项目大概的知识点，熟练掌握以上知识点就能做一般的前端小程序项目了。
我是只说代码的大饼，谢谢浏览，觉得对你有用的话，记得关注我哟，后面持续教你做项目。