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

1、事件绑定

        bindtap

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

 

2、样式导入

        @import

@import 'style/weui.wxss';

 

3、列表渲染

        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>

 

4、模块化

定义：

// common.js

function sayHello() {
    console.log("hello");
}

module.exports = {
   sayHello:sayHello
}

引用：

//index.js

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

function say() {
    common.sayHello();
}

 

5、8大组件

1.  视图容器
2.  基础内容
3.  表单组件
4.  操做反馈
5.  导航
6.  媒体组件
7.  地图
8.  画布

 

6、三个文件

1. app.js
2. app.json
3. app.wxss

 

7、获取App实例

var app = getApp();

 

8、模板

定义：

<template name="tplName">
   <view>模板内容：{{data}}</view>
</template>

导入：

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

引用：

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

 

9、数据绑定

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

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

定义：

Page({
  data:{
    title:"测试"
 }
})

使用：

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

显示：

测试

 

10、条件渲染

定义：

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

 

11、运算

定义：

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

 

12、跳转

定义：

<!-- 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>

 

十3、表单

定义：

//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事件')
  }
})