微信小程序学习之旅--零基础制作自己的小程序--第二个页面的制作

最新推荐文章于 2024-05-27 20:06:00 发布
最新推荐文章于 2024-05-27 20:06:00 发布
阅读量1.4k 收藏 17
点赞数 8
分类专栏： 微信小程序 文章标签： 小程序 微信 前端 es6 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45747310/article/details/119936612
版权
本文介绍了如何在微信小程序中安装和使用lin-ui组件库，重点讲解了头像组件的配置以及如何指定主页。随后，通过实例展示了如何创建带有轮播图的文章模块，包括设置指示点、自动轮播和常用swiper属性的使用。
摘要由CSDN通过智能技术生成

文章目录


前文：
微信小程序学习之旅–第一个页面的制作

微信小程序入门(二)

安装组件库

在微信小程序里面，现在也可以使用第三方的组件库。

这里使用的是lin-ui组件库。有需要的可以去百度官网了解一下。

  1. 在项目根目录下初始化npm

    npm init -y

  2. 安装 lin-ui组件库

    npm install lin-ui

  3. 在微信小程序的 工具选项下选择构建npm

    image-20210826140635548

  4. 构建完成够，项目下就又多出一个文件夹。我们使用组件的时候都是使用这个文件夹下的。

    image-20210826140736290

  5. 在每个页面使用自定义组件的时候，我们需要在页面的json配置文件中，进行配置，指定我们使用的组件名称，以及组件所在的位置。

    image-20210826140906964

组件库的使用

头像组件库

这里简单使用一下头像组件库。

<!-- 使用组件库 动态绑定用户的头像，昵称(绑定的语法后面再说) -->
<!-- 使用size属性可以指定大小 -->
<!-- shape属性可以指定头像的样式，圆的还是方的 -->
<!-- 使用placement 可以指定头像和昵称的排列位置，这里上下排列 -->
<m-avatar placement="bottom" size="190" shape="circle" open-data="{{['userAvatarUrl','userNickName']}}"/>

image-20210826142528576

pages页面的开发

指定主页

每次开发新的页面，总是需要在注册页面的地方频繁切换第一个文件，来达到预览的效果。比较麻烦。

方式一：

在现在的小程序中，增加了新的功能，可以在app.json中，直接指定主页。

image-20210826143250347

image-20210826143741895

方式二：指定编译模式

image-20210826143942233

image-20210826144021270

将页面指定为我们当前开发的页面即可。

制作轮播图

使用swipe
<!-- 使用官方提供的swiper组件 来做轮播图 -->
  <!-- swiper 滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情 -->
  <swiper>
    <!-- 一般为了让图片撑满容器，需要设置容器的大小，和图片的大小，swipe-item 可以不设置 -->
    <swiper-item>
      <image src="/images/img1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/img2.webp"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/img3.webp"></image>
    </swiper-item>
  </swiper>

/* 设置轮播图的大小 */
swiper {
  width: 100%;
  height: 460rpx;
}

image {
  width: 100%;
  height: 100%;
}

这样就完成了轮播图最开始的状态。

轮播图的指示点和自动轮播

我们使用swiper的某些属性就可以完成这两个功能。

indicator-dots=“true” 显示轮播图的指示点

但是，即使我们设置 indicator-dots=“false” 也就是设置属性值为false

我们的轮播图小指示点 也不会消失，除非我们不设置这个属性，或者

我们设置属性值为 indicator-dots="{{false}}"

那么问题来了：为什么我们设置属性值为 {{false}} 才能表示否定的概念呢？

原因是，不加双花括号，我们小程序会把这个属性值当做普通的字符串，普通的字符串在js中我们知道会转为true，这里也是一样。

双花括号里面写false 才能表示false

注意：关于双花括号的使用我们在后面会在说，实际上双花括号里面的数据会被当做js中的变量或者表达式进行运算。

只写属性值也会默认表示设置这个属性值为true。

