微信小程序中日常 tip 笔记_微信小程序的tip-优快云博客

swiper轮播

在wxml文件中布局：

    <swiper indicator-dots='true' autoplay="true" interval="5000" circular='true'>
        <swiper-item><image src="/images/wx.png"></image></swiper-item>
        <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
        <swiper-item><image src="/images/vr.png"></image></swiper-item>
    </swiper>

在wess中设置样式

swiper,swiper image{
    width:100%;
    height:600rpx
}

注：<swiper-item> 仅可放置在组件中，宽高自动设置为100%。只是从单一个标识容器。所以设置样式要设置到<swiper>中。

data渲染

如下代码，在onload钩子函数中，可以直接对this.data做变量赋值操作，而可以不用 this.setData（） 函数来更新数据，同样可以最后将 this.data中的数据渲染到页面上，原因是页面渲染操作在 onload 之后执行。但是，在 onload 中异步调用中更新数据还是只能使用 this.setData（），否则可能来不及渲染不到页面上。

Page({
  data:{
    
  }, 
  onLoad:function(){
    // 生命周期函数--监听页面加载1
    
    this.data.postList =postsData.postList;
 //   this.setData({
//      posts_key:postsData.postList
//    });
  }  
})

Page标签

<Page> 任何页面的跟标签，所以可以通过以下代码来设置全屏背景颜色：

page{
    height:100%;
    background:#b3d4db;
}

引用js和引用wxss

1、引用js：

var postsData=require('../../data/posts-data.js')  //貌似只能用相对路径

posts-data.js文件内容如下，使用 module.exports 到处模块：

var local_database=[
    {
        date: 'sep 18 2016',
        title: '正是虾肥蟹壮时',
        imgSrc: '/images/post/crab.png',
        avatar: '/images/avatar/1.png',
        content: '本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像',
        reading: '112',
        collection: '96',
        headImgSrc:'/images/post/crab.png',
        author:'李白',
        dataTime:'24time',
        detail:'并可以在手机上体验该小程序的实际效果。',
        postId:1
    },
    {
        //按住alt + shift + f可以格式化代码
        date: 'sep 19 2016',
        title: '正是虾肥蟹壮时',
        imgSrc: '/images/post/bl.png',
        avatar: '/images/avatar/2.png',
        content: '本文档将带你一步步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语以及当前用户的微信头像，点击头像',
        reading: '112',
        collection: '96',
        headImgSrc:'/images/post/bl.png',
        author:'李白2',
        dataTime:'24time',
        detail:'并可以在手机上体验该小程序的实际效果。',
        postId:2
    },
	 ...
]

module.exports={  //导出模块
    postList : local_database
}

2、引用wxss

@import 'post-item/post-item-template.wxss';

template 模板

template 主要用来提高代码的复用行，没有具体的含义。例如新建一个item-template.wxml文件

<template name='postItem'>
        <view class='post-container'>
            <view class='post-author-date'>
                <image wx='{{img_condition}}' class='post-author' src="{{avatar}}"></image>
                <text class='post-date'>{{date}}{{idx}}</text>
            </view>
            <text class='post-title'>{{title}}</text>
            <image class='post-image' src="{{imgSrc}}"></image>
            <text class='post-content'>{{content}}</text>
            <view class='post-like'>
                <image class='post-like-image' src="../../images/icon/chat.png"></image>
                <text class='post-like-font'>{{coolection}}</text>
                <image class='post-like-image' src="../../images/icon/view.png"></image>
                <text class='post-like-font'>{{reading}}</text>
            </view> 
        </view>
</template>

使用的时候，要先导入，再使用，如果模板中有对应的样式文件，也要在引用模块的wxss文件中导入模板的样式文件。

<import src='item/item-template.wxml'/>  <!---这里使用的是相对路径->
<view class='body'>
    <swiper indicator-dots='true' autoplay="true" interval="5000">
        <swiper-item><image src="/images/wx.png"></image></swiper-item>
        <swiper-item><image src="/images/iqiyi.png"></image></swiper-item>
        <swiper-item><image src="/images/vr.png"></image></swiper-item>
    </swiper>
    <block wx:for="{{posts_key}}" wx:for-item="item">       
        <template is='postItem' data='{{...item}}'/> <!--is 的值是模板中name属性值  ...展开对象 -->
    </block>
</view>

相应的要在wxss文件中导入模板的样式文件：

@import 'item/item-template.wxss';

swiper{
    width:100%;
    height:600rpx
}
swiper image{
    width:100%;
    height:600rpx
}

图片四周添加阴影

	border: 3rpx solid #eee;
	border-radius: 3rpx;
    box-shadow: -3rpx 0px 5px #eee,  /*左边阴影*/ 
                0px -3rpx 5px #eee,  /*上边阴影*/ 
                3rpx 0px 5px #eee,   /*右边阴影*/ 
                0px 3rpx 5px #eee;   /*下边阴影*/

text一行显示，多余部分使用省略号

    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;