微信小程序經常使用知識-基礎篇

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