微信小程序开发学习02

微信小程序开发02

6、添加tabBar

找到全局配置文件app.json

向其中加入tabBar集合:

"tabBar": {
    "list": [
    {
      "pagePath": "pages/about/about",
      "text": "关于",
      "iconPath": "images/user-no.png",
      "selectedIconPath": "images/user-yes.png"
    },
    {
      "pagePath": "pages/weekly/weekly",
      "text": "每日推荐",
      "iconPath": "images/film-no.png",
      "selectedIconPath": "images/film-yes.png"
    }
    ]
  }

就发现最底部有两个tab了,于此同时,about页面的navigator元素不生效了,无法执行跳转,到底是什么原因呢?

我们看到tabBar里面,我们定义的集合,跳转页面时,tabBar同时也切换了,如果我们还使用原来的方式,坑定是不行的,那怎么弄呢,我们刚才看到了,open-type的取值,其中redirect是在在当前页打开,并不会切换tab,所以我们换一个open-type就行了,我们选择switchTab,重试一下,就跳转了!

7、设置全局顶部导航栏

一般我们顶部导航栏都是白底黑字,有两种方式,一种是将about页面的头部导航白底黑字的配置拷贝到weekly页面,这种不建议,另外一种是将之写在全局配置文件里,这样每个页面的头部导航都是一样的白底黑字,具体实现:要在前面加上window:

  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "电影周周看"
  }

8、数据绑定

有2种方式,一种是直接操作dom,另外一种是通过ajax更新。

dom操作:

传入一个数据对象—-》使用document.getElementBy().innerHTML = 对象.属性

缺点:每次更新数据,需要对视图进行更新;视图结构耦合紧密,不易维护

ajax方式:

在page页面中传入data的数据对象:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    thisWeeklyMovie:{
      name: "教父",
      comment: "点评:最精彩的剧本,最真实的黑帮电影!",
      imgPath: "/images/asd.jpg"
    },
      count: 123,
      score: 8.9
  },

在weekly.wxml文件中:

使用插值表达式进行数据的读取和显示:

浏览人数:

这样就可以显示出来 浏览人数: 123

wxml源代码:

<view class="container">
  <text>本周推荐</text>
  <image src="{{thisWeeklyMovie.imgPath}}"></image>
  <text>电影名:{{thisWeeklyMovie.name}}</text>
  <text>浏览人数: {{count}}</text>
  <text>评分:{{score}}</text>
  <text>好坏: {{score>8?"好":"差"}}</text>
  <text>点评:{{thisWeeklyMovie.comment}} </text>
</view>

9、条件渲染

10、列表渲染

wx:for

 <image src="item.imgPath}}" class="movie-img"></image>
    <view class="movie-details">
       <text>电影名:{{item.name}}</text>
      <!-- <text>浏览人数: {{count}}</text>
      <text>评分:{{score}}</text> -->
      <!-- <text>好坏: {{score>8?"好":"差"}}</text> -->
      <text>点评:{{item.comment}} </text>
      <text wx:if="{{item.isHighlyRecommended}}" style="font-size:20px;color:red;">强烈推荐</text>

js:

 WeeklyMovieList:[
    {
      name: "教父",
      comment: "最精彩的剧本,最真实的黑帮电影!",
      imgPath: "/images/asd.jpg",
      isHighlyRecommended: true
    },
      {
        name: "教父1",
        comment: "最精彩的剧本,最真实的黑帮电影!",
        imgPath: "/images/asd.jpg",
        isHighlyRecommended: true
      },
      {
        name: "教父2",
        comment: "最精彩的剧本,最真实的黑帮电影!",
        imgPath: "/images/asd.jpg",
        isHighlyRecommended: true
      },
      {
        name: "教父3",
        comment: "最精彩的剧本,最真实的黑帮电影!",
        imgPath: "/images/asd.jpg",
        isHighlyRecommended: true
      },

wx=

要输出每一项,使用抽象: item

下标: index

代码如下:

<view class="container">
  <text>本周推荐</text>
  <view class="movie" wx:key="{{index}} " wx:for="{{WeeklyMovieList}}">
    <image src="{{item.imgPath}}" class="movie-img"></image>
    <view class="movie-details">
      <text>第{{index+1}}周推荐</text>
       <text>电影名:{{item.name}}</text>
      <!-- <text>浏览人数: {{count}}</text>
      <text>评分:{{score}}</text> -->
      <!-- <text>好坏: {{score>8?"好":"差"}}</text> -->
      <text>点评:{{item.comment}} </text>
      <text wx:if="{{item.isHighlyRecommended}}" style="font-size:16px;color:red;">强烈推荐</text>
      <!-- <text hidden="{{!thisWeeklyMovie.isHighlyRecommended}}" style="color: red;font-size:20px;">强烈推荐</text> -->
    </view>
  </view>

</view>

wxss:

/* .container{
  background-color: #eee;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
} */

/* .moive-img{
  display: flex;
  width: 200rpx;
  height: 200rpx; 
} */
image{
  width: 200rpx;
  height: 200rpx;
}
.movie-details{
  display: flex;
  flex-direction: column;
  width: 550rpx;
}

.movie{
  display: flex;
  margin-top: 20px;
}

11、swipper组件的使用

swipper:滑动容器,常被用来表示幻灯片,轮播图

<view class="container">
  <image src="/images/a.jpg" id="img"></image>
  <text>电影周周看</text>
  <view>
  <swiper style="background:#eee;height:260px;" autoplay="true">
    <swiper-item>
    <!-- 123 -->
    <image src="https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640"></image>
    </swiper-item>
    <swiper-item>
    <!-- 234 -->
    <image src="https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640"></image>
    </swiper-item>
    <swiper-item>
    <!-- 345 -->
    <image src="https://images.unsplash.com/photo-1551446591-142875a901a1?w=640"></image>
    </swiper-item>
  </swiper>
    <text></text> <navigator url="/pages/weekly/weekly" style='display: inline;' open-type="switchTab" hover-class="nav-hover" class="nav-default">每周推荐</navigator><text>一部电影</text>
  </view>
  <text>我的微博:xxx.weibo.com</text>
</view>

如果要使用循环列表,就在swiper上使用wx:for,在swiperitem上进行属性值的绑定


Author: Juntech
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Juntech !
评论
  TOC