布尔属性赋值建议

所以，我们在给布尔类型的属性赋值的时候，不管是true还是false，建议都使用双花括号进行包裹。

image-20210826162313843

image-20210826162335200

其他的swiper常用属性

image-20210826163241249

这些属性在微信小程序的官网都是有说明的。想了解更多可以去官网自行阅读。

微信小程序的swiper组件的使用

单篇文章的制作

image-20210826172517962

我们要完成这样的一篇文章。我们分析一下整体的结构。

  1. 上面的轮播图我们已经制作完成了，那么就剩下文章的制作
  2. 这个文章从上到下，我们可以分为五个部分
    1. 头像+日期部分
    2. 文章标题部分
    3. 文章图片
    4. 文章内容
    5. 浏览和收藏人数
  3. 分为了五个部分，我们在开始制作这个文章模块。

先分析好我们制作页面的模块结构，在书写代码效率更高。

文章结构
!-- 第一篇文章 -->
  <view class="post-container">
    <!-- 第一部分 作者 日期 -->
    <view class="post-author-date">
      <!-- 头像 -->
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">2021 08 26</text>
    </view>
    <!-- 第二部分 文章标题 -->
    <text class="post-title">2021 哈哈哈哈哈哈哈啊哈哈哈哈哈</text>
    <!-- 第三部分 -->
    <image class="post-image" src="/images/post/cat.png"></image>
    <!-- 第四部分 文章内容 -->
    <text class="post-content">滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情,滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情,滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情,滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情</text>
    <!-- 第五部分 -->
    <view class="post-like">
      <image class="post-like-image" src="/images/icon/chat.png"></image>
      <text class="post-like-font">92</text>
      <image class="post-like-image" src="/images/icon/view.png" />
      <text class="post-like-font">102</text>
    </view>
  </view>
文章样式
/* 文章样式 */
.post-container {
  /* 弹性布局 */
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  /* 上下边框线 */
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  padding-bottom: 10rpx;
}

/* 作者 日期样式 */
.post-author-date {
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: row;
  /* flex 布局居中方案 */
  align-items: center;
}

.post-author {
  width: 60rpx;
  height: 60rpx;
  /* 头像和文字居中 */
  /* vertical-align: middle; */

}

.post-date {
  margin-left: 20rpx;
  font-size:26rpx;
  /* vertical-align: middle; */
}

/* 文章标题 */
.post-title{
  font-size:34rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  color:#333;
}
/* 文章主图 */
.post-image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 30rpx;
}
/* 文章内容 */
.post-content{
  color:#666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  line-height: 40rpx;
  letter-spacing: 2rpx;
  text-indent: 2em;
}
/* 文章模拟阅读量 */
.post-like{
  display: flex;
  flex-direction: row;
  margin-left: 26rpx;
  align-items: center;
}
.post-like-image{
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}
.post-like-font{
  margin-right: 40rpx;
  font-size: 26rpx;
}

整体代码

页面结构
<!--pages/posts/posts.wxml-->

