点餐系统

注：大三集中实训的时候由于没有什么经验，只实现了静态页面，但微信小程序开发文档里面所有的功能差不多都实现（视频的上传与下载以及登录等等）所以在这里记录自己的学习笔记

1. 导航栏

底部导航栏分为学做菜、头条、美食圈、消息、我的

2.项目结构

3. 运行成功截图

学做菜

早餐

中餐

晚餐

头条

消息

登录

一、学做菜

cook.wxml【这个模块使用了template模板】

<view class="content"><!-- <view class="img"><image src="../images/haibao/haibao-1.jpg" style="width:100%;height:230px;"></image></view> --><swiper class="swiper" indicator-dots="{{in}}" autoplay="{{autoplay}}" interval="{{interval}}"duration="{{duration}}"current="{{current}}" bindchange="swiperChange"><block wx:for="{{imgUrls}}" wx:key="*this"><swiper-item bindtap="swiperClick"><image src="{{item}}" class-image="silde-images" style="width:100%;"></image></swiper-item></block></swiper><view class="nav"><scroll-view class="scroll-view_item" scroll-x="true" bindscroll="scroll" ><view class="nav-item"><view> <image src="../images/icon/fenlei.jpg" style="width:25px;height:23px;"></image></view><view>菜谱分类</view></view><view class="nav-item" bindtap="videoplayer"><view> <image src="../images/icon/shipin.jpg" style="width:25px;height:23px;"></image></view><view>视频</view></view><view class="nav-item"><view> <image src="../images/icon/meishi.jpg" style="width:25px;height:23px;"></image></view><view>美食养生</view></view><view class="nav-item"><view> <image src="../images/icon/shangou.jpg" style="width:25px;height:23px;"></image></view><view>闪购</view></view><view class="nav-item" bindtap="cameare"><view> <image src="../images/icon/paizhao.png" style="width:25px;height:23px;"></image></view><view>点击拍照</view></view><view class="nav-item" bindtap="weather"><view> <image src="../images/icon/weather.png" style="width:25px;height:23px;"></image></view><view>查看天气</view></view><view class="nav-item" bindtap="photos"><view> <image src="../images/icon/photos.png" style="width:25px;height:23px;"></image></view><view>相册选择</view></view><view class="nav-item" bindtap="downloada"><view> <image src="../images/icon/downloada.png" style="width:25px;height:23px;"></image></view><view>菜谱视频列表</view></view><view class="nav-item" bindtap="shangchuangvideo"><view> <image src="../images/upload-video.png" style="width:25px;height:23px;"></image></view><view>视频上传</view></view></scroll-view></view><view class="hr"></view><view class="head"><view>香哈头条</view><view class="right"><image src="../images/more.png" style="width:19px;height:18px;"></image></view></view><import src="../template/template" /><view class="list"><template is="cooks" data="{{array}}"/></view>
</view>

cook.js

// pages/cook/cook.js
Page({data:{in:true,autoplay:true,interval:5000,duration:1000,current: 0,imgUrls:["../images/haibao/haibao-1.jpg","../images/haibao/haibao-2.jpg","../images/haibao/haibao-3.jpg"],array:[]},intervalChange: function (e) {//自动切换时间间隔this.setData({interval: e.detail.value})
},
durationChange: function (e) {//滑动动画时长duration: e.detail.value
},
changeIndicatorDots: function (e) {//是否显示小圆圈this.setData({dotsBoll: !this.data.dotsBoll})
},
changeAutoplay: function (e) {//是否自动播放this.setData({autoplay: !this.data.autoplay})
},
swipclick: function (e) {//点击图片触发事件console.log(this.data.imageUrls[this.data.current]);
},
bindchange:function(e){//轮播图发生改变this.setData({current:e.detail.current})
},onLoad:function(options){var array = this.initData();this.setData({array:array});},initData:function(){var array = [];var object1 = new Object();object1.img = '../images/list/food-1.jpg';object1.title='爱心早餐';object1.type='健康养生';object1.liulan='20696浏览';object1.pinglun='7000评论';array[0] = object1;var object2 = new Object();object2.img = '../images/list/food-2.jpg';object2.title='困了只想喝咖啡';object2.type='家庭医生在线';object2.liulan='29628浏览';object2.pinglun='10万+评论';array[1] = object2;var object3 = new Object();object3.img = '../images/list/food-3.jpg';object3.title='吃大龙虾吗？';object3.type='家庭医生在线';object3.liulan='19585浏览';object3.pinglun='100评论';array[2] = object3;var object4 = new Object();object4.img = '../images/list/food-4.jpg';object4.title='搜狐新闻，手机用久了';object4.type='广告';object4.liulan='4688浏览';object4.pinglun='2000评论';array[3] = object4;var object5 = new Object();object5.img = '../images/list/food-5.jpg';object5.title='小娃娃中餐';object5.type='家庭医生在线';object5.liulan='29628浏览';object5.pinglun='1300评论';array[4] = object5;return array;},aixing: function (e) {wx.redirectTo({url: '../cook-1/cook-1'})/*wx.switchTab({url: '../headline/headline'})*/},videoplayer: function(e){wx.navigateTo({url: '../shipingplayer/shipingplayer' })
},
cameare: function(e){wx.navigateTo({url: '../cameare/cameare'
})
},
weather: function(e){wx.navigateTo({url: '../weather/weather'
})
},
photos: function(e){wx.navigateTo({url: '../photos/photos'
})
},
downloada: function(){wx.navigateTo({url: '../downloadvideo/downloadvideo'
})
},
shangchuangvideo: function(){wx.navigateTo({url: '../shangchuangvideo/shangchaungvideo'
})
},
swiperChange:function(e){this.setData({current: e.detail.current})
},
swiperClick:function(e){var me = this.data.current;if(me==0){wx.navigateTo({url: '../morning/morning';})}if(me==1){wx.navigateTo({url: '../lunch/lunch' })console.log(me)}if(me==2){wx.navigateTo({url: '../dinner/dinner' })console.log(me)}
},
})

cook.wxss

