用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实用组件/插件 查看内容

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

天下雪 2017-2-13 00:25

作者:yiyizym,原文地址本文介绍微信小程序 (自制)上传图片组件 的关键实现,喜欢通过代码学习的朋友,可以直接看源码缘由最近在微信小程序上要实现上传图片的功能,因为多个页面都会用到这个功能,我试着就像网 ...

作者: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. Page({
  4. data: {
  5. customer: {}
  6. }
  7. onLoad: function(){
  8. // this 是宿主的执行上下文环境
  9. // this.data 可以访问 data
  10. // this.setData 可以更新 data
  11. // this.func = function() {} 可以往宿主增加新方法
  12. new Customer(this);
  13. }
  14. })
  1. // customer.js
  2. // 这里用到 es6 的类定义语法
  3. class Customer {
  4. constructor(pageContext){
  5. this.page = pageContext
  6. this.page.sayHello = this.sayHello
  7. }
  8. sayHello(e){
  9. // say hello
  10. // e.target.dataset.customerid
  11. }
  12. }
  13. module.exports = Customer

本文关于微信小程序的组件开发关键点介绍完毕,源码 还展示了如何 设置组件的默认配置以及更改组件的回调方法。 
github地址:https://github.com/yiyizym/wechat_mini_program_upload_img_module 
源码下载:wechat_mini_program_upload_img_module-master.zip

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏

相关阅读