小程序模板网

微信小程序组件开发示例:上传图片组件

作者:yiyizym,原文地址 
本文介绍微信小程序 (自制)上传图片组件 的关键实现,喜欢通过代码学习的朋友,可以直接看源码

缘由 
最近在微信小程序上要实现上传图片的功能,因为多个页面都会用到这个功能,我试着就像网页开发一样,写一个能复用的组件。

上传图片的功能,微信小程序已经提供了相应的组件和API,结合 weui 样式,如果不考虑复用的话,很容易实现(官方 demo 就可以拿来用 ^_^ )。

如果要复用,可以利用模板,但是会面临微信小程序的很多限制。

限制 
举个例子,下面是一个模板文件 customer.wxml ( 注意模板文件里绑定了一个回调函数 sayHello )

 

				
  1. <template name="customer" data-customerid="{{ id }}" bindtap="sayHello">
  2. <text>{{ name }}</text>
  3. <text>{{ gender }}</text>
  4. <text>{{ age }}</text>
  5. <block wx:for="orders" wx:for-item="order">
  6. <view>{{order.id}}</view>
  7. <view>{{order.detail}}</view>
  8. </block>
  9. </template>

页面 A.wxml 引用了这个模板文件 :

 

				
  1. <import src="path/to/customer.wxml">
  2. <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 文件里先定义它:

 

				
  1. // A.js
  2. Page({
  3. data: {
  4. customer: {} // 可以先写成空 hash ,稍后更新,但 key 必须先存在
  5. },
  6. sayHello: function(e){
  7. // say hello
  8. // e.target.dataset.customerid
  9. }
  10. })

解决办法  因为这两个限制,必须找出一个办法让模板文件能动态改变引用它的文件(以下称为宿主)的作用域下的一些变量和方法,如下:

 

				
  1. // A.js
  2. require('path/to/customer.js');
  3.  
  4. Page({
  5. data: {
  6. customer: {}
  7. }
  8. onLoad: function(){
  9. // this 是宿主的执行上下文环境
  10. // this.data 可以访问 data
  11. // this.setData 可以更新 data
  12. // this.func = function() {} 可以往宿主增加新方法
  13. new Customer(this);
  14. }
  15. })
 

				
  1. // customer.js
  2. // 这里用到 es6 的类定义语法
  3.  
  4. class Customer {
  5. constructor(pageContext){
  6. this.page = pageContext
  7. this.page.sayHello = this.sayHello
  8. }
  9.  
  10. sayHello(e){
  11. // say hello
  12. // e.target.dataset.customerid
  13. }
  14. }
  15.  
  16. module.exports = Customer

本文关于微信小程序的组件开发关键点介绍完毕,源码 还展示了如何 设置组件的默认配置以及更改组件的回调方法。 



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23294.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询