微信小程序之其他的页面搭建

最新推荐文章于 2024-06-03 00:21:15 发布
最新推荐文章于 2024-06-03 00:21:15 发布
阅读量1.7k 收藏 25
点赞数 3
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44538225/article/details/121912040
版权

学习视频：
https://www.bilibili.com/video/BV1Gv411g7j6?p=29&spm_id_from=pageDriver

咨询页面

页面标题
在全局配置改标题，覆盖掉 十方智育 的字体，改成 咨询预约 字体
在咨询文件consult下的consult.json文件中配置
在这里插入图片描述
为了方便查看页面效果，添加编译模式。
在这里插入图片描述
点击筛选
需要用到的图片
在这里插入图片描述

pages–>consult–>consult.wxml中

<!--咨询页面-->
<!-- 筛选框 -->
<view id="filterView">
  <image src="/Images/@2x_touch.png"></image>
  <text> 点击筛选</text>
</view>
<!-- 列表 -->
<view id="consultList">
  <view class="consultView">
    <image src="/Images/zxs01.jpg"></image>
    <view class="consultInfoView">
      <view>张靖</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <image src="/Images/zxs02.jpg"></image>
    <view class="consultInfoView">
      <view>彭鱼宴</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <image src="/Images/zxs03.jpg"></image>
    <view class="consultInfoView">
      <view>李大国</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <image src="/Images/zxs04.jpg"></image>
    <view class="consultInfoView">
      <view>刘备</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <image src="/Images/zxs05.jpg"></image>
    <view class="consultInfoView">
      <view>关羽</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研指导师...</view>
    </view>
  </view>
  <view class="consultView">
    <image src="/Images/zxs06.jpg"></image>
    <view class="consultInfoView">
      <view>张飞</view>
      <view>国家二级咨询师</view>
      <view>中国专业人才库全国心理学考评管理中心专家评委、中国全脑效能研指导师...</view>
    </view>
  </view>
</view>
<!-- 正在加载 -->
<view id="loadingView">
  <image src="/Images/loading.gif"></image>
  <text> 正在加载更多资源...</text>
</view>

pages–>consult–>consult.wxss中

/* 咨询页面样式css */
/* 筛选框 */
#filterView{
  background: #88D2F9;
  height: 88rpx;
  text-align: center;
  line-height: 88rpx;
}
#filterView > image{
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;   /* 设置水平垂直居中对齐 */
}
#filterView > text{
  font-size: 30rpx;
  color: #ffffff;
  vertical-align: middle;
}
/* 列表 */
#consultList{
  padding: 0 10rpx;
}
.consultView{
  padding: 10rpx 0;
  border-bottom: 1rpx solid #E4E4E4;
  display: flex;  /* flex 布局*/
}
.consultView image{
  width: 280rpx;
  height: 180rpx;
  margin-right: 10rpx;
}
/* 给父元素下的第num个元素设置样式*/
.consultInfoView > view:nth-child(1){
  font-size: 34rpx;
  font-weight: bold;
  line-height: 50rpx;
}
.consultInfoView > view:nth-child(2){
  font-size: 30rpx;
  color: #595758;
  line-height: 50rpx;
}
.consultInfoView > view:nth-child(3){
  font-size: 24rpx;
  color: #AEAEAE;
  line-height: 40rpx;
}
/* 正在加载 */
#loadingView{
  text-align: center;
  height: 88rpx;
  background: #F1EEF5;
  line-height: 88rpx;
}
#loadingView > image{
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;
}
#loadingView > text{
  font-size: 28rpx;
  vertical-align: middle;
}

效果:
在这里插入图片描述
在这里插入图片描述

课程页面

添加一个编辑器方便查看
改页面标题
pages–>course–>course.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "课程"
}

然后需要用到的图片
在这里插入图片描述
pages–>course–>course.wxml中

<!--课程页面-->
<!-- 顶部搜索框 -->
<view id="searchOuterView" class="container">
  <view id="searchInnerView" class="userinfo">
   <image src="/Images/@2x_find.png"></image>
   <text> 搜索</text>
  </view>
</view>
<!-- 小导航 -->
<view id="smallNAVView">
  <view>
    <image src="/Images/@2x_online.png"></image>
    <text> 在线课程</text>
  </view>
  <view>
    <image src="/Images/@2x_teacher.png"></image>
    <text> 师资团队</text>
  </view>
  <view>
    <image src="/Images/@2x_gonggao.png"></image>
    <text> 资讯公告</text>
  </view>
</view>
<!-- 轮播 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{activeColor}}" circular="{{circular}}">
  <block wx:for="{{imgUrls}}" wx:key="*this">
    <swiper-item>
      <!-- swiper-item里面承载的是一张图片，不同的swiper-item承载不同的图片 -->
      <image src="{{item}}"></image>
    </swiper-item>
  </block>
</swiper>
<!-- 热门课程 -->
<view id="hotCourseView">
  <!-- 总标题 -->
  <view id="hotCourseTitleView">热门课程</view>
  <!-- 四门课程 -->
  <view id="courseListView">
    <view class="courseView">
      <image src="/Images/hotkc01.jpg"></image>
      <text>心理科普：巴纳姆效应</text>
    </view>
    <view class="courseView">
      <image src="/Images/hotkc02.jpg"></image>
      <text>3-6岁幼儿心理特点</text>
    </view>
    <view class="courseView">
      <image src="/Images/hotkc03.jpg"></image>
      <text>孩子与父亲该如何相处</text>
    </view>
    <view class="courseView">
      <image src="/Images/hotkc04.jpg"></image>
      <text>猫与狗的对战</text>
    </view>
  </view>
  <!-- 查看更多 -->
  <view id="moreView">
      <text>查看更多</text>
      <view class="arrow"></view>
    </view>
