小程序入门知识

一 、语法

1. 文本渲染
2. List item
3. 条件渲染
4. 列表渲染
5. 自定义模板
6. import
7. include

<view class="title">多重条件</view>
<view wx:if="{{score>90}}">苹果电脑</view>
<view wx:elif="{{score>80}}">小米笔记本</view>
<view wx:elif="{{score>70}}">苹果2斤</view>
<view wx:else>打一顿</view>

<view class="title">文本渲染</view>
<view>{{msg}}</view>

<view class="title">条件渲染</view>
<view wx:if="{{isLog}}">欢迎回来</view>
<view wx:else>请先登录</view>

<view class="title">遍历</view>
<view wx:for="{{list}}" wx:key="item">{{index+1}}--{{item}}</view>

<view class="title">自定义遍历</view>
<view>定义item与index的名称</view>
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">
{{myind+1}}--{{myitem}}</view>

<view class="title">模板</view>
<import src="/template/test" />
<template is="user" data="{{...userInfo}}"></template>
<template is="user" data="{{...userInfo2}}"></template>
<view class="title">include导入非template</view>
<!-- include相当于拷贝，就是不拷贝template的内容 -->
<include src="/template/test"></include>
<view>import只能导入模板template，include只能拷贝非template的内容</view>

<view class="title">事件</view>
<button size="mini" type="primary" bindtap="tapHd">按钮</button>
<view class="title">事件-传参</view>
<button type="primary" bindtap="showMsg" data-msg="白毛浮绿水">按钮1</button>
<button type="warn" bindtap="showMsg" data-msg="红掌拨清波">按钮2</button>

<view class="title">表单的双向绑定</view>
<input value="{{msg}}" bindinput="changeMsg" type="text" 
style="border: 1rpx solid #ccc; margin: 15rpx; padding: 15rpx;" />
<view>{{msg}}</view>

<view class="title">todolist</view>

二 、组件

1 、text文件组件(类似HTML的span)
2 、view区域（类似HTMl的div）
3 、button按钮
4 、input文本框
5 、img图片
6 、包含include
7 、导入import

<view class="title">我喜欢小程序</view>
<view>最好的猎人，往往以猎物的形式出现</view>
<text>你好</text><text>喝杯白酒</text><text>交个朋友</text>
<view>{{msg}}</view>
<input placeholder="请输入"></input>
<image class="img" src="/images/pic.jpeg" alt=""/>
<!-- include相当于拷贝，就是不拷贝template的内容 -->
<include src="/template/test"></include>
<view>import只能导入模板template，include只能拷贝非template的内容</view>

三 、事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset,
  touches。

类型	触发条件
touchdstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸动作结束
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画开始时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

四 、双向绑定

// inputHd实现双向绑定
 inputHd(e){
   // 更新temp
   console.log(e)
   this.setData({temp:e.detail.value})
 },

五 、响应式更新

this.setData({temp:’ '})
数据与视图都会更新

六 、wx的api

微信内置的方法
wx.showToast({title:" ",icon:}) 弹出提示
wx.showLoading()