day 09 实习日志
一、学习内容
- 了解电商项目基本需要的功能；
- 根据现有的美团外卖小程序，分析开发一个外卖的小程序需要开发哪一些功能；
- 开发一个仿美团外卖的小程序，完善好小程序的所有功能；
二、课后作业
（一）天气预报API
源码：
App.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#3333FF",
"navigationBarTitleText": "天气预报API",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true,
"backgroundColor": "#3300CC"
},
"tabBar": {
"color": "#666",
"selectedColor": "#00FFFF",
"list": [
{
"pagePath": "pages/index/index",
"text": "天气预报",
"iconPath": "assets/icons/weather.png",
"selectedIconPath": "assets/icons/acweather.png"
},
Index.wxml
{{weather.tem}}
Index.wxss
page{
height: 100%;
/* background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561348370456&di=940bb674dcde1e5b24f8d372ac970f15&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F30%2F20160730120344_2rFBH.jpeg) no-repeat 0 0; */
background-size: 100% 100%;
background-color: #9966FF;
}
.nav{
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.nav>.ipt{
width: 90%;
border-bottom: 2rpx solid #000;
padding-left: 60rpx;
box-sizing: border-box;
}
.pla{
font-size: 26rpx;
}
.nav>.img{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 45rpx;
top: 5rpx;
}
/* END nav */
/* userinfo */
.user{
margin: 20rpx 34rpx 0rpx;
display: flex;
align-items: center;
}
.user>.userAvatar{
width: 55rpx;
height: 55rpx;
border-radius: 50%;
overflow: hidden;
border: 1rpx solid #000;
}
.user>.userNick{
font-size: 28rpx;
color: #000;
margin-left: 20rpx;
/* font-weight: bold; */
}
/* END userinfo */
/* location */
.map{
margin: 0 40rpx;
display: flex;
align-items: center;
justify-content: space-between
}
.map .l-box{
display: flex;
align-items: center;
}
.map .img{
width: 35rpx;
height: 35rpx;
}
.map .loc{
font-size: 54rpx;
margin-left: 15rpx;
color: #000;
}
.map .r-box{
font-size: 26rpx;
color: #000;
}
/* END location */
/* weather */
.info{
height: 600rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.info .tem{
height: 400rpx;
line-height: 400rpx;
font-size: 120rpx;
color: #fff;
position: relative;
}
.info .tem text{
position:absolute;
right:-30rpx;
top:-15rpx;
font-size:30rpx;
}
.info .wea{
color: #fff;
}
.info .air_level{
margin: 10rpx;
font-size: 30rpx;
color: #fff;
}
/* END weather */
/* weekday */
.weekday{
color: #000;
text-align: center;
font-size: 28rpx;
margin: 20rpx 0;
padding-bottom: 10rpx;
border-bottom: 1rpx solid #000;
}
.scroll-view_H{
white-space: nowrap;
}
.scroll-view-item_H{
width: 23%;
display: inline-block;
margin: 0 10rpx;
}
.scroll-view-item_H>view{
text-align: center;
font-size: 22rpx;
margin-bottom: 10rpx;
}
.wea{
display: flex;
align-items: center;
justify-content: center;
}
.wea_img{
margin: 5rpx 0rpx 5rpx 8rpx;
width: 24rpx;
height: 24rpx;
}
/* detail */
.detail{
margin: 30rpx 0;
display: flex;
flex-wrap: wrap;
border-left:1rpx solid #000;
border-top:1rpx solid #000;
box-sizing: border-box;
}
.detail>.item{
padding: 10rpx 0;
height: 100rpx;
flex-basis: 25%;
font-size: 26rpx;
border-right: 1rpx solid #000;
border-bottom: 1rpx solid #000;
box-sizing: border-box;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.bg>text{
color: #000;
}
.bg{
width:100%;
height:600rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:url('http://s3.sinaimg.cn/mw690/0047eShEzy7geQveqQ282&690');
}
Index.js
const app = getApp()
// 引入sdk核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
data: {
weather: {},//实况天气
weatherweek: [],//七日天气
value: null,
date: '',
humidity: ""
},
onLoad: function () {
var _this = this;
//实例话api核心类
qqmapsdk = new QQMapWX({
key: 'CGGBZ-KGUKS-SQFOI-6IT7J-ZB6WT-XUFLT'
});
// wx获取位置接口
wx.getLocation({
success: function (res) {
// 获取到经纬度
console.log(res);
// 逆地址解析
qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function (res) {
console.log(res.result.address_component.district.substr(0, 2));
_this.weathertoday(res.result.address_component.district.substr(0, 2));
_this.weatherweekday(res.result.address_component.district.substr(0, 2));
}
})
}
});
},
finish: function (e) {
var _this = this;
// console.log(e.detail.value);
if (e.detail.value.length != 0) {
_this.weathertoday(e.detail.value);
_this.weatherweekday(e.detail.value);
// 清空输入框的值
_this.setData({
value: ''
})
}
},
// 天气api实况天气
weathertoday: function (city) {
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v6',
data: {
'city': city
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
console.log(res.data.date.substr(5, 5));
_this.setData({
weather: res.data,
date: res.data.date.substr(5, 5),
humidity: res.data.humidity.substr(0, 2)
});
console.log("今日天气 =>", _this.data.weather)
}
});
},
// 天气api实况天气
weatherweekday: function (city) {
var _this = this;
wx.request({
url: 'https://www.tianqiapi.com/api/?version=v1',
data: {
'city': city
},
method: 'GET',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
success: function (res) {
_this.setData({
weatherweek: res.data
});
console.log("7日天气 =>", _this.data.weatherweek)
}
});
}
})
程序结果：
（二）美团外卖
展示部分源码：
App.json
{
"pages": [
"pages/index/index",
"pages/user/user",
"pages/shop/shop",
"pages/order/order"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#9966CC",
"navigationBarTitleText": "美团外卖",
"navigationBarTextStyle": "black"
},
"tabBar": {
"selectedColor": "#0000FF",
"backgroundColor": "#CC99CC",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "./imgs/home_2.png",
"selectedIconPath": "./imgs/home_1.png",
"text": "首页"
},
{
"pagePath": "pages/user/user",
"iconPath": "./imgs/mine_2.png",
"selectedIconPath": "./imgs/mine_1.png",
"text": "我的"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"sitemapLocation": "sitemap.json"
}
User.wxml
Shop.wxml
{{m1.package}}
Order.wxml
程序结果：
三、学习总结
在完成最基本的排版之后，接下来就是要完成更加好的功能，就是要完善这个小程序的功能，就是要制作成跟美团外卖比较像的一个小程序。然后老师在课堂上简单说明了怎么固定好位置，大概的位置，大概的排版，还有就是弄好商家等相关功能。
在完成课后作业的时候，发现难度还是挺大的，因为我感觉要慢慢的测量高度是多大，然后看怎么去排版比较好，所以就很麻烦。但是作业完成量还是挺好的。