</view>

pages–>course–>course.wxss中

/* 课程样式 */
/* 顶部搜索框 */
#searchOuterView{
  padding: 15rpx;
  background: #FFFFFF;
}
#searchInnerView{
  text-align: center;
  width: 720rpx;
  height: 58rpx;
  background: #eeeeee;
  border: 2rpx solid #FFFFFF;
  border-radius: 8rpx;
  line-height: 58rpx;
  box-sizing: border-box; /* 设置边框包含在宽高之内 */
}
#searchInnerView > image{
   height: 29rpx;
  width: 29rpx;
  vertical-align: middle; /* 设置图片对齐方式 */
}
#searchInnerView > text{
  font-size: 24rpx;
  color: #B1B1B1;
}
/* 小导航(在线课程、师资团队、资讯公告) */
#smallNAVView{
  display: flex;
}
#smallNAVView > view{
  height: 88rpx;
  line-height: 88rpx;
  background: #88D2F9;
  flex-grow: 1; /*让flex布局的子元素 等比放大1 */
  text-align: center;
}
#smallNAVView > view:nth-child(2){
  border-left: 2rpx solid #FFFFFF;
  border-right: 2rpx solid #FFFFFF;
}
#smallNAVView image{
  width: 44rpx;
  height: 44rpx;
  vertical-align: middle;
}
#smallNAVView text{
  font-size: 30rpx;
  color: #FFFFFF;
  vertical-align: middle;
}
/* 轮播 */
swiper image {
  width: 750rpx;
  height: 400rpx;
}
/* 热门课程 */
#hotCourseView{
  padding: 0 20rpx;
}
#hotCourseTitleView{
  height: 108rpx;
  line-height: 108rpx;
  font-size: 30rpx;
  font-weight: bold;
  text-align: center;
}
#courseListView{
  display: flex;
  flex-wrap: wrap; /* 换行   flex-flow: row wrap;-->子元素溢出父容器时换行*/
  justify-content: space-between; /*两端对齐，子元素之间有间隙  项目在主轴上的对齐方式*/
}
.courseView{
  width: 346rpx;
  margin-bottom: 40rpx;
  text-align: center;
}
#hotCourseView image{
  width: 346rpx;
  height: 220rpx;
}
/* 热门课程---查看更多 */
#moreView{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #a39f9f;
  position: relative;
}
/* 热门课程---右箭头 */
#moreView{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #a39f9f;
  position: relative;
}
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #B1B1B1;
  border-right: 4rpx solid #B1B1B1;
  transform: rotate(45deg); /* 旋转45度 */
  position: absolute;  /* 绝对定位，相对于父元素进行定位，前提父元素必须具有定位属性 */
  right: 30rpx;
  top: 38rpx;
}

pages–>course–>course.js中，注意位置

Page({
  // 轮播js
  data: {
    imgUrls: ['/Images/kc01.jpg', '/Images/kc02.jpg', '/Images/kc03.jpg'],
    indicatorDots: true,
    vertical: false, //滑动方向是否为纵向
    autoplay: true,  //是否自动切换
    interval: 3500,  //自动切换时间间隔
    duration: 500,   //滑动动画时长
    activeColor: "#ffffff",  //当前选中的指示点颜色
    circular: true    //  是否采用衔接滑动
  },

效果：
在这里插入图片描述
在这里插入图片描述

我的页面（登录页面）

首先添加一个编辑器方便查看。
改页面标题
pages–>mine–>mine.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "我的"
}

pages–>mine–>mine.wxml中

<!--我的页面---用户信息展示-->
<view id="userInfoView">
  <view>昵称：少年先锋队</view>
  <view>来自：河南·郑州</view>
  <view>积分：1080</view>
</view>
<!-- 我的页面---用户列表 -->
<view class="userItemListView">
  <view>
    <text>我的测评</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>我的咨询</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>我的回答</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>我的通知</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>课程收藏</text>
    <view class="arrow"></view>
  </view>
</view>
<view class="userItemListView">
  <view>
    <text>绑定手机</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>修改密码</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>关于我们</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>退出登录</text>
    <view class="arrow"></view>
  </view>
</view>

pages–>mine–>mine.wxss中

/* 我的页面样式 --- 用户信息展示*/
page{
  background: #F1EEF5;
}
#userInfoView{
  background: #87CEFA;
  padding: 30rpx 0 40rpx;
  text-align: center;  /*父元素设置的样式，子元素可以继承到*/
}
#userInfoView > view:nth-child(1){
  color: #ffffff;
  font-size: 34rpx;
}
#userInfoView > view:nth-child(2){
  color: #ffffff;
  font-size: 30rpx;
  padding: 30rpx 0;
}
#userInfoView > view:nth-child(3){
  color: #0f9ffb;
  font-size: 34rpx;
}
/* 用户列表 */
.userItemListView{
  background: #ffffff;
  padding: 0 50rpx;
  margin: 24rpx 0;
}
.userItemListView > view{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #f1f1f1;
  position: relative;
}
/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}
/* 右箭头 */
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #B1B1B1;
  border-right: 4rpx solid #B1B1B1;
  transform: rotate(45deg); /* 旋转45度 */
  position: absolute;  /* 绝对定位，相对于父元素进行定位，前提父元素必须具有定位属性 */
  right: 30rpx;
  top: 38rpx;
}
.userItemListView > text{
  font-size: 30rpx;
}

