微信目录集链接在此:
详细解析黑马微信小程序视频–【思维导图知识范围】 | 难度★✰✰✰✰ |
---|---|
微信小程序开发实战(第2版)入门–【开发实战(第2版)】 | ★★✰✰✰ |
不会导入/打开小程序的看这里:参考
微信小程序开发实战(第2版)入门–【开发实战(第2版)】
本系列校训
用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!
学习资源的选择
黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:
…
P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。
本文效果图
注:真实界面无外围的装饰
本例包含 了以下知识点:
-
底部标签-
-
九宫格
轮播图
在本文的最后也同样新介绍一套鼠标指针:从元气桌面的主题中提取出来,制成了单独安装的版本,不会安装的可以百度一下,本文最后也附了安装教程
情人节的鼠标方案,那必须是爱心之箭呀
轮播图
上一节的案例中也有介绍了。参考《微信小程序-轮播图-九宫格布局–【开发实战(第2版)】》
本案的轮播图代码
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="silde-image" style="width:100%;height:176px;"></image>
</swiper-item>
</block>
</swiper>
这是一般的小程序最常见的轮播图代码段。使用了block wx:for
的标签
页面全部代码在此:
<view class="haibao">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="silde-image" style="width:100%;height:176px;"></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="nav">
<block wx:for="{{navs}}">
<view class="item" bindtap="navBtn" id="{{index}}">
<view>
<image src="{{item.img}}" style="width:58px;height:56px;"></image>
</view>
<view>
{{item.name}}
</view>
</view>
</block>
</view>
<view class="hr"></view>
因为使用了wx:for 所以,还需要到 js里找图片资源:
data: {
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 1000,
imgUrls: [
"../../images/haibao/1.jpg",
"../../images/haibao/2.jpg",
"../../images/haibao/3.jpg",
"../../images/haibao/4.jpg"
],
navs: []
},
全部的JS文件 :
Page({
data: {
indicatorDots: false,
autoplay: true,
interval: 5000,
duration: 1000,
imgUrls: [
"../../images/haibao/1.jpg",
"../../images/haibao/2.jpg",
"../../images/haibao/3.jpg",
"../../images/haibao/4.jpg"
],
navs: []
},
onLoad: function (options) {
var page = this;
var navs = this.loadNavData();
page.setData({ navs: navs });
},
navBtn: function (e) {
console.log(e);
var id = e.currentTarget.id;
if (id == "9") {
wx.navigateTo({
url: '../type/type'
})
}
},
loadNavData: function () {
var navs = [];
var nav0 = new Object();
nav0.img = '../../images/nav/dxy.jpg';
nav0.name = '订喜宴';
navs[0] = nav0;
var nav1 = new Object();
nav1.img = '../../images/nav/phz.jpg';
nav1.name = '拍婚照';
navs[1] = nav1;
var nav2 = new Object();
nav2.img = '../../images/nav/zhq.jpg';
nav2.name = '找婚庆';
navs[2] = nav2;
var nav3 = new Object();
nav3.img = '../../images/nav/dhj.jpg';
nav3.name = '订婚戒';
navs[3] = nav3;
var nav4 = new Object();
nav4.img = '../../images/nav/xhs.jpg';
nav4.name = '选婚纱';
navs[4] = nav4;
var nav5 = new Object();
nav5.img = '../../images/nav/thp.jpg';
nav5.name = '淘婚品';
navs[5] = nav5;
var nav6 = new Object();
nav6.img = '../../images/nav/dmy.jpg';
nav6.name = '度蜜月';
navs[6] = nav6;
var nav7 = new Object();
nav7.img = '../../images/nav/zhc.jpg';
nav7.name = '租婚车';
navs[7] = nav7;
var nav8 = new Object();
nav8.img = '../../images/nav/mxn.jpg';
nav8.name = '美新娘';
navs[8] = nav8;
var nav9 = new Object();
nav9.img = '../../images/nav/qbfl.jpg';
nav9.name = '全部分类';
navs[9] = nav9;
return navs;
}
})
官网的文档: 视图容器 /swiper
https://developers.weixin.qq.com/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/cash/cash",
"pages/marry/marry",
"pages/community/community",
"pages/me/me",
"pages/type/type"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#ff4c91",
"navigationBarTitleText": " 我们结婚吧!",
"navigationBarTextStyle": "white"
},
"tabBar": {
"selectedColor": "#D73E3E",
"backgroundColor": "#ff4c91",
"borderStyle": "white",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/bar/avatar.png",
"selectedIconPath": "images/bar/avatar.png"
},
{
"pagePath": "pages/cash/cash",
"text": "彩礼",
"iconPath": "images/bar/marry.png",
"selectedIconPath": "images/bar/marry.png"
},
{
"pagePath": "pages/marry/marry",
"text": "婚博会",
"iconPath": "images/bar/guest.png",
"selectedIconPath": "images/bar/guest.png"
},
{
"pagePath": "pages/community/community",
"text": "结婚日",
"iconPath": "images/bar/wedding.png",
"selectedIconPath": "images/bar/wedding.png"
},
{
"pagePath": "pages/me/me",
"text": "联系我",
"iconPath": "images/bar/invite.png",
"selectedIconPath": "images/bar/invite.png"
}
]
},
"sitemapLocation": "sitemap.json"
}
知识点
tabBar 是一个很怪的分级,在官方的文档里不属于任何一块。
搜索也没有任何的说明
但是事实上,几乎是任何一个小程序都要tabBar这个组件。
九宫格的实现
1、首先添加图片资源文件
在项目根目录新建一个目录,取名为images , 用于存放图片资源,然后添加进入几张图片
2、在index目录下的index.js 文件中 进行数据源的配置
3、依据列表渲染的知识点进行index.wxml的编程
页面
<view class="haibao">
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="silde-image" style="width:100%;height:176px;"></image>
</swiper-item>
</block>
</swiper>
</view>
<view class="nav">
<block wx:for="{{navs}}">
<view class="item" bindtap="navBtn" id="{{index}}">
<view>
<image src="{{item.img}}" style="width:58px;height:56px;"></image>
</view>
<view>
{{item.name}}
</view>
</view>
</block>
</view>
<view class="hr"></view>
样式
.nav{
text-align: center;
}
.item{
margin-top:15px;
text-align: center;
font-family: "Microsoft YaHei";
font-size: 13px;
width: 60px;
display: inline-block;
margin-right:10px;
}
.hr{
height: 1px;
background-color: #cccccc;
opacity: 0.2;
margin-top:10px;
}
这是一般的九宫格的用法,
还是使用了wx:for
+ data 的做法。
实际操练-轮播
怎么样克服自己对代码的恐惧? 当然是你改动一点,就可以看到程序的变化了。
第一步,就是找到文件。
事实上,这一步很关键,别看我码龄20多年,事实上,不管在哪个项目,都会时不时发生改了半天,发现程序完全不起作用,然后花了N小时,最后发现,改错文件了,当项目一大,代码一多,文件那也是成倍的增长,而且很多的文件有的时候叫的名字是一个,里面的代码也差不多,这个时候那就更容易看错文件了。
友情提示 可以使用资源管理器里的搜索功能,真的很好用。
第二步,先改动一下最显眼的代码
如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列002】》
比如删掉一个代码块。净鼠标的这一段代码删除
删除了之后,要保存文件。
也有可能会出现下面的情况:
这种情况,一般就是标签 不匹配。
这个时候,Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前,把这个错误的截图,并保存,查看几下那就更好了。面对页面出错不是大惊小怪,而是看看是啥错误信息,那你基本具备了向高手迈进的姿势了。
第三步 狸猫换太子
将鼠标移动到 <image src="***">
这里,开发平台就会友善的提示,ctril+单击跳到相应的图片上。
截图最好的按着原来的比例。可以放大两倍,或三倍,这样的图片更清晰。
在微信小程序开发者工具里打开图片,注意右下角。
然后使用截图工具,用固定大小,或改变大小。参见《论文里图片样式的技巧-FastStone Capture使用–【毕业论文】》
替换的图片如图:
重新编译小程序:
实际操练-tabBar
最初的效果其实是这样的
第一步,就是找到文件。
事实上,这一步很关键,别看我码龄20多年,事实上,不管在哪个项目,都会时不时发生改了半天,发现程序完全不起作用,然后花了N小时,最后发现,改错文件了,当项目一大,代码一多,文件那也是成倍的增长,而且很多的文件有的时候叫的名字是一个,里面的代码也差不多,这个时候那就更容易看错文件了。
友情提示 可以使用资源管理器里的搜索功能,真的很好用。
第二步,先改动一下最显眼的代码
如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列002】》
比如删掉一个代码块。净鼠标的这一段代码删除
删除了之后,要保存文件。
也有可能会出现下面的情况:
要注意的是,此时小程序的调试器界面不动。
这说明可能出现了致命错误,使得小程序开发者工具无法编译,只显示了上一次的效果。
如果把小程序重新打开
就会发现是这样的:
这种就是致命的错误,一般来说,都是在app.js 如app.json里。
这种情况下,在其它的编辑器工具里,是存在后悔药的。比如程序里里使用率最高的idea 系列。
本idea 里使用了颜值插件-《没有颜值插件的编辑器是没有灵魂的–【idea-theme插件】》
在这里就不得不吐槽一下鹅厂的UI ,黑色方案如同摆设,不然,你很难看得清上面的菜单与其它工具的分界,其实就是这个浅色的方案,也不怎么样。更要命的是,小程序的开发工具没有IDEA的那种后悔药。改错了文件 ,是找不到历史版本的。而且,它也没有跟git 集成。
好吧,谁让它是鹅厂的工具呢?
这个时候,Ctrl+Z (这个快捷键有必要记住) 基本上80%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前,把这个错误的截图,并保存,查看几下那就更好了。面对页面出错不是大惊小怪,而是看看是啥错误信息,那你基本具备了向高手迈进的姿势了。
当然了,这也是没有办法的办法了。事实上ctrl+Z 是windows 自创立以来,编辑器都自带的功能。
当然了,在学习的过程中:我是这样做的。原版的ZIP文件在同一级目录下放着。这样改坏了文件之后,就恢复以前的文件,不过在开发的过程中,只能说是要小心一些了。
真心希望鹅厂能多考虑考虑程序员的事情,而少在王者荣耀的皮肤上花一些精力
第三步 ,可以换自己喜欢的图标
图标的注意事项
对于WEB比较熟悉的同鞋可以转身离开了。因为微信小程序的图标跟WEB页的菜单的图标确实很像,技术也比较接近。
1 最好要PNG格式。
2 最好准备两个颜色(一为你的应用项目的所用颜色,另一为黑白色)
其实呢,也没有人规定必须要这样的设置,你就是设一个红色一个绿色也可以,但是问题是人家商业性的小程序太多了,大家都这样,那你一个初学者,把握不好颜色,UI的设计的时候,往往就是乱搞一气。
3 最好是跟小程序一起打包,不要放服务器,也不要放云空间。这个东西在小程序这里其实就是相当于网站的菜单,如果第一时间显示不出来那是很糟糕的事情。
补:
PNG(Portable Network Graphics),便携式网络图形,是一种采用无损压缩算法的位图格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
重要的是,他支持alpha–直白一点说就是透明。
“jpg是一种图像文件格式,全称为JPEG(JointPhotographicExpertsGroup),是一种有损压缩格式,能够将图像压缩在很小的储存空间,常见的后缀名为.jpg和.jpeg。
图标资源
阿里图标库 https://www.iconfont.cn/collections/index
打开小程序
最简单,最无赖的手段
去阿里的图标网下接下载替换。
直接下载,然后覆盖原来的文件。不过,有一些图标支持选择灰度值,有一些选择了之后就。
先不要管这个小细节,后面再处理。
回到小程序开发者平台里 重新编译
是不是很漂亮呢?如果你发布在鹅厂的平台上,通过审核,还可以把二维码发给你心目中的她哟!
实际操练-九宫格
略,换图像,跟上面的一样,
换链接,需要新建页面了。工作量较大,这里不再详述了。
本文章使用的鼠标方案:
情人节的鼠标方案,那必须是爱心之箭呀
配套资源
微信小程序碰到情人节-我们结婚吧—【小程序花园】
https://download.csdn.net/download/dearmite/88234002
情人节的鼠标方案,爱心之箭
https://download.csdn.net/download/dearmite/88234013
作业:
1 下载本案例,删一轮播图,截图。 加一张轮播图,截图。
2 修改底部标签页里的图标并替换。截图!
3 更换9宫格的图标,修改链接。截图!
怎样安装自己喜欢的鼠标指针方案 如何安装鼠标指针
下载并安装指针方案:
01
下载自己喜欢的鼠标指针方案,解压:
02
解压后我们会看到文件夹下有很多 ani动态光标文件 中有一个 ini文件,右键单击 ini文件(安装文件.ini),执行【安装】命令:
03
等待安装结束后打开【控制面板】→【鼠标】(Win XP 与 Win 7 操作均相同):文章来源:https://www.toymoban.com/news/detail-666783.html
04
打开【鼠标属性】窗口,选择【指针】选项卡,在方案中找到刚才安装的指针方案【Crystal Clear】,然后单击窗口又下脚的【应用】→【确定】完成安装!
第二种方案文章来源地址https://www.toymoban.com/news/detail-666783.html
到了这里,关于微信小程序碰到情人节-我们结婚吧---【小程序花园】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!