微信小程序常用知识-基础篇

2016-12-29


一、事件绑定


        bindtap


 <button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>

 <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>

 


二、样式导入


        @import


@import 'style/weui.wxss';

 


三、列表渲染


        wx:for


Page({

  items: [{

    message: 'foo',

  },{

    message: 'bar'

  }]

})

<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">

  {{index}}: {{item.message}}

</view>

        block wx:for


<block wx:for="{{[1, 2, 3]}}">

  <view> {{index}}: </view>

  <view> {{item}} </view>

</block>

 


四、模块化


定义:


// common.js


function sayHello() {

    console.log("hello");

}


module.exports = {

   sayHello:sayHello

}

引用:



//index.js


const common = require("../../utils/common.js");


function say() {

    common.sayHello();

}

 


五、8大组件


 视图容器

 基础内容

 表单组件

 操作反馈

 导航

 媒体组件

 地图

 画布

 


六、三个文件


app.js

app.json

app.wxss

 


七、获取App实例


var app = getApp();

 


八、模板


定义:


<template name="tplName">

   <view>模板内容:{{data}}</view>

</template>

导入:


<import src="../common/common.wxml" />

引用:


<template is="tplName" data="{{data}}" />

 


九、数据绑定


    WXML中的动态数据均来自Page的data对象


    动态数据绑定可以使用this.setData({name:_name});动态赋值


定义:


Page({

  data:{

    title:"测试"

 }

})

使用:


<view>{{title}}</view>

显示:


测试

 


十、条件渲染


定义:


Page({

   data:{

     has:true,

     age:18

   }

})

使用:


<view wx:if="{{has}}">已存在</view>


<view wx:if="{{age < 18}}">少年</view>

<view wx:elif="{{age = 18}}">青年</view>

<view wx:else>成年</view>


<block wx:if="{{has}}">

  <view>内容1</view>

  <view>内容2</view>

  <view>内容3</view>

  <view>内容4</view>

</block>

显示:


已存在


青年


内容1

内容2

内容3

内容4

 


十一、运算


定义:


Page({

  data:{

    show:true,

    a:1,

    b:2,

    c:3,

    name:"hello"

  }

})

使用: 


<view hidden="{{show ? true : false}}">显示</view>


<view>{{a+b}} + {{b+c}} + a</view>


<view>{{"say " + name}}</view>

显示:


// test.wxml


显示


3+5+a


say hello

 


十二、跳转


定义:


<!-- sample.wxml -->


<view>

  <navigator url="navigate?title=navigate">跳转到新页面</navigator>

  <navigator url="redirect?title=redirect" redirect>在当前页打开</navigator>

</view>

获取:


// redirect.js navigator.js


Page({

  onLoad: function(options) {

    this.setData({

      title: options.title

    })

  }

})

显示:


<!-- navigator.wxml -->


<view style="text-align:center"> {{title}} </view>

<view> 点击左上角返回回到之前页面 </view>

<!-- redirect.wxml -->


<view style="text-align:center"> {{title}} </view>

<view> 点击左上角返回回到上级页面 </view>

 


通过事件跳转:


// test.js


go: function() {

    wx.navigateTo({

      url: '../detail'

    })

},

页面事件绑定:


//detail.wxml


<view bindtap="go">

    <text>下一页</text>

</view>

 


十三、表单


定义:


//form.wxml


<form bindsubmit="formSubmit" bindreset="formReset">

  <view>

    <view>input</view>

    <input name="input" placeholder="please input here" />

  </view>

  <view>

    <button formType="submit">Submit</button>

    <button formType="reset">Reset</button>

  </view>

</form>

获取:


//test.js


Page({

  formSubmit: function(e) {

    console.log('form发生了submit事件,携带数据为:', e.detail.value)

    console.log('form发生了submit事件,携带数据input为:', e.detail.value.input)

  },

  formReset: function() {

    console.log('form发生了reset事件')

  }

})




0
收藏