效果：
在这里插入图片描述
在这里插入图片描述

精选文章页面（扩展页面）

可以体现跳转效果，因为现在还是前端页面静态的布局，还没写后台数据实现。
1、在pages—>app.json–>pages后面加上”pages/featuredArticles/featuredArticles”路径，创建页面
在这里插入图片描述
2、这个页面必须添加编译模式，不然看不到效果
3、需要用到的图片：
在这里插入图片描述
在featuredArticles—> featuredArticles.json中

{
  "usingComponents": {},
  "navigationBarTitleText": "精选文章"
}

实现跳转的方式
1） 组件跳转（可以回退）
https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
在这里看前面三个属性即可。
当点击页面的某个区域来实现跳转的，一般使用组件跳转方式
2） API跳转方式
API跳转方式类似于JS实现页面跳转。
https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.openEmbeddedMiniProgram.html
如果需要结合数据或逻辑来实现跳转的话，一般使用API跳转方式。如登录成功跳转到我的页面
事件：
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
pages–> featuredArticles --> featuredArticles.wxml中

<!--精选文章(扩展页面)-->
<view id="featuredArticles">
  <view class="articleView">
    <image src="/Images/article01.png"></image>
    <view class="articleContent">
      <view class="artivcleTitle">你活出自我的样子，真美</view>
      <view class="articleDesc">千百年来，古人总把人的品格与自然之物相联系起来，以花草树木之品性喻人的精神情操。</view>
    </view>
  </view>
  <view class="articleView">
    <image src="/Images/article02.png"></image>
    <view class="articleContent">
      <view class="artivcleTitle">这个救赎，因校园霸凌而起</view>
      <view class="articleDesc">续《你的名字》之后，日本又出现了一个现象级的动漫电影---《声之形》</view>
    </view>
  </view>
  <view class="articleView">
    <image src="/Images/article03.png"></image>
    <view class="articleContent">
      <view class="artivcleTitle">张韶涵从落魄走向开挂：所谓自由，就是被人讨厌</view>
      <view class="articleDesc">神经衰弱是由于长期情绪紧张和精神压力，出现精神易兴奋和脑力易疲乏现象</view>
    </view>
  </view>
  <view class="articleView2">
    <image src="/Images/article04.jpg"></image>
    <view class="articleContent">
      <view class="artivcleTitle">在你不知道的时候你已经被美食毒害了</view>
      <view class="articleDesc">朋友有一次问我，世界上什么事最难。我说挣钱最难，他摇头。哥德巴赫猜想？他又摇头。我说我放弃,你告诉我吧。他神秘兮兮地说是认识你自己。</view>
    </view>
  </view>
  <view class="articleView">
    <image src="/Images/article05.jpg"></image>
    <view class="articleContent">
      <view class="artivcleTitle">原生家庭的苦，怎样才能不白受？</view>
      <view class="articleDesc">当我们的心理冲突或者痛苦情绪超载时，我们怎么办？就像病毒入侵我们的身体时，我们的身体做出的最本能的反应就是尽自己全部的努力守护我们的健康。</view>
    </view>
  </view>
  <view class="articleView">
    <image src="/Images/article06.jpg"></image>
    <view class="articleContent">
      <view class="artivcleTitle">优秀的你，是不是个优秀的家长</view>
      <view class="articleDesc">心理暗示是指人接受外界或他人的愿望、观念、情绪、判断、态度影响的心理特点。是人们日常生活中，最常见的心理现象。心理学家巴甫洛夫认为：暗示是人类最简单、最典型的条件反射。</view>
    </view>
  </view>
</view>
<!-- 正在加载 -->
<view id="loadingView">
  <image src="/Images/loading.gif"></image>
  <text> 正在加载更多资源...</text>
</view>

pages–> featuredArticles --> featuredArticles.wxss中

/* 精选文章(扩展页面) */
#featuredArticles{
  padding: 0 22rpx;
}
.articleView{
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F1EEF5;
}
.articleView image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
.articleTitle{
  font-size: 28rpx;
  font-weight: bold;
  line-height: 50rpx;
}
.articleDesc{
  font-size: 26rpx;
  color: #B7B7B7;
  line-height: 35rpx;
}
/* 正在加载 */
#loadingView{
  text-align: center;
  height: 88rpx;
  background: #F1EEF5;
  line-height: 88rpx;
}
#loadingView > image{
  width: 48rpx;
  height: 48rpx;
  vertical-align: middle;
}
#loadingView > text{
  font-size: 28rpx;
  vertical-align: middle;
}

效果：
在这里插入图片描述
在这里插入图片描述
实现跳转
在pages–>index—index.wxml中修改一下代码
在这里插入图片描述

效果，点击
在这里插入图片描述

然后跳转到精选文章(扩展页面)中，点击左上角可以回退，这个是自定义的，不需要自己实现
在这里插入图片描述

关于我们页面

1.在app.json中添加路径
在这里插入图片描述
2.去aboutUS下的aboutUS.json中写上标题

{
  "usingComponents": {},
  "navigationBarTitleText": "关于我们"
}

3.添加图片
在这里插入图片描述
4.添加编译器，叫，关于我们。
pages–>aboutUS–>aboutUS.wxml

<!--关于我们页面-->
<view id="aboutUS">
  <image src="/Images/@2x_2weima.png"></image>
  <text>微信扫一扫关注我们</text>
