1,需求知识(HTML,css,js)
小程序中的wxml,wxss与前端中的HTML,css基本相同,js完全相同。
2,文件结构
app.js文件是小程序入口.
app.wxss是全局的页面的布局。
app.json管理全局的配置,如页面位置,网络连接时间,页面的设置等等都在app.json中配置
pages文件下是所有页面以及页面相关的文件。(image是图片,index是页面文件)
index目录下同样有着(.js .json .wxml .wxss)等文件
3,事件交互能力
在组件中绑定一个事件处理函数。
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
如<view bindtap="clickMsg"></wiew>即引用一个page页面的clickMsg函数。
e表示该事件的所含有的参数如下
page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等
4, 基本语句
条件渲染<view wx:if="{{condition}}"></view>
elseif语句 <view wx:elseif="{{condition}}"></view>
else语句<view wx:else wx:for-index wx:for-item></view
列表渲染<view wx:for="{{array}}"></view>
wx:for-item是当前元素的名称
wx:for-index是当前元素的索引
模板的定义
<template name="myTemplate"><text>add {{add}}</text></template>
模板的使用
<template is="myTemplate" data="{{add:'add'}}"></template>