微信小程序入門案例

本文通過具體的實例記錄微信小程序的入門知識。

1、特點

• 不需要安裝
• 依賴微信應用
• 更接近原生APP
• 豐富的框架及API可達到快速開發的目的

2、工具使用

在開發的過程中可以使用微信開發者工具，更加直觀的進行調式及看到界面：下載地址

3、目錄結構

• pages：小程序頁面，包括js（頁面邏輯），wxml（頁面結構），wxss（頁面樣式）和json（頁面配置）
• app.js：小程序公共邏輯
• app.json：小程序公共配置
• app.wxss：小城市公共樣式
  

4、公共配置

• window：設置默認頁面的窗口表現，如圖的頂部紅色區域
  

 "window":{  
    // 導航欄背景顏色
    "navigationBarBackgroundColor": "#bc162c",
    // 導航欄標題文字內容
    "navigationBarTitleText": "初始微信小程序",
    // 導航欄標題顏色，僅支持 black/white
    "navigationBarTextStyle":"white"
  }

• tabBar：設置小程序的tab最多5個，最少2個，如圖的底部tab
  

"tabBar": {
    // 背景色
    "backgroundColor": "#bc162c",
    // 背景文字
    "color": "#8a8a8a",
    // 高亮背景文字
    "selectedColor":"#fff",
    "list": [
        {        
        "pagePath": "pages/index/index", // 路由頁面
        "text": "首頁", // 路由文字
        "iconPath":"images/home1.png", // 默認顯示圖標必須是圖片81*81
        "selectedIconPath":"images/home.png" // 高亮顯示圖標
        },
        {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath":"images/log1.png",
        "selectedIconPath":"images/log.png"
        }
    ]
}

5、微信組件應用

微信小程序自帶一些常規組件，包括輪播，表單組件等。

輪播圖組件swiper

用於首頁的輪播圖顯示，可以設置自動輪播和序號點

核心代碼：

<!-- index.wxml -->
<swiper indicator-dots="indicatorDots"
        indicator-color="#FFF"
        indicator-active-color = "#bc162c"
        autoplay="{{autoplay}}" 
        interval="{{interval}}" 
        duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image"/>
    </swiper-item>
  </block>
</swiper>