<view>
  <!-- 使用官方提供的swiper组件 来做轮播图 -->
  <!-- swiper 滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情 -->
  <!-- 
    indicator-dots="true" 显示轮播图的指示点
    但是，即使我们设置 indicator-dots="false" 也就是设置属性值为false
    我们的轮播图小指示点 也不会消失，除非我们不设置这个属性，或者
    我们设置属性值为 indicator-dots="{{false}}"
    那么问题来了：为什么我们设置属性值为 {{false}} 才能表示否定的概念呢？
    原因是，不加双花括号，我们小程序会把这个属性值当做普通的字符串，普通的字符串在js中我们知道会转为true，这里也是一样。
    双花括号里面写false 才能表示false
    注意：关于双花括号的使用我们在后面会在说，实际上双花括号里面的数据会被当做js中的变量或者表达式进行运算。
   -->
  <!-- autoplay="true" 自动轮播 -->
  <!-- indicator-active-color="#fff" 指示点激活的颜色 -->
  <!-- circular="true"循环播放图片 -->
  <!-- interval="2000" 图片切换间隔时长 字符串的数字内部会被转型 -->
  <swiper indicator-dots="{{true}}" autoplay="true" indicator-active-color="#fff" circular="true" interval="2000">
    <!-- 一般为了让图片撑满容器，需要设置容器的大小，和图片的大小，swipe-item 可以不设置 -->
    <swiper-item>
      <image src="/images/img1.jpg"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/img2.webp"></image>
    </swiper-item>
    <swiper-item>
      <image src="/images/img3.webp"></image>
    </swiper-item>
  </swiper>

  <!-- pages -->

  <!-- 第一篇文章 -->
  <view class="post-container">
    <!-- 第一部分 作者 日期 -->
    <view class="post-author-date">
      <!-- 头像 -->
      <image class="post-author" src="/images/avatar/1.png"></image>
      <text class="post-date">2021 08 26</text>
    </view>
    <!-- 第二部分 文章标题 -->
    <text class="post-title">2021 哈哈哈哈哈哈哈啊哈哈哈哈哈</text>
    <!-- 第三部分 -->
    <image class="post-image" src="/images/post/cat.png"></image>
    <!-- 第四部分 文章内容 -->
    <text class="post-content">滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情,滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情,滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情,滑块视图容器，这个容器不仅仅是用来滑动图片，可以做很多事情</text>
    <!-- 第五部分 -->
    <view class="post-like">
      <image class="post-like-image" src="/images/icon/chat.png"></image>
      <text class="post-like-font">92</text>
      <image class="post-like-image" src="/images/icon/view.png" />
      <text class="post-like-font">102</text>
    </view>
  </view>
</view>
页面样式
/* pages/posts/posts.wxss */

/* 设置轮播图的大小 */
swiper {
  width: 100%;
  height: 460rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}

/* 文章样式 */
.post-container {
  /* 弹性布局 */
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  /* 上下边框线 */
  border-top: 1rpx solid #ededed;
  border-bottom: 1rpx solid #ededed;
  padding-bottom: 10rpx;
}

/* 作者 日期样式 */
.post-author-date {
  margin: 10rpx 0 20rpx 10rpx;
  display: flex;
  flex-direction: row;
  /* flex 布局居中方案 */
  align-items: center;
}

.post-author {
  width: 60rpx;
  height: 60rpx;
  /* 头像和文字居中 */
  /* vertical-align: middle; */

}

.post-date {
  margin-left: 20rpx;
  font-size:26rpx;
  /* vertical-align: middle; */
}

/* 文章标题 */
.post-title{
  font-size:34rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  color:#333;
}
/* 文章主图 */
.post-image{
  width: 100%;
  height: 340rpx;
  margin-bottom: 30rpx;
}
/* 文章内容 */
.post-content{
  color:#666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  line-height: 40rpx;
  letter-spacing: 2rpx;
  text-indent: 2em;
}
/* 文章模拟阅读量 */
.post-like{
  display: flex;
  flex-direction: row;
  margin-left: 26rpx;
  align-items: center;
}
.post-like-image{
  height: 32rpx;
  width: 32rpx;
  margin-right: 16rpx;
}
.post-like-font{
  margin-right: 40rpx;
  font-size: 26rpx;
}

下一篇

微信小程序学习之旅–完善pages页面–字体图标，数据绑定，条件/列表渲染，事件/catch/bind以及路由的学习

