首页 > 资讯 > 移动开发 >微信小程序碰到情人节-我们结婚吧---【小程序花园】

948

分享到

微信小程序碰到情人节-我们结婚吧---【小程序花园】

小程序微信小程序 2023-09-01 06:09:55 948人浏览独家记忆

摘要

微信目录集链接在此：详细解析黑马微信小程序视频–【思维导图知识范围】难度★✰✰✰✰微信小程序开发实战（第2版）入门–【开发实战（第2版）】★★✰✰✰ 不会导入/打开小程序的看这里：参考微信小程序开

微信目录集链接在此：

详细解析黑马微信小程序视频–【思维导图知识范围】	难度★✰✰✰✰
微信小程序开发实战（第2版）入门–【开发实战（第2版）】	★★✰✰✰

不会导入/打开小程序的看这里：参考
微信小程序开发实战（第2版）入门–【开发实战（第2版）】

本系列校训

用免费公开视频，卷飞培训班哈人！打死不报班，赚钱靠狠干！
只要自己有电脑，前后项目都能搞！N年苦学无人问，一朝成名天下知！

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序（130集）
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下：
…
P303-微信小程序的环境准备08:21 00:00 到 05：16 获取APPid, 后面下载开发工具。

本文效果图

注：真实界面无外围的装饰
在这里插入图片描述

本例包含了以下知识点：

底部标签-
九宫格

轮播图

在本文的最后也同样新介绍一套鼠标指针：从元气桌面的主题中提取出来，制成了单独安装的版本，不会安装的可以百度一下，本文最后也附了安装教程
情人节的鼠标方案，那必须是爱心之箭呀
在这里插入图片描述

轮播图

上一节的案例中也有介绍了。参考《微信小程序-轮播图-九宫格布局–【开发实战（第2版）】》

本案的轮播图代码

  ion="{{duration}}">

这是一般的小程序最常见的轮播图代码段。使用了block wx:for 的标签

页面全部代码在此：

                                                                        {{item.name}}

因为使用了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 , 用于存放图片资源，然后添加进入几张图片
　在这里插入图片描述

在index目录下的index.js 文件中进行数据源的配置
在这里插入图片描述

依据列表渲染的知识点进行index.wxml的编程

在这里插入图片描述

页面

                                                                        {{item.name}}

样式

.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%以上的编辑器程序都是用这个快捷方式恢复到前一步正确的代码。
如果在恢复这个错之前，把这个错误的截图，并保存，查看几下那就更好了。面对页面出错不是大惊小怪，而是看看是啥错误信息，那你基本具备了向高手迈进的姿势了。

第三步狸猫换太子

将鼠标移动到这里，开发平台就会友善的提示，ctril+单击跳到相应的图片上。

截图最好的按着原来的比例。可以放大两倍，或三倍，这样的图片更清晰。
在微信小程序开发者工具里打开图片，注意右下角。
在这里插入图片描述
然后使用截图工具，用固定大小，或改变大小。参见《论文里图片样式的技巧-FastStone Capture使用–【毕业论文】》
替换的图片如图：

在这里插入图片描述
重新编译小程序：

实际操练-tabBar

最初的效果其实是这样的
在这里插入图片描述

第一步，就是找到文件。

第二步，先改动一下最显眼的代码

如果这部分不太熟练的可以参考《微信小程序的目录解析–【浅入深出系列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。