4.微信小程序-B站：先把首页造出来
(小安娜：失踪人口已上线，大家快来喷喷喷他！)，sorry++，最近身边发生太多事情，导致这最关键的实战开篇都未写，（小安娜-分身1：懒就是懒，不负责任，我之前学的都忘了），(小安娜-分身2：上一篇双11发完就消失了，不会是兼职送快递去了吧)，(小安娜-分身3：退订差评，再也不跟你学了)…，好了好了，有事回了趟老家才回来，不说这个，咋们继续小程序开发。（小安娜：是回去相亲了吧！）
效果图（也可直接跳过）
开发前热身
打开B站移动版网站：http://m.bilibili.com/index.html，打开应该是个这样的画面，也是我们今天要完成的界面：
（小安娜：不对啊，我打开的是电脑版的），不会吧「我呆住一分钟」，哦直接打开网站会跳转到PC版本，要用手机或Chrome开发工具中的Toggle device toolbar打开才可正常访问，（小安娜：不可能用手机打开调试吧，Toggle device toolbar是什么？），Toggle device toolbar是我们开发移动网页必备工具，可以模拟各种移动设备，Chrome自带无需另外安装，整个调试界面是这样的：
（小安娜：原来如此，6个箭头成功吸引了本小姐的注意）
接着来分析下页面结构，看项目需要怎么创建模板，下图是首页和直播页对比：
发现顶部绿色区域和底部蓝色区域每个界面都有并且是一样的，中间内容区域①和②是一种结构，③和④是一种结构，（小安娜：好意思提1、2、3、4，字写的丑就打字，还有我发现顶部又是绿色的！很喜欢顶部是绿咩？），所以我会建立3个模板文件：header.wxml、footer.wxml、item.wxml，（小安娜：头部、底部、1和2、3和4，不是4个文件吗？），你这样归纳也可以，但文件太多难管理，我把内容区域归纳为一个item.wxml文件，别忘记了一个wxml文件可以写多个<template>，所以我建立的目录结构是这样的：
（小安娜：resources文件夹是什么，没见你提过？），用来放静态资源文件的，（小安娜：静态资源文件？？？啥意思），目前来说就是放项目所需图片，（小安娜：装13，早说放图片不就行了。）
为了接下来更好学习，建议此时应该打开官方组件文档：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
由于这是实战篇，不会太多介绍组件怎么使用，所以当出现不熟悉的组件时，可以去官方文档查阅。（小安娜：已打开，还添加到书签了），感动啊，难得一次不喷我还顺着我，（小安娜：因为是微信官方的文档啊），我~风中凌乱.jpg
头部header.wxml
替换前的HTML代码：
<!-- 顶部工具栏 -->
<nav class="nav-bar">
<div class="nav-wrp">
<a href="http://m.bilibili.com/index.html" class="logo"></a>
<a class="cell" href="http://www.bilibili.com/mobile/history.html"><i class="nav-icon bili-icon-history"></i></a>
<a class="cell" toggle-switch=".search" href="javascript: void(0);"><i class="nav-icon bili-icon-search"></i></a>
</div>
</nav>
<!-- 导航菜单 -->
<div class="flex-bar main">
<ul class="flex-bar-in">
<li class="nav-item nav-index on"><a href="http://m.bilibili.com/index.html" title="首页">首页</a></li>
<li class="nav-item nav-channel"><a href="http://m.bilibili.com/channel.html" title="频道">频道</a></li>
<li class="nav-item nav-live"><a href="http://live.bilibili.com" title="直播">直播</a></li>
<li class="nav-item nav-rank"><a href="http://bilibili.com/mobile/ranking.html" title="排行">排行</a></li>
<li class="nav-item nav-space"><a href="http://bilibili.com/mobile/myspace.html" title="我的">我的</a></li>
</ul>
</div>
<nav>、<div>、<ui>、<li>、<i>都可替换成容器组件：<view>；<a>可替换成导航组件：<navigator>，保留原标签的class属性，（小安娜：那<a>标签的href属性呢？），在<navigator>可用url属性替换，不同的是<navigator>只能跳转应用内页面链接，url不能随便写一个http://ctt.jieerf.com这样的链接跳转过去，（小安娜：啊···，怎么解决呢？像我们之前做的App中帮助和反馈都是网页做好，App中跳转网页。），我目前还没发现能跳转外站点的组件，唯一的解决方法是在微信小程序里重写页面，（小安娜：是你学艺不精不知道吧，别教坏我啦，还是得求助现场大神们）（小安娜-求助画面：求大神留言指点，怎么解决微信跳转外部链接，如解决必当重谢！），你行啊，其实我们转换下想想，真很少机会用到跳转外部链接，App中用到网页的地方最大的出发点是为了：跨平台。现在小程序已经做到跨平台了，真没必要用到内嵌外部网页了。（小安娜：好像也有道理，但是我还是想知道，如果可以做到，那么你会很丢脸2333333~）
替换后的wxml代码：
<!-- 顶部工具条-begin -->
<view class="nav-bar">
<view class="nav-wrp">
<!-- LOGO -->
<navigator class="a logo"></navigator>
<!-- 观看历史 -->
<navigator class="a cell">
<view class="nav-icon bili-icon-history"></view>
</navigator>
<!-- 搜索框 -->
<view class="a cell">
<view class="nav-icon bili-icon-search"></view>
</view>
</view>
</view>
<!-- 顶部工具条-end -->
<!-- 导航菜单-begin -->
<view class="flex-bar main">
<view class="flex-bar-in">
<view class="li nav-item on">
<navigator url="" class="a">首页</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">频道</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">直播</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">排行</navigator>
</view>
<view class="li nav-item">
<navigator url="" class="a">我的</navigator>
</view>
</view>
</view>
<!-- 导航菜单-end -->
（小安娜：替换前后对比很久，发现你把<a>标签替换成<navigator>后class属性值多加了个a，<li>替换成<view>后class属性值多加了个li，这是有什么特殊意思吗？还有搜索框原本是<a>标签但是你替换成了<view>组件，不是说<a>替换<navigator>组件吗？），不错不错，你还蛮细心的，这是因为官方CSS中有元素选择器：.flex-bar .flex-bar-in a，这样做wxss文件改动最小：.flex-bar .flex-bar-in .a。至于搜索、观看历史两个按钮，为什么搜索按钮用<view>代替，我们去使用一下官方网站就明白了：
①是触发搜索按钮后界面，②是触发观看历史按钮后界面。注意看箭头所指红色框内，①地址没改变，②地址发生了改变。这就表示搜索界面只是显示/隐藏状态切换，而观看记录是页面间的跳转。（小安娜：哦哦，也就是①可以用组件hidden属性，②用<navigator>组件对吧？），没错了，给你个赞。（小安娜：哎~没办法，智商这东西你能跟得上吗！）
滚动广告Swiper
原配方效果图：
替换前的HTML代码：
<div id="sliderWrapper" class="slider-wrapper">
<div class="slider-bg"></div>
<div>
<div id="slider" class="swipe" style="visibility: visible;">
<div class="swipe-wrap" style="width: 1875px;">
<a href="http://www.bilibili.com/blackboard/activity-yourname.html" data-index="0" style="width: 375px; left: 0px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
<img src="http://i0.hdslb.com/bfs/archive/174612a1f12e8cfd8861f4df7563d9e4b88c052f.jpg" alt="我们请你看电影">
</a><a href="http://blhx.biligame.com/yuyue" data-index="1" style="width: 375px; left: -375px; transition-duration: 300ms; transform: translate(0px, 0px) translateZ(0px);">
<img src="http://i0.hdslb.com/bfs/archive/327b936f88b841ace06160b1dab3d494d14a6e1f.jpg" alt="少女海战预约开启">
</a><a href="http://www.bilibili.com/blackboard/activity-B14MLBEMe.html" data-index="2" style="width: 375px; left: -750px; transition-duration: 0ms; transform: translate(375px, 0px) translateZ(0px);">
<img src="http://i0.hdslb.com/bfs/archive/c9ee4349981a65626265997283634d8e29422241.jpg" alt="番剧弹幕禁水试行规则">
</a><a href="http://www.bilibili.com/blackboard/activity-Hy8hXpczg.html" data-index="3" style="width: 375px; left: -1125px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
<img src="http://i0.hdslb.com/bfs/archive/60044b537519cfe1baa8602b26b79da55c81c00f.jpg" alt="毒毒更健康~">
</a><a href="http://bangumi.bilibili.com/moe/2016/jp/index" data-index="4" style="width: 375px; left: -1500px; transition-duration: 300ms; transform: translate(-375px, 0px) translateZ(0px);">
<img src="http://i0.hdslb.com/bfs/archive/77e825a2579bc08e78baba9ce28319d2b27c914b.jpg" alt="海选第10天！">
</a>
</div>
</div>
<div class="swipe-btn-wrapper">
<div class="swipe-btn-list">
<a></a><a class="on"></a><a></a><a></a><a></a>
</div>
</div>
</div>
</div>
由于微信官方提供一个滑动组件：swiper，这里会用官方组件重新写此功能。
重写后的wxml代码：
<!-- 滚动广告 begin -->
<view class="slider-wrapper">
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 滚动广告 end -->
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
/* 滚动广告配置 */
// 图片数据集合
imgUrls: [
'http://i0.hdslb.com/bfs/archive/9bab17a99758cc7a72531d15d2d5a85d73b78ded.jpg',
'http://i0.hdslb.com/bfs/archive/57d8001838ff81c64bef2682070e53efbe2736b7.jpg',
'http://i0.hdslb.com/bfs/archive/499730dbcd76823664c48e661726a37164158795.jpg',
'http://i0.hdslb.com/bfs/archive/c9682eac8f46fd2b261b739c5c88e21adaffab53.jpg',
'http://i0.hdslb.com/bfs/archive/414cf391f88bb098ded766b1d7effd9216be34ef.jpg'
],
// 是否显示面板指示点
indicatorDots: false,
// 是否自动切换
autoplay: true,
// 自动切换时间间隔
interval: 5000,
// 滑动动画时长
duration: 1000
},
onLoad: function () {}
})
（小安娜：我运行代码，但我发现，官方的底部有5个小圆点表示总共5图片，当前是第几张，上面代码没这个效果？），你可以把swiper的indicator-dots="{{true}}"改成true，就会显示指示点了，但我个人觉得比较不好看，所以默认就不显示了。（小安娜：虽然你没一点审美，但这次还比较认同你，没办法修改吗？），暂时还没有，官方文档也未说明，（小安娜：好吧，只能先这样了）。
内容Body（←划重点）
官网内容区域包含很多分类，但很多结构是一样的，这里选3个具有代表性不同结构的分类：
- 热门推荐
- 正在直播
- 番剧更新
原配方效果图：
还记得我们一开始创建item.wxml内容模板文件，现在要在里面添加热门推荐、在线直播、番剧更新模板：
<!-- 热门推荐、动画区Item -->
<template name="jiefItem1">
<!-- List Item begin -->
<view class="content-list">
<navigator class="item">
<view class="top">
<view class="cover-img"
style="opacity: 1; background-image: url({{coverImg}});">
</view>
</view>
<view class="info">
<view class="title">{{title}}</view>
<view class="meta clearfix">
<view class="cell left">
<view class="bilibili-index-sprite bilibili-index-play"></view>
<text>{{playNum}}</text>
</view>
<view class="cell left">
<view class="bilibili-index-sprite bilibili-index-danmu"></view>
<text>{{commentNum}}</text>
</view>
</view>
</view>
</navigator>
</view>
<!-- List Item end -->
</template>
<!-- 直播Item -->
<template name="jiefItem2">
<!-- List Item begin -->
<view class="content-list">
<navigator class="item">
<view class="top">
<view class="cover-img"
style="opacity: 1; background-image: url({{coverImg}});">
</view>
</view>
<view class="info">
<view class="avatar">
<image mode="scaleToFill" src="{{avatarImg}}"></image>
</view>
<view class="user">
<view class="name text-overflow">{{name}}</view>
<view class="desp text-overflow">{{desp}}</view>
</view>
<view class="online text-overflow">{{online}}</view>
</view>
</navigator>
</view>
<!-- List Item end -->
</template>
<!-- 番剧更新Item -->
<template name="jiefItem3">
<!-- List Item begin -->
<view class="content-list bangumi-list">
<navigator class="item">
<view class="top">
<view class="cover-img"
style="opacity: 1; background-image: url({{coverImg}});">
</view>
</view>
<view class="info">
<view class="bangumi-title text-overflow">{{bangumiTitle}}</view>
<view class="bangumi-page text-overflow">{{bangumiPage}}</view>
</view>
</navigator>
</view>
<!-- List Item end -->
</template>
（小安娜：{{coverImg}}、{{title}}等这种是什么意思？），之前我们讲过使用模板时候可以传入数据data给模板，定义模板时先规范好模板里面使用数据的格式，其他地方想用name='jiefItem1'模板就必须按照{coverImg: '',title: '',playNum: '',commentNum: ''}这种规范传入数据。（小安娜：隔这么久早忘了，那要怎么使用呢？），怎么使用这太简单了，就留给你去完成吧，咋们之前学过的，给你5分钟思考。（小安娜：切~，你以为这能难住本小姐）「滴答滴答…小安娜刚进入思考模式」，小安娜算了吧，看你的表情感觉要思考很久，直接公布答案吧。
在index.wxml接着添加代码：
<!-- 热门推荐 begin -->
<view class="row-container">
<navigator class="header">
<view class="left">
<view class="bilibili-index-sprite bilibili-index-hot"></view>
<text>热门推荐</text>
</view>
<view class="right hot">
<view class="bilibili-index-sprite bilibili-index-ranking"></view>
<text>排行榜</text>
</view>
</navigator>
<view class="content-wrapper">
<block wx:for="{{hotList}}" wx:key="avid">
<!-- 使用热门推荐模板，传入当前循环对象item -->
<template is="jiefItem1" data="{{...item}}"/>
</block>
</view>
</view>
<!-- 热门推荐 end -->
<!-- 正在直播 begin -->
<view class="row-container">
<navigator class="header">
<view class="left">
<view class="bilibili-index-sprite bilibili-index-live"></view>
<text>正在直播</text>
</view>
<view class="right">
<text>查看更多直播</text>
<view class="bilibili-index-sprite bilibili-index-arrow"></view>
</view>
</navigator>
<view class="content-wrapper">
<block wx:for="{{liveList}}" wx:key="avid">
<!-- 使用正在直播模板，传入当前循环对象item -->
<template is="jiefItem2" data="{{...item}}"/>
</block>
</view>
</view>
<!-- 正在直播 end -->
<!-- 番剧更新 begin -->
<view class="row-container">
<navigator class="header">
<view class="left">
<view class="bilibili-index-sprite bilibili-index-bangumi"></view>
<text>番剧更新</text>
</view>
<view class="right">
<text>查看更多番剧</text>
<view class="bilibili-index-sprite bilibili-index-arrow"></view>
</view>
</navigator>
<view class="content-wrapper">
<block wx:for="{{bangumiList}}" wx:key="avid">
<!-- 使用正在直播模板，传入当前循环对象item -->
<template is="jiefItem3" data="{{...item}}"/>
</block>
</view>
</view>
<!-- 番剧更新 end -->
index.js中添加数据源：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
/* 内容Body数据 */
// 热门推荐
hotList: [
{
coverImg: 'http://i2.hdslb.com/bfs/archive/1239539a2f262d933bca7c2c1e290139420ba76a.jpg_320x200.jpg',
title: '【乐正绫】《华夏之章》【小旭PRO】【绛舞乱丸】',
playNum: '4.7万',
commentNum: '977',
avid: 'av1'
},
{
coverImg: 'http://i1.hdslb.com/bfs/archive/ecce95b426faf188e6c28f9d3a0bdc63c5a72bb3.jpg_320x200.jpg',
title: '【斗图歌】装逼不如斗图',
playNum: '4.7万',
commentNum: '977',
avid: 'av2'
},
{
coverImg: 'http://i0.hdslb.com/bfs/archive/11bf8d41fffcad31976317760e301e2db64be8c8.png_320x200.png',
title: '【胖胖球】【双子星】【獒龙】荒岛 - El transcurrir de las horas',
playNum: '4.7万',
commentNum: '977',
avid: 'av3'
},
{
coverImg: 'http://i0.hdslb.com/bfs/archive/e73a92b0ed615b4d6568888906d09f84d0835674.jpg_320x200.jpg',
title: '撩人净土系列【红菱歌舞伎初音】极乐净土【大神犬PV付】MME配布',
playNum: '4.7万',
commentNum: '977',
avid: 'av4'
}
],
// 正在直播
liveList: [
{
coverImg: 'http://i0.hdslb.com/bfs/live/96025d17ed05961230a7d1401ca1fe3b79cc12db.jpg',
avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
name: '尤樱',
desp: '你女朋友在直播你不来看看吗？',
online: '877',
avid: 'av5'
},
{
coverImg: 'http://i0.hdslb.com/bfs/live/a1678768dd9c7023af7ab0f3de2a2df2c525e741.jpg',
avatarImg: 'http://i0.hdslb.com/bfs/face/d1bec5ec111987537ecf3e7f43a8b3678ed3c5c3.jpg',
name: '我是小麦伊哦哦',
desp: '告别:我爱你们',
online: '877',
avid: 'av6'
},
{
coverImg: 'http://i0.hdslb.com/bfs/live/89047f3faee35d0cb095d7dfb01ec4d3a8ec4434.jpg',
avatarImg: 'http://i0.hdslb.com/bfs/face/1e31ac069058528e26b9be60b26d86c9c9a99f62.jpg',
name: '坂本叔',
desp: '【坂本】非洲黑客',
online: '877',
avid: 'av7'
},
{
coverImg: 'http://i0.hdslb.com/bfs/live/24dbcc68325ff5fb3d235af97ad075dc5087733a.jpg',
avatarImg: 'http://i2.hdslb.com/bfs/face/c55b2eae13646925187514c6f19e19293294d0c5.jpg',
name: 'miriちゃん',
desp: '日语点歌姬',
online: '877',
avid: 'av8'
}
],
// 番剧更新
bangumiList: [
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/4d06e660b8da9cb5335552f4ebde89bbcb2e9d4f.jpg',
bangumiTitle: '双星之阴阳师',
bangumiPage: '更新至第34话',
avid: 'av9'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/0e6bce5d018796dda7782aa5c97bfdd14691348a.jpg',
bangumiTitle: '口水三国',
bangumiPage: '更新至第 关羽篇话',
avid: 'av10'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/367387d69ac43c160a453d14cb34256abaca3b4a.jpg',
bangumiTitle: '双星之阴阳师',
bangumiPage: '更新至第34话',
avid: 'av11'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/4937bf71a4a5a6a426d09e9a78d27696b4746507.jpg',
bangumiTitle: '双星之阴阳师',
bangumiPage: '更新至第34话',
avid: 'av12'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/2ed6be9050dfa4afe6e2651741d81843a0e81c67.jpg',
bangumiTitle: '黑白来看守所',
bangumiPage: '更新至第9话',
avid: 'av13'
},
{
coverImg: 'http://i0.hdslb.com/bfs/bangumi/2673ac643b48eb5bda64c960a2ca850fbebb839d.jpg',
bangumiTitle: '夏目友人帐 伍',
bangumiPage: '更新至第8话',
avid: 'av14'
}
]
},
onLoad: function () {}
})
中间内容部分到这里就完成了！（小安娜：我怎么感觉我被套路了！）
底部footer.wxml
原配方效果图：
我们是微信小程序，所以肯定不会有电脑版、客户端这些链接出现。（小安娜：其实是你没办法加，因为跳转不了外部链接2333~）
<!-- 底部-begin -->
<view class="footer">
<view>哔哩哔哩弹幕视频网 沪ICP备13002172号-3</view>
<view>信息网络传播视听节目许可证：0910417</view>
<view>【微信小程序】完全模仿B站移动Web端网站</view>
<view>made in 杰尔夫CTT（ctt.jieerf.com）</view>
</view>
<!-- 底部-end -->
（小安娜：↑↑↑超鄙视上面代码，又在里面加广告），嘘~你是不是自己人啊，写了这么多没功劳也有苦劳，就让我宣传宣传我们自己嘛。（小安娜：我是杰尔夫CTT一员，我喂自己袋盐！）
小安娜有问题
为什么没讲解把CSS替换成WXSS？
杰尔夫君：因为大部分CSS都可以在WXSS文件中使用，如果讲太多CSS替换成WXSS会导致篇幅太长，非常影响阅读体验，我会把所有代码都上传到Git，详细代码请参考：
- Github：https://github.com/jieerf/weapp-jief-bilibili
- git.oschina：https://github.com/jieerf/weapp-jief-bilibili
如有任何阅读问题或意见反馈，欢迎加QQ群：301926812
4.微信小程序-B站：先把首页造出来的更多相关文章
- 1.微信小程序-B站：前言准备
前言 <微信小程序开发-B站>是以bilibili移动端网站为基础开发微信小程序版本,笔者喜欢的学习是愉快.轻松并能学到实战的东西,不知各位观友有没有一样的经历,就是一有问题不是先去Goo ...
- 3.微信小程序-B站：wxml和wxss文件
WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉 ...
- 微信小程序-B站：wxml和wxss文件
WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉 ...
- 2.微信小程序-B站：需要先知道这些
文件结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page.一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必须 作用 app.js 是 小程序逻辑 app. ...
- 微信小程序UI------实现携程首页顶部的界面（弹性布局）
今天写了一个携程界面的UI,利用H5的弹性盒子来实现,学过H5弹性盒子的,来看是比较方便的,因为CSS代码都差不多. 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下: 主要是携程首页的四个模块 ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 解决Mac版微信小程序开发工具打开后无法显示二维码
问题描述: 正常情况下,打开微信小程序开发工具后,首页提示扫描二维码进行登陆,但是如果不显示二维码,当然无法登陆. 解决方案: 无法显示二维码肯定是程序运行哪里出错了,我们直接点击桌面图标是无法排查错 ...
- 建站集成软件包 XAMPP搭建后台系统与微信小程序开发
下载安装XAMPP软件,运行Apache和MySQL 查看项目文件放在哪个位置可以正常运行 然后访问localhost即可 下载weiphp官网的weiapp(专为微信小程序开发使用)放在htdocs ...
- 张小龙宣布微信小程序1月9日发布，并回答了大家最关心的8个问题
2016 年 12 月 28 日,张小龙在微信公开课 PRO 版的会场上,宣布了微信小程序的正式发布时间. 微信小程序将于 2017 年 1 月 9 号正式上线. 同时他解释称,小程序就像PC时代的网 ...
随机推荐
- 巨蟒python全栈开发-第16天 核能来袭-初识面向对象
一.今日内容总览(上帝视角,大象自己进冰箱,控制时机) #转换思想(从面向过程到面向对象) 1.初识面向对象 面向过程: 一切以事物的发展流程为中心. 面向对象: 一切以对象为中心,一切皆为对象,具体 ...
- 巨蟒python全栈开发-第17天 核能来袭-成员
一.今日主要内容 1.成员 在类中你能写的所有内容都是类的成员 2.变量 (1)实例变量:昨天写的就是实例变量,由对象去访问的变量. (2)类变量(静态变量):此时,这个变量属于类,但是对象也可以访问 ...
- 巨蟒python全栈开发数据库前端1:HTML基础
1.HTML介绍 什么是前端? 前端就是我们打开浏览器的页面.,很多公司都有自己的浏览器的页面,这个阶段学习的就是浏览器界面 比如京东的界面:https://www.jd.com/ 引子 例1 soc ...
- Linux挂载:VMware tools for Linux安装
安装VMTools [root@localhost ~]# mkdir /mnt/cdrom [root@localhost ~]# mount /dev/cdrom /mnt/cdrom/ [roo ...
- Python位运算符
按位运算符是把数字看作二进制来进行计算的.Python中的按位运算法则如下: 下表中变量 a 为 60,b 为 13,二进制格式如下: a = 0011 1100 b = 0000 1101 ---- ...
- django--admin模型层
django amdin是django提供的一个后台管理页面,改管理页面提供完善的html和css,使得你在通过Model创建完数据库表之后,就可以对数据进行增删改查,而使用django admin ...
- python小知识点复习
join 与 split 对应,join传入的列表只包含字符串卡类型 字典 dic = {'x':1, 'y':2, 'x':3} print(dic) # {'x': 3, 'y': 2} 重复的k ...
- tomcat 是如何处理jsp和servlet请求
我们以一个具体的例子,来跟踪TOMCAT, 看看它是如何把Request一层一层地递交给下一个容器, 并最后交给Wrapper来处理的. 以http://localhost:8080/web/logi ...
- Android学习十二---在android上实现图像匹配
一.效果图及功能描述 效果图 点击ShowImg后 点击match,然后点击showmatch,可以不断点击showmatch. 主要功能描述:显示在SD卡上已经存在的图片test.jpg,根据图片在 ...
- keras 学习文档
https://github.com/fchollet/keras-resources https://keras.io/