订餐小程序开发教程 _睿知

订餐小程序是现在很多的餐饮店家的一个助手平台了，但是自制小程序似乎并不简单，下面是小编带来的小程序自制教程，需要的就来看看吧！
订餐小程序自制方法教程
要入门小程序，对于小程序的项目结构、基本的组件、基本事件、数据绑定交互、初始化过程等等应该比较清晰。
由于篇幅有限，主要讲下项目结构和数据交互，对于别的方面大家有兴趣，随时欢迎交流。
◆项目结构:
1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量、建立一些登录和获取用户信息的全局方法，进行本地数据的读写存储。app.js中我们使用App()注册小程序的，它接受一个object对象作为它的参数，这个参数指定了小程序的生命周期函数。
2、app.json是对整个小程序的全局配置。在这个文件中我们可以注册每个页面，设定小程序窗口的背景颜色和导航文字，设置小程序的tab分页等。

文章插图
3、app.wxss是整个小程序的公共样式表。它是全局的，页面里的元素也都可以直接使用该文件里的样式规则。
4、Pages文件夹里放置着各个页面的文件夹，utils里是一个通用工具类方法文件夹。
◆基本属性
data: 页面初始化数据; –> 对象 onLoad: 页面加载时触发; –> 函数 onReady: 页面初次渲染完成; –> 函数 onLaunch：在小程序初始化完成后触发; –> 函数 onShow：在小程序从后台进入前台时触发; –> 函数 onHide：小程序由前台进入后台时触发; –> 函数 onUnload: 页面卸载时; –> 函数 onPullDownRefreash: 页面下拉时; –>函数
注意: onLaunch()函数在整个小程序的生命周期只调用一次，其他两个函数调用多次。onLoad()函数在页面加载时只调用一次。可以获取上个页面传来的参数，默认保存在data参数中，可以通过data.param的方式获取。onUnload()页面卸载时调用，比如调用redirectTo或者navigateBack时。App()函数只能定义一次，并且只能在app.js中定义。
◆数据绑定
微信小程序中的数据可以直接挂在到data对象中去
比如：

文章插图
上面我们在data对象中定义了两个数据，一个数据定义在data对象中，另一个数据直接定义Page的参数中，这样我们可以以双大括号()方式将data中的数据渲染到页面。
◆数据获取和更改
对于data中的数据，我们必须通过this.data.buttoncontent这种方式来获取，对于data外面的数据，我们可以通过this.bgcolor的方式来获取。
对于data中的数据，要想改变它的值，必须要调用setData()方法来改变，而要改变data外的数据，可以直接给他进行赋值。

文章插图
注意: 在函数中注意this的作用域。在map函数或者异步回调函数中要使用this，要在函数外先把this赋值给that，然后用that进行操作。setData()对象参数的值不能为undefined 。每次setData进行赋值时都要对要赋的值进行非空判断，确保不是undefined，否则会报错。
◆列表渲染:
列表循环使用wx:for来绑定一个数组，就可以将数组中的每个数据循环遍历到组件中。默认情况下每个元素的变量名为item，每个变量的索引值为index 。
在列表遍历时我们并没有定义item和index，小程序自动为我们添加了wx:for-index=index和wx:for-item=item 。因此在嵌套列表渲染时，注意index和item所代表的值和对象。需要我们自己定义变量名和索引，避免混乱。