</view>
<!-- 公司信息区域 -->
<view id="companyView">
  <view class="companyItemView">
    <view>公司名称</view>
    <view>河南十方心理咨询有限公司</view>
  </view>
  <view class="companyItemView">
    <view>公司地址</view>
    <view>河南自贸试验区郑州片区绿地新都会2号楼A座十楼1007</view>
  </view>
  <view class="companyItemView">
    <view>联系电话</view>
    <view>0371-68105666</view>
  </view>
  <view class="companyItemView">
    <view>客服邮箱</view>
    <view>shifangxinli@163.com</view>
  </view>
  <image src="/Images/@2x_about.png"></image>
  <view class="companyItemView">
    <view>公司简介</view>
    <view>河南十方心理咨询有限公司成立于2017年5月23日，是第一批有能力搭建社会心理服务体系的机构；是对企业全面实施EAP整体项目的专业供应商；是为个体和企业提供个性化“心里测评”服务的心理健康机构；是对个体、团队进行心理咨询的心理服务机构；是首个注重并开展青少年素质培养的心理教育机构。我们以”培养坚朗的人格素质“为首要任务，一切以来访者的个人成长和客户的收获为中心，在众多经验丰富的心理咨询专家的共同努力下，获得了社会认可。</view>
  </view>
</view>

pages–>aboutUS–>aboutUS.wxml

/* 关于我们样式 */
/* 二维码 */
#aboutUS{
  width: 300rpx;
  margin: 20rpx auto 60rpx;  /* 左右居中 */
  font-size: 26rpx;
  text-align: center;
}
#aboutUS > image{
  width: 300rpx;
  height: 300rpx;
  padding-bottom: 10rpx;
}
/* 公司信息 */
#companyView{
  padding: 0 40rpx;
}
.companyItemView{
  padding-bottom: 30rpx;
}
#companyView > image{
  width: 670rpx;
  height: 500rpx;
  margin-bottom: 40rpx;
}
.companyItemView > view:nth-child(1){
  font-size: 30rpx;
  color: #87cefa;
  padding-bottom: 20rpx;
}
.companyItemView > view:nth-child(2){
  font-size: 26rpx;
  color: #888888;
}

效果：
在这里插入图片描述
在这里插入图片描述

关联跳转

从我的页面跳转到关于我们。在我的页面中，把关于我们的view改为navigator，然后设置跳转路径和方式。
main.wxml页面修改
在这里插入图片描述

在关于我们那里改成navigator之后添加路径跟打开方式。这个打开方式navigate是可以回退的。
在这里插入图片描述

改完后样式也要改
在这里插入图片描述
然后点击关于我们就可以跳转了。

咨询师页面详情页

1.在app.json中添加路径
在这里插入图片描述
2.去consultDetails下的consultDetails.json中写上标题

{
  "usingComponents": {},
  "navigationBarTitleText": "咨询师信息"
}

3.添加编译器，叫，咨询师信息。
pages—>consultDetails–>consultDetails.wxml中

<!--咨询师信息页面-->
<view id="consultDetialsInfo">
  <view>
    <image src="/Images/zxs01.jpg"></image>
  </view>
  <view>张婧</view>
  <view>郑州市  国家二级心理咨询师</view>
  <view id="certificate">
    <view>已认证</view>
    <view>查看证书</view>
  </view>
</view>
<!-- 擅长领域 -->
<view id="goodAtTerritory">
  <view>恋爱关系</view>
  <view>婚姻关系</view>
  <view>情绪管理</view>
