微信小程序开发学习—day1

今天的主要内容是一些基本常识外加View组件和flwxbox弹性布局盒以及事件交互

page函数里面的data属性，用setdata进行刷新界面数据
要求所有页面必须放在pages数组里
app.js：一个微信小程序必须实例化一个APP对象
app.json:这个文件不可以写任何注释
View组件和flwxbox弹性布局盒
flexbox
flex-direction：row和colum
justify-content：弹性项目在主轴main-axis线上的对齐方式
flex-start：靠在最左边
flex-end：最右边
center：中间
space-between：均匀分布
space-around：均匀分布两侧放空间
align-Items：弹性项目align-items在伸缩容器中的布局情况；定义在伸缩容器中
flex-start:最上面
flex-end:放在最下面
center:当中
stretch
代码实现

/**index.wxss**/
.page{
  flex : 1;
  background-color: #ffff00;
  font-size: 16px;
}
.page-section{
  padding: 10px;
  background-color: #fffff0;
  margin: 10px;
  font-size: 16px;
}
.flex-item{
  width: 100px;
  height: 100px;
}
.bc_green{
  background-color: #00ff00;
}

.bc_red{
  background-color: #ff0000;
}

.bc_blue{
  background-color: #0000ff;
}

<!--index.wxml-->
<view class="page">
  <view class="page-section">
    <text>View Demo</text>
  </view>

   <view class="page-section">
      <view>flex-direction : row</view>
      <view style="display : flex;flex-direction:row">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>

    <view class="page-section">
      <view>flex-direction : column</view>
      <view style="display : flex;flex-direction:column">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>
<!-- justify-content -->
   <view class="page-section">
      <view>justify-content : flex-start</view>
      <view style="display : flex;flex-direction:row; justify-content: flex-start;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>

    <view class="page-section">
      <view>justify-content : flex-end</view>
      <view style="display : flex;flex-direction:row; justify-content: flex-end;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>
    <view class="page-section">
      <view>justify-content : center</view>
      <view style="display : flex;flex-direction:row; justify-content: center;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>
    <view class="page-section">
      <view>justify-content : space-between</view>
      <view style="display : flex;flex-direction:row; justify-content: space-between;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>

    <view class="page-section">
      <view>justify-content : space-around</view>
      <view style="display : flex;flex-direction:row; justify-content: space-around;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>

   

   <view class="page-section">
      <view>align-items : flex-end</view>
      <view style="display : flex; height:200px;flex-direction:row; justify-content: space-around;align-items:flex-end;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>

     <view class="page-section">
      <view>align-items : flex-start</view>
      <view style="display : flex; height:200px;flex-direction:row; justify-content: space-around;          align-items:flex-start;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>

     <view class="page-section">
      <view>align-items : center</view>
      <view style="display : flex; height:200px;flex-direction:row; justify-content: space-around;          align-items:center;">
        <view class="flex-item bc_green"></view>
        <view  class="flex-item bc_red"></view>
        <view  class="flex-item bc_blue"></view>
      </view>
   </view>
</view>

效果图自己体会，这里就不放了

事件交互

事件：视图层到逻辑层的通信方式、可以把用户的行为反映到逻辑层进行处理、可以绑定在组件上，当触发时就会实现对应的逻辑函数

<!--index.wxml-->
<view class="container">
    <view>{{clickMessage}}</view>
    <view id="view0" class="view-item"  bindlongtap="clickMe">dainji view0</view>
    <view id="view1" class="view-item"  bindlongtap="clickMe">dainji view1</view>
</view>

/**index.wxss**/
.view-item{
  padding: 10px;
  background-color: limegreen;
  border-radius: 5px;
  margin: 5px;
}

//index.js
//获取应用实例
var count = 0;
var param = {
  data:{
    clickMessage :'显示点击的内容'    
  },
  clickMe :function(e){
    console.log(e);
    count++;
    


    //如何区分到底是view0点击还是view1点击
    //通过id就可以区分到底是view0被点击还是view1被点击
    id = e.currentTarget.id;

    //把view0上点击的显示出来
    param.data.clickMessage = '显示点击内容' + id+ '点击次数' + count;
    //setData重新刷新界面数据
    this.setData(param.data);
  }
};
Page(param);

代码如上，可自行复制跑一跑，初期比较简单有一定编程基础的均可看懂。
以上内容来自网络****。