微信小程序实战教程——2实战之模拟知乎

标签:程序,实战,教程,模拟 发布时间:2019年10月18日 点击5

除了小程序项目中自带的文件夹,我引入了几个新的文件夹:

  • .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=this8693perties.index;
      this.triggerEvent('clickItems',{index});
    },
    //打开题目详情
    clickMore() {
      let index=this8693perties.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://xxx3564/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://xxx3564/Index/List',
                data:data,
                success:success
            };
            this.request(params);
        }
        else {//请求假造数据
            let list=indexMock.getIndexList();
            success && success(list);
        }
    }
}
export {IndexModels};
复制代码

之后必要改变数据来源为真实数据时,只必要在config.js中将DEBUGGER改变为false即可。至此昆明公司注册,这个页面就已经写完了。

手机网站建设