微信小程序入門案例

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

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標簽而是用它自身封裝的組件。

參考：

　　1、https://www.cnblogs.com/shenzikun1314/p/7805168.html

　　2、https://www.cnblogs.com/shenzikun1314/p/7805168.html

　　3、https://blog.csdn.net/m0_37865510/article/details/81012701

異步