微信小程序實戰教程——2實戰之模仿知乎

時間  2019-11-08
標籤 微信 程序 實戰 教程 模仿 欄目 快樂工作 简体版
原文   原文鏈接

完整教程請查看 微信小程序實戰教程css

微信小程序實戰教程——1基礎知識 傳送門前端

1 開始以前

目錄
除了小程序項目中自帶的文件夾，我引入了幾個新的文件夾：

  • .vscode文件夾存放vscode編輯器的配置文件。
  • components文件夾存放組件。
  • images文件夾存放公共圖片。
  • Mock文件夾存放使用MockJS模擬後端接口的類。
  • models文件夾存放封裝好的請求類。
  • utils文件夾存放公共類。

接下來我以首頁爲例進行分析，其餘頁面也都相似。git

建議能力較強的小夥伴先把項目下載下來，本身先嚐試着根據效果圖實現代碼，作完以後再回來看與個人思路有哪些不一樣。github

2 起步

2.1 佈局與樣式

這個頁面中每一條記錄都是相同的，因此能夠抽象爲一個組件，在components文件夾下面建立一個組件，wxml與wxss比較簡單，不作過多講解。 

//wxml
<view class="container-item">
    <view class="item-title">
        <text>{{items.title}}</text>
        <image src="./images/more.png"></image>
    </view>
    <view class="item-author">
        <image src="{{items.imgUrl}}"></image>
        <text>{{items.author}}</text>
    </view>
    <text class="text-body">{{items.content}}</text>
    <view class="item-action">
        <text>{{items.starNum}}</text>
        <text>贊同</text>
        <text>{{items.reviewNum}}</text>
        <text>評論</text>
    </view>
</view>
//部分scss
$border-color:#dfdfdf;
.container-item {
  padding:10rpx;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin-top: 10rpx;
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
}
複製代碼

2.2 子組件與父組件的粒度大小

子組件須要監聽兩個事件，分別爲觸摸該子組件時跳轉到該問題的回答的詳情頁面以及觸摸右上角的三個點跳轉到該問題的詳情頁面。第二個事件觸發的同時會冒泡並觸發第一個事件，因此監聽第二個事件的時候須要採用catch前綴監聽並阻止事件冒泡。完整代碼以下。ajax

<view class="container-item" bind:tap="clickItems">
    <view class="item-title">
        <text>{{items.title}}</text>
        <image src="./images/more.png" catch:tap="clickMore"></image>
    </view>
    <view class="item-author">
        <image src="{{items.imgUrl}}"></image>
        <text>{{items.author}}</text>
    </view>
    <text class="text-body">{{items.content}}</text>
    <view class="item-action">
        <text>{{items.starNum}}</text>
        <text>贊同</text>
        <text>{{items.reviewNum}}</text>
        <text>評論</text>
    </view>
</view>
複製代碼

抽象出子組件並不難，難的是如何設計子組件與父組件的粒度大小，在上面的例子中子組件監聽了觸摸事件，這時候是由子組件執行wx.navigateTe()仍是由父組件執行，這纔是咱們最須要考慮的問題，個人想法是子組件只控制樣式的變化，不執行業務邏輯，業務邏輯我一概交給父組件來作。json

下面代碼參考微信小程序實戰教程——1基礎知識 5.2.2小程序

//子組件中將index傳給父組件，讓父組件執行業務邏輯
methods: {
    //打開回答詳情
    clickItems() {
      let index=this.properties.index;
      this.triggerEvent('clickItems',{index});
    },
    //打開問題詳情
    clickMore() {
      let index=this.properties.index;
      this.triggerEvent('clickMore',{index});
    }
}
//父組件中監聽子組件準備觸發的事件並執行業務邏輯
//wxml
<view class="container">
    <block wx:for="{{items}}" wx:for-item="v" wx:for-index="i">
        <index-items items="{{v}}" index="{{i}}" bind:clickItems="clickItems" bind:clickMore="clickMore"></index-items>
    </block>
</view>
//js
//點擊回答打開詳情
clickItems(event) {
    //取出子組件傳來的index，表示被點擊的子組件的下標
    let index=event.detail.index;
    let id=this.data.items[index].id;
    wx.navigateTo({
      url: '/pages/detail/detail?id='+id
    });
},
//點擊打開問題詳情
clickMore(event) {
    let index=event.detail.index;
    let id=this.data.items[index].id;
    wx.navigateTo({
      url:"/pages/problem/problem?id="+id
    });
}
複製代碼

2.3利用Mock製做虛擬數據

分析首頁能夠得知，每條記錄須要一個id、標題、做者頭像、做者名、正文內容、點讚的數量以及回覆的數量。後端

在Mock文件夾下建立一個indexMock.js文件專門爲首頁提供虛擬數據。微信小程序

