小程序仿微信发现页 03《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232

进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有详细的变现教程等你来。

前言

《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
本系列文章参考《微信小程序开发实战》并对新手做出补充说明
教程出完后将会有变现直播,请关注CSDN社区活动公告:https://bbs.csdn.net/forums/A757291228?spm=1001.2014.3001.6682&typeId=19380。

在社区中发文每周将会在活跃前十送出:

  • 一本实物书籍
  • 多份实物小礼品
  • 每月送出机械键盘等奖励

教程所需

由于小程序开发需要一定的基础,这些基础需要提前掌握,本教程只对小程序开发进行零基础说明。

  • 微信小程序开发工具,下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

  • JavaScript基础

  • HTML基础

目录 持续更新:

小程序的 HelloWord 01《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序获取头像试试水 02《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》
小程序仿微信发现页 03《 程序员变现指南之 微信&QQ 小程序 真的零基础开发宝典》

一、flex布局

上一节简单的了解了一下 flex,本节将对 flex 进行加深,制作一个微信的发现页。

首先跟第二节所操作的一样,删除所有不必要的代码,接着到 app.json 中更改配置文件:

"window": {"navigationBarBackgroundColor": "#000000","navigationBarTitleText": "发现"},

navigationBarBackgroundColor 更改导航栏的背景色为黑色;
navigationBarTitleText 更改导航标题为 “发现”。


此时页面效果为如下:
在这里插入图片描述
接着由于我们要做的微信发现页是垂直向下所以在此处需要在 index.wxml 中添加一个 view:
在这里插入图片描述
接着在编写一个样式使这个 view 的布局为垂直布局:

.container{height: 100vh;background-color: silver;display: flex;flex-direction: column;
}

在这里插入图片描述
在该样式中 height: 100vh; 表示高度为100视窗,也就是占满整个屏幕;background-color: silver; 表示这个 view 背景色为黑色;display: flex; 表示为 flex 布局;flex-direction: column; 表示为垂直布局。毕竟我们的发现窗的内容是从上往下布局的。

接着给这个 view 绑定一个样式:
在这里插入图片描述
接下来开始编写这个 view 中的内容:
在这里插入图片描述
以上是我们需要在视窗中添加的内容。我们可以看到整个视窗为横向布局,此时可以想到使用 flex 让他的 flex-direction 为横向即可。由于整个发现页不止朋友圈一个栏目,那么需要将整个朋友圈栏目视为一个整体,意思则是朋友圈需要编写在同一个 view 之中,并且这个view 之外还存在包裹这个朋友圈栏目的 view。整体结构如下:
在这里插入图片描述
接下来先给包裹朋友圈的 view 一个样式:

.listGroup{background-color: white;margin: 20rpx 0;
}

该样式表示给这个朋友圈添加一个背景色,并且给予一个 margin 上下外边距 20rpx距离,左右距离为0,这样将会使整个栏目的所有内容会有一个上下的距离。

接着给这个朋友圈栏目一个 flex 的横向布局:

.listItem{display: flex;flex-direction: row;border: 1rpx solid silver;padding: 10rpx;
}

flex-direction: row; 表示横向 flex 布局;border: 1rpx solid silver; 表示在四轴有一个单位为 1rpx 的边框;padding: 10rpx; 表示内边距为 10rpx。

接着点击文件夹新建按钮在页面中新建一个文件夹:
在这里插入图片描述
命名为image:
在这里插入图片描述
接着在这个文件夹中放入我们需要的素材:
在这里插入图片描述
在这里插入图片描述

随后我们在 index.wxml 中给 image 标签添加图片来源:
在这里插入图片描述
随后页面演示效果如下:

<view class="container"><view class="listGroup"><view class="listItem"><image src="/pages/image/moments.png"></image><text>朋友圈</text><image src="/pages/image/arrow.png"></image></view></view>  
</view>

在这里插入图片描述
这个时候发现图片过大,我们在样式文件 index.wxss 对 image 添加样式,限制image 大小:

image{width: 80rpx;height: 80rpx;margin: 0 15rpx;
}

限定完毕后显示效果如下:

在这里插入图片描述

这时发现朋友圈字体不对齐,此时在 listItem 中添加一个居中对齐即可:

.listItem{display: flex;flex-direction: row;align-items: center;border: 1rpx solid silver;padding: 10rpx;
}

在这里插入图片描述

二、循环创建栏目

接下来我们在 index.js 中创建数据,使前端栏目可以动态创建。
此时点击 index.js 在 Page 中编写数据:

在这里插入图片描述
接着我们在 index.wxml 中使用 for 循环遍历添加的数据:

