用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 新手教程 入門系列 查看內容

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

Rolan 2019-6-25 00:42

除了小程序項目中自帶的文件夾,我引入了幾個新的文件夾:.vscode文件夾存放vscode編輯器的配置文件。components文件夾存放組件。images文件夾存放公共圖片。Mock文件夾存放使用MockJS模擬后端接口的類。models文件 ...

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

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

接下來我以首頁為例進行分析,其他頁面也都類似。

建議能力較強的小伙伴先把 項目 下載下來,自己先嘗試著根據效果圖實現代碼,做完之后再回來看與我的思路有哪些不同。

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前綴監聽并阻止事件冒泡。完整代碼如下。

<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()還是由父組件執行,這才是我們最需要考慮的問題,我的想法是子組件只控制樣式的變化,不執行業務邏輯,業務邏輯我一律交給父組件來做。

下面代碼參考 微信小程序實戰教程——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即可。至此,這個頁面就已經寫完了。

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 再見骷顱王 來自: 掘金
梦幻单人赚钱方法 比较赚钱的网络游戏 下载打麻将免费版 免费东北麻将游戏 新浪澳盘 血流成河单机麻将下载 白姐今晚开码 四川血战到底麻将 心悦双辽麻将手机版 全民捕鱼红包版微信 下载欢乐真人麻将