订餐小程序是现在很多的餐饮店家的一个助手平台了,但是自制小程序似乎并不简单,下面是小编带来的小程序自制教程,需要的就来看看吧!
订餐小程序自制方法教程
要入门小程序,对于小程序的项目结构、基本的组件、基本事件、数据绑定交互、初始化过程等等应该比较清晰。
由于篇幅有限,主要讲下项目结构和数据交互,对于别的方面大家有兴趣,随时欢迎交流。
◆项目结构:
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。
比如申请的域名为: catering.bdachina.net.这时候浏览器输入catering.bdachina.net,应该就可以访问后端 应用的。
问题来了。发现在公司连接公司网络,是无法访问路由地址vpn.brilliant-solution。内心仿佛万"马"奔腾。
看来还是需要换种途径,使用内网穿透工具,比如ngrok,花生壳等,我这里使用花生壳,具体可以看下花生壳免费域名申请方法。
最后,还要在微信公众平台绑定下域名,就可以本地开发调试了。
因为是小程序学习,后端的如何如何我就不怎么介绍了。
最后,订餐小程序大部分功能基本完成,还在调试中,不久就会与大家见面,期待~~。