</view>
<!-- 收费标准 -->
<view class="siKuaiAreas">
  <view class="title">收费标准</view>
  <view class="chargingItems">
    <view>语音咨询</view>
    <view>18人已咨询</view>
    <view>
      <text>500</text>/次(1小时)
    </view>
  </view>
  <view class="chargingItems">
    <view>视频咨询</view>
    <view>20人已咨询</view>
    <view>
      <text>500</text>/次(1小时)
    </view>
  </view>
  <view class="chargingItems">
    <view>倾述咨询</view>
    <view>15人已咨询</view>
    <view>
      <text>500</text>/次(1小时)
    </view>
  </view>
  <!-- 查看更多 -->
  <view id="moreView" bindtap="gofeaturedArticles">
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>
<!-- 回复留言 guestReply-->
<view class="siKuaiAreas">
  <view class="title">回复留言</view>
  <view class="guestReplyItems">
    <view>问：家庭矛盾，情绪抑郁，社交恐慌，自卑......</view>
    <view>答：第一，家庭冲突是家庭成员之间的矛盾与纠葛。许多社会学家认为，家庭本身具有引起冲突的特性。
      第二，以抑郁为特征的疾病状态。其特点为:情绪低落、思维缓慢、语言动作减少和迟缓。
      第三，社交恐惧一般指社交恐惧症。 社交恐惧症是恐惧症的一种亚型，恐惧症原称恐怖性神经症，是神经症的一种。
    </view>
  </view>
  <view class="guestReplyItems">
    <view>问：家庭矛盾，情绪抑郁，社交恐慌，自卑......</view>
    <view>答：第一，家庭冲突是家庭成员之间的矛盾与纠葛。许多社会学家认为，家庭本身具有引起冲突的特性。
      第二，以抑郁为特征的疾病状态。其特点为:情绪低落、思维缓慢、语言动作减少和迟缓。
      第三，社交恐惧一般指社交恐惧症。 社交恐惧症是恐惧症的一种亚型，恐惧症原称恐怖性神经症，是神经症的一种。
    </view>
  </view>
  <view class="guestReplyItems">
    <view>问：家庭矛盾，情绪抑郁，社交恐慌，自卑......</view>
    <view>答：第一，家庭冲突是家庭成员之间的矛盾与纠葛。许多社会学家认为，家庭本身具有引起冲突的特性。
      第二，以抑郁为特征的疾病状态。其特点为:情绪低落、思维缓慢、语言动作减少和迟缓。
      第三，社交恐惧一般指社交恐惧症。 社交恐惧症是恐惧症的一种亚型，恐惧症原称恐怖性神经症，是神经症的一种。
    </view>
  </view>
  <!-- 查看更多 -->
  <view id="moreView" bindtap="gofeaturedArticles">
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>
<!-- 用户评价 -->
<view class="siKuaiAreas">
  <view class="title">用户评价</view>
  <view class="userEvaluation">
    <view class="starUserName">匿名用户
    <!-- 五角星 -->
      <view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star half_star">
          <view class="icon icon_gray">
            <view class="icon icon_yellow"></view>
          </view>
        </view>
      </view>
    </view>
    <view>昨天</view>
    <view>老师很细心，声音很好听，长得好看</view>
  </view>
  <view class="userEvaluation">
    <view class="starUserName">匿名用户
      <view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_gray"></view></view>
      </view>
    </view>
    <view>昨天</view>
    <view>老师很细心，声音很好听，长得好看</view>
  </view>
  <view class="userEvaluation">
    <view class="starUserName">匿名用户
      <view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_yellow"></view></view>
        <view class="star"><view class="icon icon_gray"></view></view>
        <view class="star"><view class="icon icon_gray"></view></view>
      </view>
    </view>
    <view>昨天</view>
    <view>老师很细心，声音很好听，长得好看</view>
  </view>
  <!-- 查看更多 -->
  <view id="moreView" bindtap="gofeaturedArticles">
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>
<!-- 发布课程 -->
<view id="releaseCourse">
  <view id="releaseCourseTitle">发布课程</view>
  <view class="courseView">
    <image src="/Images/article001.jpg"></image>
    <!-- <view class="courseContent"> -->
      <view class="courseTitle">巴纳姆效应又称福勒效应，星相效应</view>
    <!-- </view> -->
  </view>
  <view class="courseView">
    <image src="/Images/article001.jpg"></image>
    <view class="courseContent">
      <view class="courseTitle">当人们用一些普通、含糊不清、广泛的形容词来描述一个人的时候，人们往往很容易就接受这些描述，并认为描述中所说的就是自己</view>
    </view>
  </view>
  <view class="courseView">
    <image src="/Images/article001.jpg"></image>
    <view class="courseContent">
      <view class="courseTitle">巴纳姆效应也反映了一种对一般性、非精确描述的高度自我认同趋势</view>
    </view>
  </view>
  <!-- 查看更多 -->
  <view id="moreView" bindtap="gofeaturedArticles">
    <text>查看更多</text>
    <view class="arrow"></view>
  </view>
</view>
<!-- 底部 -->
<view id="bottomButton">
  <view>发私信</view>
  <view>咨询</view>
</view>

pages—>consultDetails–>consultDetails.wxss中

