小程序常用

组件：基础滑动，带小点

    <swipe indicator-dots="true"r>
        <swiper-item>content</swiper-item>
        <swiper-item>content</swiper-item>
        <swiper-item>content</swiper-item>
    </swiper>

2、页面跳转

 <view class="moto-container" bindtap='onTap'>

    <text class="moto">开启小程序之旅</text><!-- catchtap='onTextTap'阻止冒泡-->

  </view>

Page({

onTap:function(event){

//从一个页面跳转到另一个页面，最多跳5级 父级被隐藏执行onHide

// wx.navigateTo({

// url : "../posts/post"

// });

// 父级被关闭 执行onUnload

// 关闭当前页面，跳转到应用内的某个页面

wx.redirectTo({

url:"../posts/post"

});

// wx.navigateTo({

// url: 'String',//页面跳转地址

// wuccess:function(res){

// //success //跳转成功执行函数

// },

// fail:function(){

// //fail //跳转失败执行函数

// },

// complete:function(){

// //complete //跳转成功失败都执行函数

// }

// })

// console.log('onTap');

},

onTextTap:function(event){

console.log('onTextTap');

},

onUnload:function(){

// console.log('welcome page os load');

},

onHide:function(){

// console.log('welcome page os hide');

}

});

alt + shift + f      快速格式化代码样式

3标签

<view>

<text>

<image>

<block>

<templade>

4循环

<block wx:for="{{postsData}}" wx:for-item="item">

<view>

<text>{{item.title}}</text>

</view>

<view>

<image class="img2" src="{{item.imgSrc}}"></image>

</view>

5引入其它页面js

var postsData = require('../data/posts-data.js');

Page({

data:{

//小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A

//而这个动作A的执行，是在onLoad事件执行后发生的

},

onLoad: function() {

this.data.postList = postsData.postList

// this.setData({

// posts_key: postsData.postList

// });

}

})

6

引入css模板

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

<!--模板-->

<template name="postItem">

</template>

引入wxml文件

<import src="../post-item/post-item-template.wxml" />

<template is="postItem" data="{{item}}" />
 

//导入js

var postsData = require('../data/posts-data.js');