微信小程序入门级教程-03

前言

  上篇教程，我们介绍了如何写最基本的一个小页面和基础的交互事件。在本文中呢，我们就暂时不教其余东西了，就针对于上篇文章中出现的一些冗余代码，优化优化，可不要因为是优化就松懈，对于代码的优化和结构优化，其实是非常有必要，并且十分重要的。

目录

https://www.jianshu.com/p/9c9b555b52e8

---

  首先贴出项目结构：

项目结构

问题一：Javascript包含假数据导致文件体积过大且不易维护

talk.js

Page({
    data: {
        banners: [],
        articles: []
    },
    onLoad: function (options) {
        // 模拟获取后台数据
        let [bannerList,articleList] = [[
                "/images/banner/banner01.jpg",
                "/images/banner/banner02.jpg",
                "/images/banner/banner03.jpg",
                "/images/banner/banner04.jpg",
                "/images/banner/banner05.jpg"
            ],[{
                id: 1,
                level: 1,
                avatar: "/images/avatar/avatar-04.jpg",
                name: "游子女°",
                thumbnail: "/images/thumbnail/thumbnail04.jpg",
                content: "《寒战》是银都机构有限公司、万诱引力丁有限公司、安乐影片有限公司" +
                "联合出品的动作电影，由梁乐民、陆剑青执导，郭富城、梁家辉、杨采妮领衔主演。该" +
                "片讲述了在新时代背景下，一辆价值不菲的警察冲锋车被劫持，随之整个香港都陷入到" +
                "安全危机，警匪之间展开高智商较量。",
                views: 637,
                likes: 436,
                date: "2018/03/12 14:28:38",
                canLike: true
            },{
                id: 2,
                level: 2,
                avatar: "/images/avatar/avatar-05.jpg",
                name: "笑如歌",
                thumbnail: "/images/thumbnail/thumbnail05.jpg",
                content: "《神偷奶爸3》（Despicable Me 3）是由环球影业及照明娱乐公司联合制作，" +
                "凯尔·巴尔达、皮艾尔·柯芬、埃里克·吉隆联合执导，史蒂夫·卡瑞尔、克里斯汀·韦格、崔·帕克" +
                "等主要配音的3D动画电影。",
                views: 862,
                likes: 639,
                date: "2018/03/12 14:28:38",
                canLike: true
            }]
        ];
        this.setData({
            banners: bannerList,
            articles: articleList
        });
    }
});

  解析：因为模拟假数据都放在js文件中，而且数据不多，就让整个js文件表现的比较混乱了，这肯定不是我们想要的，但是我们应该怎么解决这个问题呢？请往下看：

  解决方案：因为bannerList和articleList都是假数据，代表着两个数组对象。所以我们这里就在talk目录下创建一个专门存放talk相关数据的文件。如下图所示：

talk结构图

创建好了文件之后：将talk.js内的数据文件全部黏贴进talk-data.js，如下所示：

talk-data.js