/* 咨询师信息页面样式 */
page{
  background: #F1EFF5;
}
#consultDetialsInfo{
  background: #80CDFC;
  /* 解决上外边距的塌陷 */
  overflow: hidden;
  color: white;
}
#consultDetialsInfo > view:nth-child(1){
  width: 200rpx;
  height: 200rpx;
  margin: 40rpx auto;
  border-radius: 100rpx;
  background: cornsilk;
  text-align: center;
}
#consultDetialsInfo image{
  width: 160rpx;
  height: 160rpx;
  border-radius: 80rpx;
  margin-top: 20rpx;
}
#consultDetialsInfo > view:nth-child(2){
  font-size: 36rpx;
  text-align: center;
  font-weight: bold;
}
#consultDetialsInfo > view:nth-child(3){
  font-size: 36rpx;
  text-align: center;
  padding: 28rpx 0;
  border-bottom: 2rpx solid white;
  width: 690rpx;
  margin: 0 auto;
}
/* 证书 */
#certificate{
  padding: 20rpx 76rpx;
  display: flex;
  justify-content: space-between;
}
#certificate > view{
  width: 200rpx;
  height: 60rpx;
  background: #29AFF4;
  text-align: center;
  line-height: 60rpx;
  border-radius: 30rpx;
}
/* 擅长领域 */
#goodAtTerritory{
  padding: 30rpx 76rpx;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
}
#goodAtTerritory > view{
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  background: #5DC8FF;
  color: white;
  font-size: 24rpx;
  border-radius: 6rpx;
}
/* 收费标准 siKuaiAreas*/
.siKuaiAreas{
  margin: 24rpx 0;
  padding: 0 30rpx;
  background: white;
}
.title{
  padding: 30rpx 0;
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 2rpx solid #f1f1f1;
}
.chargingItems{
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f1f1f1;
  position: relative;
  color: #a39f9f;
}
.chargingItems >view:nth-child(1){
  font-size: 30rpx;
}
.chargingItems >view:nth-child(2){
  font-size: 24rpx;
  position: absolute;
  top: 20rpx;
  right: 30rpx;
}
.chargingItems >view:nth-child(3){
  font-size: 30rpx;
}
.chargingItems >view:nth-child(3) text{
  font-size: 30rpx;
  color: red;
  font-weight: bold;
  padding-top: 20rpx;
}
/* 收费标准---查看更多 */
#moreView{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #a39f9f;
  position: relative;
}
/* 收费标准---右箭头 */
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #B1B1B1;
  border-right: 4rpx solid #B1B1B1;
  transform: rotate(45deg); /* 旋转45度 */
  position: absolute;  /* 绝对定位，相对于父元素进行定位，前提父元素必须具有定位属性 */
  right: 30rpx;
  top: 38rpx;
}
/* 回复留言 */
.guestReplyItems{
  padding: 30rpx 0;
  border-bottom: 2rpx solid #f1f1f1;

}
/* 一行 多余文本使用省略号替代 */
.guestReplyItems > view:nth-child(1){
  font-size: 30rpx;
  width: 690rpx; /* 设置宽高之后 */
  height: 60rpx;
  line-height: 60rpx;
  font-weight: bold;
  overflow: hidden;  /* 超出部分隐藏 */
  white-space: nowrap;  /* 文本不换行 */
  text-overflow: ellipsis; /* 多余文本使用省略号替代 */
}
/* 多行 多余文本使用省略号替代 */
.guestReplyItems > view:nth-child(2){
  font-size: 24rpx;
  color: #a39f9f;
  height: 80rpx;
  line-height: 40rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 文本显示2行 */
  -webkit-box-orient: vertical;
  align-content: center;
}
/* 用户评价 */
.userEvaluation{
  padding: 20rpx;
  border-bottom: 2rpx solid #f1f1f1;
  position: relative;
}
.userEvaluation > view:nth-child(1){
  font-size: 24rpx;
  color: #a39f9f;
}
.userEvaluation >view:nth-child(2){
  font-size: 24rpx;
  position: absolute;
  top: 20rpx;
  right: 30rpx;
  color: #a39f9f;
}
.userEvaluation > view:nth-child(3){
  font-size: 30rpx;
  padding-top: 20rpx 0;
}
/* 用户评价---五角星 */
/* 首先引入字体文件 */
@font-face {  
  font-family: 'FontAwesome';  
  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/font/fontawesome-webfont.woff?v=3.2.1') format('woff'); 
}
.starUserName{
  position: relative;
}
.starUserName > view{
  display: flex;
  position: absolute;
  left: 120rpx;
  top: 5rpx;
}
/*五角星之间的间距*/
.star{
  margin-right:3rpx;
}
/*五角星*/
.star .icon:before {
  content: '\f005'; 
  font-family: FontAwesome; 
  position: absolute;
  left: 0;
  top: 0;
  display: block;  
  overflow: hidden;
}
.star .icon {
  display: block;
  font-size: 24rpx; 
  text-align: center; 
  width: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  position: relative;
  white-space: pre;
}
/*灰色五角星*/
.star .icon_gray{
  color:#dad5d5;
}
/*黄色五角星*/
.star .icon_yellow:before {
  color: #FFCA28;
}
/* 发布课程 */
#releaseCourse{
  padding: 0 30rpx;
  background: #FFFFFF;
  margin-bottom: 24rpx;
}
#releaseCourseTitle{
  height: 88rpx;
  font-size: 30rpx;
  font-weight: bold;
  border-bottom: 1rpx solid #F1EEF5;
  line-height: 88rpx;
}
.courseView{
  display: flex;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #F1EEF5;
}
.courseView image{
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}
.courseTitle{
  font-size: 28rpx;
  line-height: 50rpx;
  display: flex;
  align-items: center; /* 文本居中对齐 */
  justify-content: center;
  
}
/* ？？？？？ */
.courseContent{
  width: 580rpx;
}
/* 发布课程---查看更多 */
#moreView{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #a39f9f;
  position: relative;
}
/* 底部 */
#bottomButton{
  display: flex;
  text-align: center;
  border-top: 2rpx solid #b7b7bd;
}
#bottomButton > view{
  flex-grow: 1; /*整体放大1 */
  height: 98rpx;
  font-size: 36rpx;
  line-height: 98rpx;
}
#bottomButton > view:nth-child(1){
  color: #979798;
  background: #f7f7fa;
}
#bottomButton > view:nth-child(2){
  color: white;
  background: #87cefa;
}

效果：

在这里插入图片描述
在这里插入图片描述
注：点击咨询师列表中的咨询师，跳转到对应的咨询师详情页。

登录页面

查看属性：https://developers.weixin.qq.com/miniprogram/dev/component/
表单数据提交
1.app.json中写上登录和注册页面的路径
在这里插入图片描述

2.在login—>login.json中写上标题

{
  "usingComponents": {},
  "navigationBarTitleText": "登录页面"
}

3.添加编辑器，登录页面。
4.pages—>login—>login.wxml中

<!--登录页面-->
<!-- 定义form组件,表单，用来提交数据  bindsubmit:绑定事件，提交数据-->
<form action="" bindsubmit="toLogin">
  <view id="input">
    <input type="text" placeholder="手机号/用户名" name="userName"></input>
    <input type="text" placeholder="密码" password="*" name="password"></input>
  </view>
  <!-- 按钮 -->
  <view id="submitButton">
    <button form-type="submit">登录</button>
    <button bindtap="tosifnIn">注册</button>
    <view>忘记密码</view>
  </view>
</form>

pages—>login—>login.wxss中