尤雨东
关注
专栏目录
Centos7 搭建Onvif C++框架（基于gSoap-2.8.106）
gj139612的博客
09-16 674
本文讲述了如何在Centos7上编译生成onvif C++框架，具体流程如下： 1、从gSoap官网下载gSoap（笔者用的是gSoap_2.8.106）。下载open source edition版本。请提前安装好openssl $ cd gsoap-2.8 $ ./configure --with-openssl=/usr/local/ssl $ make $ make install若编译失败，可以修改gsoap-2.8/gsoap/wsdl下的Makefile，在278-279行加上-ldl 2、
微信小程序开发实战第二个页面的编写
qq_45973003的博客
06-20 1231
第一步的话就是编写我们的wxml的代码： <view class="cates"> <!-- 这个的话是我们引入了我们的自定义组件 --> <SearchInput></SearchInput> <!-- 在我们的这个位置的话就是设置我们的分类页面的内容部分 --> <view class="cates_container"> <!-- 左侧的菜单 --> <scroll-view cla
（微信小程序）二 ： 创建一个页面
weixin_34183910的博客
11-22 194
首先先看一下pages的目录结构吧。 我创建了一个topics页面。3个文件全创建好了之后 我往topics.js添加数据 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /*---topics.js----*/ Page({ data:{ topics:[...
微信小程序开发（二）创建一个小程序页面
aaronthon的博客
10-12 310
为了方便讲解，我们将上篇博客创建的小程序除了project.config.json和sitemap.json两个文件保留，其他全部删除（这两个文件存的是小程序的创建信息，删掉会有报错提示）。 接下来我们创建如下文件，先不写内容。 写入如下代码： // app.js App({}) // 注册小程序 // index.js Page({}) // 注册页面...
微信小程序之新页面的创建【2】
tscn1的博客
08-01 536
目录新页面创建与组成结构新页面创建组成结构文件解析wxml标签例子 新页面创建与组成结构 新页面创建 在全局的app.json中的pages键后面加值（页面路径），然后点击编译或者保存，会自动生成相应的文件。 手动创建。 组成结构 所有页面都在pages文件中，也可以自己定义在其它文件中。 在一个文件夹中创建一个页面（代码清晰）也可以创建多个页面（比如同一功能的页面）。 文件解析 wxml与html对应，但是不能使用html中的标签，需要用微信小程序的标签。 wxss与css对应，语法也一致。 j
零基础入门微信小程序开发
热门推荐
GitChat
07-03 34万+
本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。
微信小程序Demo- hello world 尝鲜-附完整源代码.rar
03-20
微信小程序Demo - Hello World 尝鲜是一个专为初学者和开发者设计的示例项目，旨在帮助用户快速了解微信小程序的基本功能和开发流程。本资源包含了一个完整的Hello ...快来下载体验吧，开启您的微信小程序开发之旅！
微信小程序的踩坑之旅，小程序开发联系项目mini-app-pratice-master.zip
09-25
在这个名为“微信小程序的踩坑之旅”的项目中，我们可以通过“mini-app-pratice-master”这个压缩包文件来深入学习和实践微信小程序的开发。 首先，我们需要了解微信小程序的基础架构。它基于JavaScript，但引入了...
【微信小程序开发零基础入门】——微信小程序入门
m0_52435951的博客
02-17 1万+
微信小程序入门一、小程序介绍1.1.什么是小程序？1.2. 微信⼩程序历史1.3.小程序可以干什么？1.4.疯狂的微信⼩程序1.5. 还有其他的⼩程序 不容忽视1.6. 官⽅微信⼩程序体验二、小程序开发资料三、第⼀个微信⼩程序四、开发小程序储备知识五、小程序特点六、wxml 语法七、小程序 API八、小程序特点九、小程序支付流程 一、小程序介绍 1.1.什么是小程序？ 2017 年度百度百科十大热词之一 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (
微信小程序嵌入c语言,小程序学习---开启小程序之旅（项目、配置、页面、数据绑定）...
weixin_36317492的博客
05-17 894
一、前沿从这个章节开始进入实战状态，利用项目以及小demo来逐步认识小程序。主要包含以下内容1、注册程序和页面2、数据绑定3、循环4、条件5、运算6、模板7、事件8、引用9、组件10、api二、创建实验项目整个学习过程中，以“天气预报”为主线，尽可能利用小程序提供的各种功能。(ps：由于本人不擅长UI，因此项目的整体感观可能不是很优美，这里只注重功能；较真的朋友可以参考App Store里的各种天...
小程序二级分类页面布局
ljj481322的博客
12-09 2120
这里写自定义目录标题小程序二级分类页面布局 小程序二级分类页面布局 // pages/category/category.js const app = getApp(); const db = wx.cloud.database(); Page({ /** * 页面的初始数据 */ data: { "bnrUrl": [{ "url": "a.jpg", "productId":"3d23c0a05f0feeb70001495a19048f6a",
微信小程序的一级页面和二级页面设置
kerryqpw的博客
10-18 1万+
微信小程序的一级页面和二级页面设置
微信小程序处理点击微信订阅消息通知到二级页面，右上角会出现到初始化页面
最新发布
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-27 467
【代码】微信小程序处理点击微信订阅消息通知到二级页面，右上角会出现到初始化页面。
小程序二级页面tabbar_小程序页面推广踩坑记
weixin_39987847的博客
12-10 543
前几天，团队里有个小伙伴遇到一个问题，卡壳了大半天。我觉得这个例子值得拿出来分享给大家。希望大家以后遇到类似的问题能顺利绕过这种坑。业务场景很常见，就是为了配合小程序中特定页面的推广，区分推广渠道和人员，逐步实现较高精准度的投放。稍微特殊一点的地方在于，这个页面在小程序中。为了达到区分推广渠道和人员的目的，我们决定采用在页面url末尾添加参数src和uid的方法。由于这样的推广不能使用体...
微信小程序2
weixin_40992563的博客
05-15 423
微信小程序的页面结构1.一级页面 (index就为一级页面)理论上可以有无限多个    包含四个文件(wxml,wxss,js,json)而且名字必须相同2.二级页面(logs为二级页面)理论上可以有无限多个   包含四个文件(wxml,wxss,js,json)而且名字必须相同从零开始编写A.先写xxx.wxml&lt;view&gt;类似html写东西&lt;/view&gt;B.通过app....
微信小程序实现多个页面
m0_72189003的博客
11-28 1436
上图示例代码(“pages“里面想让第几个页面显示在第一个，就挪到最前面“iconPath”是没选中页面的时候显示的颜色“selectedIconPath”是选中页面的时候显示的颜色（里面的图片需要自己下载可以在阿里矢量图上下载，在根目录创建一个imgs文件把图片放进去引入就行）)第一步：写在app.json
第一篇：先简单了解一下微信小程序页面结构，怎么创建页面
m0_73991249的博客
02-19 2030
1、下载安装：可以去b站跟着黑马程序员视频步骤，不做过多阐述，就是在第一个windows 642、创建项目打开软件，跟着图片来版本可能不同，样子会有所不同，我懒得按照我的来截图，我用的是黑马程序员的视频截图，但是内容是一样的，图片怎么选你就怎么选就行！记住先“不适用云服务”，不要选别的那些什么【模板】，语言选【基于js】的就行，AppID在这块，链接没用你就按照下面图片来然后就出来了。
小程序二级页面自定义底部tabbar
Loki1_1的博客
05-31 1898
外面是官方的tabbar 在个人中心进入特定页面 需要自定义一个新的底部tabbar 我这个是分包下的自定义底部tabbar 先新建个文件夹 用来自定义ta'b'b
微信原生小程序:跨两级页面的刷新
qq_42980244的博客
05-06 760
z pages/package-purchase/pages/purchase-things/index 为列表页面，展示了商品列表 pages/package-purchase/pages/purchase-things/return-goods/index 为采购退回按钮跳转的页面 pages/package-purchase/pages/purchase-things/return-goods/back/index为下一步按钮跳转的页面 业务流程： 用户点击采购退回按钮，进入中间的页面，
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尤雨东

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值