微信小程序基础讲解，云服务介绍，分包及使用方法

一，组件及基础属性介绍

1.属性介绍

属性 含义
text 文本
view 区域
button 按钮
input 表单
image 图片
include 包含
import 导入
web-view 导入html页面

2，容器组件

属性 含义
view 视图区域
swiper，swiper-item 、 幻灯片、轮播图
scroll-view 滚动视图
3.基础容器
1.text
介绍：user-select 可选文字
2.rich-text 富文本
3.icon 图标

4.表单

1.button
介绍: type，size，自定义
2.input输入
3.textarea文本区域
4.switch
介绍：type —
checkbox，
checkbox

5.navigator 导航

1.open-type
介绍：
redirect，
switch-tap，
navigate，
relunch
2.url

6.媒体

1.image
介绍：
src
mode模式
lazy-load懒加载
2.video 视频

7.其他

1.map 地图
2.web-view web视图

二，模板语法介绍
1.文本渲染
{ {}}

2.条件渲染
wx:if=“{ {}}”
wx:elif=“{ {}}”
wx:else

3.列表渲染
wx:for=“{ {list}}” ，{ {item}} ， { {index}}
wx:key=“title”

4.自定义列表
wx:for=“{ {list}}”
wx:for-item=“myitem”
wx:for-index=“ind”

{ {myitem}}
{ {ind}}

5.import
1.定义模板 test.wxml

<temp name="user">
<view>用户名：{
   {
   name}}</view>

<import src="xxx/test.wxml">
<template is="use" data={
   {
   ...userInfo}}>

6.include

拷贝src中非template的内容

三，事件
属性 含义
bindtap 触摸/点击
bindchange 值发生变化
bindconfrim 确认
bindinput 输入变化

四，表单的双向

<input value="{
   {temp}}" bindinput="inputHd">
this.setData({
   temp:e.detail.value})
获取事件对应表单的值
e.detail.value

五，事件的传参数

<button bindtap="showMsg" data-msg=“你好，靓”>
showMsg(e){
   
     e.target.dataset.msg
}

六，响应式更新
this.setData({temp:‘’})
数据与视图都会更新

</