小程序----应用（3）

WXML 视图层

1、数据绑定

<!--wxml-->
<view>{{ message }}</view>
组建属性 用{{}} 包含

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

2、列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
item代表for 循环所对应的每一项，item为默认
wx:for-item="itemName" 设置item
wx:for-index="idx" 指定数组当前下标的变量名

3、条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

4、事件

<view bindtap="add"> {{count}} </view>

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

5、文件引入

@import "common.wxss";
<import src="item.wxml"/>
<include src="header.wxml"/>
将目标文件除了<template/>的整个代码引入，相当于是拷贝到include位置

二、数据

1、点击不同按钮切换页面

WXML：

<view bindtap="tabOrder" data-id="0" class="{{dataId==0 ? 'border-btm':''}}">全部订单</view>
  <view bindtap="tabOrder" data-id="1">待付款 
  <view bindtap="tabOrder" data-id="2">待收货</view>

例如:data-alpha-beta=”1”会转化成vent.target.dataset.alphaBeta

data-alphaBeta=”2” 会转化成 event.target.dataset.alphabeta === 2 js：

tabOrder:function(e){
    this.setData({
      dataId: e.target.dataset.id
    })
  },

Wxml:

<view class="classname" wx:if="{{dataId==0}}">
</view>
<view class="classname" wx:elif="{{dataId==1}}">
</view>
<view class="notOrder" wx:else> 
</view>

2.wx.request

wx.setStorage({
  key:"key",
  data:"value"
})

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口.

wx.getStorage({
  key: 'xy_memberId',
      success: function (event) {
        wx.request({
          url: 'https://demo.ecdo.net/index.php/api',
          method: 'GET',
          data: {
            'order_bn': options.order_id, // 支付订单号
            // 'payment_id': , // 支付单号
            'money': options.total_amount, // 支付金额
            'cur_money': options.total_amount, // 支付货币金额
            'pay_type': 'online', // 支付类型
            'payment_tid': options.payinfo.payid, // 支付方式app名称
            'member_id': memberId,
            'accesstoken': accesstoken,     
          },

          header: {
            'Accept': 'application/json',
            'chartset': 'gb-2312'
          },
          success: function (res) {
            console.log(res)
            })
          },
           fail: function(res) {
             console.log(res);
            }
        });
    })
}

请求数据 相当于ajax，包含方法，url，参数等

3.回到顶部 链接

WXML：

<scroll-view class="bigWrap" scroll-y="true" scroll-top="{{scrollTop}}"   bindscroll="scroll" bindscrolltolower= "scrolltolower" style="position: absolute; left: 0; top:0; bottom: 0; right: 0;">

     //*********************
      <view class="com-widget-goTop" bindtap="goTop" wx:if="{{floorstatus}}">
            <view class="icon-gotop">
                顶部
            </view>
      </view>
      //*********************

  </view>

JS：

Page({
data: {
    scrollTop: 0
    },
goTop: function(e){
    this.setData({
        scrollTop:0
    })
},
scroll:function(e,res){
 // 容器滚动时将此时的滚动距离赋值给 this.data.scrollTop
 if(e.detail.scrollTop > 500){
     this.setData({
        floorstatus: true
     });
 }else {
     this.setData({
        floorstatus: false
     });
    }
    })

WXSS：

.bigWrap{ 
background:#eee; 
} 
/goTop回到顶部图标start/ 
.com-widget-goTop { 
position: fixed; 
bottom: 125px; 
right: 5px; 
background: rgba(0,0,0,0.48); 
border-radius: 50%; 
overflow: hidden; 
z-index: 500; 
} 
.com-widget-goTop .icon-gotop{ 
background-color: rgba(0,0,0,0.8); 
display: inline-block; 
width: 50px; 
height: 50px; 
line-height: 68px; 
font-size: 12px; 
color: #ffffff; 
text-align: center; 
border-radius: 50%; 
background: url(http://m.dev.vd.cn/static/xcx/v1/goo/w_2-3451cc437e.png) no-repeat center -1110px; 
-webkit-background-size: 50px auto; 
}

4、星星评论功能

1.第一种笨方法
wxml：

<view>
    <text>快递运速:</text>
    <image bindtap="stars1" data-star="1" src="{{starSrc11}}"></image>
    <image bindtap="stars1" data-star="2" src="{{starSrc12}}"></image>
    <image bindtap="stars1" data-star="3" src="{{starSrc13}}"></image>
    <image bindtap="stars1" data-star="4" src="{{starSrc14}}"></image>
    <image bindtap="stars1" data-star="5" src="{{starSrc15}}"></image>
</view>

js：

data: {
      starSrc11:'../../images/star1.png',
      starSrc12:'../../images/star1.png',
      starSrc13:'../../images/star1.png',
      starSrc14:'../../images/star1.png',
      starSrc15:'../../images/star1.png',
    },
  stars1:function (e) {
    var that = this;
      var tapStars =  e.target.dataset.star;
      console.log(tapStars);
          if(tapStars<=1){
             that.setData({
               'starSrc11':'../../images/star2.png',
               'starSrc12':'../../images/star1.png',
               'starSrc13':'../../images/star1.png',
               'starSrc14':'../../images/star1.png',
               'starSrc15':'../../images/star1.png'
             })
          }else if(tapStars<=2){
             that.setData({
               'starSrc11':'../../images/star2.png',
               'starSrc12':'../../images/star2.png',
               'starSrc13':'../../images/star1.png',
               'starSrc14':'../../images/star1.png',
               'starSrc15':'../../images/star1.png'
             })
          }else if(tapStars<=3){
               that.setData({
              'starSrc11':'../../images/star2.png',
              'starSrc12':'../../images/star2.png',
              'starSrc13':'../../images/star2.png',
              'starSrc14':'../../images/star1.png',
              'starSrc15':'../../images/star1.png'
             })
          }else if(tapStars<=4){
             that.setData({
              'starSrc11':'../../images/star2.png',
              'starSrc12':'../../images/star2.png',
              'starSrc13':'../../images/star2.png',
              'starSrc14':'../../images/star2.png',
              'starSrc15':'../../images/star1.png',
             })
          }else if(tapStars<=5){
             that.setData({
              'starSrc11':'../../images/star2.png',
              'starSrc12':'../../images/star2.png',
              'starSrc13':'../../images/star2.png',
              'starSrc14':'../../images/star2.png',
              'starSrc15':'../../images/star2.png'
             })
          }
           that.setData({
                starS1:tapStars
            }); 
  },

2、
第二种方法点击跳转链接地址