.swiper{width:100%;height:180px;
}
.silde-images{width:100%;height:180px;
}
.nav{display: flex;flex-direction: row;text-align: center;
}
.nav-item{margin-top:20px;font-size: 12px; display: inline-block;width: 25%;height: 100rpx;}
.hr{height: 5px;background-color: #cccccc;margin-top:15px;opacity: 0.5;
}
.head{display: flex;flex-direction: row;margin: 10px;font-size: 13px;color: #999999;
}
.right{position: absolute;right: 10px;color: #cccccc;
}
.hr2{height: 2px;background-color: #cccccc;opacity: 0.2;
}
.item{display: flex;flex-direction: row;margin-left: 10px;margin-bottom:5px; margin-top:5px;
}
.desc{margin-left: 20px;line-height: 30px;
}
.title{font-weight: bold;
}
.count{display: flex;flex-direction: row;font-size: 12px;color: #999999;
}
.liulan{position: absolute;right: 70px;
}
.pinglun{position: absolute;right: 10px;
}.scroll-view_item{white-space: nowrap;}

二、 头条模块

由于跟学做菜模块类似，此处将不展示代码

三、 美食圈

注：此模块主要是八大菜谱的显示

food.wxml

<view style="text-align: center;"><view>{{year}}</view><picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange"><picker-view-column><view wx:for="{{years}}" style="line-height: 50px;">{{item}}</view></picker-view-column></picker-view>
</view>

food.js

// pages/food/food.js
Page({data:{array: ['鲁菜', '川菜', '粤菜', '苏菜','闽菜','浙菜','湘菜','徽菜'],index: 0,years: ['鲁菜', '川菜', '粤菜', '闽菜','苏菜','浙菜','湘菜','徽菜'],year: '川菜'},bindChange: function (e) {const val = e.detail.valuethis.setData({year: this.data.years[val[0]],})},bindPickerChange: function(e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({index: e.detail.value})},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭}
})

food.wxss

/* pages/food/food.wxss */
.section__title{font-size: 30px;margin-left: 80px;
}
.picker{margin-top: 10px;font-size: 18px;
}

四、消息模块

message.wxml

<!--pages/message/message.wxml-->
<view class="container log-list"><view class="content" hover-class="none" hover-stop-propagation="false"><button plain open-type='contact'> <view class="item" hover-class="none" hover-stop-propagation="false"><image class="" src="../../images/xt01.png"></image><view class="info" hover-class="none" hover-stop-propagation="false"><view class="top" hover-class="none" hover-stop-propagation="false">客服通知</view><view class="bottom" hover-class="none" hover-stop-propagation="false">小子圣诞节大结局跟设计稿改数据风骨霸刀分接口搞不定共和国的</view></view><view class="time" hover-class="none" hover-stop-propagation="false">2020-11-04</view></view></button><view class="item" hover-class="none" hover-stop-propagation="false" wx:for="{{list}}" data-state='{{item.state}}' bindtap='toDetail'><image class="" src="{{item.url}}"></image><view class="info" hover-class="none" hover-stop-propagation="false"><view class="top" hover-class="none" hover-stop-propagation="false">{{item.title}}</view><view class="bottom" hover-class="none" hover-stop-propagation="false">{{item.content}}</view></view><view class="time" hover-class="none" hover-stop-propagation="false">2020-11-04</view></view></view>
</view>

message.js

const util = require('../../utils/util.js')
Page({data: {logs: [],list :[{title:"饭店通知",content:'今年来无锡市三国城明德饭店享受95折优惠！！！',url:'../../images/tz01.png',state:1},{title:"钱包通知",content:'您今日已在学校食堂使用58.00元，您今日已超额.......欢迎访问个人博客：https://zhangxujun-123.github.io/',url:'../../images/qb01.png',state:2
},]},toDetail(e) {let state = e.currentTarget.dataset.stateif (state == 1 ) {wx.navigateTo({url: '../../pages/ptInfo/ptInfo',success: (result)=>{},fail: ()=>{},complete: ()=>{}});} else {wx.navigateTo({url: '../msg/msg',success: (result)=>{},fail: ()=>{},complete: ()=>{}});}},onLoad: function () {this.setData({logs: (wx.getStorageSync('logs') || []).map(log => {return util.formatTime(new Date(log))})})}
})

message.wxss

.log-list {padding: 15rpx 20rpx;background-color: #f7f7f7;min-height: 100vh;
}
.log-list button {outline: none;background: transparent;margin: 0;padding: 0;text-align: left;line-height: 100%;border: none;
}
.log-list .item {background-color: #fff;width: 100%;height: 155rpx;padding-top: 30rpx;padding-bottom: 30rpx;display: flex;align-items: center;margin-bottom: 13rpx;box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(159, 186, 207, 0.1);border-radius: 10rpx;position: relative;
}
.log-list .item image {width: 94rpx;height: 94rpx;
}
.log-list .item .time {position: absolute;right: 30rpx;top: 26rpx;font-size: 22rpx;font-family: PingFang-SC-Regular;font-weight: 400;color: #959595;
}
.log-list .item .info {margin-left: 16rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;overflow: hidden;height: 100%;
}
.log-list .item .info .top {font-size: 32rpx;font-family: PingFang-SC-Regular;font-weight: bold;color: #000000;
}
.log-list .item .info .bottom {font-size: 28rpx;font-family: PingFang-SC-Regular;font-weight: 400;color: #666666;width: 100%;display: -webkit-box;-webkit-line-clamp: 1;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;word-break: break-all;
}

五、登录模块

login.wxml

<view class="content"><view class="account"><view class="title">账号</view><view class="num"><input bindblur="accountInput" placeholder="用户名/邮箱/手机号" placeholder-style="color:#999999;"/></view></view><view class="hr"></view><view class="account"><view class="title">密码</view><view class="num"><input password="{{passwordType}}"  bindinput="passwordInput" placeholder="请输入6位字符密码"  placeholder-style="color:#999999;" /></view><view class="see"><image bindtap='eyeStatus' src='{{defaultType? "../images/see2.jpg": "../images/see1.jpg"}}' style="width:42px;height:30px;" ></image></view></view><view class="hr"></view><button class="btn" type="{{btnstate}}" bindtap="login">登录</button><view class="operate"><view><navigator url="../mobile/mobile">手机快速注册</navigator></view><view><navigator url="../company/company">企业用户注册</navigator></view><view bindtap="mimaforget"><navigator url="">找回密码</navigator></view></view><view class="login"><view><image src="../images/23.gif" style="width:70px;height:98px;"></image></view><view><image src="../images/25.gif" style="width:70px;height:98px;"></image></view></view>
</view>

