代码编织梦想

零基础也能学会的微信小程序制作动态搜索页

准备工作:

  1. 微信开发者工具
  2. APPID或测试号
  3. 创建一个JavaScript基本框架(如下图)
    在这里插入图片描述

最终效果:

在这里插入图片描述

动手做起来吧~

index.wxml

<view class="container">
  <view class="search">
    <image src="/static/search.png" class="search-image"></image>
    <input type="text" value="猜你想搜~" />
  </view>

  <view class="music-List-body-text">
    <view class="Hot-css" />
    <text>热搜榜</text>
  </view>
  <view class="music-List-body">
    <!--  -->
    <view class="music-List">
      <view class="music-List-text">
        <text>不再联系</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>满天星辰不及你</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>地铁等待</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>三生石下</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>时光你慢些走</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>死心塌地去爱你</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>麻雀</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>雪花飘落的季节</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>春三月</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>簇拥烈日的花</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>

    </view>
    <!--  -->
    <view class="music-List">
      <view class="music-List-text">
        <text>最后的人</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>天下</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>落空</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>不是因为寂寞</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>今天</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>时间海</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>Hayd</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>或许</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>沈园外</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>
      <view class="music-List-text">
        <text>岁月神偷</text>
        <view class="music-List-text-FU">切,谁先联系谁小狗</view>
      </view>

    </view>
  </view>
</view>

index.wxss

.search {
	margin-top: 10px;
	width: 80%;
	height: 15px;
	background-color: #f0f0f0b7;
	border-radius: 30px;
	/* 上内边距 */
	padding-top: 25rpx;
	/* 下内边距 */
	padding-bottom: 20px;
	/* 底部外边距 */
	margin-bottom: 100px;
}
.search input {
	color: rgb(139, 139, 139);
	/* height: 10px; */
	padding-left: 30px;
	padding-right: 45px;
	/* 文本居中 */
	text-align: center;
}
.search-image {
	/* 绝对定位 */
	margin-top: 1px;
	position: absolute;
	width: 20px;
	height: 20px;
	/* left: 55px; */
	right: 55px;
}
.music-List-body {
	width: 95%;
	/* height: 30px; */
	border-radius: 10px;
	/* background-color: #eeeeeec0; */
	/* 横向布局对齐 */
	display: flex;
}

.Hot-css {
	position: absolute;
	/*绝对定位*/
	width: 5px;
	margin-top: 6px;
	height: 15px;
	background-color: rgb(7, 224, 231);
	border-radius: 10px;
}

.music-List-body-text {
	/* position: relative; */
	/*相对定位*/
	width: 25%;
	height: 25px;
	left: 20px;
	/* 方便调试 */
	margin-top: 110px;
	border-radius: 10px;
	text-align: center;
	/* background-color: blanchedalmond; */
	position: absolute;
	font-size: 20px;
}

.music-List {
	/* 便于调试 */
	/* background-color: rgba(231, 231, 231, 0.418); */
	width: 95%;
	/* 外上边距 */
	/* margin-top: 50px; */
	/* 外下边距 */
	margin-bottom: 10px;
	/* 外左右边距 */
	margin-left: 1%;
	margin-right: 1%;
	/* 内上边距 */
	padding-top: 1px;
	/* 内下边距 */
	/* padding-bottom: 10px; */
	/* 内左边距 */
	padding-left: 30px;
	/* 圆角 */
	border-radius: 10px;
	/* 文字居中 */
	/* text-align: center; */
}

.music-List-text {
	font-size: 15px;
	color: #56c2f5;
	margin-bottom: 10px;
}

.music-List-text-FU {
	color: rgb(185, 185, 185);
	font-size: 12px;
	margin-top: 2px;
}

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* 顶部高度 */
  /* padding: 10px; */
  box-sizing: border-box;
  /* background-color: #f7f7f7; */
} 

快来实现您的视觉效果吧~

微信小程序——图片识别-爱代码爱编程

我的微信小程序 期末大作业——基于百度大脑API的图片识别小程序 具体实现了动物识别、植物识别、车辆识别 三个功能 实验源码已经放到了我的GitHub,欢迎测试修改 GitHub仓库地址:https://github.com/ZHJ0125/ImageMaster 备用码云仓库地址:https://gitee.com/zhj0125/ImageM

微信小程序傻瓜制作_微信小程序模板制作:手把手教你做一个生鲜小程序-爱代码爱编程

传统线下生鲜水果类商家如今正面临诸多问题,包括服务范围有限、客户源不稳定、缺少订单导致新鲜食材过期等等。新零售概念的提出,很多商家虽然懂得要打通线上渠道,但通常都是仅仅局限于普通O2O外卖平台,其实这样盈利依然有限,因为商家要支付高额服务费和推广费。 小程序的普及,使得商家不仅能够利用微信来为自己引流,服务范围扩大,连接线上和线下门店,而且无需被高额

【零基础】学会微信小程序开发-上手微信开发者工具-爱代码爱编程

