微信小程序-学习总结

Posted 2020-10-20 ss977

微信小程序尺寸单位

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";