订餐小程序开发教程

2023-05-26 05:30:01 编辑：匿名

订餐小程序是现在很多的餐饮店家的一个助手平台了，但是自制小程序似乎并不简单，下面是小编带来的小程序自制教程，需要的就来看看吧！

订餐小程序自制方法教程

要入门小程序，对于小程序的项目结构、基本的组件、基本事件、数据绑定交互、初始化过程等等应该比较清晰。

由于篇幅有限，主要讲下项目结构和数据交互，对于别的方面大家有兴趣，随时欢迎交流。

◆项目结构:

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所代表的值和对象。需要我们自己定义变量名和索引，避免混乱。

还有条件渲染等，这里就不一一列举了，大家可以参考微信小程序框架学习;

服务器配置

如果本地调试的话，小程序访问后端api也是让人头疼。主要是服务器的搭建，稍后给出搭建方法。原因是我们小程序所有后端api请求都要经过腾讯服务器，所以本地调试的话，必须要使用内网穿透，使外网能够访问内网数据。开始时候想到的解决方案，简单步骤如下

◆增加一条虚拟主机转发规则，添加外网端口，指向内网应用ip地址以及应用端口。

tips: 测试外网转发规则是否添加成功: 查看路由运行状态，查看路由ip，因为在公司开发，直接使用vpn.brilliant-solution.com:外网端口形式访问也可以, 浏览器中输入vpn.brilliant-solution.com:外网端口，看访问是否会进入内网应用程序。成功进入代表转发成功。

◆申请域名，这里我是在阿里云上因为涉及到端口号，所以添加的dns解析，记录类型为显性url。