/* 登录页面样式 */
page{
  background: #F1EEF5;
}
/* 输入框 */
#input{
  background: #fff;
  padding: 0 30rpx;
  border-top: 2rpx solid #f1f1f1;
}
#input > input{
  height: 88rpx;
}
#input > input:nth-child(1){
  border-bottom: 2rpx solid #f1f1f1;
}
/* 按钮 */
#submitButton{
  font-size: 35rpx;
  width: 690rpx;
  margin: 80rpx auto 0;
}
#submitButton > button{
  width: 690rpx;
  height: 88rpx;
  font-size: 36rpx;
}
#submitButton > button:nth-child(1){
  background: #87cefa;
  color: white;
}
#submitButton > button:nth-child(2){
  color: #87cefa;
  background: white;
  border: 2rpx solid #87cefa;
  margin: 36rpx 0;
}
#submitButton > view{
  font-size: 28rpx;
  color: #87cefa;
  text-align: right;
}

pages—>login—>login.js中
在这里插入图片描述
效果：
在这里插入图片描述

注册页面

1.在signIn—>signIn.json中写上标题
{
  "usingComponents": {},
  "navigationBarTitleText": "注册页面"
}

2.添加编辑器，注册页面
3. pages—>signIn—> signIn.wxml中

<!--注册页面-->
<!-- 定义form组件-->
<form action="" bindsubmit="toSignIn">
  <view id="input">
    <input type="text" placeholder="用户名" name="userName"></input>
    <input type="text" placeholder="输入6-16位字母、数字组合密码" password="*" name="password"></input>
    <input type="text" placeholder="确认密码" password="*" name="userPsw"></input>
    <input type="text" placeholder="昵称" name="petName"></input>
    <input type="text" placeholder="真实姓名" name="realName"></input>
    <input type="number" placeholder="手机号" name="phone"></input>
    <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" placeholder="地区">
    <view class="picker">
      当前选择：{{region[0]}}-{{region[1]}}-{{region[2]}}
    </view>
  </picker>
  </view>
  <!-- 按钮 -->
  <view id="submitButton">
    <button>注册</button>
    <view>已有账号，去登录</view>
  </view>
</form>

pages—>signIn—> signIn.wxss中

/* 注册页面样式 */
page{
  background: #F1EEF5;
}
/* 输入框 */
#input{
  background: #fff;
  padding: 0 30rpx;
  border-top: 2rpx solid #f1f1f1;
}
#input > input{
  height: 88rpx;
  border-bottom: 2rpx solid #f1f1f1;
}
#input > picker{
  height: 88rpx;
  line-height: 88rpx;
}
/* 按钮 */
#submitButton{
  font-size: 35rpx;
  width: 690rpx;
  margin: 80rpx auto 0;
}
#submitButton > button{
  width: 690rpx;
  height: 88rpx;
  font-size: 36rpx;
}
#submitButton > button:nth-child(1){
  background: #87cefa;
  color: white;
}
#submitButton > view{
  font-size: 28rpx;
  color: #87cefa;
  text-align: right;
  margin-top: 25rpx;
}

pages—>signIn—> signIn.js中
在这里插入图片描述
效果：
在这里插入图片描述

代码复用

项目中有很多的代码是重复的，可以把它提出来放到app.wxss中，可以重复利用。
把这个项目中的查看更多和右箭头的样式放到app.wxss中，作为公共样式，其他页面就可以访问到了，也就不需要定义这两个样式了。
然后把之前写的这两个样式全删除即可。
样式的应用机制：先从页面的wxss中找，找不到，然后去app.wxss中找
app.wxss

/* 查看更多 */
#moreView{
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
  color: #a39f9f;
  position: relative;
} 
/* 右箭头 */
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #B1B1B1;
  border-right: 4rpx solid #B1B1B1;
  transform: rotate(45deg); /* 旋转45度 */
  position: absolute;  /* 绝对定位，相对于父元素进行定位，前提父元素必须具有定位属性 */
  right: 30rpx;
  top: 38rpx;
}

效果一样没有变化。