login.js

Page({data:{disabled:true,btnstate:"default",phone: '',password: '',defaultType: true,passwordType: true,}, //defaultType：眼睛状态   passwordType：密码可见与否状态eyeStatus: function(){this.data.defaultType= !this.data.defaultTypethis.data.passwordType= !this.data.passwordTypethis.setData({defaultType: this.data.defaultType,passwordType: this.data.passwordType})},// 获取输入账号accountInput: function (e) {this.setData({phone: e.detail.value})var phone = this.data.phone;console.log(phone);if(phone != ''){this.setData({disabled:false,btnstate:"primary",account:phone});}else{this.setData({disabled:true,btnstate:"default"});}},// 获取输入密码passwordInput: function (a) {this.setData({password: a.detail.value})},// 登录login: function () {if (this.data.phone == "" || this.data.password == "") {wx.showToast({title: '用户名和密码不能为空',icon: 'none',   duration: 2000 })  } else if(this.data.phone=="admin"&&this.data.password=="123456") {  // 这里修改成跳转的页面wx.showToast({title: '登录成功',icon: 'success',duration: 2000,success:function(){wx.navigateTo({url: '../successuser/successuser' }) } })}else{  wx.showToast({title: '用户名或者密码错误，3次后即将锁定账户', icon: 'none',duration: 2000})  }} ,mimaforget: function (e) {wx.redirectTo({url: '../forgertpassword/forgertpassword'})/*wx.switchTab({url: '../headline/headline'})*/},/* login: function () {wx.redirectTo({url: '../successuser/successuser'})}*/
/*  pwdBlur:function(e){var password = e.detail.value;if(password != ''){this.setData({password:password});}}*/
})

login.wxss

.content{margin-top: 40px;
}
.account{display: flex;flex-direction: row;padding-left: 20px;padding-top: 20px;padding-bottom: 10px;width: 90%;
}
.title{margin-right: 30px;width: 50px;font-weight: bold;
}
.hr{border: 1px solid #cccccc;opacity: 0.2;width: 90%;margin: 0 auto;
}
.see{position: absolute;right: 20px;
}
.btn{width: 90%;margin-top:40px;color: #999999;
}
.operate{display: flex;flex-direction: row;
}
.operate view{margin: 0 auto;margin-top:40px;font-size: 14px;color: #333333;
}
.login{display: flex;flex-direction: row;margin-top:15px;
}
.login view{margin: 0 auto;
}

六登录测试

输入正确用户名和错误密码

输入正确登录成功

successuser.wxml

<view class="container"><view class="my-details"><image class="img" src="../../images/tb04.png"></image><view class="details"><view class="left"><image class="head" src="../../images/tx04.png"></image><view class="name"><view>admin <test catchtap="Invitation">会员用户</test></view><view>1245846114987</view></view></view><image class="arrIcon" src="../../images/xy08.png"></image></view></view><view class="money" bindtap="pageTo" data-url="../withdraw/withdraw"><view><test>¥ 60.00</test><test>已使用</test></view><view></view><view><test>¥ 88.00</test><test>总金额</test></view></view><view class="ul"><view class="li" ><view class="left"><image src="../../images/td01.png" mode="widthFix" style="width:20px;"></image><text>我的朋友</text></view><image class="arrIcon" src="../../images/zy01.png"></image></view><view class="li" ><view class="left"><image src="../../images/sc10.png" mode="widthFix" style="width:20px;"></image><text>我的点餐</text></view><image class="arrIcon" src="../../images/zy01.png"></image></view><view class="li"  bindtap="pageTo" data-url="../withdraw/withdraw"><view class="left"><image src="../../images/yj01.png" mode="widthFix" style="width:20px;"></image><text>添加银行卡</text></view><image class="arrIcon" src="../../images/zy01.png"></image></view><view class="li" ><view class="left"><image src="../../images/bz01.png" mode="widthFix" style="width:20px;"></image><text>帮助中心</text></view><image class="arrIcon" src="../../images/zy01.png"></image></view><view class="li"><view class="left"><image src="../../images/gy01.png" mode="widthFix" style="width:20px;"></image><text>关于我们</text></view><image class="arrIcon" src="../../images/zy01.png"></image></view></view><view class="proup" wx:if="{{isProup}}"><view class="box"><view class="Exhibition"><image src="../../images/1558148062.png"></image><view class="white"></view><view class="text">邀请码：123456</view><button plain class="btn">分享</button></view><image class="errIcon" src="../../images/gb01.png" bindtap="Invitation"></image></view></view>
</view>

successuser.js

