微信小程序上傳圖片組件及如何上傳多張圖片
微信小程序上傳圖片組件已經(jīng)是當(dāng)下最熱門(mén)的話題,下面將從多方面來(lái)談?wù)勎⑿判〕绦蛏蟼鲌D片的內(nèi)容。
最近在微信小程序上要實(shí)現(xiàn)上傳圖片的功能,因?yàn)槎鄠€(gè)頁(yè)面都會(huì)用到這個(gè)功能,我試著就像網(wǎng)頁(yè)開(kāi)發(fā)一樣,寫(xiě)一個(gè)能復(fù)用的組件。
上傳圖片的功能,微信小程序已經(jīng)提供了相應(yīng)的組件和API,結(jié)合 weui 樣式,如果不考慮復(fù)用的話,很容易實(shí)現(xiàn)(官方 demo 就可以拿來(lái)用 ^_^ )。
如果要復(fù)用,可以利用模板,但是會(huì)面臨微信小程序的很多限制。
限制
舉個(gè)例子,下面是一個(gè)模板文件 customer.wxml ( 注意模板文件里綁定了一個(gè)回調(diào)函數(shù) sayHello )
<template name="customer" data-customerid="{{ id }}" bindtap="sayHello">
<text>{{ name }}</text>
<text>{{ gender }}</text>
<text>{{ age }}</text>
<block wx:for="orders" wx:for-item="order">
<view>{{order.id}}</view>
<view>{{order.detail}}</view>
</block>
</template>
頁(yè)面 A.wxml 引用了這個(gè)模板文件 :
<import src="path/to/customer.wxml">
<template is="customer" data="{{...customer}}"></template>
如果要顯示模板里的 orders 部分,頁(yè)面 A 的 js 文件里 data 必須有一個(gè)名為 customer 的 key (可以通過(guò) setData 設(shè)置 name/gender/age ,但不能通過(guò) setData 設(shè)置 orders ,這樣會(huì)報(bào)錯(cuò)。猜測(cè)是因?yàn)閟etData 在模板解析之后執(zhí)行,解析模板時(shí) name/gender/age/orders 都為 undefined ,name/gender/age 為 undefined 時(shí)不顯示就行,但 wx:for 會(huì)遍歷 orders ,遍歷時(shí)調(diào)用 hasOwnProperty 方法,這時(shí)就報(bào)錯(cuò)了。),如果要調(diào)用模板里的回調(diào)函數(shù) sayHello ,同樣必須在頁(yè)面 A 的 js 文件里先定義它:
// A.js
Page({
data: {
customer: {} // 可以先寫(xiě)成空 hash ,稍后更新,但 key 必須先存在
},
sayHello: function(e){
// say hello
// e.target.dataset.customerid
}
})
解決辦法
因?yàn)檫@兩個(gè)限制,必須找出一個(gè)辦法讓模板文件能動(dòng)態(tài)改變引用它的文件(以下稱(chēng)為宿主)的作用域下的一些變量和方法,如下:
// A.js
require('path/to/customer.js');
Page({
data: {
customer: {}
}
onLoad: function(){
// this 是宿主的執(zhí)行上下文環(huán)境
// this.data 可以訪問(wèn) data
// this.setData 可以更新 data
// this.func = function() {} 可以往宿主增加新方法
new Customer(this);
}
})
// customer.js
// 這里用到 es6 的類(lèi)定義語(yǔ)法
class Customer {
constructor(pageContext){
this.page = pageContext
this.page.sayHello = this.sayHello
}
sayHello(e){
// say hello
// e.target.dataset.customerid
}
}
module.exports = Customer
-
微信小程序商城系統(tǒng)開(kāi)發(fā)其實(shí)很簡(jiǎn)單
微信小程序商城系統(tǒng)開(kāi)發(fā)其實(shí)很簡(jiǎn)單,只需要五步就可以完成,整個(gè)過(guò)程包括開(kāi)發(fā)、上線、發(fā)布都可以輕松搞定...詳情
第二部分:如何開(kāi)通一個(gè)小商店