本篇文章,你将学会如何使用微信开发者工具开发微信小程序 1)首先,我们访问微信开发者工具下载地址,如下图所示,我们下载稳定版本,按你系统去选择Windows 或者macOS,我这里因为是Windows环境,所以后面教程都是以Windows环境为例,macOS实际使用跟Windows没有太大区别: 2)安装文件下载好了,我们打开它: 3)直接下一

html做成小程序,微信小程序——简单静态网页的制作-爱代码爱编程

一、前言 需要知识: HTML CSS 注意:微信小程序的语法与HTML和CSS不太相同,但本质是一样的。 要求: 进入开发者工具并且创建一个测试小程序, 选择建立快速模板 在pages目录底下新建一个first的文件夹,其中包括指定的四个文件,并且设置第一个页面为first页面 3.在first.wxml里制作如图ui界面,采用盒模型

【微信小程序】制作个人信息页面-爱代码爱编程

题外:也许前端学习也应包括审美。在我学习前端路上,以前模仿视频内容,现在模仿别人成品…我曾想过作为前端是不是也应学习UI设计方向的美术知识,再不济也应具备页面布局的审美。但这个想法被一位大佬否定了,所以这个想法也只好放在心里成为另一种可能。 分享一个今天才学会的CSDN写文章的技巧~ 正题: 先上成品图 1.架构 进行编程前,我们要架构。对

【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)-爱代码爱编程

大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能。 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说明更清楚。分享快乐! 学完这篇,起码学会以下几点 了解微信开发者工具和云开发代码目录轮播图的实现使用wx.request去请求数据使

【小程序】零基础微信小程序开发+实战项目-爱代码爱编程

如何拥有一款属于你自己的小程序,惊喜就在下面! 微信小程序实战 前言一、微信小程序开发必备技术一、HTML语言二、CSS三、JavaScript四、服务器语言五、数据库语言二、微信开发者工具一、下载安装二、新建项目三、程序框架四、程序调试区1.Console2.Wxml3.Sources4.Network5.AppData三、项目实战(附核心代码

微信小程序(5)——如何制作好看的表格-爱代码爱编程

✅ 因为 “表格” 在日常统计中无处不在,所以今天来做一做。但是微信小程序不支持 table 标签,我准备用 “上一篇——Flex布局” 学的 flex 来实现一下。 文章目录 一、从“html的table”到 “微信小程序的table”二、统一格式的表格三、非统一格式的表格四、对表格的点击操作五、对表格的“增、删、改”操作六、参考附录 微信

【零基础微信小程序】基于百度大脑人像分割的证件照换底色小程序实战开发_德宏大魔王的博客-爱代码爱编程

系列文章目录 【零基础微信小程序入门开发】小程序介绍及环境搭建【零基础微信小程序入门开发】配置小程序【零基础微信小程序入门开发】小程序框架一【零基础微信小程序入门开发】小程序框架二【零基础微信小程序入门开发】基础能力(一)【零基础微信小程序入门开发】基础能力(二) 👉照片换底小程序实战开发 成品演示 小程序照片换底色演示

零基础一天学会开发制作一个微信小程序【附源码】_jia_you_ya_的博客-爱代码爱编程

        时至如今,微信已然成为一个全民通用的工具,相应的微信小程序开发已经是一个热门的开发项目。         小程序的前端代码和web是极其相似的,wxml和html、wxss和css以及js,现在还经常将wxss读作css。如果你有一定的web开发基础,对开发小程序很有帮助,当然如果你是零基础,那么也有零基础开发小程序的办法。 下面是

计算机毕业设计ssm+vue基本微信小程序的“香草屋”饮料奶茶点单小程序_qq626162193的博客-爱代码爱编程

项目介绍 随着社会的发展,互联网的迅速发展,5G时代的到来,智能手机的普及,人们的生活方式更加智能一体化,衣食住行也越来越简单快捷,人们的生活也更加趋向于智能化,一台智能手机可以解决生活

【零基础】学会微信小程序开发-爱代码爱编程

上一篇我们了解了微信小程序代码结构组成,本篇文章,我们将要开始进行小程序的真正开发工作,Let’s go! ##第一个页面 让我们来创建第一个页面 右键单击 pages 目录,在弹出来的菜单里,选择 新建文件夹,

《微信小程序开发》 页面导航最强详解 | 如何对小程序页面进行跳转?_小程序菜单和页面同时跳转-爱代码爱编程

《微信小程序开发》 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 《微信小程序开发》 页面导航最强详解 | 如何对小程序页面进行跳转?一、微信小程序导航二、命名式导航与编程式导航对应表三、命

计算机毕设推荐基于微信小程序的自来水收费系统-爱代码爱编程

💖🔥作者主页:计算机毕设老哥🔥 💖 精彩专栏推荐订阅:在 下方专栏👇🏻👇🏻👇🏻👇🏻 Java实战项目专栏 Python实战项目专栏 安卓实战项目专栏 微信小程序实战项目专栏 文章目录