//indexMock.js
let Mock = require('./mock-min.js');//引入Mock
const Random = Mock.Random;
class IndexMock {
    constructor() {}
    //返回首頁記錄模擬數據
    getIndexList() {
        return Mock.mock({
            'status': '0',
            'msg': '',
            'data|10': [{
                'id': '@guid()',   //id
                'img': Random.img('16x16', '#4A7BF7','#000','@word(1,2)'),   //頭像
                'title': '@ctitle(1,8)',                    //標題
                'author':'@word(1,8)',                     //做者
                'content':'@cparagraph(1)',                 //正文
                'star_num': '@integer(0,10000)',            //點贊數量
                'review_num':'@integer(0,1000)'            //回覆數量
            }]
        });
    }
}
export { IndexMock };
複製代碼

2.4 封裝AJAX請求

微信小程序提供了wx.request()接口發送網絡請求，這是十分經常使用的API，封裝後咱們能夠省去不少的代碼量。數組

//不封裝直接使用咱們發送一個AJAX請求須要大量代碼
wx.request({
    url:"",
    data:"數據",
    method:"請求方式"， //有GET、POST、PUT等值
    dataType:"返回數據類型",//默認爲json字符串
    header:{
        //請求頭    
    },
    success() {
        //接口調用成功的回調函數
    },
    fail() {
        //接口調用失敗的回調函數
    },
    complete() {
        //接口調用成功/失敗都會執行的回調函數
    }
});
複製代碼

在utils文件夾中建立一個HTTP.js文件，在這裏對wx.request進行一次封裝

class HTTP {
    constructor() {}
    request(params) {
        //默認值處理,url不容許爲空
        if(!params.url) {
            console.log('url沒有傳入');
            return;
        }
        //method默認爲GET
        if(!params.method) {
            params.method='GET';
        }
        wx.request({
            url:params.url,
            method:params.method,
            data:params.data,
            header:{
                'content-type':'application/json'
            },
            success:res=> {
                let code=res.statusCode.toString().substr(0,1);
                //http請求狀態碼爲2開頭的時候判斷爲請求成功
                if(code==='2') {
                    params.success && params.success(res.data);
                }
                //狀態碼不爲2開頭如5開頭的則判斷爲請求失敗
                else {
                    params.error && params.error(res.data);
                }
            },
            fail:()=> {
                console.log('ajax error');
            }
        });
    }
};
export {HTTP};
複製代碼

如今咱們發送一個AJAX只須要傳入url、data、method爲GET時能夠省略、success方法以及error方法。仍然須要傳入不少參數，這時候能夠對每個具體的AJAX請求作一個封裝。

在models文件夾中建立首頁發送AJAX的文件indexModels.js，在這其中對首頁使用到的AJAX請求進行第二次封裝。

import {HTTP} from '../utils/HTTP.js';
import {IndexMock} from '../Mock/indexMock.js' ;
let indexMock=new IndexMock();
class IndexModels extends HTTP{
    constructor (){
        super();
    }
    //請求首頁真實數據
    getIndexList(data,success) {
        let params={
            url:'http://xxx.com/Index/List',
            //請求數據使用GET請求，method不須要設置
            data:data,
            success:success
        };
        this.request(params);
    }
    //請求首頁模擬數據
    getIndexListByMock(data,success) {
        let list=indexMock.getIndexList();
        success && success(list);
    }
}
export {IndexModels};
複製代碼

在頁面中引入indexModels.js文件後new一個類便可調用getIndexListByMock方法，此時只須要傳入data與success方法。

2.5 簡化Mock的反作用

使用Mock以後老是要切換回真實數據的，這時候在頁面中的每個AJAX請求都須要更改，太過繁瑣，這時能夠考慮引入一個全局常量，只修改這個常量便可實現Mock數據切換爲真實數據。

在最外層建立一個config.js文件，定義一個常量用於控制數據來源是Mock數據仍是真實數據。

const DEBUGGER=true;
export {DEBUGGER};
複製代碼

在indexModels.js文件中引入config.js，使用常量DEBUGGER來判斷使用哪一個來源的數據，indexModels.js改變爲：

//DEBUGGER爲true表示請求虛擬數據，爲false表示請求真實數據
import {DEBUGGER} from '../config.js';
import {HTTP} from '../utils/HTTP.js';
import {IndexMock} from '../Mock/indexMock.js' ;
let indexMock=new IndexMock();
class IndexModels extends HTTP{
    constructor (){
        super();
    }
    //請求首頁數據
    getIndexList(data,success) {
        if(!DEBUGGER) {//請求真實數據
            let params={
                url:'http://xxx.com/Index/List',
                data:data,
                success:success
            };
            this.request(params);
        }
        else {//請求虛擬數據
            let list=indexMock.getIndexList();
            success && success(list);
        }
    }
}
export {IndexModels};
複製代碼

以後須要改變數據來源爲真實數據時，只須要在config.js中將DEBUGGER改變爲false便可。

下拉刷新就是從新請求數據，上拉加載更多就是請求新的數據並插入原來的數據數組中。至此，這個頁面就已經寫完了。

3 小結

這個項目使用到了OOP的思惟，使用了多個如今前端必備的技能，是一個較爲綜合的項目。想要系統學習的小夥伴我建議先去看一下完整教程 微信小程序實戰教程，按照裏面提到的知識點順序一個個往下看，以後看完教程再講這個項目完整的實現一遍，相信你的付出必定有回報的。

4 交流

若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程