微信小程序開發(fā)教程新手怎么快速入門

　　2017年5月22日，微信小程序推出之時，限制非常多，現(xiàn)在越來越開放。微信小程序開發(fā)教程也受到越來越多人的關(guān)注，下面從多個方面來談?wù)勎⑿判〕绦蜷_發(fā)教程的一些內(nèi)容。

前言

什么是微信小程序？

微信小程序是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。這體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題，應(yīng)用將無處不在，隨時可用，但又無需安裝卸載。

作為一個菜鳥級的初學(xué)者，筆者懵懵懂懂的花了點(diǎn)時間仿了一個必勝客的訂餐小程序，希望能對一些有需要的朋友提供一點(diǎn)啟發(fā)。

項目結(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&quo微信小程序 apit;,
      "text": "我的"
    }]
  }
}

1.實現(xiàn)首頁頭部輪播圖效果

<swiper class="banner&怎么做小程序quot; indicator-dots="true" autoplay="true" interval="3000" duration="500">
    <block wx:for="{{banners}}" wx:key="id">
      <swiper-item>
     小程序設(shè)計     <image src="{{item.img}}"/>
      </swiper-item>
    </block>
</swiper>

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

實現(xiàn)效果：

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

• 一種方法是在xwml中直接使用<navigator url="../action/action" >披薩</navigator>，

  然后在公共頁面設(shè)置好路徑"pages/action/action" 即可實現(xiàn)頁面條狀

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

  制作小程序

  <view bindtap="toast" class="usermotto">

<text></text>

</view>

然后對該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 模擬一個數(shù)據(jù)庫

到了這一步，估計有些剛?cè)腴T的朋友是不太了解的Easy Mock，我在這簡單的解釋一下。EasyMock 是一套通過簡單的方法對于指定的接口或類生成 Mock 對象的類庫,它能利用對接口或類的模擬來輔助單元測試。

在Mock數(shù)據(jù)里面手動設(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)行引用就可以實現(xiàn)首頁數(shù)據(jù)的引用。

<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>微信小程序appid
      </block>

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

　　hishop微信小程序可以實現(xiàn)一鍵開通微信小程序，結(jié)合移動云商城，可以實現(xiàn)七大端口的線上和線下結(jié)合模式。