image bind pre his iphone6s imp targe target 學習總結

微信小程序尺寸單位 rpx單位是微信小程序中css的尺寸單位，rpx可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。 設備 rpx換算成px(屏幕寬度/750) px換算成rpx(750/屏幕寬度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6s 1rpx = 0.552px 1px = 1.81rpx 所以：在使用微信開發者工具開發時，使用iPhone6模擬器界面瀏覽效果 根據設計圖尺寸*2=小程序尺寸rpx開發即可。 Demo1：tab選項卡

wxml:

<view class="nav">
  <view  class="nav-tab {{currentNavTab==idx ? ‘active‘:‘‘}}" wx:for="{{navTab}}"  wx:key="*this" wx:for-index="idx" data-idx="{{idx}}" bindtap="switchTab">
  {{item}}{{idx}}
  </view>
</view>

js:
Page({

data:{
    navTab:["待付款","待發貨","待收貨","待評論
 
"],
    currentNavTab : 0
},
switchTab:function(e){
    this.setData({
      currentNavTab: e.target.dataset.idx
    })
  }

});

wxss:
.nav{display: flex;}
.nav-tab{float:left;text-align: center;color:#333;font-size:28rpx;height:80rpx;line-height:80rpx;flex:1;}
.nav-tab.active{border-bottom:2px solid #ef4f4f;color:#ef4f4f;}

1.wx:for控制屬性綁定一個數組wx:for="{{array}}"

使用 wx:for-item 可以指定數組當前元素的變量名，

使用 wx:for-index 可以指定數組當前下標的變量名

2.target 和 currentTarget

3.bindtap不會阻止事件冒泡 catchtap會阻止事件冒泡

4.列表渲染 使用<block></block>

註意： <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

小程序-template模板

一 、定義模板

1、新建一個template文件夾用來管理項目中所有的模板；
2、新建一個courseList.wxml文件來定義模板；
3、使用name屬性，作為模板的名字。然後在<template/>內定義代碼片段。 註意：
a.可以看到一個.wxml文件中可以定義多個模板，只需要通過name來區分；
b.模板中的數據都是展開之後的屬性。 二、使用模板 1、使用is引用 聲明需要引用的模板

<import src="../../templates/courseList.wxml"/>

2、將模板所需要的 data 傳入，一般我們都會使用列表渲染。

<block wx:for="{{courseList}}"> <template is="{{index%2 === 0 ? ‘courseLeft‘ : ‘courseRight‘}}" data="{{...item}}"></template> </block>

三、模板樣式

1、在新建模板的時候同時新建一個courseList.wxss 的文件，與CSS同樣的寫法控制樣式。
2、在需要使用模板的頁面 (父頁面).wxss文件中import進來；或者直接在app.wxss中引入，這樣只需要一次引入，其他文件就不用引入了。

@import "../template/courseList.wxss";

　　

　　

微信小程序-學習總結