微信小程序-学习总结

微信小程序尺寸单位
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";

  

  

 

 
 

微信小程序-学习总结

上一篇:cocos3.x 接入微信无法调用回调函数onResp的问题


下一篇:微信分享到朋友圈按钮 右上角提示