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

姓名：王梓懿 学号：20040031047
姓名和学号？ 王梓懿，20040031047
本实验属于哪门课程？ 中国海洋大学22夏《移动软件开发》
实验名称？ 实验1：第一个微信小程序
博客地址？ https://adventurer-w.com/2022/08/17/WeChat1/
Github仓库地址？ https://github.com/adventurer-w/OUC-WeChat2022

（备注：将实验报告发布在博客、代码公开至 github 是 加分项，不是必须做的）

一、实验目标

1、学习使用快速启动模板创建小程序的方法；

2、学习不使用模板手动创建小程序的方法。

二、实验步骤

1 自动生成小程序

创建项目

测试项目

2手动创建小程序

页面配置

  • 将app.json 文件内 pages 属性中的“”pages/logs/1ogs”删除，并州除上一行末尾的逗号
  • 删除 utils 文件夹及其内部所有内容
  • 删除 pages 文件夹下的1ogs 目录及其内部所有内容
  • 删除 index. wxml 和index. wxss 中的全部代码
  • 删除 index.js 中的全部代码，并且输人关键词”page”找到第二个选项按回车键让其自动补全
  • 删除 app. wxss 中的全部代码。
  • 删除app.js 中的全部代码，并且输人关键词“app’找到第一个选项按回车键让其自动补全。

视图设置

导航栏

页面设计：wxml+wxss

几个模块默认挤在一起了，在css中添加边距 margin-top = 100rpx

逻辑实现：JS

三、程序运行结果

四、问题总结与体会

问题1：几个模块默认挤在一起了

修改CSS代码，添加margin属性

问题2：无法获取用户信息

上网寻找解决方法，改为下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
getMyInfo:function(e){
    wx/wx.getUserProfile({
      desc: 'desc',
      success: (res) => {
        console.log(res);
        let info = res.userInfo
        this.setData({
          src:info.avatarUrl,
          name:info.nickName
        })
      },
      fail: (res) => {},
      complete: (res) => {},
    })
  },

总结

第一次接触小程序开发，希望能借此机会把HTML+CSS+JS学好。

实验二

一、实验目标

1、掌握服务器域名配置和临时服务器部署

2、掌握wx.request接口的用法。

二、实验步骤

1 准备工作

1.1 API密钥申请

1.2 服务器域名配置

值得一提的是，后续获取LocationID时，还需要添加新的域名

2 创建项目、删除修改文件、添加图片文件

3 视觉设计

WXML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<view class="container">

  <view class = "container">
    <!--区域1：地区选择器-->
    <picker mode = 'region' bindchange = 'regionChange'>
      <view>{{region}}</view>
    </picker>

    <!--区域2：单行天气信息-->
    <text>{{now.temp}}℃{{now.text}}</text>
  
    <!--区域3：天气图标-->
    <view class = "container">
      <image src = '/images/weather_icon_{{pic}}/{{now.icon}}.png' mode='widthFix' bindtap="showimg"></image>
    </view>

    <!--区域4：多行天气信息-->
    <view class="detail">
      <view class="bar">
        <view class = 'box'>湿度</view>
        <view class = 'box'>气压</view>
        <view class = 'box'>能见度</view>
      </view>

      <view class="bar">
        <view class = 'box'>{{now.humidity}} %</view>
        <view class = 'box'>{{now.pressure}} hPa</view>
        <view class = 'box'>{{now.vis}} km</view>
      </view>

      <view class="bar">
        <view class = 'box'>风向</view>
        <view class = 'box'>风速</view>
        <view class = 'box'>风力</view>
      </view>

      <view class="bar">
        <view class = 'box'>{{now.windDir}} </view>
        <view class = 'box'>{{now.windSpeed}} km/h</view>
        <view class = 'box'>{{now.windScale}} 级</view>
      </view>

    </view>
  </view>

</view>

WXSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.container{
  /* height: 80rpx; */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;
  justify-content: space-around;
}

text{
  font-size: 80rpx;
  color: #3C5F81;
}

.detail{
  width: 100%;
  display: flex;
  flex-direction: column;
}

.bar{
  display: flex;
  flex-direction: row;
  margin: 20rpx 0;
}

.box{
  width: 33.33%;
  text-align: center;
}

