ouc_移动软件开发_实验四

已于 2022-11-26 14:15:00 修改
阅读量138 收藏
点赞数
分类专栏： 移动软件开发 文章标签： 前端 html
于 2022-08-20 20:49:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/curry303333/article/details/126444134
版权

一、实验目标

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

二、实验步骤

1.准备阶段：

（1）准备相关的新闻以及图片链接，作为小程序开发的的素材

（2）可以在网上下载tabBar的图标素材，进行抠图，这样可以美化自己的小程序

（3）搭建微信开发者工具的编译环境，这次实验除了创建index文件夹外，还需要创建两个同类型不同名的my,detail文件夹，对应三个页面。

2.开始编程，下列是源代码以及代码相关作用的注释

（1）编辑前端UI界面（共三个界面），代码如下

app.json

{
  "pages": [
    "pages/incdex/index",
    "pages/detail/detail",
    "pages/main/main"
  ],
  "window": {
    "navigationBarBackgroundColor": "#328EEB",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "我的新闻网",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  
  //设置tabBar，两个按钮：‘首页’与‘我的’
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#328EEB",
    "list": [
      {
        "pagePath": "pages/incdex/index",
        "text": "首页",
        "iconPath": "images/index1.png",         //未选中时的图标
        "selectedIconPath": "images/index2.png"       //选中时的图标
      },
      {
        "pagePath": "pages/main/main",
        "text": "我的",
        "iconPath": "images/my1.png",     //未选中时的图标
        "selectedIconPath": "images/my2.png"   //选中时的图标
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

.news-item{
  display: flex;
  flex-direction: row;
  border-bottom: 1rpx solid black;
  align-items: center;
}

.img{
  height: 150rpx;
  width: 230rpx;
  /* margin:10rpx 向周围扩充10rpx的宽度 */
  margin:10rpx;
}

.news-item text{
  width: 100%;
  line-height: 60rpx;
  font-size: 40rpx;
  font-family: kaiti;    /*设置字体为楷体*/
}

index.wxml

<!--pages/detail/detail.wxml-->
<!-- <text>pages/detail/detail.wxml</text> -->
<!-- 幻灯片 -->
<!-- indicator-dots:幻灯片播放时是否会显示小点点 -->
<!-- autoplay：幻灯片是否会自动播放 -->
<!-- interval:每隔多长时间自动播放到下一个幻灯片 -->
<!-- duration:播放动画这个过程所需要的时间为500ms -->
<swiper indicator-dots="true" autoplay="true" interval="5000" duration="500">
<!-- 给定wx:key便于循环 -->
<!-- swiperImage为储存图片的数组 -->
  <view wx:for="{{swiperImage}}" wx:key="swiper{{index}}">
    <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}}" bindtap="goToDetail" data-id="{{item.id}}">
    <image src="{{item.poster}}" class="img"></image>
    <text>{{item.title}}——{{item.add_date}}</text>
  </view>
  <!-- 加载更多新闻按钮  plain:镂空-->
  <button plain="true">加载更多</button>
</view>

index.wxss

/* pages/incdex/index.wxss */
/* pages/detail/detail.wxss */
swiper{
  height:400rpx;
  width:100%
}

/* 类似于后代选择器？ */
swiper image{
  height: 100%;
  width: 100%;
}

.news-list{
  min-height: 600rpx;
  padding: 15rpx;
}

main.wxml

<!-- 登录页面 -->
<view class="myLogin">
<!-- 封装成块 -->
  <block wx:if="{{isLogin}}">
    <image src="{{src}}"></image>
    <text>{{nickName}}</text>
  </block>
  <button wx:else bindtap="getUserProfile"> 未登录，点此登录 </button>
</view>

<!-- 收藏列表 -->
<view class="myFavorite">
  <text>我的收藏({{number}})</text>
  <view class="news-list">
    <view class="news-item" wx:for="{{newslist}}" wx:key="{{item.id}}" bindtap="goToDetail" data-id="{{item.id}}">
      <image src="{{item.poster}}" class="img"></image>
      <text>{{item.title}}——{{item.add_date}}</text>
    </view>
  </view>
</view>

main.wxss

/* 登录界面 */
.myLogin{
  height: 400rpx;
  background-color: #328EEB;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.myLogin image{
  height: 220rpx;
  width:  220rpx;
  border-radius: 50%;
}

.myLogin text{
  color: white;
  font-family: fangsong;
}

.myFavorite{
  padding: 3%;
}

detail.wxml

<view class="container">
  <view class="title">{{article.title}}</view>
  <view class="poster">
    <image src="{{article.poster}}"></image>
  </view>
  <view class="content">
    <text>{{article.content}}</text>
  </view>
  <view class="add_date">{{article.add_date}}</view>
  <button wx:if="{{isAdd}}" plain bindtap="cancelFavorite">❤已收藏</button>
  <button wx:else plain bindtap="addFavorite">💔未收藏</button>  //通过wx:if来判断isAdd的值，从而确定文章是否被收藏
</view>

detail.wxss

/* 整体样式 */
.container{
  padding: 15rpx;
}

.title{
  font-size: 35rpx;
  line-height: 35rpx;
  font-family: fangsong;
  text-align: center;
}

.poster image{
  width: 100%;
}

.content{
  text-align: left;
  font-size: 30rpx;
  line-height: 35rpx;
}

.add_date{
  font-size: 30rpx;
  text-align: right;
  line-height: 30rpx;
  /* 距离右侧与顶部的距离 */
  margin-right: 25rpx;
  margin-top: 20rpx;
}

（2）实现每个页面后端的内核的实现，下列是相关代码

index.js

// pages/incdex/index.js
var common = require('../../utils/common')
//保证可以调用common.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperImage:[
      {src:""},
      {src:""},
      {src:""}
    ],

    newslist:[]
  },
 
  goToDetail:function(res){
    //获取data-id的数据
    let id = res.currentTarget.dataset.id
    // console.log(res)
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    let list = common.getNewList()
    this.setData({
      newslist:list
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

main.js

// pages/main/main.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    number:0,
    nickName:'未登录',
    src:'/images/index1.png',
    newslist:[]
  },
//获取个人信息
  getUserProfile:function(res){
    wx.getUserProfile({
      desc: '获取个人信息',
      success:(res) => {
        let info = res.userInfo;
        this.setData({
          src:info.avatarUrl,
          nickName:info.nickName,
          isLogin:true
        })
      }
    })

    //获取新闻列表

    this.getMyFavorite()
  },

  //更新number
  getMyFavorite:function(res){
    let info = wx.getStorageInfoSync()//读取本地缓存信息
    let keys = info.keys//获取全部key信息
    let num = keys.length//获取key数量

    let myList = [];
    for (var i = 0; i < num; i++){
      let obj = wx.getStorageSync(keys[i])
      myList.push(obj)
    }
    console.log(myList)
    //更新收藏列表
    this.setData({
      newslist:myList,
      number:num
    })
  },

  goToDetail:function(res){
    //获取data-id的数据
    let id = res.currentTarget.dataset.id
    // console.log(res)
    //携带新闻id进行页面跳转
    wx.navigateTo({
      url: '../detail/detail?id=' + id,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    canIUseGetUserProfile: true
    wx.clearStorage()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    if(this.data.isLogin){
      this.getMyFavorite()
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

detail.js

// pages/detail/detail.js
var common = require('../../utils/common')
//保证可以调用common.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    article:{
      id:'',
      title:'',
      poster:'',
      add_date:'',
      content:'”。'
     },
     isAdd:false
  },
//添加收藏
  addFavorite:function(){
    let article = this.data.article
    wx.setStorageSync(article.id, article)
    this.setData({
      isAdd:true
    })
  },

  //取消收藏
  cancelFavorite:function(){
    let article = this.data.article
    wx.removeStorageSync(article.id)
    this.setData({
      isAdd:false
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //检验是否携带id号进入页面
    // console.log(options.id)
    let id = options.id
    // let result = common.getNewsDetail(id)
    // if(result.code == 200){
    //   this.setData({
    //     article:result.news
    //   })
    // }

    //检查当前新闻是否在收藏夹中
    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
      })
      }
    }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

（3）将各个程序的内核”连接“起来，实现页面与页面之间的跳转

common.js

const news = [
  {
    id:'',
    title:'',
    poster:'',
    add_date:'',
    content:''
  },
  {
    id:'',
    title:'',
    poster:'',
    add_date:'',
    content:''
  },
  {
    id:'',
    title:'',
    poster:'',
    add_date:'',
    content:' '
  }
]

//获取新闻列表
function getNewList()
{
  let list = [];
  for (var i = 0; i<news.length; i++){
    let obj = {};
    obj.id = news[i].id;
    obj.poster = news[i].poster;
    obj.content = news[i].content;
    obj.add_date = news[i].add_date;
    obj.title = news[i].title;
    list.push(obj);//从写得一成不变的到可以改变的来慢慢转变
  }
  return list;
}

//获取新闻内容
function getNewsDetail(newsID){
  let message = {
   code:'404',
    news:{}
  }
  for(var i = 0; i < news.length; i++){
    //当新闻id匹配到数据库里的ID时便更新新闻（message）
    if(newsID == news[i].id){
      message.code = '200';
      message.news = news[i];
      return message;
      break;
    }
  }
}
//暴露接口
module.exports = {
  getNewList:getNewList,
  getNewsDetail:getNewsDetail
}

（4）测试运行与调试，上传代码，设置为体验版，进入测试阶段

满目星辰&
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSDN最全面的微信小程序源码和模板
03-08
从事微信小程序开发也有差不多半年的时间了，本人深知对于从来都没有接触过微信小程序开发的人刚开始是多么的迷茫，无助。其实我刚开始也是这样，然而进过一段时间的开发，学习，我知道了其实网上有很多人进行分享过，可以参照他们的进行开发学习，这样不仅仅可以达到事倍功半的效果。这是我自己在网上收集，和一些自己做的一些小程序，想分享出来帮助大家更好的学习开发，其中包括了一些比较完善的小程序开源框架，还有几套比较完善的微信小程序商城模板，和源码只需自己把接口替换成自己的即可，希望能够帮到大家。
小程序基本命令
aiven1637的博客
10-30 3283
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序使用echarts图表（ec-canvas）
Mr Dear的博客
11-08 1万+
微信小程序使用echarts图表（ec-canvas）
微信小程序ec-canvas（echarts）显示地图【以甘肃省为例】
最新发布
sjp991012的博客
12-15 3106
微信小程序ec-canvas（echarts）显示地图。下载地图数据、定制图表、微信中使用
微信小程序，wx.getLocation()和wx.openLocation() 配合使用进行微信定位功能
qq_57057576的博客
07-20 2131
代码】微信小程序，wx.getLocation()和wx.openLocation()配合使用进行微信定位功能。
OUC_ISO-on-TCP
04-25
OUC_ISO-on-TCP,S7-1500 与S7-300/400 基于ISO-on-TCP 的开放式用户通信
Python库 | ouc_api-0.7.1.tar.gz
03-07
"ouc_api-0.7.1.tar.gz"是一个针对Python开发者的库，它封装了与Open University of China（中国开放大学，简称OUC）相关的API接口，方便开发者在后端进行数据交互和功能实现。这个压缩包包含了版本为0.7.1的"ouc_...
Python库 | ouc_api-0.2.3.tar.gz
05-20
资源分类：Python库 所属语言：Python 资源全名：ouc_api-0.2.3.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
习题参考答案_2011_03_OUC_13_C语言程序设计项目化教程.doc
10-15
4. **数组与指针**：数组的声明、初始化、访问以及指针的使用，如指针变量的声明、指针运算和通过指针访问数组元素。 5. **函数的使用**：函数的定义、调用、参数传递，包括函数返回值和函数原型的匹配。 6. **...
OUC编译原理全部实验
07-20
本资源"OUC编译原理全部实验"为中国海洋大学2020年春季学期编译原理课程的实验代码集合，包含8个实验以及实验要求，旨在帮助学生深入理解和实践编译器构造的基础知识。** ### 实验一：词法分析（Lexical Analysis）...
微信小程序开发 | 获取用户openid
01-04
学习计划：1, 为便于学习，建议先申请一个属于自己的小程序号，个人认证是不需要费用的； 2, 将视频课程通读一遍，对整个课程框架有一定了解； 3, 根据自己对所学内容的理解，尝试动手还原课程中的代码； 4, 遇到问题时再看对应的章节讲解，这样有效提升学习效果；课程目标：对微信小程序用户openid有更深层的了解，尽可能学会获取openid的方法课程简介：1, 为什么要学习本课程在微信小程序中，许多常用且经典的功能在开发时都需要用到openid这个参数，如果不知道怎么获取openid，这些功能的开发将无从谈起，而这些常用功能也直接决定了我们所开发项目的深度和难度。2, 课程特点流程示意、步骤详细、代码精讲、通俗易懂。3. 主体大纲第一章 课程介绍第二章 获取用户openid第三章 课程总结 3, 配套福利（1）精讲微信小程序用户openid的获取流程；（2）针对课程中的代码问题在线解答；（3）代码源文件下载；（4）课程PPT文件下载；
echarts-for-weixin：全面解析
pickinguptrash的博客
09-14 1272
echarts-for-weixin是基于微信小程序的echarts图表库，拥有echarts的强大功能和小程序的优势，支持各种类型的图表和数据绑定。同时，echarts-for-weixin还继承了echarts的高度定制化能力，支持图表类型、组件、主题等内容自定义，能够满足复杂的图表需求。如果你在小程序中有制作图表的需求，echarts-for-weixin会是一个不错的选择。
微信小程序----wx.openLocation(OBJECT) 使用微信内置地图查看位置
热门推荐
止于至善
06-25 4万+
开发场景 已知地点的经纬度，期望在打开的地图进行标注位置和进行开车、徒步、公交、骑行等的路线规划！ 效果图 实际应用体验 JS Page({ openLocation(){ wx.openLocation({ longitude: Number(this.data.lng), latitude: Number(t...
微信小程序----使用微信内置地图查看位置wx.openLocation(Object object)
吾行远方
07-02 1万+
使用微信内置地图查看位置wx.openLocation(Object object) 1、官方文档 wx.openLocation(Object object)官方文档 2、wxml <!--pages/test/test.wxml--> <text>pages/test/test.wxml</text> <view class="container"&g...
使用wx.openLocation遇到的坑
lyxgoodLucky的博客
05-07 5779
需求：下单之后，点击前往店铺图标，根据后台接口返回的经纬度和店铺名称，进行导航前往对应店铺，效果图如下： 坑1：使用 wx.openLocation需要使用火星坐标才能定位准确，所需getLocation的时候，type可以传gcj02。 坑2：使用 wx.openLocation传的经纬度，安卓传字符串不会出现问题，ios必须转换成数字类型才可以 latitude: Number(lat...
微信小程序授权登录获取用户的openid
zgscwxd的博客
11-05 1万+
小程序获取用户的openid
微信小程序使用Echarts-for-weixin实现图表动态更新数据、懒加载（干货满满！！！）
weixin_52017722的博客
11-01 6008
微信小程序开发 + Echarts图表动态数据统计
借助腾讯地图api实现逆地址解析
weixin_48018877的博客
11-28 2236
借助腾讯地图api实现逆地址解析，找到腾讯地图的官网，找到地图API，找到微信小程序的对应的开发文档，按着文档的步骤进行设置
腾讯地图getLocation获取经纬度，qqmapsdk.reverseGeocoder根据经纬度获取详细地址不准确，有500多米的误差。如何解决误差，实现精准定位呢
YUANBABA_666的博客
02-23 1万+
** 腾讯地图getLocation获取经纬度，qqmapsdk.reverseGeocoder根据经纬度获取详细地址不准确，有500多米的误差。如何解决误差，实现精准定位呢？
S7-1500/S7-300/400 基于 ISO-on-TCP 的开放式用户通信解决方案
OUC_ISO-on-TCP OUC_ISO-on-TCP 是 Siemens 公司提供的一种开放式用户通信协议，基于 ISO-on-TCP 协议，用于 S7-1500 和 S7-300/400 系列 PLC 之间的数据交换。该协议允许 CPU 与任何通信设备进行开放式数据交换，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值