微信小程序新手入门之必胜客篇

Xufc 发布于2019-08-20 16:34 / 1292人阅读

摘要：作为一个菜鸟级的初学者，笔者懵懵懂懂的花了点时间仿了一个必胜客的订餐小程序，希望能对一些有需要的朋友提供一点启发。开始订餐点击开始订餐，跳转到点餐页面至此，这个必胜客小程序的首页页面就完成了，整个页面看起来还是听清爽的。

前言

什么是微信小程序？
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。这体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又无需安装卸载。
作为一个菜鸟级的初学者，笔者懵懵懂懂的花了点时间仿了一个必胜客的订餐小程序，希望能对一些有需要的朋友提供一点启发。

项目结构

首页页面，结构如下图所示：

点击饭食，跳转到了饭食页面：

订单页面：

点击登录，跳转到登录页面：

最后是我的页面：

主要代码

app.json:

{
  "pages":[
    "pages/index/index",
    "pages/dingdan/index",
    "pages/my/index",
    "pages/action/action",
    "pages/denglu/denglu",
    "pages/fanshi/fanshi",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle": "light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "必胜客宅急送",
    "navigationBarBackgroundColor": "yellow",
    "backgroundColor": "#F2F2F2",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "yellow",
    "borderStyle": "white",
    "backgroundColor":"#ffffff",
    "list": [{
      "pagePath": "pages/index/index",
      "iconPath": "image/1.png",
      "selectedIconPath": "image/2.png",
      "text": "首页"
    },{
      "pagePath": "pages/dingdan/index",
      "iconPath": "image/3.png",
      "selectedIconPath": "image/4.png",
      "text": "订单"
    },{
      "pagePath": "pages/my/index",
      "iconPath": "image/5.png",
      "selectedIconPath": "image/6.png",
      "text": "我的"
    }]
  }
}

1.实现首页头部轮播图效果

在index.js中设置数据

Page({
  data: {
    items:[],
    banners: [
      {
        id: 1,
        img: "https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_21_14.jpg",
      },
      {
        id: 2,
        img: "https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_40_55.jpg",
      },
      {
        id: 3,
        img: "https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_43_38.jpg",
      },
      {
        id: 4,
        img: "https://img.4008123123.com/resource/BannerP/Banner_1_2017_04_12_15_46_28.jpg",
      }
    ]
  }
})

实现效果：

2.利用navigator实现页面的跳转

一种方法是在xwml中直接使用披萨，
然后在公共页面设置好路径"pages/action/action" 即可实现页面条状

另一种方法是首先对text 设置监听事件

然后对该text 设置事件跳转。
toast: function() {
wx.navigateTo({
url: "../action/action" })
}
最后需要在 app.json 中添加页面配置

"pages":[
    "pages/index/index",
    "pages/dingdan/index",
    "pages/my/index",
    "pages/action/action",
    "pages/denglu/denglu",
    "pages/fanshi/fanshi",
    "pages/logs/logs"
  ]

3.利用Easy Mock 模拟一个数据库
到了这一步，估计有些刚入门的朋友是不太了解的Easy Mock，我在这简单的解释一下。EasyMock 是一套通过简单的方法对于指定的接口或类生成 Mock 对象的类库,它能利用对接口或类的模拟来辅助单元测试。

在Mock数据里面手动设置模拟数据，在点击窗口打开就可以得到我们想要的网站，然后在index.js中进行引用。

  onLoad: function () {
    var that = this;
    wx.request({
      url: "https://www.easy-mock.com/mock/59082eb57a878d73716e5b73/aa/list",
      method: "get",
      data: {},
      header: {
        "Accept": "application/json"
      },
      success: function(res) {
        console.log(res.data.items);
        that.setData({
          items: res.data.items
        });
      }
    })
  }

最后在index.wxml中进行引用就可以实现首页数据的引用。

  
        
          
            
          
          
            
              {{item.sub_name}}
              ￥{{item.sub_price}}
              {{item.sub_desc}}

点击开始订餐，跳转到点餐页面：

至此，这个必胜客小程序的首页页面就完成了，整个页面看起来还是听清爽的。至于订单和我的页面跟首页页面的设计思想相差不大，所以笔者也就不浪费时间在此展开来讲。由于笔者对于小程序这块也是刚入门，所以好多功能和API都没有添加，读者朋友要是感兴趣可以对照文档https://mp.weixin.qq.com/debu...添加各种功能。获取源代码可以点击https://github.com/Ernest9631...。
最后，再次申明这是笔者刚入门的处女作，要是各位大佬发现了本文的不足欢迎批评指正。啰嗦了这么久，希望本文能对有需要的人朋友提供些许帮助，溜了溜了。

私有云专线服务微信小程序入门微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83012.html

iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

hersion 2019-08-01 17:45 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

MRZYD 2019-08-21 17:00 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

李昌杰 2019-08-30 15:53 评论0 收藏0
微信小程序——商城篇

摘要：微信小程序之跳转在进入商品详情页以后，点击左下角的图标原应该跳转到首页，但是一直点也不跳，而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话，要按业务需求来。前言随着wepy和mpvue的出现及流行，开发小程序变的越来越便捷和强大，作为基佬社区的一份子，我们都需要把自己遇到的问题以及如何解决的方式相互分享，这样才能帮助到更多的朋（ji）友（lao）。如有写的不足的地方，请各...

k00baa 2019-08-26 12:01 评论0 收藏0
微信应用号（小程序）资源汇总（1010更新）

摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...

赵春朋 2019-08-29 11:20 评论0 收藏0