小程序基础

一、基本语法

1、数据绑定

<view>{{num1}}</view>
<iamge src= "{{imgSrc}}" />
<view>{{num2>3?num2:num2+3}}</view>

page({
data:{
num:1,
num2:2,
str:'demo',
imgSrc:'http://www.demo.com/1.png'    
}
})

2、事件绑定

addCount(step){
    
this.setData({
count:this.data.count+step
})
    
}

<button type="primary" bindtap="add" data-step="{{1}}">+1</button>

3、条件渲染

<image src="./1.png" wx:if="{{flag===1}}" />
<image src="./1.png" wx:elif="{{flag===2}}" />
<image src="./1.png" wx:else />

4、列表渲染

Page({
  // 通过 data 属性，初始化页面中用到的数据
  data: {
    brands: [
      {
        name: '耐克',
        origin: '美国',
        category: ['男装', '女装', '鞋', '体育用品']
      },
      {
        name: 'SK-II',
        origin: '韩国',
        category: ['防晒霜','面膜', '洗护']
      }
    ]
  }
});

 
<view wx:for="{{brands}}" wx:for-index="k" wx:for-item="v">
  <view>
    <text>{{k+1}} </text>
    <text> {{v.name}} </text>
    <text> {{v.origin}}</text>
  </view>
  <view>
    <text wx:for="{{v.category}}">{{item}}</text>
  </view>
</view>

5、导航跳转

<navigator url="../logs/logs" open-type="redirect">日志</navigator>
<navigator open-type="navigateBack">返回</navigator>
<navigator open-type="reLaunch" url="/page/todo/todo">重启</navigator>

6、声明试导航传参

<navigator url="/pages/life/life?num=20">生命周期20</navigator>
<navigator url="/pages/life/life?num=5">生命周期5</navigator>

接收导航传来的的参数

7、下拉监听 上拉触底事件 

onPullDownRefresh:function(){
//业务逻辑
}

onPullDownRefresh:function(){
//业务逻辑
    wx.stopPullDownRefresh()
}

上拉触底

onReachBottom:function(){
    console.log('上拉触底')
}

8、页面生命周期

Page({
    //页面加载，一个页面只调用一次
    onLoad:function(optins){},
    //监听页面显示
    onShow:function(){},
    //监听页面初次渲染完成 一个页面只调用一次
    onReady:function(){},
    //监听页面隐藏
    onHide:function(){},
    //监听页面卸载，一个页面只调用一次
    onUnload:function(){}
})

9、父传子

//父组件
data:{
count:0
}

<view>
    <test count="{{count}}"></test>
</view>


//子组件
properties:{
count:{
	type:Number,
	default:1
}
}