Learn Mini APP

小程序背景

更好的体验
规范与管理

WXML相关语法

标签名 + 属性名

数据绑定

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

<view>
<block vx-for="">
</block>
<view>

id
class
style
hidden
data-*
bind*/catch*

<view style="width:500rpx;height:30px;background-color:{{colorValue}}">
Hello world
</view>

Page({
    data: {
        colorValue: 'red'
    }
})

WXS <==> JS

<wxs module="m1">
  module.exports = {
      message: 'hello, world'
  }
</wxs>

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

<wxs src="./m2.wxs" module="m2"></wxs>
<view> {{m2.message}}</view>

MINA框架

冷启动 -> 初次打开
热启动 -> 小程序仍处于活跃状态

小程序生命周期

onLaunch
onShow
onHide
onError

路由

初始化
打开新页面
页面重定向
页面返回
Tab切换
重加载

事件

组件

媒体组件
地图
开放能力
画布
视图容器
基础内容
表单组件
导航

view
scroll-view
swipper
movable-area & movable-view
cover-view

基础内容组件

icon
text
rich-text
progress => percent, color, sroke-width, active, activeColor, backgroundColor, show-info, active-modes

表单组件

button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea

API相关功能

参考设计文档