<view class="container"><view class="listGroup" wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}"><view class="listItem"><image src="/pages/image/moments.png"></image><text>朋友圈</text><image src="/pages/image/arrow.png"></image></view></view>  
</view>

在这里插入图片描述

在代码 wx:for="{{list}}" wx:for 表示循环,其实 {{list}} 表示取到 list 的值,在wx:for-item='value'wx:for-item 可以理解为为这些所遍历到的值起一个别名,这个别名我起名为 value;在代码 wx:key="value{{index}}" 中 wx:key 表示当前的 key 值,添加了 value 防止重复,{{index}} 则表示当前的索引值,此时这样编写后发现当前页面如下预览:

在这里插入图片描述
接着由于在我们所编写的数据中,所遍历到的只是一组一组数据,这一组数据中可能有些包含大于1个数据的值,所以在栏目的 view 中,我们需要再加一个循环:
在这里插入图片描述

代码如下:
在这里插入图片描述
我们发现在里面的内容循环中,循环的值是第一个循环的内容,此时就可以为循环遍历到的数组再多次进行循环。

最后为这些元素添加上值即可:

<view class="container"><view class="listGroup" wx:for="{{list}}" wx:for-item='value' wx:key="value{{index}}"><view class="listItem" wx:for="{{value}}" wx:for-item='value1' wx:key="value1{{index}}"><image src="{{value1.icon}}"></image><text>{{value1.text}}</text><image src="/pages/image/arrow.png"></image></view></view>  
</view>

最终效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/286711.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Silverlight与WCF之间的通信(4)silverlight以net.tcp方式调用console上寄宿的wcf服务

&#xff08;由于最近是针对一个demo进行的研究&#xff0c;在之前公开过代码结构&#xff0c;这里只是对需要改动的地方加以说明&#xff09; WCF4.0使得编写wcf服务不再那么复杂&#xff0c;去掉了许多的配置信息&#xff0c;客户端只需要一个服务地址&#xff0c;便可在系统…

Maui学习之路(一)--Windows窗体设置

Maui的学习之路作为 Maui的先行者&#xff0c;我有话要说&#xff0c;微软你为了让我成为牛 B 的程序员真的是煞费苦心&#xff0c;你一定是觉得我不够牛逼所以针对我&#xff0c;存心想气死我。好了废话不多说&#xff0c;Maui现在也算是正式发布了&#xff0c;我有点想用它来…

Git 常用命令大全

Git 是一个很强大的分布式版本控制系统。它不但适用于管理大型开源软件的源代码&#xff0c;管理私人的文档和源代码也有很多优势。 Git常用操作命令&#xff1a; 1) 远程仓库相关命令 检出仓库&#xff1a;$ git clone git://github.com/jquery/jquery.git 查看远程仓库&#…

为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效?

2019独角兽企业重金招聘Python工程师标准>>> 为什么本地使用js或jquery操作cookie在谷歌浏览器chrome中不生效&#xff1f;新手学习js或jquery时&#xff0c;一般是在本地调试&#xff08;前端学习一般用不到服务器端&#xff09;&#xff0c;当学习到cookie一节时&…

全解小程序猜数字游戏 04《 程序员变现指南之 微信QQ 小程序 真的零基础开发宝典》

本系列教程是针对粉丝的变现教程&#xff0c;还不是粉丝的可以关注我并且到社区&#xff1a;https://bbs.csdn.net/topics/603436232 进行打卡&#xff0c;不是老粉的也可以获取最终的技术变现学习&#xff0c;最终还有详细的变现教程等你来。 社区有奖励 下面有投票 本文也…

sublime text 3 安装、添加命令行启动、汉化、注册码

1. 安装sublime&#xff1a; 下载&#xff1a;http://www.sublimetext.com/3 添加命令行启动&#xff1a;设置环境变量->计算机->右键属性->高级系统设置->环境变量->系统变量->Path->编辑&#xff0c;加入";安装路径"(如&#xff1a;;D:\Progr…

Linux下的用户和组

2019独角兽企业重金招聘Python工程师标准>>> 用户和组 GNU/Linux 通过用户和用户组实现访问控制 —— 包括对文件访问、设备使用的控制。Linux 默认的访问控制机制相对简单直接&#xff0c;不过还有一些更加高级的机制&#xff0c;包括 ACL 和 LDAP Authentication.…

漫画C语言 做个聊天软件你不懂也得懂

学完C语言做不出东西&#xff1f;不存在的&#xff0c;咱们做一个最“隐私”的聊天器&#xff0c;就俩人&#xff0c;你和我。咱们聊天的信息你知我知没别人知。 对了&#xff0c;本文评论区点赞、收藏抽奖。 社区也有抽奖&#xff0c;本周社区抽奖帖子 &#xff1a;https://b…

【Microstation】第一章:Microstation三维模型构建概述

