微信小程序第一次作业

微信小程序——宠物家居新闻网

博客班级	https://edu.cnblogs.com/campus/zjcsxy/SE2020
作业要求	https://edu.cnblogs.com/campus/zjcsxy/SE2020/homework/11334
作业目标	1. 编写一个小程序，可以全新编写，也可以学习别人的小程序进行修改 2.熟悉git代码管理流程，将源代码上传到到github 3.在博客园班级中写一篇相应的博文
作业源代码	https://github.com/wangmj666/wxdemo.git
学号	31801121
姓名	王梦洁

项目描述

  本项目的功能主要是介绍宠物家居相关的新闻，一共需要三个页面，首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展现，可以点击图标互相切换。

  本项目只是一个非常简单的微信小程序，只有前端，没有后台，所有数据都存储于本地，追求代码的精简与可观性。

  开发工具：微信开发者工具

项目演示

  

模块分析

海报轮播

海报滚动的时间间隔为五秒，时延为0.5秒

将图片地址保存在js中，并使用wx:for属性循环轮播，可减少代码量

  
WXML的代码如下：

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" >
    <swiper-item>
      <image src="{{item}}" class="slide-image" style="width:100%;height:100%;"></image>
    </swiper-item>
  </block>
</swiper>

新闻列表

使用容器，内部使用数组循环。

并为组件添加了自定义触摸事件函数goToDetail,并且使用data-id属性携带了新闻ID编号。

  
WXML的代码如下：

<view id='news-list'>
  <view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
    <image src='{{news.poster}}'></image>
    <text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
  </view>
</view>

js的代码如下：

/**
   * 自定义函数--跳转新页面浏览新闻内容
   */
  goToDetail: function(e) {
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //获取新闻列表
    let list = common.getNewsList()
    //更新列表数据
    this.setData({
      newsList: list
    })
  }

新闻页

新闻页是用于给用户浏览新闻全文的需要用户点击首页的新闻列表，然后在新窗口中打开该页面。

用于显示收藏在本地的新闻列表。

  

WXML的代码如下：

<view class='container'>
  <view class='title'>{{article.title}}</view>
  <view class='poster'>
    <image src='{{article.poster}}' mode='widthFix'></image>
  </view>
  <view class='content'>{{article.content}}</view>
  <view class='add_date'>时间：{{article.add_date}}</view>
  <button wx:if='{{isAdd}}' plain bindtap='cancelFavorites'>♥已收藏</button>
  <button wx:else plain bindtap='addFavorites'>♥点击收藏</button>
</view>

js的代码如下：

 //添加到收藏夹
  addFavorites: function(options) {
    let article = this.data.article; //获取当前新闻
    wx.setStorageSync(article.id, article); //添加到本地缓存
    this.setData({
      isAdd: true
    }); //更新按钮显示
  },
  //取消收藏
  cancelFavorites: function() {
    let article = this.data.article; //获取当前新闻
    wx.removeStorageSync(article.id); //从本地缓存删除
    this.setData({
      isAdd: false
    }); //更新按钮显示
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //获取页面跳转来时的携带数据
    let id = options.id 

    //检查当前新闻是否在收藏夹中
    var article = wx.getStorageSync(id)
    //已存在
    if (article != '') {
      this.setData({
        article:article,
        isAdd: true
      })
    }
    //不存在
    else {
      let result = common.getNewsDetail(id)
      //获取到新闻内容
      if (result.code == '200') {
        this.setData({
          article: result.news,
          isAdd: false
        })
      }
    }
  }

登陆

未登录状态下显示登录按钮，用户点击后可以显示微信头像和昵称

登录后读取当前用户的收藏夹，展示收藏的新闻列表

收藏夹中的新闻可以直接点击查看内容。未登录状态下，收藏夹显示为空。

  
WXML的代码如下：

<!--登陆面板-->
<view id='myLogin'>
  <block wx:if='{{isLogin}}'>
    <image id='myIcon' src='{{src}}'></image>
    <text id='nickName'>{{nickName}}</text>
  </block>
  <button wx:else open-type='getUserInfo' bindgetuserinfo='getMyInfo'>
    未登录，点此登陆
  </button>
</view>
<!--我的收藏-->
<view id='myFavorites'>
  <text>我的收藏({{num}})</text>
  <!--收藏的新闻列表-->
  <view id='news-list'>
    <view class='list-item' wx:for="{{newsList}}" wx:for-item="news" wx:key="{{news.id}}">
      <image src='{{news.poster}}'></image>
      <text bindtap='goToDetail' data-id='{{news.id}}'>◇{{news.title}}——{{news.add_date}}</text>
    </view>
  </view>
</view>

js的代码如下：

 //获取微信用户信息
  getMyInfo: function (e) {
    let info = e.detail.userInfo;
    this.setData({
      isLogin: true, //确认登陆状态
      src: info.avatarUrl,   //更新图片来源
      nickName: info.nickName //更新昵称
    })
    //获取收藏列表
    this.getMyFavorites();
  },

  //获取收藏列表
  getMyFavorites: function () {
    let info = wx.getStorageInfoSync();//读取本地缓存信息
    let keys = info.keys;//获取全部key信息
    let num = keys.length;//获取收藏新闻数量

    let myList = [];
    for (var i = 0; i < num; i++) {
      let obj = wx.getStorageSync(keys[i]);
      myList.push(obj);//将新闻添加到数组中
    }
    //更新收藏列表
    this.setData({
      newsList: myList,
      num: num
    });
  },
  /**
   * 自定义函数--跳转新页面浏览新闻内容
   */
  goToDetail: function (e) {
    //获取携带的data-id数据
    let id = e.currentTarget.dataset.id;
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  }

总结

   WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。在我们眼里，它既可以是一种超文本语言，同时，它也是一个实实在在能打开的小程序。由开始标签和结束标签包裹我们的内容构成，WXML就有点类似于HTML文件了，学习起来较为简单。
   WXML的编写我认为更多的是一种排列和规划，而不是算法和语法。做一个小程序很简单，但做一个好看好用的小程序难。WXML写法还是很简单的，使用元素标签把你要写的东西包裹在里面就可以了，不需要其它的特定语法要求。而生效方式只需要把你写的东西保存，用手机打开就可以看到了。
   在一个星期的小程序学习中 我学会了制作简易的小程序。 制作过程中，我遇到了一些问题 比如没有正确使用双花括号{{}}生成动态数据、本地缓存数据的读取和删除的方法。制作小程序中一部分时，会报错，不能展现真正想要的页面。因此，我参考了书籍《微信小程序开发实战》、《微信小程序开发教程》，虽然小程序功能不是很复杂，但是用到了元件、容器、公共函数、页面布局、样式设计、生成与重置动态数据等方法，我相信打好基础，以后我可以做出更实用的小程序。