// pages/my/index/index.js
Page({/*** 页面的初始数据*/data: {isProup: false},pageTo({currentTarget: {dataset}}){// console.log(dataset);wx.navigateTo({url: dataset.url})},Invitation(){this.setData({isProup: !this.data.isProup})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

success.wxss

.container {min-height: 100vh;background-color: #F7F8F8
}.container .my-details {position: relative;height: 427rpx;display: flex;justify-content: space-between;align-items: center;z-index: 9
}.container .my-details .img {width: 100%;height: 427rpx;position: absolute;top: 0;left: 0;right: 0;z-index: 0
}.container .my-details .details {z-index: 2;display: flex;justify-content: space-between;align-items: center;padding: 0 20rpx;width: 100%
}.container .my-details .details .left {display: flex;justify-content: space-between;align-items: center
}.container .my-details .details .left .head {width: 110rpx;height: 110rpx;margin-right: 15rpx
}.container .my-details .details .left .name view:first-child {font-size: 34rpx;font-family: PingFang-SC-Medium;font-weight: bold;color: #FFFFFF
}.container .my-details .details .left .name view:first-child test {display: inline-block;width: 100rpx;height: 40rpx;line-height: 40rpx;text-align: center;border-radius: 20rpx;background-color: #01AF7E;font-size: 25rpx
}.container .my-details .details .left .name view:last-child {font-size: 28rpx;font-family: PingFang-SC-Medium;color: #FFFFFF
}.container .my-details .details .arrIcon {width: 15rpx;height: 20rpx
}.container .money {position: relative;z-index: 10;width: 710rpx;margin: -92rpx auto 0;height: 208rpx;background-color: #fff;border-radius: 10rpx;display: flex;justify-content: center;align-items: center
}.container .money view:first-child,
.container .money view:last-child {flex: 1;overflow: hidden
}.container .money view:first-child test,
.container .money view:last-child test {display: block;text-align: center
}.container .money view:first-child test:first-child,
.container .money view:last-child test:first-child {font-size: 40rpx;font-family: PingFang-SC-Medium;font-weight: bold;color: #FF2424
}.container .money view:first-child test:last-child,
.container .money view:last-child test:last-child {font-size: 24rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #656362
}.container .money view:nth-child(2) {width: 2rpx;height: 134rpx;background-color: #D4D4D4
}.container .ul {width: 710rpx;margin: 33rpx auto 0;background-color: #fff;border-radius: 10rpx
}.container .ul .li {height: 110rpx;padding: 0 35rpx;border-bottom: 1rpx solid #E4E4E4;display: flex;justify-content: space-between;align-items: center
}.container .ul .li .left {display: flex;justify-content: center;align-items: center;font-size: 30rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #000000
}.container .ul .li .left image {margin-right: 15rpx
}.container .ul .li image.arrIcon {width: 19rpx;height: 31rpx
}.container .ul .li:last-child {border: none
}.container .proup {z-index: 99;position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100vh;overflow: hidden;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center
}.container .proup .box {text-align: center
}.container .proup .box image.errIcon {width: 56rpx;height: 56rpx;margin-top: 30rpx
}.container .proup .box .Exhibition {background-color: #fff;width: 590rpx;height: 694rpx;border-radius: 10rpx;text-align: center
}.container .proup .box .Exhibition image {width: 373rpx;height: 373rpx;margin-top: 40rpx
}.container .proup .box .Exhibition .white {width: 407rpx;height: 36rpx;background-color: #EEEEEE;border-radius: 50%;margin: 0 auto
}.container .proup .box .Exhibition .text {font-size: 36rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #383838;margin-top: 30rpx
}.container .proup .box .Exhibition .btn {width: 300rpx;height: 84rpx;line-height: 84rpx;background: linear-gradient(-90deg, #38c6a0 0%, #6de0c3 100%);border-radius: 42rpx;font-size: 36rpx;font-family: PingFang-SC-Regular;font-weight: bold;color: #FFFFFF;margin: 40rpx auto 0;border: none
}

七、添加银行卡页面

withdraw.wxml

<view class="container"><view class="my-details"><image class="img" src="../../images/bg.png"></image><view class="details" ><view class="balance"><text>余额</text><view><image src="../../images/gc01.png"></image><view class="text">提现需要到银行卡</view></view></view><view class="withdrawal"><test>￥1000.12</test><!-- <button plain bindtap="cashTap">提现</button> --></view></view></view><view class="ul"><view class="li" bindtap="pageTo" data-url="../myBankCard/myBankCard"><view class="left"><image src="../../images/yhk01.png" mode="widthFix" style="width:25px;"></image><text>账户充值</text></view><view class="right"><image class="arrIcon" src="../../images/zy01.png"></image></view></view><view class="li" ><view class="left"><image src="../../images/qianbao.png" mode="widthFix" style="width:25px;"></image><text>总余额</text></view><view class="right"><text>¥ 6000.00</text><image class="arrIcon" src="../../images/zy01.png"></image></view></view><view class="li"><view class="left"><image src="../../images/tx01.png" mode="widthFix" style="width:25px;"></image><text>已提现</text></view><view class="right"><text>¥ 600.00</text><image class="arrIcon" src="../../images/zy01.png"></image></view></view></view><view class="proup" wx:if="{{isProup}}"><view class="box"><view class="Exhibition"><image src="../../images/ts01.png"></image><view class="text">提现规则</view><view class="richtext"><view>1.可提现金额最少为2000元</view><view>2.提现时间：每月10/20/30号；</view><view> 3.提现前提必须实名认证并绑定银行卡</view></view></view><image class="errIcon" src="../../images/gb01.png" bindtap="Invitation"></image></view></view>
</view>

withdraw.js

const app = getApp()
Page({/*** 页面的初始数据*/data: {isProup: false,height: app.globalData.height},pageTo({currentTarget: {dataset}}){// console.log(dataset);wx.navigateTo({url: dataset.url})},Invitation(){this.setData({isProup: !this.data.isProup})},goback(){wx.navigateBack()},cashTap(){wx.navigateTo({ url: '../drawMoney/drawMoney' });},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

withdraw.wxss

.container {min-height: 100vh;background-color: #F7F8F8
}.container .tabs {position: absolute;z-index: 999;width: 100%;height: 88rpx;display: flex;align-items: center;justify-content: space-between
}.container .tabs .title {text-align: center;font-size: 36rpx;font-family: PingFang-SC-Regular;font-weight: bold;color: #fff;flex: 1;height: 88rpx;line-height: 88rpx
}.container .tabs image {width: 50rpx;height: 50rpx;margin-left: 20rpx
}.container .tabs .white {width: 50rpx;height: 50rpx;margin-right: 20rpx
}.container .my-details {position: relative;height: 400rpx;z-index: 9
}.container .my-details .img {width: 100%;height: 400rpx;position: absolute;top: 0;left: 0;right: 0;z-index: 0
}.container .my-details .details {padding-top: 150rpx;position: absolute;width: 100%
}.container .my-details .details .balance {display: flex;justify-content: space-between;align-items: center;padding: 0 39rpx
}.container .my-details .details .balance text {font-size: 32rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #FFFFFF
}.container .my-details .details .balance image {width: 38rpx;height: 38rpx;margin-right: 30rpx
}.container .my-details .details .balance view {text-align: center
}.container .my-details .details .balance view .text {font-size: 24rpx;font-family: PingFang-SC-Regular;font-weight: 400;color: #fff;margin-top: 10rpx
}.container .my-details .details .withdrawal {display: flex;justify-content: space-between;align-items: center;padding: 0 36rpx;margin-top: 50rpx
}.container .my-details .details .withdrawal test {font-size: 60rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #FFFFFF
}.container .my-details .details .withdrawal button {width: 226rpx;height: 60rpx;line-height: 60rpx;text-align: center;background-color: #FFFFFF;border-radius: 30rpx;font-size: 30rpx;font-family: Adobe Heiti Std R;font-weight: normal;color: #14AE85;border: none;margin: 0
}.container .ul {margin-top: 30rpx;background-color: #fff;padding: 0 30rpx
}.container .ul .li {height: 110rpx;border-bottom: 1rpx solid #E4E4E4;display: flex;justify-content: space-between;align-items: center
}.container .ul .li .left {display: flex;justify-content: center;align-items: center;font-size: 30rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #000000
}.container .ul .li .left image {margin-right: 25rpx
}.container .ul .li .right {font-size: 32rpx;font-family: PingFang-SC-Medium;font-weight: bold;color: #FF2626;display: flex;align-items: center
}.container .ul .li .right image.arrIcon {width: 19rpx;height: 31rpx;margin-left: 20rpx
}.container .ul .li:last-child {border: none
}.container .proup {z-index: 99;position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 100vh;overflow: hidden;background-color: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center
}.container .proup .box {text-align: center
}.container .proup .box image.errIcon {width: 56rpx;height: 56rpx;margin-top: 30rpx
}.container .proup .box .Exhibition {background-color: #fff;width: 550rpx;height: 531rpx;border-radius: 10rpx;text-align: center
}.container .proup .box .Exhibition image {width: 281rpx;height: 180rpx;margin-top: 74rpx
}.container .proup .box .Exhibition .text {font-size: 32rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #000;margin-top: 30rpx
}.container .proup .box .Exhibition .richtext {text-align: left;font-size: 28rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #383838;padding: 0 20rpx;margin-top: 20rpx;line-height: 42rpx
}

八、银行卡账户充值

mybackcard.wxml

<view class="container"><!-- 银行卡列表 --><view class="bankList"><view class="items" wx:for="{{2}}"><van-swipe-cell right-width="{{ 70 }}" async-close bind:close="onClose"><view class="box"> <image src="../../images/kh01.png"></image><view class="bank"><view>开户银行：邮政银行（无锡市)</view><view>银行账号：**** **** **** **** **** 5613</view><view>开户人:zhangs</view></view></view><view slot="right" class="right"><image src="../../images/sc12.png" slot="right"></image></view></van-swipe-cell></view></view><!-- 添加银行卡 --><view class="addBank"><view bindtap="pageTo">添加银行卡</view></view>
</view>

mybackcard.js

Page({/*** 页面的初始数据*/data: {},onClose(event) {const { position, instance } = event.detail;switch (position) {case 'left':case 'cell':instance.close();break;case 'right':wx.showModal({content: '确定删除吗？',success(res) {if (res.confirm) {console.log('用户点击确定')instance.close();} else if (res.cancel) {console.log('用户点击取消')instance.close();}}})break;}},pageTo({currentTarget: {dataset}}){// console.log(dataset);wx.navigateTo({url: dataset.url})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

mybackcard.wxss

.container {min-height: 100vh;background-color: #F7F8F8;padding-bottom: 104rpx
}.container .bankList {padding: 15rpx 15rpx 0
}.container .bankList .items {margin-bottom: 15rpx;padding: 22rpx 16rpx;background: #Fff;box-shadow: 0px 4rpx 6rpx 0px rgba(183, 182, 182, 0.06);border-radius: 10rpx
}.container .bankList .items .box {height: 234rpx;border-radius: 10rpx;position: relative
}.container .bankList .items .box image {position: absolute;width: 100%;height: 100%
}.container .bankList .items .box .bank {position: absolute;z-index: 2;padding-left: 30rpx
}.container .bankList .items .box .bank view {font-size: 30rpx;font-family: PingFang-SC-Medium;font-weight: 500;color: #fefefe
}.container .bankList .items .box .bank view:first-child {margin-top: 30rpx;margin-bottom: 30rpx
}.container .bankList .items .box .bank view:last-child {margin-top: 10rpx
}.container .bankList .items .right {width: 140rpx;height: 100%;display: flex;align-items: center;justify-content: center
}.container .bankList .items .right image {width: 71rpx;height: 71rpx
}.container .addBank {background-color: #Fff;padding: 10rpx 0;position: fixed;bottom: 0;left: 0;right: 0
}.container .addBank view {width: 626rpx;height: 84rpx;line-height: 84rpx;background: linear-gradient(-90deg, #38c6a0 0%, #6de0c3 100%);border-radius: 42rpx;font-size: 36rpx;font-family: PingFang-SC-Regular;font-weight: bold;color: #FFFFFF;margin: 0 auto;text-align: center
}

九、 点击拍照功能

cameara.wxml

<view class="page-body"><view class="page-body-wrapper"><camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera><view class="btn-area"><button type="primary" bindtap="takePhoto">拍照</button></view><view class="btn-area"><button type="primary" bindtap="startRecord">开始录像</button></view><view class="btn-area"><button type="primary" bindtap="stopRecord">结束录像</button></view><view class="preview-tips">预览</view><image wx:if="{{src}}" mode="widthFix" src="{{src}}"></image><video wx:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video></view>
</view>

cameara.js

Page({onLoad() {this.ctx = wx.createCameraContext()},takePhoto() {this.ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath})}})},startRecord() {this.ctx.startRecord({success: (res) => {console.log('startRecord')}})},stopRecord() {this.ctx.stopRecord({success: (res) => {this.setData({src: res.tempThumbPath,videoSrc: res.tempVideoPath})}})},error(e) {console.log(e.detail)}
})

camera.wxss

/* pages/cameare/cameare.wxss */
.preview-tips {margin: 20rpx 0;
}
.video {margin: 50px auto;width: 100%;height: 300px;
}
.btn-area{margin: 30rpx auto;
}
.preview-tips{margin-left: 42%;
}

十、视频列表的播放与下载

dowonload.wxml

<!--pages/downloadvideo/downloadvideo.wxml-->
<view class="mainContent"><view wx:for="{{videoList}}" wx:key="{{index}}" class="mainList"><view class="playerInfo" data-src="{{item.videoUrl}}" wx:if="{{current_id && current_id == item.id}}"><view class="video"><video class="videoContent" id="videoId{{item.id}}" show-center-play-btn="true" autoplay="true"src="{{item.videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video></view></view><view class="playerInfo" data-src="{{item.videoUrl}}" wx:if="{{current_id =='' || current_id != item.id}}"><view class="video"><image class="playImg" src="../images/play.png" mode="aspectFill" bindtap="videoPlay" id="{{item.id}}" data-index="videoId{{item.id}}"/><image class="videoContent" src="{{item.poster}}" mode="aspectFill" bindtap="videoPlay" id="{{item.id}}" data-index="videoId{{item.id}}"/></view></view><view class="actionBtn"><image class="img" src="../images/upload.png" data-url="{{item.videoUrl}}" mode="aspectFit" bindtap="toUploadVideo"></image></view></view>
</view>

download.js

Page({/*** 页面的初始数据*/data: {current_id:'',//当前播放视频idvideoList:[{id:"1","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},{id:"2","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},{id:"3","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"},{id:"4","videoUrl":"http://1256993030.vod2.myqcloud.com/d520582dvodtransgzp1256993030/7732bd367447398157015849771/v.f30.mp4","poster":"//vodplayerinfo-10005041.file.myqcloud.com/3035579109/vod_paster_pause/paster_pause1469013308.jpg"}]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},//视频列表点击事件videoPlay:function(e){console.log(e)var id= e.currentTarget.dataset.indexvar currentId=e.currentTarget.id//没有播放时播放视频if(!this.data.current_id){this.setData({current_id: currentId})var videoContext = wx.createVideoContext(id)videoContext.play()}else{//有播放时先将prev暂停，再播放当前点击的currentif(this.data.current_id != currentId){var preVideoID='videoId'+this.data.current_idvar videoContextPrev = wx.createVideoContext(preVideoID)videoContextPrev.pause()}this.setData({current_id: currentId})var videoContext = wx.createVideoContext(id)videoContext.play()}},//点击下载视频并保存到toUploadVideo(e){console.log(wx.env)//wx.env.USER_DATA_PATH:微信小程序提供的本地用户文件目录wx.showLoading({title: '正在下载，请稍后',mask: true})var url = e.currentTarget.dataset.urllet fileName = new Date().valueOf()//1.下载文件资源到本地wx.downloadFile({url: url,//下载资源的urlfilePath:wx.env.USER_DATA_PATH+'/'+fileName+'.mp4',//指定文件下载后存储的路径（本地路径）(filePath放开手机没问题，开发者工具报超限错误)name:'file',// header: {}, // 设置请求的 header// formData: {}, // HTTP 请求中其他额外的 form datasuccess: function(res){console.log('downloadFile',res)wx.hideLoading()// success//2.保存视频到系统相册。支持mp4视频格式wx.saveVideoToPhotosAlbum({filePath: res.filePath,//视频文件路径，可以是临时文件路径也可以是永久文件路径（本地路径）success :function(ress) {wx.showToast({title: '下载成功',icon: 'success'})//删除临时文件var fileManager = wx.getFileSystemManager();//全局唯一的文件管理器fileManager.unlink({//删除filePath: wx.env.USER_DATA_PATH+'/'+fileName+'.mp4',success: function(resf) {console.log('unlink',resf)}})},fail (ress) {console.log('保存视频失败',ress)//未授权if(ress.errMsg == 'saveVideoToPhotosAlbum:fail auth deny'){wx.showModal({title: '提示',content: '需要您授权保存相册',showCancel: false,success: function(c) {//调起客户端小程序设置界面，返回用户设置的操作结果。wx.openSetting({success: function(settingdata) {if(settingdata.authSetting['scope.writePhotosAlbum']){wx.showModal({title: "提示",content: "获取权限成功，再次点击下载即可保存",showCancel: false})}else{wx.showModal({title: "提示",content: "获取权限失败，将无法保存到相册哦",showCancel: false})}}})}})}},})},fail: function(res) {// failwx.hideLoading()console.log('下载失败',res)}})},//获取该小程序下已保存的本地缓存文件列表  并 删除handleSavedFileList(){//1.获取该小程序下已保存的本地缓存文件列表(小程序本地存储的文件列表)wx.getSavedFileList({success: function(res){console.log("getSavedFileList",res)//遍历小程序本地存储的文件列表res.fileList.forEach((val,key) =>{//2.删除存储的垃圾数据wx.removeSavedFile({filePath: val.filePath})})}})}
})

download.wxss

/* pages/downloadvideo/downloadvideo.wxss */
.mainContent{background: #ffffff;overflow: auto;
}
.mainList{width:100%;background: #ffffff;height: 416rpx;
}
.video{width:94%;height: 324rpx;margin-left: 20rpx;position: relative;text-align: center;
}
.videoContent{width:100%;height: 324rpx;
}
/*播放小图标*/
.playImg{position: absolute;top: 46%;left:46%;width:64rpx;height: 64rpx;
}
.actionBtn{width: 100%;
margin-top: 10rpx;
}
.actionBtn .img{width:60rpx;height: 60rpx;margin-left: 20rpx;
}

十一、视频上传

shangshuanvideo.wxml

<!--pages/video/video.wxml-->
<view class="main"><view class="playerInfo"><view class="video" wx:if="{{clickFlag}}"><image class="videoContent" wx:if="{{poster}}" src="{{poster}}" mode="aspectFill" bindtap="chooseVideo"/><view class="videoContent"  wx:else bindtap="chooseVideo" ><image class="playImg" src="../images/upload-video (1).png" mode="aspectFill"/></view></view><view class="video" wx:else><image class="videoContent" wx:if="{{poster}}" src="{{poster}}" mode="aspectFill"/><view class="videoContent"  wx:else><image class="playImg" src="../images/uploadVideo.png" mode="aspectFill"/></view></view></view><view class="footerbtn"><button type="default" style="width:40%;" bindtap = "chooseVideo" wx:if="{{clickFlag}}">上传视频</button><button type="default" style="width:40%;color:#cccccc;" wx:else>上传视频</button><button type="primary" style="width:40%;" bindtap = "saveVideo">保存</button></view><view class="videoUrlResult" wx:if="{{videoUrl}}" ><view class="title">上传的视频：</view><!--autoplay="true" 视频自动播放--><video class="videoContent" style="width: 90%;margin-left: 5%;margin-top: 20rpx;" show-center-play-btn="true" src="{{videoUrl}}" object-fit="fill" bindfullscreenchange="fullscreenchange"></video></view>
</view>

shangchuanvideo.js

var app=getApp()
Page({/*** 页面的初始数据*/data: {videoUrl:"",poster:"",clickFlag:true //防重复点击 },/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 拍摄或选择视频并上传服务器*/chooseVideo: function () {console.log("chooseVideo")this.setData({clickFlag: false})let that = this//1.拍摄视频或从手机相册中选择视频wx.chooseVideo({sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄// maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持60秒camera: 'back',//默认拉起的是前置或者后置摄像头，默认backcompressed: true,//是否压缩所选择的视频文件success: function(res){//console.log(res)let tempFilePath = res.tempFilePath//选择定视频的临时文件路径（本地路径）let duration = res.duration //选定视频的时间长度let size = parseFloat(res.size/1024/1024).toFixed(1) //选定视频的数据量大小// let height = res.height //返回选定视频的高度// let width = res.width //返回选中视频的宽度that.data.duration = durationif(parseFloat(size) > 100){that.setData({clickFlag: true,duration: ''})let beyondSize = parseFloat(size) - 100wx.showToast({title: '上传的视频大小超限，超出'+beyondSize+'MB,请重新上传',//image: '',//自定义图标的本地路径，image的优先级高于iconicon:'none'})}else{//2.本地视频资源上传到服务器that.uploadFile(tempFilePath)}},fail: function() {// fail},complete: function() {// complete}})},/*** 将本地资源上传到服务器* */uploadFile:function(tempFilePath){let that = thislet third_session = wx.getStorageSync('third_session')wx.showLoading({title: '上传进度：0%',mask: true //是否显示透明蒙层，防止触摸穿透})const uploadTask = wx.uploadFile({//url: 'http://192.168.0.77:8083/upload/uploadVideo',//开发者服务器地址filePath:tempFilePath,//要上传文件资源的路径（本地路径）name:'file',//文件对应key,开发者在服务端可以通过这个 key 获取文件的二进制内容// header: {}, // 设置请求的 headerformData: {third_session: third_session}, // HTTP 请求中其他额外的 form datasuccess: function(res){console.log("uploadFile",res)// successlet data = JSON.parse(res.data)wx.hideLoading()if(data.returnCode == 200){that.setData({videoUrl: data.videoUrl,poster: data.imgUrl,duration: that.data.duration,clickFlag:true})wx.showToast({title: '上传成功',icon: 'success'})}else{that.setData({videoUrl: '',poster: '',duration: '',clickFlag:true})wx.showToast({title: '上传失败',icon: 'none'})}},fail: function() {// failwx.hideLoading()this.setData({videoUrl: '',poster: '',duration: '',clickFlag:true})wx.showToast({title: '上传失败',icon: 'none'})}})//监听上传进度变化事件uploadTask.onProgressUpdate((res) =>{wx.showLoading({title: '上传进度：'+res.progress+'%',mask: true //是否显示透明蒙层，防止触摸穿透})console.log("上传进度",res.progress)console.log("已经上传的数据长度，单位 Bytes:",res.totalBytesSent)console.log("预期需要上传的数据总长度，单位 Bytes:",res.totalBytesExpectedToSend)})},//保存数据库saveVideo(){//调用服务器保存视频信息接口}
})

shanchuanvideo.wxss

/* pages/shangchuangvideo/shangchaungvideo.wxss */
/* pages/video/video.wxss */
.main{width:100%;
}
.playerInfo{margin: 20rpx 20rpx 0 20rpx;
}
.video{border :2rpx solid #cccccc;
}
.videoContent{display: flex;align-items: center;justify-content: center;width:100%;height: 324rpx;position: relative;
}
/*播放小图标*/
.playImg{position: absolute;top: 36%;left:46%;width:64rpx;height: 64rpx;
}
.footerbtn{display: flex;margin-top: 20rpx;
}
.button{width:40%;
}
.videoUrlResult{width: 100%;margin-top: 20rpx;
}
.videoUrlResult .title{ font-size: 28rpx;font-weight: bold;color: red;margin-left: 20rpx;
}

十二、忘记密码

forgertpassword.wxml

<!--pages/forgertpassword/forgertpassword.wxml-->
<view class="nichen">找回密码
</view>
<view class="content"><view class="account"><view class="title">手机号:</view><view class="num"><input bindinput="accountInput" placeholder="输入手机号" maxlength="11" placeholder-style="color:#999999;" /></view><view class="see1"><button class="button" style="width:80px;height:30px">验证码</button></view>
</view><view class="hr"></view><view class="account"><view class="title">新密码:</view><view class="num"><input password='{{passwordType}}' placeholder="请输入密码" maxlength="11" placeholder-style="color:#999999;" /></view><view class="see"><image src='{{defaultType? "../images/see2.jpg": "../images/see1.jpg"}}' style="width:42px;height:30px;" bindtap='eyeStatus'></image></view></view><view class="hr"></view><view class="account"><view class="title">确认新密码:</view><view class="num"><input password='{{passwordType}}' placeholder="请输入密码" maxlength="11" placeholder-style="color:#999999;" /></view><view class="see"><image src='{{defaultType? "../images/see2.jpg": "../images/see1.jpg"}}' style="width:42px;height:30px;"  bindtap='eyeStatus'></image></view></view><view class="hr"></view><button class="btn" disabled="{{disabled}}" type="{{btnstate}}" bindtap="login">修改密码</button></view>

forgretpassword.js

// pages/forgertpassword/forgertpassword.js
Page({data:{disabled:true,btnstate:"default",account:"",   defaultType: true,passwordType: true},//defaultType：眼睛状态   passwordType：密码可见与否状态eyeStatus: function(){this.data.defaultType= !this.data.defaultTypethis.data.passwordType= !this.data.passwordTypethis.setData({defaultType: this.data.defaultType,passwordType: this.data.passwordType})},accountInput:function(e){var content = e.detail.value;console.log(content);if(content != ''){this.setData({disabled:false,btnstate:"primary",account:content});}else{this.setData({disabled:true,btnstate:"default"});}},
})

forgretpassword.wxss

/* pages/forgertpassword/forgertpassword.wxss */
.content{margin-top: 15px;
}
.account{display: flex;flex-direction: row;padding-left: 20px;padding-top: 20px;padding-bottom: 10px;width: 90%;
}
.title{margin-right: 30px;width: 120px;font-weight: bold;
}
.hr{border: 1px solid #cccccc;opacity: 0.2;width: 65%;float: right;
}
.see{position: absolute;right: 20px;
}
.btn{width: 90%;margin-top:40px;color: #999999;
}
.operate{display: flex;flex-direction: row;
}
.operate view{margin: 0 auto;margin-top:40px;font-size: 14px;color: #333333;
}
.login{display: flex;flex-direction: row;margin-top:15px;
}
.login view{margin: 0 auto;
}.button {background-color: #4CAF50; /* Green */border: none;padding: 1px 10px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;line-height:20px;color: white;
}
.button:hover {background-color: #3e8e41}.button:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);color: rgb(88, 84, 84);
}.nichen{margin-top: 20px;font-size: 20px;font-weight: bold;text-align: center;
}

*** 注：部分功能就不写啦，完整代码之后有时间会上传到资源**

大佬勿喷，我记录了一下学习笔记

【学习笔记】大三集中实训做的一个微信小程序之点餐系统（静态页面不包含java后台逻辑）相关推荐

1. 山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录

   效果 点击登录后,显示二维码→打开"探古"(本项目)微信小程序,扫描二维码确认登录→web端登录成功 主要流程 因为本人主要负责web前端的开发,所以本文仅介绍web前端的实现方法 ...

2. 山东大学项目实训（十七）—— 微信小程序附件上传、下载、预览、删除

   目录 附件相关功能再实现 附件业务功能介绍 设计步骤 我的上报查看事件详情 (补充) 附件相关功能再实现 下图为笔者之前所写的博客关于实现的附件上传,但是没有下载.预览和删除.正因为没有下载.预览和删 ...

3. web前端大三实训网页设计：餐饮网站设计——烧烤美食山庄(7个页面) HTML+CSS+JavaScript

   web前端大三实训网页设计:餐饮网站设计--烧烤美食山庄(7个页面) HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...

4. 【腾讯连连 腾讯物联网入门学习 第3篇】安信可IoT微信小程序全面开源，小程序上实现一键配网+控制+绑定！（源码开放）

   文章目录 一.简介 二.开发指导 2.1 腾讯物联开发平台配置 2.2 微信小程序导入步骤 三.设备开发 3.1 AT直连对接 3.2 SDK二次开发 四.本人开源微信物联网控制 一览表 另外,不要把 ...

5. 【微信小程序控制硬件⑦ 进阶篇】动起来做一个微信小程序Mqtt协议控制智能硬件的框架，为心里全栈工程师梦想浇水。

   文章目录 一.前言: 二.涉及的技术点: 三.框架的运行原理: 四.框架代码流程: 4.1 主线程: 4.2 获取设备列表显示设备,以及订阅在线的设备: 4.3 点击某设备如何实现携带此设备信息到控制 ...

6. 学习成长之路 （初章 三个月建成微信 小程序商城、ArcEngine C# GIS开发入门）

   学习 成长之路(初章 ) 三个月 建成微信小程序商城 .ArcEngine C# GIS开发入门 自我简介 先简单介绍一下,我是Domen,是一个彻彻底底的新手 . 大一 大学大一没好好学习,搞这搞那 ...

7. 做一个微信小程序需要多少钱？两种示例

   在需求明确之前,做一个微信小程序需要多少钱还不清楚.我们选择了两种目前需求量很大的小程序,并推出了价格.你可以看看有没有你想要的: [服务微信小程序] 一般是订购小程序,预订小程序,常用于服装.餐厅. ...

8. 最新中国福彩分析大数据分析大师拥有双色球数据展示微信小程序源码支持双色球数据分析多个接口

   demo软件园每日更新资源,请看到最后就能获取你想要的: 1.最新中国福彩分析大数据分析大师拥有双色球数据展示微信小程序源码支持双色球数据分析多个接口 福彩大数据分析小程序,数据来自于中国福利彩票 拥 ...

9. 如何制作一个微信小程序【微信小程序是怎么做的】

   为什么现在这么多人使用微信小程序呢?因为微信小程序除了便捷易开发,公司企业可以用来做小程序展示官网,商家也可以做小程序商城,甚至个人也可以拥有自己的小程序.那么如何制作一个微信小程序?微信小程序是怎么 ...

最新文章

1. android多功能计算器 源码,Android计算器源码
2. 2021-01-07 Python Opencv转换颜色空间 RGB转为HSV
3. flowable支持的mysql版本_Flowable3-配置
4. 从《王者荣耀》来聊聊游戏的帧同步
5. HDU 6682 Make Rounddog Happy
6. linux centos7上安装sql developer
7. 掌阅科技前三季度净利润1.66亿元 同比增长53.75%
8. zookeeper无法启动的原因定位
9. PYTORCH 定义模型
10. 压力测试 Monkey 应用程序无响应ANR Application No Response（转）
11. Android权限管理 1
12. 【转载】SAP用户出口清单(User Exits)
13. python随机抽号_Python学习随记 ————随机抽号器（一）
14. 程序员该如何提高睡眠质量？
15. excel多工作表汇总如何完成？
16. MAC锁屏不断网（快捷键启用屏保）
17. Day03 数据类型转换
18. 创建反向词典，为你打开神经网络的大门
19. 关于程序员的20 幅幽默漫画，太真实了！
20. 计算数组中某个元素的所在位置

热门文章

1. 【电路设计】基于变压器的DC/DC变换电路（含Multisim仿真）
2. 上海钢联朱军红：产业互联网的“双创”之路
3. html5新年主题,HTML CSS3农历新年祝福语生成器
4. ArrayList, LinkedList, Vector - dudu：史上最详解
5. 网页会屏蔽php代码,网站屏蔽360浏览器访问php源码js代码
6. 用MVC写的查询，添加，删除，修改，登录。
7. oracle密码带@!,oracle的密码中带@符号
8. 改进euler方法 c语言,科学网—计算方法：Euler法及其改进 - 张江敏的博文
9. Java如何实现实时消息提醒？？？
10. Java的OOP(面向对象编程)总结，有这一篇足矣