忘川茶社
关注
  • 3
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序-创建小程序页面
码农博士的博客
05-29 2891
QQ讨论群：785071190创建页面创建小程序页面非常简单，鼠标在需要创建页面的目录右击，可看到下图菜单，选择“Page”即可创建出一个页面。输入页面名称，回车就可以创建出一个页面所需要的四个文件.json  .js  .wxss  .wxml 小程序页面创建完成后，app.json中pages属性将自动添加一条记录"pages/index/demo"...
小程序引入其它页面
ZZHK666的博客
06-21 1207
小程序引用组件
微信小程序开发中的表单提交与数据验证
最新发布
qq_67153941的博客
06-03 314
微信小程序开发中的表单提交与数据验证是一个常见的功能需求。在本篇文章中，我将通过一个具体的案例来介绍如何实现这个功能，包括表单的布局与样式、数据的收集与提交、以及验证输入数据的有效性。首先，我们需要创建一个新的小程序页面，命名为form。
⑥mpvue 很基础的小程序页面搭建（vuex管理状态、实现收藏和分享功能）
一个努力学习的程序猿
05-31 886
mpVue主页面部分的搭建 本人是个新手，写下博客用于自我复习、自我总结。 如有错误之处，请各位大佬指出。 学习资料来源于：尚硅谷 当我们初始化项目后，要编写我们自己代码就要把 src里的文件 清空。 （因为配置的原因，项目的构建就会去找src里的文件。当然如果不觉得麻烦，也可以去build里的webpack.base.conf中修改源文件路径） 主页面部分的搭建 在src中，先建好app.vue和main.js。 app.vue <script> export default {
微信小程序之新页面的创建【2】
tscn1的博客
08-01 494
目录新页面创建与组成结构新页面创建组成结构文件解析wxml标签例子 新页面创建与组成结构 新页面创建 在全局的app.json中的pages键后面加值（页面路径），然后点击编译或者保存，会自动生成相应的文件。 手动创建。 组成结构 所有页面都在pages文件中，也可以自己定义在其它文件中。 在一个文件夹中创建一个页面（代码清晰）也可以创建多个页面（比如同一功能的页面）。 文件解析 wxml与html对应，但是不能使用html中的标签，需要用微信小程序的标签。 wxss与css对应，语法也一致。 j
微信小程序开发步骤（二）页面搭建
MySunshine07的博客
05-07 536
在上一章中讲述了如何创建项目，这一章主要讲述小程序中代码目录架构，以及创建新页面。 一、目录架构 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。 //app.js App({ onLaunch: function () { // 展示本地存储能力 v...
基于uniapp微信小程序我的钱包页面
03-26
【基于uniapp微信小程序我的钱包页面】开发详解 在移动应用开发领域，微信小程序因其轻量化、便捷的特性，已经成为开发者的重要选择。而uniapp作为一款跨平台开发框架，能够帮助开发者快速构建H5、微信小程序、...
微信小程序点餐系统微信小程序开发实战
06-07
微信小程序点餐系统是当前移动互联网时代餐饮业中常见的技术应用，它利用微信小程序平台，为用户提供便捷的在线点餐服务。本项目实战教程将深入探讨如何开发这样一个系统，涵盖从设计、编码到上线的全过程。 一、...
菜谱微信小程序源码云开发菜谱微信小程序源码.rar
09-18
菜谱微信小程序源码云开发菜谱微信小程序源码 京细菜谱是一个美食分享网站,提供优质的家常菜谱大全，仿京细菜谱小程序源码为喜欢美食的朋友提供了很多的美食烹饪教程，让您轻松学会做美食。对不同食材和地域的饮食做...
微信小程序开发+快速搭建+wechat
01-29
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的...掌握这些技能，你将能够高效地开发出吸引人的微信小程序，节省时间，专注于生活中的其他重要事务。
微信小程序类今日头条页面的源码
03-29
1. **小程序架构与环境搭建**：首先，我们需要了解微信小程序的基础架构，包括WXML（微信小程序标记语言）用于结构描述，WXSS（微信小程序样式语言）用于样式定义，以及JavaScript负责业务逻辑和数据管理。...
小程序引用其他页面js_「小程序JAVA实战」小程序模块之间引用（19）
weixin_39990250的博客
12-04 155
上一节，讲了页面引用模块的概念，如果是模块之前引用呢？源码：https://github.com/limingios/wxProgram.git 中的No.8小程序的WXS模块js代码块可以在页面中被引入使用定义*.wxs,module.exports暴露接口和属性从私有到公用的概念，通过暴露就可以公有话。require函数官方的阐述>https://developers.weixin.qq...
免费教程：三十分钟教你搭建一个小程序
SanjianZh的博客
10-20 179
进入平台后台，我们点击【轻应用小程序】，进入设计小程序页面。在这个页面上，我们可以找到【设计小程序】模块，点击【更换模板】选择小程序模板。这样，我们可以根据模板快速搭建出精美的小程序，无需从头开始。乔拓云平台提供了丰富的功能模块，如服务列表、表单、留言板、优惠券等，我们可以根据实际需要自由搭配，让小程序更符合业务需求。最后，我们点击【预览】查看完整的小程序，确认无需再修改后，就可以点击【审核发布】提交小程序进行审核了。模板中的图片、文字内容、功能模块等都是可以自定义编辑的，你可以根据自己的需求进行修改。
微信小程序实现多个页面
m0_72189003的博客
11-28 1367
上图示例代码(“pages“里面想让第几个页面显示在第一个，就挪到最前面“iconPath”是没选中页面的时候显示的颜色“selectedIconPath”是选中页面的时候显示的颜色（里面的图片需要自己下载可以在阿里矢量图上下载，在根目录创建一个imgs文件把图片放进去引入就行）)第一步：写在app.json
【微信小程序】引入公共页面的几种情况
qq_25285531的博客
12-26 1649
1、不带参数 首先在pages文件夹中新建一个template文件夹，文件夹中新建一个template.wxml文件，代码如下 <!--template.wxml--> <template name="msgItem"> <view> <text>This is template.wxml文件，我是一个模板</text> ...
【小程序】navigationBarTitleText配置子页面标题，依旧显示默认标题，子页面配置不显示
记录学习点滴
09-25 477
navigationBarTitleText配置子页面标题不显示，需要注意的是在微信开发者工具中，除了从你其他页面复制的页面不会自动配置，其他新加的页面会自动配置。
小程序子页面控制父页面的方法
weixin_42124996的博客
09-29 1185
var pages = getCurrentPages(); var currPage = pages[pages.length - 1]; //当前页面 var prevPage = pages[pages.length - 2]; //上一个页面 prevPage.setData({ //直接调用上一个页面对象的setData()方法或者自定义的方法 typeShow:true ...
【微信小程序】基础篇 -- 页面配置（十八）
JMFive的博客
03-03 1899
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第18篇文章;今天开始学习微信小程序的第十天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
小程序--子页面触发父页面的方法
weixin_45865992的博客
02-14 631
触发父页面方法
积分商城微信小程序前端页面如何搭建
05-17
积分商城微信小程序前端页面的搭建需要掌握以下技术： 1. HTML/CSS/JS：这些是前端开发的基础，需要掌握HTML页面结构和CSS样式布局的基本概念，以及JavaScript的基本语法和操作DOM的方法。 2. 微信小程序开发：...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值