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

整理一些微信小程序常用的技术知识点，入门之用。

一、事件绑定

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大组件

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

六、三个文件

1. app.js
2. app.json
3. 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事件')
  }
})

想学习更多的小程序知识，可以查看官方说明文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html