微信小程序上傳圖片組件及如何上傳多張圖片
微信小程序上傳圖片組件已經是當下最熱門的話題，下面將從多方面來談談微信小程序上傳圖片的內容。
最近在微信小程序上要實現上傳圖片的功能，因為多個頁面都會用到這個功能，我試著就像網頁開發一樣，寫一個能復用的組件。
上傳圖片的功能，微信小程序已經提供了相應的組件和API，結合 weui 樣式，如果不考慮復用的話，很容易實現(官方 demo 就可以拿來用 ^_^ )。
如果要復用，可以利用模板，但是會面臨微信小程序的很多限制。
限制
舉個例子，下面是一個模板文件 customer.wxml ( 注意模板文件里綁定了一個回調函數 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>
頁面 A.wxml 引用了這個模板文件 :
<import src="path/to/customer.wxml">
<template is="customer" data="{{...customer}}"></template>
如果要顯示模板里的 orders 部分，頁面 A 的 js 文件里 data 必須有一個名為 customer 的 key （可以通過 setData 設置 name/gender/age ，但不能通過 setData 設置 orders ，這樣會報錯。猜測是因為setData 在模板解析之后執行，解析模板時 name/gender/age/orders 都為 undefined ，name/gender/age 為 undefined 時不顯示就行，但 wx:for 會遍歷 orders ，遍歷時調用 hasOwnProperty 方法，這時就報錯了。），如果要調用模板里的回調函數 sayHello ，同樣必須在頁面 A 的 js 文件里先定義它：
// A.js
Page({
data: {
customer: {} // 可以先寫成空 hash ，稍后更新，但 key 必須先存在
},
sayHello: function(e){
// say hello
// e.target.dataset.customerid
}
})
解決辦法
因為這兩個限制，必須找出一個辦法讓模板文件能動態改變引用它的文件（以下稱為宿主）的作用域下的一些變量和方法，如下：
// A.js
require('path/to/customer.js');
Page({
data: {
customer: {}
}
onLoad: function(){
// this 是宿主的執行上下文環境
// this.data 可以訪問 data
// this.setData 可以更新 data
// this.func = function() {} 可以往宿主增加新方法
new Customer(this);
}
})
// customer.js
// 這里用到 es6 的類定義語法
class Customer {
constructor(pageContext){
this.page = pageContext
this.page.sayHello = this.sayHello
}
sayHello(e){
// say hello
// e.target.dataset.customerid
}
}
module.exports = Customer
-
微信小程序商城系統開發其實很簡單
微信小程序商城系統開發其實很簡單，只需要五步就可以完成，整個過程包括開發、上線、發布都可以輕松搞定...詳情
第二部分：如何開通一個小商店
- 關注官方公眾號 -
咨詢電話：4006-089-731