[微信小程序] 3. 奇奇怪怪的经验（待更）

一  不同于浏览器的flex布局

效果：

实现：

<!--pages/mine/mine.wxml-->

<view class="flex">
    <view class="flexhead">top</view>
    <view class="flexitempre">
        <scroll-view scroll-y="true" class="flexitem" >
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
            <view>123</view>
        </scroll-view>
    </view>
</view>

/* pages/mine/mine.wxss */

.flex {
    display: flex;/*父元素声明flex布局*/
    flex-direction: column;
    height: 100vh;
}

.flexhead {
    width: 100%;
    min-height: 100px;
}

.flexitempre {
    flex: 1;/*高度无限扩展*/
    position: relative;/*父元素相对*/
}

.flexitem {
    position: absolute;/*子元素绝对，使得子元素定位从父元素开始,不会浮动*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FCCB1A;
}

二 关于小程序登录wx.login 与获取用户信息 的误区

https://developers.weixin.qq.com/community/develop/doc/c45683ebfa39ce8fe71def0631fad26b

 

三 父页面向子组件传参

父页面根据json数组循环动态生成组件

子组件实现跳转到子页面，并给子页面传参

 

效果是父页面store绑定子组件test，传json，子组件test点击跳转到子页面list，并给子页面传json，子页面list输出json的部分内容

如下图，点上面的显示第二个图，点下面的显示第三个图

 

 

第一步新建组件test  然后在test.json里声明，这是一个组件

 

第二步  在test.js声明数据跟跳转

这里涉及到一个wx.navigateTo子页面跳转+传参的知识点

// componments/test.js
Component({
    /**
     * 组件的属性列表 properties用于父亲向儿砸传数据
     */
    properties: {
        content:{
            type:JSON,
            value:{}
        }
    },
    /*组件的初始数据*/
    data: {
        content:{}
    },
    /*组件的方法列表*/
    methods: {
        gogo(){
            var that=this
            console.log("gogogo!")
            console.log(this.data.content)
            wx.navigateTo({
                url:'../daily/daily?content='+JSON.stringify(that.data.content),  
                //这里的daily是子页面，content是子页面的数据名
                success:function(){console.log("succ!")}       //成功后的回调；
            })
        }
    }
})

子页面daily接受数据：daily.js   这里是子页面str转json,然后赋值

data: {
    content:{}
},    

onLoad: function (options) {
    this.setData({
        content: JSON.parse(options.content)
    });
},

 

第三步是test.wxml  绑定gogo方法

这里涉及到按钮绑定事件的知识点

<!--componments/test.wxml-->
<view class="flex" bindtap="gogo">
  <view class="flexitem">
        <image class="img" src="../images/2.jpg" mode="cover"></image>
  </view>
  <view class="flexitem">这里是组件的内部节点</view>
  <slot></slot>
</view>

 

第四步  来到调用组件的父页面 ，在store.jsons声明组件的路由

 

第五步 父页面store.wxml如下：

通过<my-component>调用组件，属性content=“{{item}}”就是在这里用来给子组件properties的content传参的(content可自己命名)

这里根据store.js的dailylist  json数组进行循环，数组大小是3，那么就会显示3个组件

wx:for="" 循环的写法很常用，记笔记了 idx就是从0开始的下标

<view class="flex">
    <view class="flexhead">日记</view>
    <view class="flexitempre">
        <scroll-view scroll-y="true" class="flexitem" >
            <!-- 快乐for循环 -->
            <view wx:for="{{dailylist}}" wx:for-index="idx" wx:for-item="item" class="content">
                 <my-component content="{{item}}"></my-component>
                <!-- {{idx}}:{{item.content}} -->
            </view>
         </scroll-view>
    </view>
</view>

 

第六步  store.js

一般来说，wxml里的{{xxx}}用来访问.js里面data的数据xxx，比如{{dailylist}}

 data: {
    dailylist:[]
 },

dailylist的维护可以通过访问后端数据库来获取，详见四

 

四 施工中.....

 

 

五 小程序定时任务 显示动态时间

效果：

js实现：

var utils = require('../../utils/util.js')
Page({
    data: {
        time:""
    },
    onShow: function () {
        setInterval(()=>{ this.setData({
            time:utils.formatTime(new Date())
        })},1000)
    }
})    

 

 

六 flex布局做常见的格子布局

不同机型的效果：

实现思路：主框架view1是一个横着的flex,添加wrap换行

主框架里的子框架view2(格子)是一个竖着的flex包含图片跟文字

格子高度固定，格子宽度为33.33% （恒定二等分就调成50%）

如果格子宽度是固定px，就支持动态换行（每行个数取决于固定宽度px）

实现：

wxml:

<view class="flex">
     <view wx:for="{{gogo}}" wx:for-index="idx" wx:for-item="item" class="flexitem">
        <view class="flexitemson">
            <image src="{{item.img}}" class="img" mode="heightFix"></image>
            <view>{{item.text}}</view>
        </view>
    </view>            
</view>

wxss:

.flex {
    display: flex;/*父元素声明flex布局*/
    flex-direction: row;/*横着的flex*/
    height: 0vh;
    flex-wrap: wrap;/*换行*/
    justify-content: flex-start;/*向左靠*/
}

.flexitem { /*子框架*/
   /* margin: 1px 1px 1px 1px; */
   width:33.33%; /*三等分*/
   display: flex;
   flex-direction: column;
   height: 100px;
   justify-content: center;/*格子内居中*/
   text-align: center;
   box-shadow: 1px 1px 1px 1px black;/*不占宽度的边框*/
}
.flexitemson{

}

.img{
    width: 50%;
    height: 50px;
    /* margin: 20rpx; */
    border-radius: 50%;
}

js:

  data: {
      gogo:[
        {text:"1",img:"../../images/11.png"},
        {text:"2",img:"../../images/11.png"},
        {text:"3",img:"../../images/11.png"},
        {text:"4",img:"../../images/14.png"},
        {text:"5",img:"../../images/14.png"},
        {text:"6",img:"../../images/14.png"},
        {text:"7",img:"../../images/14.png"}
      ]
  },

 

 

七 图片轮播

效果（宽屏宽度也会自动伸展）：

实现：用微信自带的swiper

<view >
      <swiper 
        indicator-dots="true" autoplay="true" circular="true"
        interval="2000" duration="500" 
        previous-margin="0px" next-margin="0px" class="gogo">
        <block wx:for="{{img}}" wx:key="*this">
          <swiper-item >
                <image src="{{item}}" mode="aspectFill" class="img2"></image>
          </swiper-item>
        </block>
      </swiper>
</view>

.img2{
    width: 100%;
    height: 100%;
    /* margin: 20rpx; */
}
.gogo{
    height: 35vh;/*vh是屏幕占百分比 100就是全屏*/
}

 data: {
      img:["../../images/33.png","../../images/44.png","../../images/55.png"]
 },