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

ゞ浴缸里的玫瑰 2024-04-17 06:29 63阅读 0赞

完整教程请查看 [微信小程序实战教程][Link 1]

微信小程序实战教程——1基础知识 [传送门][Link 2]

## 1 开始之前 ##

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

*  .vscode文件夹存放vscode编辑器的配置文件。
 *  components文件夹存放组件。
 *  images文件夹存放公共图片。
 *  Mock文件夹存放使用MockJS模拟后端接口的类。
 *  models文件夹存放封装好的请求类。
 *  utils文件夹存放公共类。

接下来我以首页为例进行分析，其他页面也都类似。

建议能力较强的小伙伴先把[项目][Link 3]下载下来，自己先尝试着根据效果图实现代码，做完之后再回来看与我的思路有哪些不同。

## 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][Link 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的思维，使用了多个现在前端必备的技能，是一个较为综合的项目。想要系统学习的小伙伴我建议先去看一下完整教程 [微信小程序实战教程][Link 1]，按照里面提到的知识点顺序一个个往下看，之后看完教程再讲这个项目完整的实现一遍，相信你的付出一定有回报的。

## 4 交流 ##

如果这篇文章帮到你了，觉得不错的话来点个Star吧。 [github.com/lizijie123][Link 3]

转载于:https://juejin.im/post/5cfb43306fb9a07eea3264a1

[Link 1]: https://juejin.im/post/5d0e14a66fb9a07ed2247759
[Link 2]: https://juejin.im/post/5cf9efaa51882526a42af5f3
[Link 3]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Flizijie123%2Fzhihu