小程序笔记（5）非优秀毕业设计展示小程

(非)优秀毕业设计展示小程序

由于找不到优秀毕业设计视频，所以我就用了网上的视频来充当，所以就有了标题中的 非

写这个小程序的时候，刚好也在做别的后端，就顺便把后台也搭建Tomcat上了

任务

1. 搭建一个web服务器，并将多个视频放到web相应目录，为小程序提供视频资源。

2. 打开微信小程序开发工具，新增加小程序项目毕业设计展示小程序。

3. 建立首页（index）和个人中心页，并实现底部标签栏切换页面。其中首页用于展示多个视频，个人中心用于显示个人信息，点击修改头像按钮调用照相机拍照并将照片作为头像。

1.效果图

2.app.json-tabBar

{
  "pages": [
    "pages/index/index",
    "pages/me/me"



  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "毕业设计展示网站",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./img/home.png",
        "selectedIconPath": "/img/_home.png"
      }, {
        "pagePath": "pages/me/me",
        "text": "我的",
        "iconPath": "./img/user.png",
        "selectedIconPath": "./img/_user.png"
      }

    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. index 首页

1.index.wxml

遍历显示video组件

<view class="container">
	<view class="title-container">
		<view>优秀毕业设计</view>
		<view>查看更多</view>
	</view>

	<view class="video-container">
    <view wx:for="{{videoArray}}">
			<video class="my-video" src="{{item.url}}"></video>
			<view class="my-video-title">{{item.name}}</view>
		</view>
	</view>
</view>

2.index.wxss

page {
  width: 100%;
  height: 100%;
}

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

.container {

  display: flex;
  flex-direction: column;

}

.title-container {
  display: flex;
  justify-content: space-between;
}

.video-container {
  display: flex;
  flex-wrap: wrap;
}

.my-video {
  margin: 12rpx;
  width: 350rpx;
  height: 310rpx;
}
.my-video-title{
  display: flex;
  flex-wrap: wrap;
  width: 350rpx;
  justify-content: center;
}

3.index.js-业务逻辑

主要用来获取服务器传来的视频数据

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    videoArray: []
  },
  onLoad: function (options) {
    var that = this;
    wx: wx.request({
      url: 'http://172.16.80.145:8080/tmall/home/video',
      method: "GET",
      success: (result) => {
        that.setData({
            videoArray:result.data
        })
      }
    })
  }
})

4.me-我的模块

1.me.wxml

<view class="container">
	<view class="me-top">
		<image src="{{imgsrc}}" class="user-img" mode="scaleToFill"></image>
		<button size="mini" class="btn-img" bindtap="openCamera">修改头像</button>
		<camera wx:if="{{state}}" device-position="back" flash="off"></camera>
		<button type="primary"  class="btn-save" bindtap="saveImg">保存</button>
	</view>
	<view class="me-list-container">
		<view class="me-list">
			<view>个人资料</view>
			<view>></view>
		</view>
		<view class="me-list">
			<view>订单物流查询</view>
			<view>></view>
		</view>
		<view class="me-list">
			<view>选择收货地址</view>
			<view>></view>
		</view>
		<view class="me-list">
			<view>客服联系方式</view>
			<view>></view>
		</view>
	</view>
</view>	

2.me.wxss

page {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
}

.btn-img {
  height: 100rpx;
}

.me-top {
  display: flex;
  height: 350rpx;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #f7982a;
}
.btn-save{
  position: absolute;
  top: 822rpx;
  left:150rpx;
}
.me-top>camera {
  
  position: absolute;

  width: 100%;
  height: 110%;

}

.user-img {
  margin-left: 50rpx;
  width: 200rpx;
  height: 200rpx;
}

.me-list-container {
  display: flex;
  flex-direction: column;
}

.me-list {
  background-color: #ffffff;
  height: 100rpx;
  border-bottom: #888888;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3.me.js

// pages/me/me.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgsrc: "../../img/user_default.png",
    state: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.ctx = wx.createCameraContext()
  },
  openCamera() {
    this.setData({
      state: true
    })
  },
  saveImg: function () {
    this.ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          imgsrc: res.tempImagePath,
          state: false
        })
      }
    })
  }

})

5.服务器

1.代码

服务器环境 SpringMVC+Spring+Tomcat

下面只给出核心代码

@Controller
@ResponseBody
@RequestMapping("/home")
public class HomeController {
  
    @RequestMapping("/video")
    public String getVideo(HttpServletRequest req) {
        HashMap<String, String> map1 = new HashMap<>();
        HashMap<String, String> map2 = new HashMap<>();
        HashMap<String, String> map3 = new HashMap<>();
        HashMap<String, String> map4 = new HashMap<>();

        map1.put("url" , "http://" + req.getServerName() + ":8080/tmall/static/video/1.mp4");
        map1.put("name" , "野牛历史");

        map2.put("url" , "http://" + req.getServerName() + ":8080/tmall/static/video/2.mp4");
        map2.put("name" , "有些狼性只有狗才向往，我们要当人，不要做畜生");

        map3.put("url" , "http://" + req.getServerName() + ":8080/tmall/static/video/3.mp4");
        map3.put("name" , "罗翔说刑法：抓别人鸭子肯定是盗窃行为，那么是否构成犯罪？");

        map4.put("url" , "http://" + req.getServerName() + ":8080/tmall/static/video/4.mp4");
        map4.put("name" , "超简单！两分钟学会知乎「图文转视频」工具");

        ArrayList list = new ArrayList<HashMap>();
        list.add(map1);
        list.add(map2);
        list.add(map3);
        list.add(map4);

        return JsonUtil.getJson(list);
    }

}

2.结果

• 通过访问浏览器可以得到json格式数据如下