// index.js
Page({
  data: {
    imgUrls: [
      '/images/vue.jpg',
      '/images/angular.jpg',
      '/images/react.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})

/* index.wxss */
.slide-image{
  width: 100%;
  height: 300rpx;
}

可以看出，微信的組件開發和vue一樣都是通過數據控制view層的，知識點：

• 雙大括號：表示數據綁定，支持簡單的表達式；
• wx:for：表示列表渲染，使用item表示數組數據；使用index表示數組的下標；
• data：放置變量的數據；
• rpx：微信中的單位，rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應，規定屏幕寬為750rpx

可滾動組件scroll-view

用於顯示多個模塊的滾動顯示

核心代碼：

<!-- index.wxml -->
<scroll-view class="scroll-view" scroll-x="true">
    <view class="scroll-view-item"  wx:for="{{viewDatas}}">
      <view class="view-item-title">
          <text>{{item.title}}\n</text>
          <text>￥{{item.price}}</text>
      </view>
      <image class="view-item-image" src="{{item.imgUrl}}"></image>
    </view>
</scroll-view>

// index.js
viewDatas:[{
  title:"使用AngularJS開發下一代Web應用",
  price:"299.00",
  imgUrl:"/images/10-min.png"
},{
  title:"Vue+Webpack打造web應用",
  price:"229.00",
  imgUrl:"/images/2-min.png"
},{
  title:"React知識點綜合運用實例",
  price:"329.00",
  imgUrl:"/images/7-min.png"
},{
  title:"微信小程序入門",
  price:"99.00",
  imgUrl:"/images/3-min.png"
}]

這里用到scroll-view組件，設置scroll-x="true"表示橫向滾動。此時需要設置以下樣式保證效果。

/* index.wxss */
.scroll-view {
  display: flex;
  width: 100%;
  height: 285rpx;
  white-space: nowrap;  
  box-sizing: border-box;
}

.scroll-view-item {
  display: inline-block;
  width: 685rpx;
  height: 285rpx;
}

6、頁面跳轉

下面介紹點擊【購買】按鈕如何進入購買頁面。

事件綁定

事件的類型即移動端的事件如touch類事件，tap事件，寫法是以bind或catch開頭，然后跟上事件的類型。其中，bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。比如下面的bindtap表示點擊按鈕。

<button type="warn" size="mini" bindtap="buyit  data-id="{{item.id}}"">購買</button>

buyit(event){
  console.log(event)
}

點擊結果

分析：返回結果中包含event的各種信息，包括觸摸點的位置，目標對象的dataset，可以通過data-的新形式定義模板，通過event.dataset獲取值

跳轉路由

微信小程序有棧的概念，跳轉的方式有4種：

• wx.navigateTo(options)：將原頁面保存在頁面棧中，由此進入的下個頁面也會進棧，只有在這個情況下點擊手機的返回按鈕才可以重新跳轉到上個頁面；
• wx.redirectTo(options)：清除棧，下一個頁面進棧，無法通過返回按鈕返回；
• wx.switchTab(options)：同上，且跳轉的頁面必須是tabBar中聲明的頁面；
• wx.navigateBack(options)：只能返回到頁面棧中的指定頁面，一般和navigateTo配合使用。

參數說明

參數	說明
url	跳轉得頁面路徑
success	成功的回調函數
fail	失敗的回調函數
complete	束的回調函數

因此我們可以使用wx.navigateTo的方法跳轉到購買頁面，並且獲取到當前點擊的條目的id，直接在url加上，通過url傳參。

  buyit(event) {
    var id = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: "/pages/buy/buy?id=" + id
    })
  }

進入購買頁面

7、API請求

上面介紹的頁面都是靜態數據，下面介紹如何通過請求獲得數據，以購買頁面的課程詳情為例說明。我將數據放在本地的一個環境下模擬接口返回數據：

請求API

• wx.request(OBJECT) 發起網絡請求。
  主要參數說明

參數	說明
url	接口地址
data	請求的參數
method	請求方法
success	成功的回調函數
fail	失敗的回調函數
complete	束的回調函數

在前面，我們在點擊【購買】按鈕的時候在地址傳入了一個id，真實環境中，我們會根據這個id來請求接口獲取數據，那么問題來了：

• 1.什么時候請求接口？
• 2.如何獲取地址中的id呢？

生命周期函數

微信小程序和vue一樣擁有生命周期函數，微信提供的函數方法有：

方法	說明
onLoad	監聽頁面加載
onReady	監聽頁面初次渲染完成
onShow	監聽頁面顯示
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載

因此解決問題1，我們可以在onLoad方法中請求接口。打印一下這個方法下的參數。

從打印的數據可以看到，微信很貼心的已經將路徑中的參數傳給我們了，解決問題2，實現請求：

<view class="buy-list-item"  wx:for="{{buylist}}" wx:key="{{index}}">
    <text>{{item.title}}</text>
    <text>{{item.desc}}</text>
    <view class="item-tip">
        <image src="/images/play.png" />
        <text>{{item.tip}}</text>
    </view>
</view>

Page({
    data:{
        buylist:[]
    },
    onLoad(option){
        var that = this;
        wx.request({
            url:"http://localhost:8888/static/test.json",
            data:{
                id: option.id
            },
            success(res){
                that.setData({
                    buylist: res.data.buylist
                })
            }
        })
    }
})

微信小程序中通過setData的方法給data中的變量賦值

實現效果：

8、本地緩存

在前面的案例中我們通過url傳參的形式實現組件之間的數據傳遞。還有一種方式就是可以使用本地緩存的形式。可以對本地緩存進行設置、獲取和清理。同一個微信用戶，同一個小程序 storage 上限為 10MB。

• wx.setStorage(OBJECT) 設置緩存，異步接口
• wx.setStorageSync(KEY,DATA) 設置緩存，同步接口
• wx.getStorage(OBJECT) 獲取緩存，同步接口
• wx.getStorageSync(KEY) 獲取緩存，同步接口
• wx.removeStorage(OBJECT) 移除緩存，同步接口
• wx.removeStorageSync(KEY) 移除緩存，同步接口
• wx.clearStorage() 清理全部本地緩存，同步接口
• wx.clearStorageSync() 清理全部本地緩存，同步接口

同步參數說明

參數	說明
key	本地緩存中的指定的 key
data	需要存儲的內容

異步參數添加

參數	說明
success	調用成功的回調函數，獲取緩存
fail	調用失敗的回調函數
complete	調用結束的回調函數

9、總結

總的來說，小程序的簡單應用跟其他的MVVM框架一樣是通過數據操作視圖層，組件化開發，提供各種內置的 API，wxml文件不可寫html標簽而是用它自身封裝的組件。