快速上手

简介

mangom-we小程序基础核心组件库，让业务开发更加关注业务并且快速实现。

环境准备

小程序基础库版本 1.9.90 以上（可升级小程序开发工具为最新）。

使用

获取源码

项目git地址：git.coding.net/prin/mangom…

配置

组件库引入将mangom-we-demo项目下的pages/mangom-we文件夹导入到项目的的pages目录下，与其他page同级。
样式导入

//app.wxss中导入样式
@import 'pages/mangom-we/mg.wxss';

使用一个banner组件

//Demo.json配置文件中引入组件，代码如下    
{
    "usingComponents": {"banner": "../mangom-we/banner/banner"}
}

/** Demo.xml结构中使用组件
*   ds是组件接受数据的统一定义属性，imgUrls是提供的数组数据
*  class-img-item是控制banner中子项的样式展示，无需自定义的话则使用默认样式
*/    

<banner ds="{{imgUrls}}" class-img-item="mg-banner-img-item"/>

小程序在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，为了解组件支持样式默认和自定义，采用所有组件默认样式配置在一个样式表中提供使用，且开放自定义组件样式属性功能。

Banner

轮播图组件

支持是否自动轮播配置
支持banner样式的设置
支持指示器的屏蔽
支持点击item的点击回调

效果图

使用

1.在.json配置文件中配置banner组件的引入。

{
	"navigationBarTitleText": "Banner组件",
	"usingComponents": {
		"banner": "../mangom-we/banner/banner"
	}
}

2.在.wxml结构文件中引入组件结构。

<!--pages/banner/banner.wxml-->
<banner 
ds="{{imgUrls}}" 
autoplay="{{false}}"
class-item="mg-banner-item" 
binditemPress="onBannerItemPress"/>

<view bindtap='onBannerItemPress'>
  <text>我是内容</text>
</view>

3.在.js行为文件中提供数据并处理点击子项回调。

// pages/banner/banner.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * Banner子项点击回调
   */
  onBannerItemPress: function (e) {
    let itemId = e.detail.dataSource
    console.log("点击子项返回的id值" + itemId)
  }
})

API

属性

参数	说明	类型	默认值
indicatorDots	是否显示面板指示点	Boolean	true
autoplay	是否自动切换	Boolean	true
ds	数据源	Array	无

方法

名称	描述	说明
itemPress	点击子项事件监听	参数返回为子项界面index

图片上传

图片上传组件

支持看大图功能
支持拍照或者相册中选择
支持多选

效果图

使用

1.在界面.json配置文件中引入组件使用。

{
  "component": true,
  "usingComponents": {
    "uploader": "../mangom-we/uploader/uploader"
  }
}

2.界面.wxml结构文件中引入组件。

<!--pages/uploader/uploader.wxml-->
<uploader 
  url="{{url}}" 
  hideHeader="{{false}}"
  binduploadSuccess="uploadSuccess" 
  binduploadFail="uploadFail"
/>

3.在.js文件中处理回调结果。图片上传后，会返回图片的相关信息，可以按照如下代码方式获取所有上传成功的photoUrl集合。

Page({
  data: {
    url: 'https://xxx.xxx.cn/upload/upavatar?spaceId=1&channel=ios&accessToken=XfIJVGMjPuMrwZpWTh',
    preUploadImgs: [], //待上传到服务端的图片链接
  },
  /**
   * 图片上传成功，组装待上传字符串
   */
  uploadSuccess: function (e) {
    let url = e.detail.dataSource.data
    let obj = JSON.parse(url)
    let photoUrl = obj.data.photoUrl
    this.data.preUploadImgs.push(photoUrl)

    console.log(this.data.preUploadImgs)

  }
});

API

属性

参数	说明	类型	默认值
url	上传图片的地址	String	无
hideHeader	是否隐藏头部	Boolean	true

方法

名称	描述	说明
uploadSuccess	图片上传成功回调	拿到成功回调信息进行处理
uploadFail	图片上传失败回调	做些失败处理

列表刷新数据

下拉刷新，上拉加载获取数据

效果图

下拉刷新（注意：下拉刷新样式默认是白色的，可以在app.json文件中设置主色来提升效果）

"backgroundColor": "#f0145a"

使用

1.在界面配置.json文件中开启下拉刷新，并引入加载更多组件。

{
  "usingComponents": {
    "load-more": "../mangom-we/load-more/load-more"
  },
  "window": {
    "enablePullDownRefresh": true
  }
}

2.在结构.wxml文件中引入加载更多组件结构

<!--上拉加载更多组件  -->
<view wx:if="{{showLoadMore}}">
  <load-more loadingComplete="{{loadingComplete}}" />
</view>

3.行为层.js处理（具体可参考demo实例）

1.导入mangom
import mangom from '../mangom-we/mangom.js'

2. 在data{}中加入页面的初始数据
  data: {
    showLoadMore: false, //显示加载更多
    loadingComplete: false,  //显示加载完成
  },

3.监听下拉刷新回调
//下拉加载
  onPullDownRefresh: function () {
    //清空加载更多结束  

    //开始刷新
    mangom.beginRefresh()

    //处理耗时任务
    获取最新信息耗时任务(()=>{
     //回调成功 successCallBack
      mangom.overRefresh()
    })
  },

3.监听加载更多
 onReachBottom: function () {
    mangom.beginLoadMore(this)
  },

4.处理加载更多完成
//加载更多数据和刷新数据应该能融于一起
  loadData: function () {
    let that = this
    this.data.loadNum++
    if (this.data.loadNum > 6) {
      return
    }

    //获取响应数据   需根据业务数据返回参考如下封装  放在本项目的公共行为处理工具类中
    setTimeout(() => {
      let rspWorlds = this.data.testRspWords
      if (this.data.loadNum === 6) {
        rspWorlds = [{ msg: '加载完毕的数据' }, { msg: '加载完毕的数据' }]
      } else {
        this.data.words = this.data.words.concat(rspWorlds);
      }
      console.log(rspWorlds && rspWorlds.length < PAGE_SIZE)
      that.setData({
        words: this.data.words,
        loadingComplete: this.data.loadNum!=0&& rspWorlds && rspWorlds.length < PAGE_SIZE,
        showLoadMore: false  //把"上拉加载"的变量设为false，隐藏  
      })
    }, 1000)
  }

小程序基础核心组件库处理Banner、图片上传、列表刷新