微信小程序开发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文件中：

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

浏览人数： {{count}}

这样就可以显示出来 浏览人数： 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={{list}}

要输出每一项，使用抽象： 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上进行属性值的绑定

更多详情

更多详情请访问： juntech