媒介

什么是微信小顺序？
微信小顺序是一种不须要下载装置即可运用的运用，它完成了运用“触手可及”的妄想，用户扫一扫或许搜一下即可翻开运用。这表现了“用完即走”的理念，用户不必体贴是不是装置太多运用的题目，运用将无处不在，随时可用，但又无需装置卸载。
作为一个菜鸟级的初学者，笔者懵懵懂懂的花了点时候仿了一个必胜客的订餐小顺序，愿望能对一些有须要的朋侪供应一点启示。

项目构造

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

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

定单页面：

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

末了是我的页面：

重要代码

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.完成首页头部轮播图结果

<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="500">
    <block wx:for="{{banners}}" wx:key="id">
      <swiper-item>
          <image src="{{item.img}}"/>
      </swiper-item>
    </block>
</swiper>

在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中直接运用<navigator url=”../action/action” >披萨</navigator>，
  然后在大众页面设置好途径”pages/action/action” 即可完成页面条状

• 另一种要领是起首对text 设置监听事宜
   <view bindtap=”toast” class=”usermotto”>

    <text></text>
  </view>
然后对该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中举行援用就能够完成首页数据的援用。

  <block wx:for="{{items}}" wx:key="item">
        <view class="flex item" bindtap="bindViewTap">
          <view class="item_left">
            <image src="{{item.imageUrl}}"/>
          </view>
          <view class="flex_auto item_middle">
            <view>
              <text class="title">{{item.sub_name}}</text>
              <text class="title price">￥{{item.sub_price}}</text>
              <text class="title">{{item.sub_desc}}</text>
            </view>

          </view>
          <view class="item_right">
              <navigator url="../action/action" class="action">
                <button>最先订餐</button></navigator>
          </view>
        </view>
      </block>

点击最先订餐，跳转到点餐页面：

至此，这个必胜客小顺序的首页页面就完成了，全部页面看起来照样听清新的。至于定单和我的页面跟首页页面的设想头脑相差不大，所以笔者也就不浪费时候在此睁开来说。因为笔者关于小顺序这块也是刚入门，所以很多功用和API都没有增加，读者朋侪如果感兴趣能够对比文档https://mp.weixin.qq.com/debu…增加种种功用。猎取源代码能够点击https://github.com/Ernest9631…。
末了，再次说明这是笔者刚入门的处女作，如果列位大佬发现了本文的不足迎接批评指正。烦琐了这么久，愿望本文能对有须要的人朋侪供应些许协助，溜了溜了。