小程序基础详解

一、小程序的基本组件

小程序的基本组件：

1. text 文本 类似于span标签
2. view区域 类似于div标签
3. button按钮
4. input表单
5. image图片 类似于img标签
6. include包含
7. import导入

二、模板语法

1.文本渲染

<view>{{msg}}</view>

2.条件渲染

<view wx:if="{{score>90}}">A</view>
<view wx:elif="{{score>80}}">B</view>
<view wx:elif="{{score>70}}">C</view>
<view wx:elif="{{score>60}}">D</view>
<view wx:else>E</view>

3.列表渲染

data:{
list:["吃饭","睡觉","打豆豆"],
}

<view wx:for="{{list}}" wx:key="item">{{index}}-{{item}}</view>

4.自定义列表渲染

data:{
list:["吃饭","睡觉","打豆豆"],
}
<!-- 定义item与index的名称-->
<!-- wx:for-item="myitem"  把item改为myitem-->
<!-- wx:for-index="myind" 把index改为myindex-->
<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myind" wx:key="myind">{{myind+1}}-{{myitem}}</view>

5.import导入

1.先定义模板

创建一个template文件夹,在template创建一个text.wxml文件

2.text.wxml文件

<template name="user">
<view>name:{{name}}</view>
<view>age:{{age}}</view>
</template>

3.导入text.wxml文件

<import src="xxx/text.wxml">

4.组件传参

<template is="user" data={{...userinfo}}>

6.include拷贝非template内容

<include src="/template/text"></include>

三、事件

bindtap 触摸/点击

wx的api 微信的内置方法

wx.showToast({title:",icon:})
弹出提示框

<button type="primary" bindtap="tabHd">按钮</button>
//添加事件
 tabHd(){
    wx.showToast({
      title: '你敢点我',
    })
  },

bindchange 值发生变化

bindcofrim 确认

bindconfirm="addItem"
 
addItem(){
var list = this.data.list;
list.unshift({
  done:false,
  title:this.data.temp
})

bindinput 输入变化

数据和视图都会更新

this.setData({temp:""})

实现表单的双向绑定

<input type="text" 
value="{{msg}}"
bindinput="changeMsg"
style="border:1rpx solid #000;padding: 20rpx 0;margin: 20rpx 0;"/>
//value值绑定
data:{
msg:"你好小程序",
}
//事件绑定
 changeMsg(e){
    console.log(e)
    this.setData({msg:e.detail.value})
  },
//获取事件对应表单的值
//e.detail.value

四、事件传参

<text class="title">事件-传参</text>
<!-- type  按钮显示类型 -->
<!-- size  按钮显示大小 -->
<button type="primary" size="mini" bindtap="showMsg" data-msg="一二三四五">按钮1</button>
<button type="warn" size="mini" bindtap="showMsg" data-msg="六七八九十">按钮2</button>
//方法
 showMsg(e){
    // console.log(e)
    wx.showToast({
      title: e.target.dataset.msg,
    })
  },

五、本地存储

在更新数据后(删除，添加)

wx.setStorageSync('list', this.data.list)

在生命周期函数–监听页面加载

  onLoad(options) {
 // 页面加载获取本地存储数据
let list = wx.getStorageSync('list')||["学习小程序"]
this.setData({list})
  },