微信小程序多页面设计和跳转

最新推荐文章于 2024-09-29 17:40:05 发布

lysall

最新推荐文章于 2024-09-29 17:40:05 发布

阅读量840

点赞数 18

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/lysall/article/details/141830281

版权

2022年夏季《移动软件开发》实验报告

姓名：刘演森学号：22020007064

姓名和学号	刘演森，22020007064
本实验属于哪门课程？	中国海洋大学22夏《移动软件开发》
实验名称	实验1：第一个微信小程序
博客地址	https://blog.csdn.net/lysall?type=blog
Github仓库地址？	XXXXXXX

一、实验目标

1、综合所学知识创建完整的前端新闻小程序项目；2、能够在开发过程中熟练掌握真机预览、调试等操作。

二、实验步骤

我们本次实验一共做了三个页面，首页、新闻详情页、个人主页。

我们首先创建空白项目，空白项目有index首页，再依次创建我们需要的新闻detial页和个人my页。

在app.json文件配置好我们所有的页面。我们配置蓝色底色白字顶部。

"pages": [
    "pages/index/index",
    "pages/my/my",
    "pages/detail/detail"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTitleText": "我的新闻网"
  },

接下来是配置我们底部导航栏tabBar。底部导航栏目一共显示两个页面-----首页、个人页面

"tabBar": {
    "color": "#000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "pages/images/index.png",
        "selectedIconPath": "pages/images/index_blue.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "pages/images/my.png",
        "selectedIconPath": "pages/images/my_blue.png",
        "text": "我的"
      }
    ]
  },

把我们需要的数据文件common.js（保存我们需要的新闻内容）保存到我们utils文件夹内。以上是我们的基本配置。

首页index

首页一共两个内容，轮播图和新闻列表。需要使用、、第三个组件。

轮播图使用数据swiperImg。

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <block wx:for="{{swiperImg}}" wx:key='swiper{{index}}'>
    <swiper-item>
      <image src="{{item.src}}"></image>
    </swiper-item>
  </block>
</swiper>

新闻列表采用了循环渲染。采用了newsList数据。

<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>

逻辑实现,使用我们本地数据common.js。

var common = require('../../utils/common.js') //引用公共JS文件
onLoad: function(options) {
    //获取新闻列表
    let list = common.getNewsList()
    //更新列表数据
    this.setData({
      newsList: list
    })
  },

最后是我们的跳转函数。当我们点击列表内容时候跳转页面。跳转页面时会传递新闻的id数据。

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

新闻页面detial

新闻页面从上到下是-标题-新闻图-新闻正文-收藏新闻按钮。使用了article数据。

<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='cancalFavorites'>❤已收藏</button>
  <button wx:else plain bind:tap="addFavorites">❤点击收藏</button>
</view>

逻辑实现,data数据包括num(当前收藏新闻数量)，article（当前渲染的新闻）。

data: {
    num:0,
    article:{
      id:'',
      title:'',      //新闻标题
      poster:"",     //新闻图片
      content:'',    //新闻正文
      add_date:''    //日期
    }
  },

收藏新闻,把新闻的id当作新闻的关键字储存在本地缓存中。

addFavorites:function(options){
  let article=this.data.article;
  wx.setStorageSync(article.id,article);
  this.setData({isAdd:true});
},

同理，取消收藏就是把新闻从本地缓存删除。

cancalFavorites:function(){
  let article=this.data.article;
  wx.removeStorageSync(article.id,article);
  this.setData({isAdd:false});
},

页面加载函数,获取从首页传递的id参数获取新闻，并判断是不是收藏的新闻。

onLoad(options) {
    let id=options.id
    var article=wx.getStorageSync(id)
    console.log(article)
    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
      })}}},

个人页面my

个人页面两个部分，登录和收藏的新闻列表。

登录部分获取当前个人的微信昵称和头像。

<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>

收藏列表部分则是和首页的列表渲染一致，这里不做过多的赘述。

一

最后是逻辑实现

获取微信用户的头像还有昵称

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;
    let num=keys.length;
    let myList=[];
    console.log(keys[0]);
    for(var i=0;i<num;i++){
      let id = keys[i];
      let obj=wx.getStorageSync(id);
      myList.push(obj);
    }
    this.setData({
      newsList:myList,
      num:num
    });
  },