成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

微信小程序新手入門之必勝客篇

Xufc / 1804人閱讀

摘要：作為一個(gè)菜鳥級的初學(xué)者，筆者懵懵懂懂的花了點(diǎn)時(shí)間仿了一個(gè)必勝客的訂餐小程序，希望能對一些有需要的朋友提供一點(diǎn)啟發(fā)。開始訂餐點(diǎn)擊開始訂餐，跳轉(zhuǎn)到點(diǎn)餐頁面至此，這個(gè)必勝客小程序的首頁頁面就完成了，整個(gè)頁面看起來還是聽清爽的。

前言

什么是微信小程序？
微信小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。這體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題，應(yīng)用將無處不在，隨時(shí)可用，但又無需安裝卸載。
作為一個(gè)菜鳥級的初學(xué)者，筆者懵懵懂懂的花了點(diǎn)時(shí)間仿了一個(gè)必勝客的訂餐小程序，希望能對一些有需要的朋友提供一點(diǎn)啟發(fā)。

項(xiàng)目結(jié)構(gòu)

首頁頁面，結(jié)構(gòu)如下圖所示：

點(diǎn)擊飯食，跳轉(zhuǎn)到了飯食頁面：

訂單頁面：

點(diǎn)擊登錄，跳轉(zhuǎn)到登錄頁面：

最后是我的頁面：

主要代碼

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.實(shí)現(xiàn)首頁頭部輪播圖效果

在index.js中設(shè)置數(shù)據(jù)

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",
      }
    ]
  }
})

實(shí)現(xiàn)效果：

2.利用navigator實(shí)現(xiàn)頁面的跳轉(zhuǎn)

一種方法是在xwml中直接使用披薩，
然后在公共頁面設(shè)置好路徑"pages/action/action" 即可實(shí)現(xiàn)頁面條狀

另一種方法是首先對text 設(shè)置監(jiān)聽事件
?

? ?
?
然后對該text 設(shè)置事件跳轉(zhuǎn)。
? 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 模擬一個(gè)數(shù)據(jù)庫
到了這一步，估計(jì)有些剛?cè)腴T的朋友是不太了解的Easy Mock，我在這簡單的解釋一下。EasyMock 是一套通過簡單的方法對于指定的接口或類生成 Mock 對象的類庫,它能利用對接口或類的模擬來輔助單元測試。

在Mock數(shù)據(jù)里面手動(dòng)設(shè)置模擬數(shù)據(jù)，在點(diǎn)擊窗口打開就可以得到我們想要的網(wǎng)站，然后在index.js中進(jìn)行引用。

  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中進(jìn)行引用就可以實(shí)現(xiàn)首頁數(shù)據(jù)的引用。

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

點(diǎn)擊開始訂餐，跳轉(zhuǎn)到點(diǎn)餐頁面：

至此，這個(gè)必勝客小程序的首頁頁面就完成了，整個(gè)頁面看起來還是聽清爽的。至于訂單和我的頁面跟首頁頁面的設(shè)計(jì)思想相差不大，所以筆者也就不浪費(fèi)時(shí)間在此展開來講。由于筆者對于小程序這塊也是剛?cè)腴T，所以好多功能和API都沒有添加，讀者朋友要是感興趣可以對照文檔https://mp.weixin.qq.com/debu...添加各種功能。獲取源代碼可以點(diǎn)擊https://github.com/Ernest9631...。
最后，再次申明這是筆者剛?cè)腴T的處女作，要是各位大佬發(fā)現(xiàn)了本文的不足歡迎批評指正。啰嗦了這么久，希望本文能對有需要的人朋友提供些許幫助，溜了溜了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83012.html

相關(guān)文章

  • iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享

    摘要：微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開發(fā)者工具之初中級培訓(xùn)教程分享。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng)：http://www.ikcamp.com 訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教...

    hersion 評論0 收藏0

  • iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享

    摘要：微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開發(fā)者工具之初中級培訓(xùn)教程分享。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng)：http://www.ikcamp.com 訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教...

    MRZYD 評論0 收藏0

  • iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教程分享

    摘要：微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué)官網(wǎng)訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開發(fā)者工具之初中級培訓(xùn)教程分享。 ?? 微信小程序課程，面向所有具備前端基礎(chǔ)知識(shí)的同學(xué) ?? iKcamp官網(wǎng)：http://www.ikcamp.com 訪問官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開發(fā)者工具之初中級培訓(xùn)教...

    李昌杰 評論0 收藏0

  • 微信小程序——商城篇

    摘要：微信小程序之跳轉(zhuǎn)在進(jìn)入商品詳情頁以后，點(diǎn)擊左下角的圖標(biāo)原應(yīng)該跳轉(zhuǎn)到首頁，但是一直點(diǎn)也不跳，而且也不報(bào)錯(cuò)。放下效果圖微信小程序購物車購物車頁面邏輯的話，要按業(yè)務(wù)需求來。 前言 隨著wepy和mpvue的出現(xiàn)及流行，開發(fā)小程序變的越來越便捷和強(qiáng)大，作為基佬社區(qū)的一份子，我們都需要把自己遇到的問題以及如何解決的方式相互分享，這樣才能幫助到更多的朋（ji）友（lao）。如有寫的不足的地方，請各...

    k00baa 評論0 收藏0

  • 微信應(yīng)用號（小程序）資源匯總（1010更新）

    摘要：微信應(yīng)用號小程序資源匯總。每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 wechat-weapp-resource 微信應(yīng)用號（小程序）資源匯總。 每天不定期整理和收集微信小程序相關(guān)資源，方便查閱和學(xué)習(xí)，歡迎大家提交新的資源，完善和補(bǔ)充。 showImg(https://segmentfault.com/img/remote/1460000...

    趙春朋 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<