let tolkData = {
  bannerList: [
    "/images/banner/banner01.jpg",
    "/images/banner/banner02.jpg",
    "/images/banner/banner03.jpg",
    "/images/banner/banner04.jpg",
    "/images/banner/banner05.jpg"
  ],
  articleList: [{
      id: 1,
      level: 1,
      avatar: "/images/avatar/avatar-04.jpg",
      name: "游子女°",
      thumbnail: "/images/thumbnail/thumbnail04.jpg",
      content: "《寒战》是银都机构有限公司、万诱引力丁有限公司、安乐影片有限公司" +
      "联合出品的动作电影，由梁乐民、陆剑青执导，郭富城、梁家辉、杨采妮领衔主演。该" +
      "片讲述了在新时代背景下，一辆价值不菲的警察冲锋车被劫持，随之整个香港都陷入到" +
      "安全危机，警匪之间展开高智商较量。",
      views: 637,
      likes: 436,
      date: "2018/03/12 14:28:38",
      canLike: true
    }, {
      id: 2,
      level: 2,
      avatar: "/images/avatar/avatar-05.jpg",
      name: "笑如歌",
      thumbnail: "/images/thumbnail/thumbnail05.jpg",
      content: "《神偷奶爸3》（Despicable Me 3）是由环球影业及照明娱乐公司联合制作，" +
      "凯尔·巴尔达、皮艾尔·柯芬、埃里克·吉隆联合执导，史蒂夫·卡瑞尔、克里斯汀·韦格、崔·帕克" +
      "等主要配音的3D动画电影。",
      views: 862,
      likes: 639,
      date: "2018/03/12 14:28:38",
      canLike: true
    }, {
      id: 3,
      level: 3,
      avatar: "/images/avatar/avatar-01.jpg",
      name: "倾国倾城倾人心",
      thumbnail: "/images/thumbnail/thumbnail01.jpg",
      content: "运用摄影机、镜头、胶片把客观事物及其运动记录下来的过程。" +
      "电影摄影基于视觉暂留原理，通过摄影机内部的间歇机构将连续的运动分解为" +
      "一系列静止画面，再通过放映机的运转将这一系列静止影像连续呈现出来，从" +
      "而再现运动的幻觉。",
      views: 228,
      likes: 68,
      date: "2018/03/12 14:28:38",
      canLike: true
    }, {
      id: 4,
      level: 4,
      avatar: "/images/avatar/avatar-02.jpg",
      name: "安静苦笑",
      thumbnail: "/images/thumbnail/thumbnail02.jpg",
      content: "开国大典，是指1949年10月1日15：00在北京为中华人民共和国中央" +
      "人民政府成立而举行的仪式，直到21：00才结束，是中华人民共和国成立的标志。",
      views: 173,
      likes: 126,
      date: "2018/03/12 14:28:38",
      canLike: true
    }, {
      id: 5,
      level: 5,
      avatar: "/images/avatar/avatar-03.jpg",
      name: "十寒九冬薄荷心已凉",
      thumbnail: "/images/thumbnail/thumbnail03.jpg",
      content: "《冰雪奇缘》（Frozen）是2013年迪士尼出品3D的动画电影，由克里" +
      "斯·巴克、珍妮弗·李执导，克里斯汀·贝尔、伊迪娜·门泽尔等参与主要配音。" +
      "该片于2013年11月27日在美国上映。该片改编自安徒生童话《白雪皇后》，讲述小" +
      "国阿伦黛尔因一个魔咒永远地被冰天雪地覆盖，为了寻回夏天，安娜公主和山民克里" +
      "斯托夫以及他的驯鹿搭档组队出发，展开一段拯救王国的历险。2014年，该片获得第" +
      "86届美国奥斯卡金像奖最佳动画长片。",
      views: 822,
      likes: 352,
      date: "2018/03/12 14:28:38",
      canLike: true
    }, {
      id: 6,
      level: 6,
      avatar: "/images/avatar/avatar-06.jpg",
      name: "柚苏°",
      thumbnail: "/images/thumbnail/thumbnail06.jpg",
      content: "摄影一词是源于希腊语φῶς phos（光线）和 γραφι graphis（绘画、绘图）" +
      "或γραφή graphê，两字一起的意思是”以光线绘图”。摄影是指使用某种专门设备进行影像" +
      "记录的过程，一般我们使用机械照相机或者数码照相机进行摄影。有时摄影也会被称为照相，也就是" +
      "通过物体所反射的光线使感光介质曝光的过程。有人说过的一句精辟的语言：摄影家的能力是把日常" +
      "生活中稍纵即逝的平凡事物转化为不朽的视觉图像。",
      views: 732,
      likes: 103,
      date: "2018/03/12 14:28:38",
      canLike: true
  }]
}
module.exports = tolkData;

切记：声明了tolkData存放数据，最后一定要使用module.exports暴露tolkData，否则talk.js中无法引入改文件。

这一步完成了之后，咱们再来看看talk.js代码，是不是干净多了。
talk.js

let tolkData = require("talk-data/talk-data");
Page({
    data: {},
    onLoad: function (options) {
      // 模拟获取后台数据
      this.setData(tolkData);
    }
});

问题二：WXML没有使用模块化开发

talk.wxml

