微信小程序，引用vant-weapp库，上传组件uploader，支持多选

wxml部分

<van-uploader file-list="{{ picture_list }}" preview-full-image="{{false}}" max-size="2048000" max-count="9" multiple="{{true}}" bind:after-read="afterRead" bind:delete="deleteImg" />

js部分

afterRead:function(event) {

const { file } = event.detail

    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

    var obj={}

obj.path=file

    this.uploadimg(obj)

},

uploadimg:function(data) {

wx.showLoading({

title:'上传中...',

        mask:true,

    })

var that =this,

        i = data.i ? data.i :0,

        success = data.success ? data.success :0,

        fail = data.fail ? data.fail :0

    let userInfo=wx.getStorageSync('userInfo')

    let peopleId=userInfo.peopleId

    var picture_list = that.data.picture_list

    wx.uploadFile({

url: baseUrl +'impl/uploadImg',

        filePath: data.path[i].path,

        name:'file',

        formData: {

'type':1,

            'peopleId':peopleId,

        },

        success: (res) =>{

wx.hideLoading()

            success++

            let obj =  JSON.parse(res.data).data

            if(obj.hasOwnProperty('url')){

picture_list.push({

url:obj.url,

                    id:obj.id

                })

                that.setData({

picture_list

})

}

},

        fail: (err) =>{

wx.hideLoading()

            wx.showToast({

title:'上传失败!',

                icon:'none'

            })

fail++

        },

        complete: () =>{

i++

            if (i == data.path.length) {//当图片传完时，停止调用

            }else {//若图片还没有传完，则继续调用函数

                data.i = i

                data.success = success

                data.fail = fail

                that.uploadimg(data)//递归，回调自己

            }

}

})

},

deleteImg(e) {

let index=e.detail.index

    console.log(index)

    let {picture_list}=this.data

    let that=this

    wx.showModal({

content:'确定删除？',

        success: (res) =>{

if (res.confirm) {

picture_list.splice(index,1)

                that.setData({

picture_list

                })

console.log(that.data.picture_list)

            }else if (res.cancel) {

console.log('用户点击取消')

}

},

    })

},

1、小程序不是运行在浏览器中，所以没有DOM和BOM对象

2、小程序的JS有一些额外的成员

App方法 用于定义应用程序实例对象

Page方法 用于定义页面对象

getApp方法 用于获取全局应用程序对象

getCurrentPages方法 用来获取当前页面的调用栈（数组 最后一个就是当前页

wx对象 用来提供核心api的 官方链接： https://developers.weixin.qq.com/miniprogram/dev/api/

3、小程序JS是支持CommonJS规范的

eg:

./utils/foo.js文件

function say(msg){

    console.log("hello"+msg)

}

module.exports = {

    say:say

}

app.js文件

const foo = require("./utils/foo.js")

foo.say("hi")

js负责页面与用户的交互，动态修改页面的内容。使用js脚本来处理用户的 *** 作。

*** 作解释: 点击button按钮(点我),修改界面的msg显示为"BeiJing佩奇"

绑定事件: bindtap定义了"点击事件"

j s 函数: Page({定义函数对应bindtap})

例如开头示例一样，组件绑定事件，js编写事件函数。

这里大概介绍下log打印的内容

☞ 小生不才，附上 博客地址☜

事件分为冒泡事件和非冒泡事件

1.冒泡事件:当一个组件被触发后，该事件以此向父节点传递。

2.非冒泡事件:当一个组件触发后，该事件不会向父节点传递。

解释：当点击子节点时，会依次触发"bind事件2，bind事件1"

解释：当点击子节点时，只触发"bind事件2"，而没有触发"bind事件1"

自基础班1.5.0起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前。事件到达节点的顺序与冒泡相反。捕获事件采用的关键字为capture-bind、capture-catch，当然catch还是中断，取消冒泡阶段。

1. 示例1，执行顺序为hand2,hand4,hand3,hand1

2. 示例2，加入capture-catch捕获事件，只执行hand2

---