小程序知识点

组件

• text文本
• view区域
• button按钮
• input表单
• image图片
• include包含
• 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>

模板语法

• 文本渲染
• 条件渲染
• 列表渲染
• 自定义模板
• import
• 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>

事件

• bindtap 触摸/点击
• bindchange 值发生变化
• bindconfrim 确认
• bindinput 输入变化

表单的双向

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

响应式更新

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

wx 的 api

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