小程序介绍

一、小程序事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

1、通过行为进行人机交互方式

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

当我们点击，然后会返回e这个对象

2、事件分类

事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

二、小程序的模块化

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html

抽离通用方法作为通用函数

构建utils-common类

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//将上面2个接口暴露出来
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

三、数据绑定（视图层）

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

JQuery dom操作 $选择器

微信小程序是通过数据绑定 vue/react

*.js中通过data对象与*.wxml的元素绑定{{data}}   -> Mustache表达式语法

<view> {{ message }} </view>

四、列表渲染（视图层）

for循环

<view wx:for>

<block wx:for>

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

 

五、wx:key列表高级特性（视图层）

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

六、条件渲染（视图层）

七、通用的模板

八、WXS模块

九、模块调用模块

十、模板外部引用