<scroll-view>
    <view class="article" wx:for="{{articles}}">
        <view class="author-data">
            <image class="avatar" src="{{item.avatar}}"></image>
            <text class="nickname">{{item.name}}</text>
            <i class="iconfont icon-v{{item.level}} level"></i>
        </view>
        <image class="thumbnail" src="{{item.thumbnail}}"></image>
        <text class="introduce">{{item.content}}</text>
        <view class="operate">
            <i class="iconfont icon-liulan operate-icon"></i>
            <text class="perate-count">{{item.views}}</text>
            <i class="iconfont icon-msnui-love operate-icon" data-id="{{item.id}}"
               style="color: {{item.canLike ? '#aaa' : 'pink'}};" bindtap="likeThis"></i>
            <text class="perate-count">{{item.likes}}</text>
            <text class="perate-count create-date">{{item.date}}</text>
        </view>
    </view>
</scroll-view>

  问题描述：此处，<view class="article" wx:for="{{articles}}">这里是一篇文章的开始，一篇文章当然可以当成一个独立的模块，以后在其他页面中可以复用，如果不做成模块化，以后页面中再使用类似代码，只能挨着挨着黏贴了，导致代码冗余。接下来，我们就来优化这一部分。

1. 首先我们在talk目录下创建一个模板目录，如下所示：

模板效果图

  接下来开始讲talk的冗余代码黏贴进模板文件talk-article-template.wxml，并且将talk.wxss中属于文章的部分样式也全部剪切进talk-article-template.wxss：如下所示：

talk-article-template.wxml

<template name="talkArticleTemplate">
    <view class="article">
        <view class="author-data">
            <image class="avatar" src="{{avatar}}"></image>
            <text class="nickname">{{name}}</text>
            <i class="iconfont icon-v{{level}} level"></i>
        </view>
        <image class="thumbnail" src="{{thumbnail}}"></image>
        <text class="introduce">{{content}}</text>
        <view class="operate">
            <i class="iconfont icon-liulan operate-icon"></i>
            <text class="perate-count">{{views}}</text>
            <i class="iconfont icon-msnui-love operate-icon" data-id="{{id}}"
               style="color: {{canLike ? '#aaa' : 'pink'}};" catchtap="likeThis"></i>
            <text class="perate-count">{{likes}}</text>
            <text class="perate-count create-date">{{date}}</text>
        </view>
    </view>
</template>

接下来咱们就来看看优化后的talk.wxml文件
talk.wxml

<import src="talk-article-template/talk-article-template.wxml" />
<swiper indicator-dots="true" autoplay="true">
    <swiper-item wx:for="{{bannerList}}">
        <image src="{{item}}"></image>
    </swiper-item>
</swiper>
<scroll-view>
    <block wx:for="{{articleList}}" wx:for-item="item" wx:for-index="index">
        <template is="talkArticleTemplate" data="{{...item}}"></template>
    </block>
</scroll-view>

解析：
  以template标签来表示内部代码为模板代码，并且指定一个name作为标识，然后在引用页面使用<import src="talk-article-template/talk-article-template.wxml" />来将模板页面导入，并且在合适的文档结构处引入模板代码，以template标签引入，且用is指定模板代码，如<template is="talkArticleTemplate" data="{{...item}}"></template>，有细心的朋友肯定发现了该标签内有一个data={{...item}},这是什么意思呢？如果知道ES6的朋友肯定知道...item代表着什么，简单来说，在item前面加了三个点，就可以理解为在模板文件talk-article-template.wxml内部的数据就不必写成item.name，item.id，item.avatar，而是直接写成name，id，avatar。

如下所示：在talk.wxss中导入talk-article-template.wxss
talk.wxss

@import "talk-article-template/talk-article-template.wxss";
swiper{
    width: 100%;
    height: 360rpx;
}
swiper image{
    width: 100%;
    height: 100%;
}

后言

  最后，关于优化js数据文件和模板化开发优化就到这里，后续若有其余的优化，我将继续编写成文，供大家学习。

项目源码：demigod-liu / douban-movies

说明

原创作品，禁止转载和伪原创，违者必究！