MicroStation 是国际上和AutoCAD齐名的二维和三维CAD设计软件&#xff0c;第一个版本由Bentley兄弟在1986年开发完成。其专用格式是DGN&#xff0c;并兼容AutoCAD的DWG/DXF等格式。 MicroStation是Bentley 工程软件系统有限公司在建筑、土木工程、交通运输、加工工厂、离散制造…

libgdx游戏引擎开发笔记(十)SuperJumper游戏例子的讲解(篇四)---- 主游戏界面内部框架编写...

上一讲&#xff0c;我们已经实现了点击play进入游戏界面但仅仅是个黑屏 今天&#xff0c;我们就试着编写代码让它出现游戏的一些简单场景。还是在上一讲的代码基础上&#xff0c;我们创建两个类&#xff1a;World 和 WorldRenderer 1.Word类&#xff1a; 12345678910111213141…

看看《System.CommandLine》

记得之前出过几篇.net tool工具的文章&#xff0c;当时的做法是所有工具的语法分析全部自己解释&#xff0c;自己执行&#xff0c;语法的解释占了大部分时间&#xff0c;反而工具的功能被弱化了。其实微软有一个CommandLine框架在缓慢的发展着&#xff0c;至今都没有正式发布&a…

Sublime Text 3 import Anaconda 无法正常补全模块名解决办法

Sublime Text 3 Anaconda配置 在安装Sublime Text3之后我们总会安装一些插件&#xff0c;比如Python的Anaconda自动补全插件。但是&#xff0c;装好之后发现import 时无法像别的IDE里面那样自动补全模块名&#xff0c;就像图中一样&#xff1a; 解决办法在Sublime Text的git…

Android之添加固定图标到桌面

我的QQ群 1 需求 Android之添加固定图标到桌面 2 部分实现 在AndroidManifest.xml里面添加如下权限 <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" /><uses-permission android:name="com.android.launcher.perm…

想做程序员?不同方向入门路线全解

学习计算机编程有很多方向如果你没有一个正确的路线&#xff0c;那么就会&#xff1a; 就会跟上面所说的那样&#xff0c;被迫成为一个全栈&#xff0c;这是比较尴尬的。 若你想比较准确的针对某个方向学习&#xff0c;那就继续往下看吧。 一、程序员分为哪几个方向 随着…

【转】OpenGL超级宝典笔记——纹理映射Mipmap

原文地址 http://my.oschina.net/sweetdark/blog/177812 , 感谢作者&#xff0c;若非法转载请联系本人。 目录[-] MipmappingMipmap过滤构建Mip层Mipmaps 硬件生成LOD&#xff08;多细节层次&#xff09;偏好纹理对象管理多个纹理常驻纹理纹理优先级回顾Mipmapping Mipmap是一个…

【Microstation】第二章:Microstation三维建模基础知识

本章的主要内容包括模型的显示样式(线框、光滑)、三维定位(V、T、S、F)、Microstation常见的坐标系统(世界坐标系、ACS辅助坐标系、精确绘图坐标系、)和Microstation的工作区域(2D和3D)。 一、显示样式 二、三维定位 三维定位在Microstation中显得尤为重要,常见…

实现 EF Core 6 自定义查询标记

前言在《EF Core使用Simple Logging输出日志》中&#xff0c;我们介绍了查询标记 TagWith&#xff0c;它可以帮助我们快速定位到需要的日志&#xff1a;而在 .NET 6 中&#xff0c;新增了另外一个查询标记 TagWithCallSite&#xff0c;它可以标记出代码的位置&#xff1a;var u…

0运维?微信小程序云开发增删查改【05】

在创建小程序时&#xff0c;选择云开发&#xff1a; 随后进入项目之后&#xff0c;此时整个目录如下&#xff1a; 此时我们如图目录即可找到首页位置&#xff1a; 接着咱们清除 index.wxml 代码内容&#xff1a; 在 index.wxml 中加入如下代码&#xff1a; <view> …

【Microstation】第三章:Microstation三维模型构建与编辑

本章主要讲述三维基本实体绘制、三维构造元素绘制、三维模型编辑。 一、三维基本体素绘制 对于立方体、圆柱、球、圆锥等这些基本立体单位,MS提供了专门的绘图工具。 基本体素绘制有两种方式: (1)精确绘图工具 (2&

文件系统管理相关命令

查看文件系统相关属性的命令&#xff1a;blkidblkid是一个查看磁盘设备属性相关信息的命令行工具blkid -L LABEL | UUID :根据UUID查看对应的设备是哪个blkid [-ghlv] [-c file] [-w file] [-o format][-s tag] [-t NAMEvalue] device [device ...]-i&#xff1a;显示io限制lsb…