admin管理员组文章数量:1566354
微信目录集链接在此:
详细解析黑马微信小程序视频–【思维导图知识范围】 | 难度★✰✰✰✰ |
---|---|
微信小程序开发实战(第2版)入门–【开发实战(第2版)】 | ★★✰✰✰ |
不会导入/打开小程序的看这里:参考
微信小程序开发实战(第2版)入门–【开发实战(第2版)】 |
---|
文章目录
- 本系列校训
- 学习资源的选择
- 本文效果图
- 轮播图
- 本案的轮播图代码
- 本例使用的便于理解的轮播代码
- 官网的文档: 视图容器 /swiper
- 底部标签-tabBar
- 知识点
- 实际操练-tabBar
- 第一步,就是找到文件。
- 第二步,先改动一下最显眼的代码
- 第三步 ,可以换自己喜欢的图标
- 图标的注意事项
- 图标资源
- 打开小程序
- 找到图标
- 最简单,最无赖的手段
- 实际操练-加视频
- 第一步 安装node.js
- 第二步 没了
- 本文章使用的鼠标方案:
- 配套资源
- 作业:
本系列校训
用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!
学习资源的选择
黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili/video/BV1nE41117BQ/
目录如下:
…
P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。
本文效果图
本例包含 了两个知识点:
-
底部标签-
-
纵向轮播
- 下半部分-加入视频
在本文的最后也同样新介绍一套鼠标指针:从元气桌面的主题中提取出来,制成了单独安装的版本,不会安装的可以百度一下
怎样安装自己喜欢的鼠标指针方案 如何安装鼠标指针
下载并安装指针方案:
01
下载自己喜欢的鼠标指针方案,解压:
02
解压后我们会看到文件夹下有很多 ani动态光标文件 中有一个 ini文件,右键单击 ini文件(安装文件.ini),执行【安装】命令:
03
等待安装结束后打开【控制面板】→【鼠标】(Win XP 与 Win 7 操作均相同):
04
打开【鼠标属性】窗口,选择【指针】选项卡,在方案中找到刚才安装的指针方案【Crystal Clear】,然后单击窗口又下脚的【应用】→【确定】完成安装!
第二种方案
轮播图
上一节的案例中也有介绍了。参考《微信小程序-轮播图-九宫格布局–【开发实战(第2版)】》
本案的轮播图代码
这是一般的小程序最常见的轮播图代码段。使用了block wx:for
的标签
不过初学者的话,我倒不建议直接用这种。下面的这种方式要方便理解很多。小程序的开发呢?最好的方式就是,你打消“小程序开发很难”的这种观念,先让小程序每次都运行的很漂亮,然后扫二维码到自己手机上。毕竟兴趣才是学习的第一位。
本例使用的便于理解的轮播代码
<!--pages/picture/picture.wxml-->
<swiper indicator-color="white" indicator-active-color="#ff4c91" indicator-dots autoplay interval="3500" duration="1000" vertical circular>
<swiper-item>
<image src="/images/timg1.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg2.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg3.jpg"></image>
</swiper-item>
<swiper-item>
<image src="/images/timg4.jpg"></image>
</swiper-item>
</swiper>
官网的文档: 视图容器 /swiper
https://developers.weixin.qq/miniprogram/dev/component/swiper.html
wiper
基础库 1.0.0 开始支持,低版本需做兼容处理。
微信 Windows 版:支持
微信 Mac 版:支持
渲染框架支持情况:Skyline (使用最新 Nighly 工具调试)、WebView
功能描述
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
通用属性
从上面的参数可知:本案例的代码难度并不难,还是纵向的这个应用场景,确确实实让人感觉上比较舒适。
底部标签-tabBar
什么是 tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
底部 tabBar
顶部 tabBar
注意:
tabBar中 只能配置最少 2 个、最多 5 个 tab 页签(3-4个这种是最常见的)
当渲染顶部 tabBar 时,不显示 icon,只显示文本 (在顶部时一般使用swiper实现效果更好)
理论的部分参考:
《细说小程序底部标签—【浅入深出系列006】》
全部的标签页代码:
{
"pages": [
"pages/index/index",
"pages/guest/guest",
"pages/video/video",
"pages/picture/picture"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ff4c91",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#ccc",
"selectedColor": "#ff4c91",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/invite.png",
"selectedIconPath": "images/invite.png",
"text": "邀请函"
}, {
"pagePath": "pages/picture/picture",
"iconPath": "images/marry.png",
"selectedIconPath": "images/marry.png",
"text": "照片"
}, {
"pagePath": "pages/video/video",
"iconPath": "images/video.png",
"selectedIconPath": "images/video.png",
"text": "美好时光"
}, {
"pagePath": "pages/guest/guest",
"iconPath": "images/guest.png",
"selectedIconPath": "images/guest.png",
"text": "宾客信息"
}]
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
知识点
tabBar 是一个很怪的分级,在官方的文档里不属于任何一块。
搜索也没有任何的说明
但是事实上,几乎是任何一个小程序都要tabBar这个组件。
实际操练-tabBar
第一步,就是找到文件。
事实上,这一步很关键,别看我码龄20多年,事实上,不管在哪个项目,都会时不时发生改了半天,发现程序完全不起作用,然后花了N小时,最后发现,改错文件了,当项目一大,代码一多,文件那也是成倍的增长,而且很多的文件有的时候叫的名字是一个,里面的代码也差不多,这个时候那就更容易看错文件了。
友情提示 可以使用资源管理器里的搜索功能,真的很好用。
第二步,先改动一下最显眼的代码
如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列002】》
比如删掉一个代码块。净鼠标的这一段代码删除
删除了之后,要保存文件。
也有可能会出现下面的情况:
要注意的是,此时小程序的调试器界面不动。
这说明可能出现了致命错误,使得小程序开发者工具无法编译,只显示了上一次的效果。
如果把小程序重新打开
就会发现是这样的:
这种就是致命的错误,一般来说,都是在app.js 如app.json里。
这种情况下,在其它的编辑器工具里,是存在后悔药的。比如程序里里使用率最高的idea 系列。
本idea 里使用了颜值插件-《没有颜值插件的编辑器是没有灵魂的–【idea-theme插件】》
在这里就不得不吐槽一下鹅厂的UI ,黑色方案如同摆设,不然,你很难看得清上面的菜单与其它工具的分界,其实就是这个浅色的方案,也不怎么样。更要命的是,小程序的开发工具没有IDEA的那种后悔药。改错了文件 ,是找不到历史版本的。而且,它也没有跟git 集成。
好吧,谁让它是鹅厂的工具呢?
这个时候,Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前,把这个错误的截图,并保存,查看几下那就更好了。面对页面出错不是大惊小怪,而是看看是啥错误信息,那你基本具备了向高手迈进的姿势了。
当然了,这也是没有办法的办法了。事实上ctrl+Z 是windows 自创立以来,编辑器都自带的功能。
当然了,在学习的过程中:我是这样做的。原版的ZIP文件在同一级目录下放着。这样改坏了文件之后,就恢复以前的文件,不过在开发的过程中,只能说是要小心一些了。
真心希望鹅厂能多考虑考虑程序员的事情,而少在王者荣耀的皮肤上花一些精力
而且更无语的是,1.06也没升级啥功能,更没有什么特别的新功能,就早早的不支持win7了。人家的idea2023 还没这么任性呢。有大学的校园里还在使用win7系统的是不是应该点赞一下这篇博文呢?
第三步 ,可以换自己喜欢的图标
图标的注意事项
对于WEB比较熟悉的同鞋可以转身离开了。因为微信小程序的图标跟WEB页的菜单的图标确实很像,技术也比较接近。
1 最好要PNG格式。
2 最好准备两个颜色(一为你的应用项目的所用颜色,另一为黑白色)
其实呢,也没有人规定必须要这样的设置,你就是设一个红色一个绿色也可以,但是问题是人家商业性的小程序太多了,大家都这样,那你一个初学者,把握不好颜色,UI的设计的时候,往往就是乱搞一气。
3 最好是跟小程序一起打包,不要放服务器,也不要放云空间。这个东西在小程序这里其实就是相当于网站的菜单,如果第一时间显示不出来那是很糟糕的事情。
补:
PNG(Portable Network Graphics),便携式网络图形,是一种采用无损压缩算法的位图格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
重要的是,他支持alpha–直白一点说就是透明。
“jpg是一种图像文件格式,全称为JPEG(JointPhotographicExpertsGroup),是一种有损压缩格式,能够将图像压缩在很小的储存空间,常见的后缀名为.jpg和.jpeg。
图标资源
阿里图标库 https://www.iconfont/collections/index
打开小程序
并打开app.json
找到tabBar这一段
"tabBar": {
"color": "#ccc",
"selectedColor": "#ff4c91",
"borderStyle": "white",
"backgroundColor": "#fff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "images/invite.png",
"selectedIconPath": "images/invite.png",
"text": "邀请函"
}, {
"pagePath": "pages/picture/picture",
"iconPath": "images/marry.png",
"selectedIconPath": "images/marry.png",
"text": "照片"
}, {
"pagePath": "pages/video/video",
"iconPath": "images/video.png",
"selectedIconPath": "images/video.png",
"text": "美好时光"
}, {
"pagePath": "pages/guest/guest",
"iconPath": "images/guest.png",
"selectedIconPath": "images/guest.png",
"text": "宾客信息"
}]
},
注意看这里。
这表示这是一个对象,里面有四个属性,分别为pagePath,text,iconPath,selectedIconPath
而“:”号后面就是他们的值。
找到图标
将鼠标称动到 "images/icon/renwu1.png"
上面,然后左手按ctrl按键,鼠标一点击,小程序平台就会帮助跳转到这个图片上面。有的时候会失效:( ,不过自己找到图片也不很难。
再用鼠标,指到资源管理器里的这张图片的位置,右击鼠标。
选择 “在资源管理器中显示”(要注意的是这里的资源管理器是指windows自带的)苹果本的自行对比吧。我的苹果本其实太老了。为了几个菜单去搞一个程序有点太麻烦了,见谅了。不过整体布局是一致的。
最简单,最无赖的手段
去阿里的图标网下接下载替换。
直接下载,然后覆盖原来的文件。不过,有一些图标支持选择灰度值,有一些选择了之后就。
先不要管这个小细节,后面再处理。
回到小程序开发者平台里 重新编译
实际操练-加视频
第一步 安装node.js
参考《微信小程序开发实战(第2版)入门–【开发实战(第2版)】》这个系列的总目录里介绍了node。
启动之后。如下
第二步 没了
安心的看本案的视频就好了。带服务器的例子一般调起来都比较麻烦。
本文章使用的鼠标方案:
有机械控的小朋友可以下载,我最喜欢的是当操作的时候,那个小齿轮还在旋转。也给编程加了一点小乐趣了
配套资源
微信小程序-底部标签-竖轮播图-加入视频–【开发实战(第2版)】
https://download.csdn/download/dearmite/88216558
本文章使用的鼠标方案
https://download.csdn/download/dearmite/88216566
作业:
1 下载本案例,删一轮播图,截图。 加一张轮播图,截图。
2 修改底部标签页里的图标并替换。截图!
3 启动node.js 截图。
4 在模拟器的播放本案视频,截图。
版权声明:本文标题:微信小程序-底部标签-竖轮播图-加入视频--【开发实战(第2版)】 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1727547669a1120294.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论