4 逻辑实现

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
Page({

  /**
   * 页面的初始数据
   */
  data: {
    region:['山东省','青岛市','崂山区'],
    now:{
      cloud: "0",
      dew: "0",
      feelsLike: "0",
      humidity: "0",
      icon: "999",
      obsTime: "2022-08-17T17:56+08:00",
      precip: "0.0",
      pressure: "0",
      temp: "0",
      text: "多云",
      vis: "0",
      wind360: "0",
      windDir: "未知",
      windScale: "0",
      windSpeed: "0",
    },
    pic:'s1_bw'
  },

  // 更新地区
  regionChange:function(e){
    this.setData({region:e.detail.value})
    // this.getWeather()
    this.getWeather()
  },

  showimg(){
    console.log(this.data.pic)
    if(this.data.pic=='s1_bw') this.setData({pic:'s1_color'})
    else if(this.data.pic=='s1_color') this.setData({pic:'s2'})
    else this.setData({pic:'s1_bw'})
  },

// 获取天气
  getWeather: function(){
    var that = this;
    wx.request({
      url: 'https://geoapi.qweather.com/v2/city/lookup',
      data:{
        location:that.data.region[2],
        key:'b90d492124f74bf0a2e2eb1a88cdfc66'
      },
      success:function(res){
        console.log(res.data);
        wx.request({
          url: 'https://devapi.qweather.com/v7/weather/now',
          data:{
            location:res.data.location[0].id,
            key:'b90d492124f74bf0a2e2eb1a88cdfc66'
          },
          // 成功！
          success:function(ress){
            console.log(ress.data);
            that.setData({now:ress.data.now})
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getWeather();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  }
})

三、程序运行结果

因为同样的天气有三种素材，我实现了点击图片，切换图片样式的功能

1
2
3
4
<image src = '/images/weather_icon_{{pic}}/{{now.icon}}.png' 
       mode='widthFix' 
       bindtap="showimg">
</image>
1
2
3
4
5
6
showimg(){
  console.log(this.data.pic)
  if(this.data.pic=='s1_bw') this.setData({pic:'s1_color'})
  else if(this.data.pic=='s1_color') this.setData({pic:'s2'})
  else this.setData({pic:'s1_bw'})
},

四、问题总结与体会

问题1：无法直接通过地区名字获取天气信息

最新的接口仅支持用LocationID或经纬坐标来获取天气，所以需要通过地区名找到LocationID。我调用了和风天气的GeoAPI，可以通过地区名称返回LocationID，并支持模糊搜索。

1
2
3
4
5
6
wx.request({
     url: 'https://geoapi.qweather.com/v2/city/lookup',
     data:{
       location:that.data.region[2],
       key:'b90d492124f74bf0a2e2eb1a88cdfc66'
     },

问题2：实验文档中API返回信息是几年前的版本

查官方文档，再将代码的相应部分进行修改

总结

做了一个有点实用性的小程序，争取再接再厉。

实验三

一、实验目标

1、掌握视频列表的切换方法

2、掌握视频自动播放的方法

3、掌握视频随机颜色弹幕效果

二、实验步骤

创建项目并删除、修改文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面；其他页面名称可以自定义。本项目只需要保留首页(index)即可。
具体操作如下：
(1)将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的
逗号。
(2)按快捷键Ctrl+S保存当前修改。

(3)删除utils文件夹及其内部所有内容。
(4)删除pages文件夹下的logs目录及其内部所有内容。
(5)删除index.wxml和index.wxss中的全部代码。
(6)删除index..js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。

(5)删除app.wxss中的全部代码。
(6)删除app.js中的全部代码，并且输人关键词app找到第一个选项按回车键让其自动补全函数。

视觉设计

页面上有三个区域

  • 区域1：视频播放器，用于播放指定的视频；

  • 区域2：弹幕发送区域，包含文本输入框和发送按钮；

  • 区域3：视频列表，垂直排列多个视频标题，点击不同的标题播放对应的视频内容。

    区域1需要使用video组件来实现一个视频播放器。

    区域2需要使用viw组件实现一个单行区域，包括文本输入框和发送按钮。

    区域3需要使用viw组件实现一个可扩展的多行区域，每行包含一个播放图标和一个视频标题文本。当前先设计第一行效果，后续使用wx:for属性循环添加全部内容。

    代码和注释如下：

WXML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 区域1 -->
<video id="myVideo"controls src='{{src}}'controls enable - danmu-btn></video>

<!-- 区域2 -->
<view class="danmuArea">
  <input type='text' placeholder='请输入弹幕内容' bindinput="getDanmu"></input>
  <button bindtap='sendDanmu'>发送弹幕</button>
</view>

<!-- 区域3 -->
<view class = "videoList">
  <view class="videoBar">
    <image src = '/play.png'></image>
    <text>一个视频</text>
  </view>
</view>

WXSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
video{
  width: 100%;
}

.danmuArea{
  display: flex;
  flex-direction: row;
}

input{
  border: 1rpx solid #937938;
  flex-grow: 1;
  height: 100rpx;  
}

button {
  color: white;
  background-color: #987938;

  display:flex;
  align-items: center;
  justify-content: center;
}

.videoBar{
  width: 95%;
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid #987938;
  margin: 10rpx;
}

image{
  width: 70rpx;
  height: 70rpx;
  margin: 20rpx;
}
text{
  font-size: 45rpx;
  color: #937938;
  margin: 20rpx;
  flex-grow: 1;
}

效果

逻辑实现

  1. 在view class=”videoBar”中添加 wx:for属性，改写为循环展示列表

  2. 在onLoad中创建视频上下文，用于控制视频的播放和停止

  3. 添加自定义函数playVideo()

  4. 对＜video>组件添加enable-danmu 和danmu-btn 属性，用于允
    许发送弹幕和显示“发送弹幕”按钮。

  5. 为文本输人框追加bindinput 属性，用于获取弹幕文本内容；为按钮追加
    bindtap 属性，用于触发点击事件。在js文件中添加getDanmu()和sendDanmu()函数

  6. 为使弹幕有不同颜色，在JS文件中追加自定义函数 getRandomColor()。将其在原先需要录人color 属性的地方调用即可实现彩色弹幕效果。

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
function getRandomColor(){
  let rgb = []
  for(let i=0;i<3;i++){
    let color = Math.floor(Math.random()*256).toString(16)
    color = color.length==1?'0'+color:color
    rgb.push(color)
  }
  return '#'+rgb.join('')
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    danmuTxt:'',
    list: [{
      id: '1001',
      title: '杨国宜先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/6/CB/D1/C2DF3FC847F4CE2ABB67034C595_025F0082_ABD7AE2.mp4?e=.mp4'
    },
    {
      id: '1002',
      title: '唐成伦先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/E/31/EB/2F368A265E6C842BB6A63EE5F97_425ABEDD_7167F22.mp4?e=.mp4'
    },
    {
      id: '1003',
      title: '倪光明先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/9/DC/3B/35687573BA2145023FDAEBAFE67_AAD8D222_925F3FF.mp4?e=.mp4'
    },
    {
      id: '1004',
      title: '吴仪兴先生口述校史实录',
      videoUrl: 'http://arch.ahnu.edu.cn/__local/5/DA/BD/7A27865731CF2B096E90B522005_A29CB142_6525BCF.mp4?e=.mp4'
    }
  ]
  },

  playVideo:function(e){
    this.videoCtx.stop()
    this.setData({
      src:e.currentTarget.dataset.url
    })
    this.videoCtx.play()
  },

  getDanmu:function (e) {
    this.setData({
      danmuTxt:e.detail.value
    })
  },

  sendDanmu: function () {
    let text = this.data.danmuTxt
    this.videoCtx.sendDanmu({
      text:text,
      color:getRandomColor()
    })
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.videoCtx = wx.createVideoContext('myVideo')
  },
})

三、程序运行结果

四、问题总结与体会

问题1：”发送弹幕”按钮文本无法居中

在wxss中为按钮添加align-items，justify-contents属性

1
2
3
4
5
6
7
8
button {
  color: white;
  background-color: #987938;

  display:flex;
  align-items: center;
  justify-content: center;
}

问题2：wx:key=’video‘报错warning

原因：微信小程序开发工具升级后，这个旧用法会warning

解决方法：根据官方文档进行修改，将原来的替换为index。

总结

这次实验，我掌握了视频列表的切换方法，视频自动播放的方法，学会了视频随机颜色弹幕效果。我也学会了用官方文档解决遇到的问题。希望今后能再接再厉。

实验四

一、实验目标

本项目一共需要3个页面，即首页、新闻页和个人中心页，其中首页和个人中心页需要以tabBar的形式展示，可以点击tab图标互相切换。

首页功能需求

首页功能需求如下：（1）首页需要包含幻灯片播放效果和新闻列表；（2）幻灯片至少要有3幅图片自动播放；（3）点击新闻列表可以打开新闻全文。

新闻页功能需求

新闻页功能需求如下：（1）阅读新闻全文的页面需要显示新闻标题、图片、正文和日期；（2）允许 点击按钮将当前阅读的新闻添加到本地收藏夹中；（3）已经收藏过的新闻也可以点击按钮取消收藏。

个人中心页功能需求

个人中心页功能需求如下：（1）未登录状态下显示登录按钮，用户点击以后可以显示微信头像和昵称。（2）登录后读取当前用户的收藏夹，展示收藏的新闻列表。（3）收藏夹中的新闻可以直接点击查看内容。（4）未登录状态下收藏夹显示为空。

二、实验步骤

1 创建项目并删除、修改文件

项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。一般来说首页默认命名为index,表示小程序运行的第一个页面；其他页面名称可以自定义。本项目只需要保留首页(index)即可。
具体操作如下：
(1)将app.json文件内pages属性中的“pages/logs/logs”删除，并删除上一行末尾的
逗号。
(2)按快捷键Ctrl+S保存当前修改。

(3)删除utils文件夹及其内部所有内容。
(4)删除pages文件夹下的logs目录及其内部所有内容。
(5)删除index.wxml和index.wxss中的全部代码。
(6)删除index..js中的全部代码，并且输入关键词page找到第二个选项按回车键让其自动补全函数。

(5)删除app.wxss中的全部代码。
(6)删除app.js中的全部代码，并且输人关键词app找到第一个选项按回车键让其自动补全函数。

2 创建其他文件

本节创建其他自定义文件，本项目还需要创建以下两个文件夹。

  • ·images:用于存放图片素材；
  • ·utils:用于存放公共JS文件。
  • 文件夹名称由开发者自定义，创建方式与pages文件夹创建方式完全相同。

本项目将在tabBar栏中用到两组图标文件，右击目录结构中的images文件夹，选择“硬盘打开”命令，将图片复制、粘贴进去。
右击utils文件夹，选择“新建”|JS命令，输入“common”按回车键即创建公共函数common.js。

结果如下图所示：

3 导航栏和tabBar设计

小程序默认导航栏是黑底白字的效果，可以通过在app.json中对window属性进行重新配置来自定义导航栏效果。

在app.json中追加tarBar的相关属性代码。效果如下。

4 首页设计

首页主要包含两部分内容，即幻灯片滚动和新闻列表。使用如下组件。
·幻灯片：swiper组件；
·新闻列表：view容器，内部使用数组循环。

效果如下：

5 个人中心设计

个人中心页主要包含两个版块，即登录面板和“我的收藏”。登录面板用于显示用户的微信头像和呢称，“我的收藏”用于显示收藏在本地的新闻列表。

计划使用view组件进行整体布局，对自定义的id名称解释如下。
· myLogin:登录面板；
· myIcon:微信头像图片；
nickName:微信昵称；
·myFavorites:我的收藏。

由于新闻列表的样式与首页完全相同，没有必要重复样式代码，否则会造成冗余，可以将index.wxss中新闻列表样式的相关代码挪到app.wxss中公共使用。

6 新闻页设计

新闻页是用于给用户浏览新闻全文的，需要用户点击首页的新闻列表，然后在新窗口中打开该页面。新闻页包括新闻标题、新闻图片、新闻正文和新闻日期。

使用view组件进行整体布局，对自定义的class名称解释如下。
· container:整体容器；
· title:新闻标题区域；
· poster:新闻图片区域；
· content:新闻正文区域：
add date:新闻日期区域。

效果如下图

7 公共逻辑

正常来说数据应该由网站群管理平台提供新闻接口，由于隐私安全、开发者条件限制等一系列问题，这里采用模拟数据进行代替。有条件的开发者可以使用第三方免费或付费新闻接口（例如聚合数据等），或自行搭建服务器提供接口。

假设已经获取到了数据，将其放在公共JS文件(utils/common.js)中。在common,js中添加自定义函数getNewsList和getNewsDetail.,分别用于获取新闻列表信息和指定D的新闻正文内容。直接使用高老师提供的代码即可。

8 首页逻辑

首页主要有两个功能需要实现，一是展示新闻列表，二是点击新闻标题可以跳转对应的内容页面进行浏览。

  • 新闻列表展示使用了,因此需要在页面JS文件的onLoad函数中获取新闻列表，并更新到data属性的newsList参数中。

  • 若希望用户点击新闻标题即可实现跳转，需要首先为新闻列表项目添加点击事件。为text组件添加了自定义触摸事件函数goToDetail，并且使用data-id属性携带了新闻ID编号。然后在对应的detail.js文件中添加goToDetail函数的内容。此时已经可以点击跳转到detail页面，并且成功携带了新闻ID数据，但是仍需在detail页面进行携带数据的接收处理才可显示正确的新闻内容。

代码会在本章末展示。

9 新闻页逻辑

新闻页主要有两个功能需要实现，一是显示对应新闻，二是可以添加/取消新闻收藏。

  • 在首页逻辑中已经实现了页面跳转并携带了新闻编号，现在需要在新闻页接收编号，并查询对应的新闻内容。

  • 添加/取消新闻收藏修改detail..wxml代码，追加button组件作为添加/取消收藏新闻的按钮，并使用wx:if和wx:else属性使其每次只存在一个。

代码会在本章末展示。

10 个人中心逻辑页

个人中心页主要有3个功能需要实现，一是获取微信用户信息；二是获取收藏列表；三是浏览收藏的新闻。

  • 修改my.wxml代码，追加button组件作为登录按钮，并且使用wx:if和wx:else属性让未登录时只显示按钮，登录后只显示头像和昵称。
  • 修改my.wxml代码，将“我的收藏”后面的数字更改为动态数据效果。在detail..js文件中追加getMyFavorites函数，用于展示真正的新闻收藏列表。修改my.js中的getMyInfo函数，为其追加关于getMyFavorites函数的调用。考虑到登录成功后用户还可以手动更改新闻的收藏状态，因此修改my.js中的onShow函数，判断如果是登录状态就刷新一下收藏列表。
  • 点击浏览已经收藏的新闻和首页的点击跳转新闻内容功能类似，改my.wxml收藏列表的代码，然后在对应的my.js文件中添加goToDetail函数的内容。

代码会在本章末展示。

11 清除临时数据

最后需要清除或注释掉一开始为了测试样式录入的临时数据，以免影响整体逻辑效果。
需要清除的数据如下。
· 首页(index.js):data中的临时新闻列表数据(newsList);
· 新闻页(detail..js):data中的临时新闻数据(article);
· 个人中心页(my.js):data中的临时收藏夹新闻数据(newsList)、临时昵称(nickName)以及临时头像路径地址(src).

代码展示

app.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
{
  "pages": [
    "pages/index/index",
    "pages/ceshi/ceshi",
    "pages/my/my",
    
    "pages/detail/detail"
    
  ],
  "window": {
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的新闻网",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/index.png",
        "selectedIconPath": "images/index_blue.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "images/my.png",
        "selectedIconPath": "images/my_blue.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 列表 */
.news-list{
  min-height: 600rpx;
  padding: 15rpx;
}
.news-item{
  display: flex;
  flex-direction: row;
  border-bottom:1rpx solid black;
}
.news-item image{
  height: 150rpx;
  width: 230rpx;
  margin: 10rpx;
}
.news-item text{
  width:100%;
  line-height: 60rpx;
  font-size:40rpx;
}

index.wxml代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--轮播图-->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
  <view wx:for="{{swiperImg}}" wx:key="swiperindex">
    <swiper-item>
      <image src="{{item.src}}"></image>
    </swiper-item>
  </view>
</swiper>

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

index.wxss代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
swiper{
  height: 400rpx;
  width:100%;
}
swiper image{
  height: 100%;
  width:100%;
}
swiper{
  height: 400rpx;
  width:100%;
}
swiper image{
  height: 100%;
  width:100%;
}

index.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var common = require('../../utils/common.js')

Page({

  data: {
    // 轮播图地址
    swiperImg: [
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage1.jpg'},
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage2.jpg'},
      {src: 'https://gaopursuit.oss-cn-beijing.aliyuncs.com/2022/newsimage3.jpg'}
    ],
    newsList:[]
  },
  goToDetail:function(e){
    //获取新闻id的数据
    let id = e.currentTarget.dataset.id

    //跳转事件
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })

  },

  onLoad: function (options) {
    let list = common.getNewList()
    this.setData({
      newsList:list
    })
  },
})

my.wxml代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 登陆 -->
<view class="myLogin">
  <block wx:if="{{isLogin}}">
    <image src="{{src}}"></image>
    <text>{{nickName}}</text>
  </block>
  <button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击登录</button>
</view>
<!-- 收藏 -->
<view class="myFavorite"> 
  <text>我的收藏（{{number}}）</text>
  <view class="news-list">
    <view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
      <image src="{{item.poster}}"></image>
      <text bindtap = 'goToDetail' data-id="{{item.id}}">{{item.title}}————{{item.add_date}}</text>
    </view>
  </view>
</view>

my.wxss代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 登陆页面 */
.myLogin{
  height: 400rpx;
  background-color: #328EEB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.myLogin image{
  height: 200rpx;
  width:200rpx;
  border-radius: 50%;
}
.myLogin text{
  color: white;
}
/* 收藏列表 */
.myFavorite{
  padding: 20rpx;
}

my.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Page({

  data: {
    number:0,
    nickName:"未登录",
    src:"/images/index1.png",
    newsList: []
  },

  getMyInfo:function(){
    console.log('0'),
    wx.getUserProfile({
      desc: '展示用户信息', 
      success: (res) => {
        console.log(res)
        this.setData({
          src:res.userInfo.avatarUrl,
          nickName:res.userInfo.nickName,
          isLogin:true
        })
      }
    })

    
    this.getMyFavorites()
  },
  //更新number
  getMyFavorites:function(){
    let info = wx.getStorageInfoSync()  
    let keys = info.keys   
    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,
      number:num
    })
  },
  goToDetail: function (e) {
    //id的数据
    let id = e.currentTarget.dataset.id
    //console.log(e)
    //跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },


  onShow: function () {
    if( this.data.isLogin ){
      this.getMyFavorites()
    }
  },
})

detail.wxml代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 登陆 -->
<view class="myLogin">
  <block wx:if="{{isLogin}}">
    <image src="{{src}}"></image>
    <text>{{nickName}}</text>
  </block>
  <button wx:else open-type="getUserInfo" bindgetuserinfo="getMyInfo">点击登录</button>
</view>
<!-- 收藏 -->
<view class="myFavorite"> 
  <text>我的收藏（{{number}}）</text>
  <view class="news-list">
    <view class="news-item" wx:for="{{newsList}}" wx:key="{{item.id}}">
      <image src="{{item.poster}}"></image>
      <text bindtap = 'goToDetail' data-id="{{item.id}}">{{item.title}}————{{item.add_date}}</text>
    </view>
  </view>
</view>

detail.wxss代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 登陆 */
.myLogin{
  height: 400rpx;
  background-color: #328EEB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.myLogin image{
  height: 200rpx;
  width:200rpx;
  border-radius: 50%;
}
.myLogin text{
  color: white;
}
/* 收藏 */
.myFavorite{
  padding: 20rpx;
}

detail.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var common = require('../../utils/common.js')

Page({

  data: {
    article: {
      id: '',
      title: '',
      poster: '',
      add_date: '',
      content: ''
    },
    isAdd:false
  },
  //添加收藏
  addFavorites:function(){
    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
    console.log(id)

    var newarticle = wx.getStorageSync(id)

    if( newarticle != '' ){
      this.setData({
        isAdd:true,
        article:newarticle
      })
    }
    //不存在
    else{
      let result = common.getNewsDetail(id)

      if( result.code == '200' ){
        this.setData({
          article:result.news,
          isAdd:false
        })
      }
    }
    
    },
})

三、程序运行结果

四、问题总结与体会

问题1：用文档里的代码无法登录

和实验一的情况一样，使用wx.getUserProfile方法即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
getMyInfo:function(){
   console.log('0'),
   wx.getUserProfile({
     desc: '展示用户信息', 
     success: (res) => {
       console.log(res)
       this.setData({
         src:res.userInfo.avatarUrl,
         nickName:res.userInfo.nickName,
         isLogin:true
       })
     }
   })

问题2：界面显示不正确

通过调试工具，查看元素，发现没有绑定css文件，原来是CSS中名称写错了。

总结

这次实验，完成了一个较为完整的小程序，学到了页面间的跳转、数据存储、共享函数方法等知识点。希望大作业能做出令人满意的作品。