医美小程序第一版

.gitignore

@@ -0,0 +1,16 @@
+# Windows
+[Dd]esktop.ini
+Thumbs.db
+$RECYCLE.BIN/
+
+# macOS
+.DS_Store
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.idea
+
+# Node.js
+miniprogram_npm
+node_modules/

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

README.md

@@ -0,0 +1,20 @@
+一：项目结构
+   "pages/index/index",   首页
+    "pages/logs/logs",  登录
+    "pages/my/index”,我的
+    "pages/my/vip", 我的vip
+    "pages/index/details", 预约项目详情
+    "pages/index/select_shop”,选择其他店铺
+    "pages/my/disclaimer”,免责声明
+    "pages/indent/unpaid”,订单详情（复用）
+    "pages/indent/list”,订单列表
+    "pages/my/buy_vip”,已购会员卡
+    "pages/my/coupon”我的优惠卷
+二：项目架构
+	使用npm的 Vant Weapp进行辅助画图，
+	使用地址 	https://youzan.github.io/vant-weapp/#/quickstart
+	目前使用了van-grid ，van-cell。，van-popup。，van-grid
+三：备注
+  原型设计稿
+  https://v5.modao.cc/app/073ae6dcb639121eb7dc8d1c4af35975f8681a1c?simulator_type=device&sticky
+  ui给的是本地文件，需要找相关人员

app.js

@@ -0,0 +1,253 @@
+// app.js
+const ald = require('./utils/ald-stat.js')
+import { post, get, login } from './utils/http'
+App({
+  globalData: {
+    navBarData: {
+      navBarHeight: 0, // 导航栏高度
+      menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
+      menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
+      menuHeight: 0 // 胶囊高度（自定义内容可与胶囊高度保证一致）
+    },
+    userInfo: null, 
+    couponPopup: false,
+    coupon: null,
+    systemInfo: {},
+    sceneData: {},
+    memberRules: '', // 会员守则
+    storeData: {},
+    showGoods:false, //点击商品或者按钮跳转到下单页面是否直接显示美妆产品
+    toViewIndex:'', //记录首页跳转到项目页面的滚动下标
+    shareUserID:'',//分享人ID
+    isH5:false, //是否是h5商城进来的
+    isSkinPlan:false, //测肤推荐方案标识
+    isTestSkin:false,//肤质下单标识
+    isCardBag:false, //卡包更多次卡跳转
+  },
+  invite_id:"null",//邀请人id
+  //记录登录状态相关的配置
+  loginConfig: {
+    code: '',
+    codeTime: ''
+  },
+  address:{},
+  onLaunch(options) {
+    // 肤质 测肤方案埋点
+    let RECORD_WHITE = ['pages/projectDetail/projectDetail','pages/reserveCar/reserveCar','pages/orderBy/orderBy']
+    wx.onAppRoute((route) => {
+    if(this.globalData.isSkinPlan||this.globalData.isTestSkin){
+        if(!RECORD_WHITE.includes(route.path)){
+          this.globalData.isSkinPlan = false
+          this.globalData.isTestSkin = false
+        }
+      }
+      });
+    let WHITE_LIST=['pages/login/login','pages/home/home']
+    if(!WHITE_LIST.includes(options.path)){
+      if(wx.getStorageSync('userInfo')==''){
+        wx.navigateTo({
+          url: '/pages/login/login',
+        })
+      }
+    }
+    let that = this
+    this.getPermission(that); //获取当前定位  
+    that.setNavBarInfo()
+    // 查询是否首次购买
+    if (wx.getStorageSync('token')) {
+      get('api/order/check_first', {}, (res) => {
+        if (res.data.order_status == 1) {
+          wx.setStorageSync('agree', true)
+        }
+      })
+    }
+    that.initData()
+    // this.getPermission()
+  },
+  onShow(opts) {
+    this.globalData.sceneData = {
+      path: opts.path,
+      query: opts.query
+    }
+    if (!this.globalData.userInfo) {
+      this.initData()
+    }
+    if (opts.path == 'pages/deviceLogin/deviceLogin') {
+      return
+    }
+    // if (!wx.getStorageSync('token') || !wx.getStorageSync('userInfo')) {
+    //   login(opts)
+    // }
+  },
+
+  /**
+   * 初始化数据
+   */
+  initData() {
+    let that = this
+    // 获取用户信息
+    if (wx.getStorageSync('token')) {
+      get('api/user', {}, (res) => {
+        if (res.data) {
+          that.globalData.userInfo = res.data
+          wx.setStorageSync('userInfo', res.data)
+        }
+      })
+    }
+
+    return
+    // 获取店铺信息
+    let storeId = wx.getStorageSync('store_id')
+    if (storeId) {
+      get(
+        'api/store/info',
+        {
+          store_id: storeId
+        },
+        (res) => {
+          this.globalData.storeData = res.data
+        }
+      )
+    }
+  },
+
+  /**
+   * @description 设置导航栏信息
+   */
+  setNavBarInfo() {
+    // 获取系统信息
+    const systemInfo = wx.getSystemInfoSync()
+    this.globalData.systemInfo = systemInfo
+    // 胶囊按钮位置信息
+    const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
+    this.systemInfo = systemInfo
+    // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
+    let navBarData = {
+      navBarHeight:
+        (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 +
+        menuButtonInfo.height +
+        systemInfo.statusBarHeight,
+      menuBotton: menuButtonInfo.top - systemInfo.statusBarHeight,
+      menuRight: systemInfo.screenWidth - menuButtonInfo.right,
+      menuHeight: menuButtonInfo.height
+    }
+    this.globalData.navBarData = navBarData
+  },
+    /**
+   * 获取当前定位
+   * @param {*} obj 
+   */
+  getPermission: function (obj) {
+    let that = this
+    wx.getLocation({
+      success: function (res) {
+        that.getStore()
+        that.globalData.address = res
+        // console.log(that.address, 'that.addressthat.address', res);
+      },
+      fail: function () {
+        wx.getSetting({
+          success: function (res) {
+            var statu = res.authSetting;
+            if (!statu['scope.userLocation']) {
+              wx.showModal({
+                title: '是否授权当前位置',
+                content: '需要获取您的地理位置，请确认授权，否则无法定位最近店铺',
+                success: function (tip) {
+                  if (tip.confirm) {
+                    wx.openSetting({
+                      success: function (data) {
+                        if (data.authSetting["scope.userLocation"] === true) {
+                          wx.showToast({
+                            title: '授权成功',
+                            icon: 'success',
+                            duration: 1000
+                          })
+                          //授权成功之后，再调用chooseLocation选择地方
+                          wx.getLocation({
+                            success: function (res) {
+                              that.getStore()
+                              app.address = res
+                            },
+                          })
+                        } else {
+                          wx.showToast({
+                            title: '授权失败',
+                            icon: 'success',
+                            duration: 1000
+                          })
+                        }
+                      }
+                    })
+                  }
+                }
+              })
+            }
+          },
+          fail: function (res) {
+            wx.showToast({
+              title: '调用授权窗口失败',
+              icon: 'success',
+              duration: 1000
+            })
+          }
+        })
+      }
+    })
+  },
+    /**
+   * 获取店铺接口
+   * /api/store
+   */
+  getStore() {
+    get(
+      'api/store', {
+        page: 1,
+        limit: 100,
+        keyword: ""
+      },
+      (res) => {
+        let lat1 = this.globalData.address.latitude,
+          lng1 = this.globalData.address.longitude,
+          storeList = res.data.list,
+          distanceList = []
+        //循环遍历计算获取当前定位到各门店的距离
+        storeList.forEach(item => {
+          let distanceInfo = {}
+          distanceInfo["id"] = item.id
+          distanceInfo["dist"] = this.getDistance(lat1, lng1, item.latitude, item.longitude)
+          distanceList.push(distanceInfo)
+        })
+        //近到远排序
+        let _distanceList = distanceList.sort(function (a, b) {
+          return a.dist - b.dist
+        })
+        // //切换门店
+        // this.getStoreInfo(String(_distanceList[0].id))
+        wx.setStorageSync('store_id', String(_distanceList[0].id))
+      }
+    )
+  },
+    /**
+   * 两点之间距离计算
+   * @param {*} lat1 
+   * @param {*} lng1 
+   * @param {*} lat2 
+   * @param {*} lng2 
+   */
+  getDistance(lat1, lng1, lat2, lng2) {
+    lat1 = lat1 || 0;
+    lng1 = lng1 || 0;
+    lat2 = lat2 || 0;
+    lng2 = lng2 || 0;
+
+    var rad1 = lat1 * Math.PI / 180.0;
+    var rad2 = lat2 * Math.PI / 180.0;
+    var a = rad1 - rad2;
+    var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
+    var r = 6378137;
+    var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2)));
+
+    return distance;
+  },
+})

app.json

@@ -0,0 +1,168 @@
+{
+  "pages": [
+    "pages/home/home",
+    "pages/activePage2/activePage2",
+    "pages/couponCenter/couponCenter",
+    "pages/faceDetectionDetails/faceDetectionDetails",
+    "pages/recommendRule/recommendRule",
+    "pages/actDetails/actDetails",
+    "pages/authOrder/authOrder",
+    "pages/confirmProjectOrder/confirmProjectOrder",
+    "pages/orderDetailsProject/orderDetailsProject",
+    "pages/orderBySuccess/orderBySuccess",
+    "pages/paySuccess/paySuccess",
+    "pages/reserveCar/reserveCar",
+    "pages/member/member",
+    "pages/orderBy/orderBy",
+    "pages/vip/vip",
+    "pages/vipCard/vipCard",
+    "pages/coupon/coupon",
+    "pages/disclaimer/disclaimer",
+    "pages/order/order",
+    "pages/orderDetail/orderDetail",
+    "pages/projectDetail/projectDetail",
+    "pages/orderConfirm/orderConfirm",
+    "pages/goodsOrderConfirm/goodsOrderConfirm",
+    "pages/store/store",
+    "pages/login/login",
+    "pages/agreement/agreement",
+    "pages/deviceLogin/deviceLogin",
+    "pages/caseList/caseList",
+    "pages/article/article",
+    "pages/dossier/dossier",
+    "pages/phone/phone",
+    "pages/contact/contact",
+    "pages/caseDetail/caseDetail",
+    "pages/articleDetail/articleDetail",
+    "pages/name/name",
+    "pages/skinRecord/skinRecord",
+    "pages/test/test",
+    "pages/skinRecordList/skinRecordList",
+    "pages/beautyPlan/beautyPlan",
+    "pages/beautyPlanList/beautyPlanList",
+    "pages/reserveProject/reserveProject",
+    "pages/reserveProduct/reserveProduct",
+    "pages/feedback/feedback",
+    "pages/addFeedback/addFeedback",
+    "pages/goods/orderList/orderList",
+    "pages/goods/orderDetail/orderDetail",
+    "pages/member/investigation/investigation",
+    "pages/storedValue/index",
+    "pages/rechange/index",
+    "pages/toolDetails/index",
+    "pages/guildMessage/index",
+    "pages/plan/plan",
+    "pages/invitationDetails/invitationDetails",
+    "pages/invitationDetails/poster/poster",
+    "pages/invitees/invitees",
+    "pages/sucReception/sucReception",
+    "pages/couponHistory/couponHistory",
+    "pages/sendFriend/sendFriend",
+    "pages/sendGetCoupon/sendGetCoupon",
+    "pages/shoppingMall/shoppingMall",
+    "pages/moreClassify/moreClassify"
+  ],
+  "subpackages": [
+    {
+      "root": "subPackages",
+      "name": "分包A",
+      "pages": [
+        "pages/cardBag/cardBag",
+        "pages/subCardDetails/subCardDetails",
+        "pages/couponHistory/couponHistory"
+      ]
+    },
+    {
+      "root": "subPackagesB",
+      "name": "分包B",
+      "pages": [
+        "pages/joinGroup/joinGroup",
+        "pages/groupRecord/groupRecord",
+        "pages/groupOrder/groupOrder",
+        "pages/groupFlow/groupFlow",
+        "pages/groupDetail/groupDetail",
+        "pages/successOrder/successOrder",
+        "pages/GroupConfirm/GroupConfirm",
+        "pages/groupExplain/groupExplain"
+      ]
+    },
+    {
+      "root": "subPackagesC",
+      "name": "分包C",
+      "pages": [
+        "pages/messageCenter/messageCenter",
+        "pages/messageDetail/messageDetail"
+      ]
+    },
+    {
+      "root": "subPackagesD",
+      "name": "分包D",
+      "pages": [
+        "pages/testSkin/testSkin",
+        "pages/skinHistory/skinHistory",
+        "pages/skinLoading/skinLoading",
+        "pages/skinPlan/skinPlan"
+      ]
+    },
+    {
+      "root": "subPackagesE",
+      "name": "分包E",
+      "pages": [
+        "pages/giftBag/giftBag",
+        "pages/giftBagSize/giftBagSize",
+        "pages/giftBagOrder/giftBagOrder"
+      ]
+    },
+    {
+      "root": "subPackagesF",
+      "name": "分包F",
+      "pages": [
+        "pages/seckillActivity/seckillActivity",
+        "pages/seckillDetail/seckillDetail",
+        "pages/seckillOrder/seckillOrder"
+      ]
+    }
+  ],
+  "tabBar": {
+    "color": "#666666",
+    "selectedColor": "#333333",
+    "borderStyle": "white",
+    "backgroundColor": "#fff",
+    "list": [
+      {
+        "pagePath": "pages/home/home",
+        "iconPath": "images/nav/首页-未选中@2x.png",
+        "selectedIconPath": "images/nav/首页-选中@2x.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/shoppingMall/shoppingMall",
+        "iconPath": "images/nav/商城-未选中@2x.png",
+        "selectedIconPath": "images/nav/商城-选中@2x.png",
+        "text": "商城"
+      },
+      {
+        "pagePath": "pages/member/member",
+        "iconPath": "images/nav/我的-未选中@2x.png",
+        "selectedIconPath": "images/nav/我的-选中@2x.png",
+        "text": "我的"
+      }
+    ]
+  },
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle": "black"
+  },
+  "permission": {
+    "scope.userLocation": {
+      "desc": "你的位置信息将用于小程序位置接口的效果展示"
+    }
+  },
+  "requiredPrivateInfos": [
+    "getLocation"
+  ],
+  "usingComponents": {},
+  "sitemapLocation": "sitemap.json"
+}

app.wxs

@@ -0,0 +1,28 @@
+var replaceStr = function (str) {
+  if (str) {
+    return str.replace(getRegExp('-', 'g'), '.')
+  }
+}
+
+var indexOf = function (args, param) {
+  if (args.indexOf(param) > -1) {
+    return true
+  }
+  return false
+}
+var mysub = function(str,start,length){
+  //起始位置
+  var offset = start || 0;
+  var len=length || 70;
+  if(str.length<=len){
+    return str;
+  }
+  return str.substring(offset,len)+'...';
+}
+
+
+module.exports = {
+  replaceStr: replaceStr,
+  indexOf: indexOf,
+  mysub:mysub
+}

app.wxss

@@ -0,0 +1,147 @@
+/**app.wxss**/
+page {
+  /* background: #F9F9F9; */
+  background: #F7F8FA;
+  /* background: linear-gradient(180deg, #FA7D22 0%, rgba(255, 202, 224, 0) 100%);
+  background-repeat: no-repeat; */
+}
+
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+}
+
+.flex {
+  display: flex;
+}
+
+.flex-start {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
+.flex-align-baseline {
+  display: flex;
+  align-items: baseline;
+}
+
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-justify-space-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.flex-justify-space-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  /* align-items: flex-start;
+  justify-content: flex-start; */
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.radius {
+  border-radius: 8rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.popup-radius .wux-popup__content {
+  border-top-left-radius: 40rpx;
+  border-top-right-radius: 40rpx;
+}
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsis2 {
+  /* overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical; */
+
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -moz-box;
+  -moz-line-clamp: 2;
+  -moz-box-orient: vertical;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: normal !important;
+  overflow: hidden;
+}
+
+.ellipsis3 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+text {
+  font-size: 32rpx;
+  color: #333333;
+  /* color: #FFFFFF; */
+  font-family: PingFangSC-Regular;
+}
+
+.btm-text {
+  font-size: 28rpx;
+  color: #999999;
+  text-align: center;
+  margin: 42rpx 0;
+}
+
+.no-data {
+  text-align: center;
+  margin-top: 400rpx;
+  color: #666;
+}
+
+
+.no-more-data {
+  text-align: center;
+  margin-top: 28rpx;
+  color: #666;
+}
+
+rich-text .richImg {
+  max-width: 100%;
+  max-height: 100%;
+  vertical-align: middle;
+  height: auto !important;
+  width: auto !important;
+}

components/dist/animation-group/index.js

@@ -0,0 +1,382 @@
+import baseComponent from '../helpers/baseComponent'
+import styleToCssString from '../helpers/styleToCssString'
+
+const ENTER = 'enter'
+const ENTERING = 'entering'
+const ENTERED = 'entered'
+const EXIT = 'exit'
+const EXITING = 'exiting'
+const EXITED = 'exited'
+const UNMOUNTED = 'unmounted'
+
+const TRANSITION = 'transition'
+const ANIMATION = 'animation'
+
+const TIMEOUT = 1000 / 60
+
+const defaultClassNames = {
+    enter: '', // 进入过渡的开始状态，在过渡过程完成之后移除
+    enterActive: '', // 进入过渡的结束状态，在过渡过程完成之后移除
+    enterDone: '', // 进入过渡的完成状态
+    exit: '', // 离开过渡的开始状态，在过渡过程完成之后移除
+    exitActive: '', // 离开过渡的结束状态，在过渡过程完成之后移除
+    exitDone: '', // 离开过渡的完成状态
+}
+
+baseComponent({
+    properties: {
+        // 触发组件进入或离开过渡的状态
+        in: {
+            type: Boolean,
+            value: false,
+            observer(newVal) {
+                if (this.data.isMounting) {
+                    this.updated(newVal)
+                }
+            },
+        },
+        // 过渡的类名
+        classNames: {
+            type: null,
+            value: defaultClassNames,
+        },
+        // 过渡持续时间
+        duration: {
+            type: null,
+            value: null,
+        },
+        // 过渡动效的类型
+        type: {
+            type: String,
+            value: TRANSITION,
+        },
+        // 首次挂载时是否触发进入过渡
+        appear: {
+            type: Boolean,
+            value: false,
+        },
+        // 是否启用进入过渡
+        enter: {
+            type: Boolean,
+            value: true,
+        },
+        // 是否启用离开过渡
+        exit: {
+            type: Boolean,
+            value: true,
+        },
+        // 首次进入过渡时是否懒挂载组件
+        mountOnEnter: {
+            type: Boolean,
+            value: true,
+        },
+        // 离开过渡完成时是否卸载组件
+        unmountOnExit: {
+            type: Boolean,
+            value: true,
+        },
+        // 自定义类名
+        wrapCls: {
+            type: String,
+            value: '',
+        },
+        // 自定义样式
+        wrapStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        disableScroll: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        animateCss: '', // 动画样式
+        animateStatus: EXITED, // 动画状态，可选值 entering、entered、exiting、exited
+        isMounting: false, // 是否首次挂载
+        extStyle: '', // 组件样式
+    },
+    methods: {
+        /**
+         * 监听过渡或动画的回调函数
+         */
+        addEventListener() {
+            const { animateStatus } = this.data
+            const { enter, exit } = this.getTimeouts()
+
+            if (animateStatus === ENTERING && !enter && this.data.enter) {
+                this.performEntered()
+            }
+
+            if (animateStatus === EXITING && !exit && this.data.exit) {
+                this.performExited()
+            }
+        },
+        /**
+         * 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
+         */
+        onTransitionEnd() {
+            if (this.data.type === TRANSITION) {
+                this.addEventListener()
+            }
+        },
+        /**
+         * 会在一个 WXSS animation 动画完成时触发
+         */
+        onAnimationEnd() {
+            if (this.data.type === ANIMATION) {
+                this.addEventListener()
+            }
+        },
+        /**
+         * 更新组件状态
+         * @param {String} nextStatus 下一状态，ENTERING 或 EXITING
+         * @param {Boolean} mounting 是否首次挂载
+         */
+        updateStatus(nextStatus, mounting = false) {
+            if (nextStatus !== null) {
+                this.cancelNextCallback()
+                this.isAppearing = mounting
+
+                if (nextStatus === ENTERING) {
+                    this.performEnter()
+                } else {
+                    this.performExit()
+                }
+            }
+        },
+        /**
+         * 进入过渡
+         */
+        performEnter() {
+            const { className, activeClassName } = this.getClassNames(ENTER)
+            const { enter } = this.getTimeouts()
+            const enterParams = {
+                animateStatus: ENTER,
+                animateCss: className,
+            }
+            const enteringParams = {
+                animateStatus: ENTERING,
+                animateCss: `${className} ${activeClassName}`,
+            }
+
+            // 若已禁用进入过渡，则更新状态至 ENTERED
+            if (!this.isAppearing && !this.data.enter) {
+                return this.performEntered()
+            }
+
+            // 第一阶段：设置进入过渡的开始状态，并触发 ENTER 事件
+            // 第二阶段：延迟一帧后，设置进入过渡的结束状态，并触发 ENTERING 事件
+            // 第三阶段：若已设置过渡的持续时间，则延迟指定时间后触发进入过渡完成 performEntered，否则等待触发 onTransitionEnd 或 onAnimationEnd
+            this.safeSetData(enterParams, () => {
+                this.triggerEvent('change', { animateStatus: ENTER })
+                this.triggerEvent(ENTER, { isAppearing: this.isAppearing })
+
+                // 由于有些时候不能正确的触发动画完成的回调，具体原因未知
+                // 所以采用延迟一帧的方式来确保可以触发回调
+                this.delayHandler(TIMEOUT, () => {
+                    this.safeSetData(enteringParams, () => {
+                        this.triggerEvent('change', { animateStatus: ENTERING })
+                        this.triggerEvent(ENTERING, { isAppearing: this.isAppearing })
+
+                        if (enter) {
+                            this.delayHandler(enter, this.performEntered)
+                        }
+                    })
+                })
+            })
+        },
+        /**
+         * 进入过渡完成
+         */
+        performEntered() {
+            const { doneClassName } = this.getClassNames(ENTER)
+            const enteredParams = {
+                animateStatus: ENTERED,
+                animateCss: doneClassName,
+            }
+
+            // 第三阶段：设置进入过渡的完成状态，并触发 ENTERED 事件
+            this.safeSetData(enteredParams, () => {
+                this.triggerEvent('change', { animateStatus: ENTERED })
+                this.triggerEvent(ENTERED, { isAppearing: this.isAppearing })
+            })
+        },
+        /**
+         * 离开过渡
+         */
+        performExit() {
+            const { className, activeClassName } = this.getClassNames(EXIT)
+            const { exit } = this.getTimeouts()
+            const exitParams = {
+                animateStatus: EXIT,
+                animateCss: className,
+            }
+            const exitingParams = {
+                animateStatus: EXITING,
+                animateCss: `${className} ${activeClassName}`,
+            }
+
+            // 若已禁用离开过渡，则更新状态至 EXITED
+            if (!this.data.exit) {
+                return this.performExited()
+            }
+
+            // 第一阶段：设置离开过渡的开始状态，并触发 EXIT 事件
+            // 第二阶段：延迟一帧后，设置离开过渡的结束状态，并触发 EXITING 事件
+            // 第三阶段：若已设置过渡的持续时间，则延迟指定时间后触发离开过渡完成 performExited，否则等待触发 onTransitionEnd 或 onAnimationEnd
+            this.safeSetData(exitParams, () => {
+                this.triggerEvent('change', { animateStatus: EXIT })
+                this.triggerEvent(EXIT)
+
+                this.delayHandler(TIMEOUT, () => {
+                    this.safeSetData(exitingParams, () => {
+                        this.triggerEvent('change', { animateStatus: EXITING })
+                        this.triggerEvent(EXITING)
+
+                        if (exit) {
+                            this.delayHandler(exit, this.performExited)
+                        }
+                    })
+                })
+            })
+        },
+        /**
+         * 离开过渡完成
+         */
+        performExited() {
+            const { doneClassName } = this.getClassNames(EXIT)
+            const exitedParams = {
+                animateStatus: EXITED,
+                animateCss: doneClassName,
+            }
+
+            // 第三阶段：设置离开过渡的完成状态，并触发 EXITED 事件
+            this.safeSetData(exitedParams, () => {
+                this.triggerEvent('change', { animateStatus: EXITED })
+                this.triggerEvent(EXITED)
+
+                // 判断离开过渡完成时是否卸载组件
+                if (this.data.unmountOnExit) {
+                    this.setData({ animateStatus: UNMOUNTED }, () => {
+                        this.triggerEvent('change', { animateStatus: UNMOUNTED })
+                    })
+                }
+            })
+        },
+        /**
+         * 获取指定状态下的类名
+         * @param {String} type 过渡类型，enter 或 exit
+         */
+        getClassNames(type) {
+            const { classNames } = this.data
+            const className = typeof classNames !== 'string' ? classNames[type] : `${classNames}-${type}`
+            const activeClassName = typeof classNames !== 'string' ? classNames[`${type}Active`] : `${classNames}-${type}-active`
+            const doneClassName = typeof classNames !== 'string' ? classNames[`${type}Done`] : `${classNames}-${type}-done`
+
+            return {
+                className,
+                activeClassName,
+                doneClassName,
+            }
+        },
+        /**
+         * 获取过渡持续时间
+         */
+        getTimeouts() {
+            const { duration } = this.data
+
+            if (duration !== null && typeof duration === 'object') {
+                return {
+                    enter: duration.enter,
+                    exit: duration.exit,
+                }
+            } else if (typeof duration === 'number') {
+                return {
+                    enter: duration,
+                    exit: duration,
+                }
+            }
+
+            return {}
+        },
+        /**
+         * 属性值 in 被更改时的响应函数
+         * @param {Boolean} newVal 触发组件进入或离开过渡的状态
+         */
+        updated(newVal) {
+            let { animateStatus } = this.pendingData || this.data
+            let nextStatus = null
+
+            if (newVal) {
+                if (animateStatus === UNMOUNTED) {
+                    animateStatus = EXITED
+                    this.setData({ animateStatus: EXITED }, () => {
+                        this.triggerEvent('change', { animateStatus: EXITED })
+                    })
+                }
+                if (animateStatus !== ENTER && animateStatus !== ENTERING && animateStatus !== ENTERED) {
+                    nextStatus = ENTERING
+                }
+            } else {
+                if (animateStatus === ENTER || animateStatus === ENTERING || animateStatus === ENTERED) {
+                    nextStatus = EXITING
+                }
+            }
+
+            this.updateStatus(nextStatus)
+        },
+        /**
+         * 延迟一段时间触发回调
+         * @param {Number} timeout 延迟时间
+         * @param {Function} handler 回调函数
+         */
+        delayHandler(timeout, handler) {
+            if (timeout) {
+                this.setNextCallback(handler)
+                setTimeout(this.nextCallback, timeout)
+            }
+        },
+        /**
+         * 点击事件
+         */
+        onTap() {
+            this.triggerEvent('click')
+        },
+        /**
+         * 阻止移动触摸
+         */
+        noop() {},
+    },
+    attached() {
+        let animateStatus = null
+        let appearStatus = null
+
+        if (this.data.in) {
+            if (this.data.appear) {
+                animateStatus = EXITED
+                appearStatus = ENTERING
+            } else {
+                animateStatus = ENTERED
+            }
+        } else {
+            if (this.data.unmountOnExit || this.data.mountOnEnter) {
+                animateStatus = UNMOUNTED
+            } else {
+                animateStatus = EXITED
+            }
+        }
+
+        // 由于小程序组件首次挂载时 observer 事件总是优先于 attached 事件
+        // 所以使用 isMounting 来强制优先触发 attached 事件
+        this.safeSetData({ animateStatus, isMounting: true }, () => {
+            this.triggerEvent('change', { animateStatus })
+            this.updateStatus(appearStatus, true)
+        })
+    },
+})

components/dist/animation-group/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/dist/animation-group/index.wxml

@@ -0,0 +1,3 @@
+<view class="wux-class {{ wrapCls }} {{ animateCss }}" bindtap="onTap" catchtouchmove="{{ disableScroll ? 'noop' : '' }}" bindtransitionend="onTransitionEnd" bindanimationend="onAnimationEnd" wx:if="{{ animateStatus !== 'unmounted' }}" style="{{ extStyle }}">
+    <slot></slot>
+</view>

components/dist/animation-group/index.wxss

@@ -0,0 +1,206 @@
+.wux-animate--fadeIn-enter {
+  transition: opacity .3s;
+  opacity: 0
+}
+.wux-animate--fadeIn-enter-active,
+.wux-animate--fadeIn-enter-done {
+  opacity: 1
+}
+.wux-animate--fadeIn-exit {
+  transition: opacity .3s;
+  opacity: 1
+}
+.wux-animate--fadeIn-exit-active,
+.wux-animate--fadeIn-exit-done {
+  opacity: 0
+}
+.wux-animate--fadeInDown-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(0,-100%,0)
+}
+.wux-animate--fadeInDown-enter-active,
+.wux-animate--fadeInDown-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInDown-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInDown-exit-active,
+.wux-animate--fadeInDown-exit-done {
+  opacity: 0;
+  transform: translate3d(0,-100%,0)
+}
+.wux-animate--fadeInLeft-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(-100%,0,0)
+}
+.wux-animate--fadeInLeft-enter-active,
+.wux-animate--fadeInLeft-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInLeft-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInLeft-exit-active,
+.wux-animate--fadeInLeft-exit-done {
+  opacity: 0;
+  transform: translate3d(-100%,0,0)
+}
+.wux-animate--fadeInRight-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(100%,0,0)
+}
+.wux-animate--fadeInRight-enter-active,
+.wux-animate--fadeInRight-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInRight-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInRight-exit-active,
+.wux-animate--fadeInRight-exit-done {
+  opacity: 0;
+  transform: translate3d(100%,0,0)
+}
+.wux-animate--fadeInUp-enter {
+  transition: opacity .3s,transform .3s;
+  opacity: 0;
+  transform: translate3d(0,100%,0)
+}
+.wux-animate--fadeInUp-enter-active,
+.wux-animate--fadeInUp-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInUp-exit {
+  transition: opacity .3s,transform .3s;
+  opacity: 1;
+  transform: none
+}
+.wux-animate--fadeInUp-exit-active,
+.wux-animate--fadeInUp-exit-done {
+  opacity: 0;
+  transform: translate3d(0,100%,0)
+}
+.wux-animate--slideInUp-enter {
+  transition: transform .3s;
+  transform: translate3d(0,100%,0);
+  visibility: visible
+}
+.wux-animate--slideInUp-enter-active,
+.wux-animate--slideInUp-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInUp-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInUp-exit-active,
+.wux-animate--slideInUp-exit-done {
+  transform: translate3d(0,100%,0);
+  visibility: visible
+}
+.wux-animate--slideInDown-enter {
+  transition: transform .3s;
+  transform: translate3d(0,-100%,0);
+  visibility: visible
+}
+.wux-animate--slideInDown-enter-active,
+.wux-animate--slideInDown-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInDown-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInDown-exit-active,
+.wux-animate--slideInDown-exit-done {
+  transform: translate3d(0,-100%,0);
+  visibility: visible
+}
+.wux-animate--slideInLeft-enter {
+  transition: transform .3s;
+  transform: translate3d(-100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInLeft-enter-active,
+.wux-animate--slideInLeft-enter-done {
+  transform: translateZ(0)
+}
+.wux-animate--slideInLeft-exit {
+  transition: transform .3s;
+  transform: translateZ(0)
+}
+.wux-animate--slideInLeft-exit-active,
+.wux-animate--slideInLeft-exit-done {
+  transform: translate3d(-100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInRight-enter {
+  transition: transform .3s;
+  transform: translate3d(100%,0,0);
+  visibility: visible
+}
+.wux-animate--slideInRight-enter-active,
+.wux-animate--slideInRight-enter-done {
+  transform: none
+}
+.wux-animate--slideInRight-exit {
+  transition: transform .3s;
+  transform: none
+}
+.wux-animate--slideInRight-exit-active,
+.wux-animate--slideInRight-exit-done {
+  transform: translate3d(100%,0,0);
+  visibility: visible
+}
+.wux-animate--zoom-enter {
+  transition: all .3s cubic-bezier(.215,.61,.355,1);
+  opacity: .01;
+  transform: scale(.75)
+}
+.wux-animate--zoom-enter-active,
+.wux-animate--zoom-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--zoom-exit {
+  transition: all .25s linear;
+  transform: none
+}
+.wux-animate--zoom-exit-active,
+.wux-animate--zoom-exit-done {
+  opacity: .01;
+  transform: scale(.75)
+}
+.wux-animate--punch-enter {
+  transition: all .3s cubic-bezier(.215,.61,.355,1);
+  opacity: .01;
+  transform: scale(1.35)
+}
+.wux-animate--punch-enter-active,
+.wux-animate--punch-enter-done {
+  opacity: 1;
+  transform: none
+}
+.wux-animate--punch-exit {
+  transition: all .25s linear;
+  transform: none
+}
+.wux-animate--punch-exit-active,
+.wux-animate--punch-exit-done {
+  opacity: .01;
+  transform: scale(1.35)
+}

components/dist/backdrop/index.js

@@ -0,0 +1,62 @@
+import baseComponent from '../helpers/baseComponent'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-backdrop',
+        },
+        transparent: {
+            type: Boolean,
+            value: false,
+        },
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        classNames: {
+            type: null,
+            value: 'wux-animate--fadeIn',
+        },
+    },
+    computed: {
+        classes: ['prefixCls, transparent', function(prefixCls, transparent) {
+            const wrap = transparent ? `${prefixCls}--transparent` : prefixCls
+
+            return {
+                wrap,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 保持锁定
+         */
+        retain() {
+            if (typeof this.backdropHolds !== 'number' || !this.backdropHolds) {
+                this.backdropHolds = 0
+            }
+
+            this.backdropHolds = this.backdropHolds + 1
+
+            if (this.backdropHolds === 1) {
+                this.setData({ in: true })
+            }
+        },
+        /**
+         * 释放锁定
+         */
+        release() {
+            if (this.backdropHolds === 1) {
+                this.setData({ in: false })
+            }
+            this.backdropHolds = Math.max(0, this.backdropHolds - 1)
+        },
+        /**
+         * 点击事件
+         */
+        onClick() {
+            this.triggerEvent('click')
+        },
+    },
+})

components/dist/backdrop/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index"
+    }
+}

components/dist/backdrop/index.wxml

@@ -0,0 +1 @@
+<wux-animation-group wux-class="{{ classes.wrap }}" in="{{ in }}" classNames="{{ classNames }}" bind:click="onClick" wrapStyle="{{ { zIndex } }}" disableScroll />

components/dist/backdrop/index.wxss

@@ -0,0 +1,15 @@
+.wux-backdrop {
+  background: rgba(0,0,0,.4)
+}
+.wux-backdrop,
+.wux-backdrop--transparent {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0
+}
+.wux-backdrop--transparent {
+  background: 0 0
+}

components/dist/circle/index.js

@@ -0,0 +1,199 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+const toAngle = (a) => a / 180 * Math.PI
+const percent = (a) => toAngle(a / 100 * 360)
+const easeInOutCubic = (a, b, c, d) => {
+    a /= d / 2
+    if (a < 1) return c / 2 * a * a * a + b
+    a -= 2
+    return c / 2 * (a * a * a + 2) + b
+}
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-circle',
+        },
+        percent: {
+            type: Number,
+            value: 0,
+            observer: 'redraw',
+        },
+        strokeWidth: {
+            type: Number,
+            value: 10,
+        },
+        size: {
+            type: Number,
+            value: 120,
+            observer: 'updateStyle',
+        },
+        lineCap: {
+            type: String,
+            value: 'round',
+        },
+        backgroundColor: {
+            type: String,
+            value: '#f3f3f3',
+        },
+        color: {
+            type: String,
+            value: '#33cd5f',
+        },
+        sAngle: {
+            type: Number,
+            value: 0,
+            observer(newVal) {
+                this.setData({
+                    beginAngle: toAngle(newVal),
+                })
+            },
+        },
+        counterclockwise: {
+            type: Boolean,
+            value: false,
+        },
+        speed: {
+            type: Number,
+            value: 2000,
+        },
+        animate: {
+            type: Boolean,
+            value: true,
+        },
+        background: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        beginAngle: 0,
+        startAngle: 0,
+        endAngle: 0,
+        currentAngle: 0,
+    },
+    computed: {
+        classes: ['prefixCls', function(prefixCls) {
+            const wrap = classNames(prefixCls)
+            const inner = `${prefixCls}__inner`
+
+            return {
+                wrap,
+                inner,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 更新样式
+         */
+        updateStyle(size = this.data.size) {
+            const style = `width: ${size}px; height: ${size}px;`
+
+            this.setData({
+                style,
+            })
+        },
+        /**
+         * 着帧绘制 canvas
+         */
+        redraw(value = this.data.percent) {
+            const endAngle = percent(value)
+            const now = Date.now()
+            const decrease = this.data.currentAngle > endAngle
+            const startAngle = !decrease ? this.data.currentAngle : this.data.endAngle
+
+            this.cancelNextCallback()
+            this.clearTimer()
+
+            this.safeSetData({ startAngle, endAngle }, () => {
+                this.animate(now, now, decrease)
+            })
+        },
+        /**
+         * 绘制 canvas
+         */
+        draw(line = true) {
+            const { lineCap, backgroundColor, color, size, strokeWidth, counterclockwise, background } = this.data
+            const position = size / 2
+            const radius = position - strokeWidth / 2
+            const p = 2 * Math.PI
+            const startAngle = counterclockwise ? p - this.data.beginAngle : this.data.beginAngle
+            const endAngle = counterclockwise ? p - (this.data.beginAngle + this.data.currentAngle) : this.data.beginAngle + this.data.currentAngle
+
+            // 创建 canvas 绘图上下文
+            this.ctx = this.ctx || wx.createCanvasContext('circle', this)
+
+            // 清除画布
+            this.ctx.clearRect(0, 0, size, size)
+
+            // 绘制背景
+            if (background) {
+                this.ctx.beginPath()
+                this.ctx.arc(position, position, radius, 0, 2 * Math.PI)
+                this.ctx.setLineWidth(strokeWidth)
+                this.ctx.setStrokeStyle(backgroundColor)
+                this.ctx.stroke()
+            }
+
+            // 绘制进度
+            if (line) {
+                this.ctx.beginPath()
+                this.ctx.arc(position, position, radius, startAngle, endAngle)
+                this.ctx.setLineWidth(strokeWidth)
+                this.ctx.setStrokeStyle(color)
+                this.ctx.setLineCap(lineCap)
+                this.ctx.stroke()
+            }
+
+            // 绘制完成
+            this.ctx.draw(false, () => {
+                this.triggerEvent('change', { value: this.data.currentAngle })
+            })
+        },
+        /**
+         * 开始动画
+         */
+        animate(c, d, e) {
+            const now = Date.now()
+            const f = now - c < 1 ? 1 : now - c
+            const { animate, speed, startAngle, endAngle } = this.data
+            const isEnd = !e && 1000 * this.data.currentAngle <= Math.floor(1000 * endAngle) || e && 1000 * this.data.currentAngle >= Math.floor(1000 * endAngle)
+
+            if (animate && c - d < 1.05 * speed && isEnd) {
+                const value = easeInOutCubic((c - d) / f, startAngle, endAngle - startAngle, speed / f)
+                const currentAngle = value < 0 ? 0 : value
+
+                c = Date.now()
+
+                this.safeSetData({ currentAngle }, () => {
+                    this.draw(currentAngle !== 0)
+                    this.timer = setTimeout(() => this.animate(c, d, e), 1000 / 60)
+                })
+            } else {
+                this.safeSetData({ currentAngle: endAngle }, () => this.draw(endAngle !== 0))
+            }
+        },
+        /**
+         * 清除定时器
+         */
+        clearTimer() {
+            if (this.timer) {
+                clearTimeout(this.timer)
+                this.timer = null
+            }
+        },
+    },
+    attached() {
+        this.updateStyle()
+        if (this.data.percent === 0) {
+            this.draw(false)
+        }
+    },
+    detached() {
+        this.ctx = null
+        this.clearTimer()
+    },
+})

components/dist/circle/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/dist/circle/index.wxml

@@ -0,0 +1,6 @@
+<view class="wux-class {{ classes.wrap }}" style="{{ style }}">
+    <canvas style="{{ style }}" canvas-id="circle" />
+    <view class="{{ classes.inner }}">
+    	<slot></slot>
+    </view>
+</view>

components/dist/circle/index.wxss

@@ -0,0 +1,13 @@
+.wux-circle {
+  display: inline-block;
+  position: relative
+}
+.wux-circle__inner {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translate3d(0,-50%,0);
+  line-height: 1
+}

components/dist/countdown/index.js

@@ -0,0 +1,176 @@
+class Countdown {
+    constructor(options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
+        Object.assign(this, {
+            page,
+            options,
+        })
+        this.__init()
+    }
+
+    /**
+     * 初始化
+     */
+    __init() {
+        this.setData = this.page.setData.bind(this.page)
+        this.restart(this.options)
+    }
+
+    /**
+     * 默认参数
+     */
+    setDefaults() {
+        return {
+            date: 'June 7, 2087 15:03:25',
+            refresh: 1000,
+            offset: 0,
+            onEnd() {},
+            render(date) {},
+        }
+    }
+
+    /**
+     * 合并参数
+     */
+    mergeOptions(options) {
+        const defaultOptions = this.setDefaults()
+
+        for (let i in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(i)) {
+                this.options[i] = typeof options[i] !== 'undefined' ? options[i] : defaultOptions[i]
+
+                if (i === 'date' && typeof this.options.date !== 'object') {
+                    this.options.date = new Date(this.options.date)
+                }
+
+                if (typeof this.options[i] === 'function') {
+                    this.options[i] = this.options[i].bind(this)
+                }
+            }
+        }
+
+        if (typeof this.options.date !== 'object') {
+            this.options.date = new Date(this.options.date)
+        }
+    }
+
+    /**
+     * 计算日期差
+     */
+    getDiffDate() {
+        let diff = (this.options.date.getTime() - Date.now() + this.options.offset) / 1000
+
+        let dateData = {
+            years: 0,
+            days: 0,
+            hours: 0,
+            min: 0,
+            sec: 0,
+            millisec: 0,
+        }
+
+        if (diff <= 0) {
+            if (this.interval) {
+                this.stop()
+                this.options.onEnd()
+            }
+            return dateData
+        }
+
+        if (diff >= (365.25 * 86400)) {
+            dateData.years = Math.floor(diff / (365.25 * 86400))
+            diff -= dateData.years * 365.25 * 86400
+        }
+
+        if (diff >= 86400) {
+            dateData.days = Math.floor(diff / 86400)
+            diff -= dateData.days * 86400
+        }
+
+        if (diff >= 3600) {
+            dateData.hours = Math.floor(diff / 3600)
+            diff -= dateData.hours * 3600
+        }
+
+        if (diff >= 60) {
+            dateData.min = Math.floor(diff / 60)
+            diff -= dateData.min * 60
+        }
+
+        dateData.sec = Math.round(diff)
+
+        dateData.millisec = diff % 1 * 1000
+
+        return dateData
+    }
+
+    /**
+     * 补零
+     */
+    leadingZeros(num, length = 2) {
+        num = String(num)
+        if (num.length > length) return num
+        return (Array(length + 1).join('0') + num).substr(-length)
+    }
+
+    /**
+     * 更新组件
+     */
+    update(newDate) {
+        this.options.date = typeof newDate !== 'object' ? new Date(newDate) : newDate
+        this.render()
+        return this
+    }
+
+    /**
+     * 停止倒计时
+     */
+    stop() {
+        if (this.interval) {
+            clearInterval(this.interval)
+            this.interval = !1
+        }
+        return this
+    }
+
+    /**
+     * 渲染组件
+     */
+    render() {
+        this.options.render(this.getDiffDate())
+        return this
+    }
+
+    /**
+     * 启动倒计时
+     */
+    start() {
+        if (this.interval) return !1
+        this.render()
+        if (this.options.refresh) {
+            this.interval = setInterval(() => {
+                this.render()
+            }, this.options.refresh)
+        }
+        return this
+    }
+
+    /**
+     * 更新offset
+     */
+    updateOffset(offset) {
+        this.options.offset = offset
+        return this
+    }
+
+    /**
+     * 重启倒计时
+     */
+    restart(options = {}) {
+        this.mergeOptions(options)
+        this.interval = !1
+        this.start()
+        return this
+    }
+}
+
+export default Countdown

components/dist/countup/index.js

@@ -0,0 +1,220 @@
+class CountUp {
+    constructor(startVal, endVal, decimals, duration, options = {}, page = getCurrentPages()[getCurrentPages().length - 1]) {
+        Object.assign(this, {
+            page,
+            startVal,
+            endVal,
+            decimals,
+            duration,
+            options,
+        })
+        this.__init()
+    }
+
+    /**
+     * 初始化
+     */
+    __init() {
+        this.setData = this.page.setData.bind(this.page)
+
+        this.lastTime = 0
+
+        // merge options
+        this.mergeOptions(this.options)
+
+        this.startVal = Number(this.startVal)
+        this.cacheVal = this.startVal
+        this.endVal = Number(this.endVal)
+        this.countDown = (this.startVal > this.endVal)
+        this.frameVal = this.startVal
+        this.decimals = Math.max(0, this.decimals || 0)
+        this.dec = Math.pow(10, this.decimals)
+        this.duration = Number(this.duration) * 1000 || 2000
+
+        // format startVal on initialization
+        this.printValue(this.formattingFn(this.startVal))
+    }
+
+    /**
+     * 默认参数
+     */
+    setDefaultOptions() {
+        return {
+            useEasing: true, // toggle easing
+            useGrouping: true, // 1,000,000 vs 1000000
+            separator: ',', // character to use as a separator
+            decimal: '.', // character to use as a decimal
+            easingFn: null, // optional custom easing closure function, default is Robert Penner's easeOutExpo
+            formattingFn: null, // optional custom formatting function, default is this.formatNumber below
+            printValue(value) {}, // printValue
+        }
+    }
+
+    /**
+     * 合并参数
+     */
+    mergeOptions(options) {
+        const defaultOptions = this.setDefaultOptions()
+
+        // extend default options with passed options object
+        for (let key in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(key)) {
+                this.options[key] = typeof options[key] !== 'undefined' ? options[key] : defaultOptions[key]
+                if (typeof this.options[key] === 'function') {
+                    this.options[key] = this.options[key].bind(this)
+                }
+            }
+        }
+
+        if (this.options.separator === '') { this.options.useGrouping = !1 }
+        if (!this.options.prefix) this.options.prefix = ''
+        if (!this.options.suffix) this.options.suffix = ''
+
+        this.easingFn = this.options.easingFn ? this.options.easingFn : this.easeOutExpo
+        this.formattingFn = this.options.formattingFn ? this.options.formattingFn : this.formatNumber
+        this.printValue = this.options.printValue ? this.options.printValue : function() {}
+    }
+
+    /**
+     * 创建定时器
+     */
+    requestAnimationFrame(callback) {
+        let currTime = new Date().getTime()
+        let timeToCall = Math.max(0, 16 - (currTime - this.lastTime))
+        let timeout = setTimeout(() => {
+            callback.bind(this)(currTime + timeToCall)
+        }, timeToCall)
+        this.lastTime = currTime + timeToCall
+        return timeout
+    }
+
+    /**
+     * 清空定时器
+     */
+    cancelAnimationFrame(timeout) {
+        clearTimeout(timeout)
+    }
+
+    /**
+     * 格式化数字
+     */
+    formatNumber(nStr) {
+        nStr = nStr.toFixed(this.decimals)
+        nStr += ''
+        let x, x1, x2, rgx
+        x = nStr.split('.')
+        x1 = x[0]
+        x2 = x.length > 1 ? this.options.decimal + x[1] : ''
+        rgx = /(\d+)(\d{3})/
+        if (this.options.useGrouping) {
+            while (rgx.test(x1)) {
+                x1 = x1.replace(rgx, '$1' + this.options.separator + '$2')
+            }
+        }
+        return this.options.prefix + x1 + x2 + this.options.suffix
+    }
+
+    /**
+     * 过渡效果
+     */
+    easeOutExpo(t, b, c, d) {
+        return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b
+    }
+
+    /**
+     * 计数函数
+     */
+    count(timestamp) {
+        if (!this.startTime) { this.startTime = timestamp }
+
+        this.timestamp = timestamp
+        const progress = timestamp - this.startTime
+        this.remaining = this.duration - progress
+
+        // to ease or not to ease
+        if (this.options.useEasing) {
+            if (this.countDown) {
+                this.frameVal = this.startVal - this.easingFn(progress, 0, this.startVal - this.endVal, this.duration)
+            } else {
+                this.frameVal = this.easingFn(progress, this.startVal, this.endVal - this.startVal, this.duration)
+            }
+        } else {
+            if (this.countDown) {
+                this.frameVal = this.startVal - ((this.startVal - this.endVal) * (progress / this.duration))
+            } else {
+                this.frameVal = this.startVal + (this.endVal - this.startVal) * (progress / this.duration)
+            }
+        }
+
+        // don't go past endVal since progress can exceed duration in the last frame
+        if (this.countDown) {
+            this.frameVal = (this.frameVal < this.endVal) ? this.endVal : this.frameVal
+        } else {
+            this.frameVal = (this.frameVal > this.endVal) ? this.endVal : this.frameVal
+        }
+
+        // decimal
+        this.frameVal = Math.round(this.frameVal * this.dec) / this.dec
+
+        // format and print value
+        this.printValue(this.formattingFn(this.frameVal))
+
+        // whether to continue
+        if (progress < this.duration) {
+            this.rAF = this.requestAnimationFrame(this.count)
+        } else {
+            if (this.callback) { this.callback() }
+        }
+    }
+
+    /**
+     * 启动计数器
+     */
+    start(callback) {
+        this.callback = callback
+        this.rAF = this.requestAnimationFrame(this.count)
+        return !1
+    }
+
+    /**
+     * 停止计数器
+     */
+    pauseResume() {
+        if (!this.paused) {
+            this.paused = !0
+            this.cancelAnimationFrame(this.rAF)
+        } else {
+            this.paused = !1
+            delete this.startTime
+            this.duration = this.remaining
+            this.startVal = this.frameVal
+            this.requestAnimationFrame(this.count)
+        }
+    }
+
+    /**
+     * 重置计数器
+     */
+    reset() {
+        this.paused = !1
+        delete this.startTime
+        this.startVal = this.cacheVal
+        this.cancelAnimationFrame(this.rAF)
+        this.printValue(this.formattingFn(this.startVal))
+    }
+
+    /**
+     * 更新计数器
+     */
+    update(newEndVal) {
+        this.cancelAnimationFrame(this.rAF)
+        this.paused = !1
+        delete this.startTime
+        this.startVal = this.frameVal
+        this.endVal = Number(newEndVal)
+        this.countDown = (this.startVal > this.endVal)
+        this.rAF = this.requestAnimationFrame(this.count)
+    }
+}
+
+export default CountUp

components/dist/helpers/arrayTreeFilter.js

@@ -0,0 +1,24 @@
+/**
+ * https://github.com/afc163/array-tree-filter
+ */
+function arrayTreeFilter(data, filterFn, options) {
+    options = options || {}
+    options.childrenKeyName = options.childrenKeyName || 'children'
+    let children = data || []
+    const result = []
+    let level = 0
+    do {
+        const foundItem = children.filter(function(item) {
+            return filterFn(item, level)
+        })[0]
+        if (!foundItem) {
+            break
+        }
+        result.push(foundItem)
+        children = foundItem[options.childrenKeyName] || []
+        level += 1
+    } while (children.length > 0)
+    return result
+}
+
+export default arrayTreeFilter

components/dist/helpers/baseComponent.js

@@ -0,0 +1,77 @@
+import computedBehavior from './computedBehavior'
+import relationsBehavior from './relationsBehavior'
+import safeAreaBehavior from './safeAreaBehavior'
+import safeSetDataBehavior from './safeSetDataBehavior'
+import funcBehavior from './funcBehavior'
+import compareVersion from './compareVersion'
+
+const { platform, SDKVersion } = wx.getSystemInfoSync()
+const libVersion = '2.6.6'
+
+// check SDKVersion
+if (platform === 'devtools' && compareVersion(SDKVersion, libVersion) < 0) {
+    if (wx && wx.showModal) {
+        wx.showModal({
+            title: '提示',
+            content: `当前基础库版本（${SDKVersion}）过低，无法使用 Wux Weapp 组件库，请更新基础库版本 >=${libVersion} 后重试。`,
+        })
+    }
+}
+
+const baseComponent = (options = {}) => {
+    // add default externalClasses
+    options.externalClasses = [
+        'wux-class',
+        'wux-hover-class',
+        ...(options.externalClasses = options.externalClasses || []),
+    ]
+
+    // add default behaviors
+    options.behaviors = [
+        relationsBehavior,
+        safeSetDataBehavior,
+        ...(options.behaviors = options.behaviors || []),
+        computedBehavior, // make sure it's triggered
+    ]
+
+    // use safeArea
+    if (options.useSafeArea) {
+        options.behaviors = [...options.behaviors, safeAreaBehavior]
+        delete options.useSafeArea
+    }
+
+    // use func
+    if (options.useFunc) {
+        options.behaviors = [...options.behaviors, funcBehavior]
+        delete options.useFunc
+    }
+
+    // use field
+    if (options.useField) {
+        options.behaviors = [...options.behaviors, 'wx://form-field']
+        delete options.useField
+    }
+
+    // use export
+    if (options.useExport) {
+        options.behaviors = [...options.behaviors, 'wx://component-export']
+        options.methods = {
+            export () {
+                return this
+            },
+            ...options.methods,
+        }
+        delete options.useExport
+    }
+
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true,
+        ...options.options,
+    }
+
+    return Component(options)
+}
+
+export default baseComponent

components/dist/helpers/checkIPhoneX.js

@@ -0,0 +1,29 @@
+/**
+ * 获取系统信息
+ */
+
+let systemInfo = null
+
+export const getSystemInfo = (isForce) => {
+    if (!systemInfo || isForce) {
+        try {
+            systemInfo = wx.getSystemInfoSync()
+        } catch(e) { /* Ignore */ }
+    }
+
+    return systemInfo
+}
+
+// iPhoneX 竖屏安全区域
+export const safeAreaInset = {
+    top: 88, // StatusBar & NavBar
+    left: 0,
+    right: 0,
+    bottom: 34, // Home Indicator
+}
+
+const isIPhoneX = ({ model, platform }) => {
+    return /iPhone X/.test(model) && platform === 'ios'
+}
+
+export const checkIPhoneX = (isForce) => isIPhoneX(getSystemInfo(isForce))

components/dist/helpers/classNames.js

@@ -0,0 +1,39 @@
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+/* global define */
+'use strict';
+
+var hasOwn = {}.hasOwnProperty;
+
+function classNames() {
+    var classes = [];
+
+    for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (!arg) continue;
+
+        var argType = typeof arg;
+
+        if (argType === 'string' || argType === 'number') {
+            classes.push(arg);
+        } else if (Array.isArray(arg) && arg.length) {
+            var inner = classNames.apply(null, arg);
+            if (inner) {
+                classes.push(inner);
+            }
+        } else if (argType === 'object') {
+            for (var key in arg) {
+                if (hasOwn.call(arg, key) && arg[key]) {
+                    classes.push(key);
+                }
+            }
+        }
+    }
+
+    return classes.join(' ');
+}
+
+export default classNames

components/dist/helpers/colors.js

@@ -0,0 +1,27 @@
+/**
+ * Don't modify this file!
+ * Colors generated by themes!
+ */
+
+/* eslint-disable */
+
+export const colors = {
+    'light': '#ddd',
+    'stable': '#b2b2b2',
+    'positive': '#387ef5',
+    'calm': '#11c1f3',
+    'balanced': '#33cd5f',
+    'energized': '#ffc900',
+    'assertive': '#ef473a',
+    'royal': '#886aea',
+    'dark': '#444',
+}
+
+export const isPresetColor = (color) => {
+    if (!color) {
+        return false
+    }
+    return colors[color] ? colors[color] : color
+}
+
+/* eslint-enable */

components/dist/helpers/compareVersion.js

@@ -0,0 +1,27 @@
+function compareVersion(v1, v2) {
+    const $v1 = v1.split('.')
+    const $v2 = v2.split('.')
+    const len = Math.max($v1.length, $v2.length)
+
+    while ($v1.length < len) {
+        $v1.push('0')
+    }
+    while ($v2.length < len) {
+        $v2.push('0')
+    }
+
+    for (let i = 0; i < len; i++) {
+        const num1 = parseInt($v1[i])
+        const num2 = parseInt($v2[i])
+
+        if (num1 > num2) {
+            return 1
+        } else if (num1 < num2) {
+            return -1
+        }
+    }
+
+    return 0
+}
+
+export default compareVersion

components/dist/helpers/computedBehavior.js

@@ -0,0 +1,48 @@
+import isEmpty from './isEmpty'
+import shallowEqual from './shallowEqual'
+
+const ALL_DATA_KEY = '**'
+
+const trim = (str = '') => str.replace(/\s/g, '')
+
+export default Behavior({
+    lifetimes: {
+        attached() {
+            this.initComputed()
+        },
+    },
+    definitionFilter(defFields) {
+        const { computed = {} } = defFields
+        const observers = Object.keys(computed).reduce((acc, name) => {
+            const [field, getter] = Array.isArray(computed[name]) ? computed[name] : [ALL_DATA_KEY, computed[name]]
+            return {
+                ...acc,
+                [field]: function(...args) {
+                    if (typeof getter === 'function') {
+                        const newValue = getter.apply(this, args)
+                        const oldValue = this.data[name]
+                        if (!isEmpty(newValue) && !shallowEqual(newValue, oldValue)) {
+                            this.setData({ [name]: newValue })
+                        }
+                    }
+                },
+            }
+        }, {})
+
+        Object.assign(defFields.observers = (defFields.observers || {}), observers)
+        Object.assign(defFields.methods = (defFields.methods || {}), {
+            initComputed: function(data = {}, isForce = false) {
+                if (!this.runInitComputed || isForce) {
+                    this.runInitComputed = false
+                    const context = this
+                    const result = { ...this.data, ...data }
+                    Object.keys(observers).forEach((key) => {
+                        const values = trim(key).split(',').reduce((acc, name) => ([...acc, result[name]]), [])
+                        observers[key].apply(context, values)
+                    })
+                    this.runInitComputed = true
+                }
+            },
+        })
+    },
+})

components/dist/helpers/createFieldsStore.js

@@ -0,0 +1,75 @@
+class FieldsStore {
+    constructor(fields = {}) {
+        this.fields = fields
+    }
+
+    setFields(fields) {
+        Object.assign(this.fields, fields)
+    }
+
+    updateFields(fields) {
+        this.fields = fields
+    }
+
+    clearField(name) {
+        delete this.fields[name]
+    }
+
+    getValueFromFields(name, fields) {
+        const field = fields[name]
+        if (field && 'value' in field) {
+            return field.value
+        }
+        return field.initialValue
+    }
+
+    getAllFieldsName() {
+        const { fields } = this
+        return fields ? Object.keys(fields) : []
+    }
+
+    getField(name) {
+        return {
+            ...this.fields[name],
+            name,
+        }
+    }
+
+    getFieldValuePropValue(fieldOption) {
+        const { name, valuePropName } = fieldOption
+        const field = this.getField(name)
+        const fieldValue = 'value' in field ? field.value : field.initialValue
+
+        return {
+            [valuePropName]: fieldValue,
+        }
+    }
+
+    getFieldValue(name) {
+        return this.getValueFromFields(name, this.fields)
+    }
+
+    getFieldsValue(names) {
+        const fields = names || this.getAllFieldsName()
+        return fields.reduce((acc, name) => {
+            acc[name] = this.getFieldValue(name)
+            return acc
+        }, {})
+    }
+
+    resetFields(ns) {
+        const { fields } = this
+        const names = ns || this.getAllFieldsName()
+        return names.reduce((acc, name) => {
+            const field = fields[name]
+            if (field) {
+                acc[name] = field.initialValue
+            }
+            return acc
+        }, {})
+    }
+}
+
+export default function createFieldsStore(fields) {
+    return new FieldsStore(fields)
+}

components/dist/helpers/debounce.js

@@ -0,0 +1,56 @@
+export default function debounce(func, wait, immediate) {
+    let timeout,
+        args,
+        context,
+        timestamp,
+        result
+
+    function later() {
+        const last = +(new Date()) - timestamp
+        if (last < wait && last >= 0) {
+            timeout = setTimeout(later, wait - last)
+        } else {
+            timeout = undefined
+            if (!immediate) {
+                result = func.apply(context, args)
+                if (!timeout) {
+                    context = undefined
+                    args = undefined
+                }
+            }
+        }
+    }
+
+    function debounced() {
+        context = this
+        args = arguments
+        timestamp = +(new Date())
+
+        const callNow = immediate && !timeout
+        if (!timeout) {
+            timeout = setTimeout(later, wait)
+        }
+
+        if (callNow) {
+            result = func.apply(context, args)
+            context = undefined
+            args = undefined
+        }
+
+        return result
+    }
+
+    function cancel() {
+        if (timeout !== undefined) {
+            clearTimeout(timeout)
+            timeout = undefined
+        }
+
+        context = undefined
+        args = undefined
+    }
+
+    debounced.cancel = cancel
+
+    return debounced
+}

components/dist/helpers/eventsMixin.js

@@ -0,0 +1,53 @@
+const defaultEvents = {
+    onChange() {},
+}
+
+export default function eventsMixin(params = { defaultEvents }) {
+    return Behavior({
+        lifetimes: {
+            created () {
+                this._oriTriggerEvent = this.triggerEvent
+                this.triggerEvent = this._triggerEvent
+            },
+        },
+        properties: {
+            events: {
+                type: Object,
+                value: defaultEvents,
+            },
+        },
+        data: {
+            inputEvents: defaultEvents,
+        },
+        definitionFilter(defFields) {
+            // set default data
+            Object.assign(defFields.data = (defFields.data || {}), {
+                inputEvents: Object.assign({}, defaultEvents, defFields.inputEvents),
+            })
+
+            // set default methods
+            Object.assign(defFields.methods = (defFields.methods || {}), {
+                _triggerEvent(name, params, runCallbacks = true, option) {
+                    const { inputEvents } = this.data
+                    const method = `on${name[0].toUpperCase()}${name.slice(1)}`
+                    const func = inputEvents[method]
+
+                    if (runCallbacks && typeof func === 'function') {
+                        func.call(this, params)
+                    }
+
+                    this._oriTriggerEvent(name, params, option)
+                },
+            })
+
+            // set default observers
+            Object.assign(defFields.observers = (defFields.observers || {}), {
+                events(newVal) {
+                    this.setData({
+                        inputEvents: Object.assign({}, defaultEvents, this.data.inputEvents, newVal),
+                    })
+                },
+            })
+        },
+    })
+}

components/dist/helpers/funcBehavior.js

@@ -0,0 +1,97 @@
+/**
+ * 过滤对象的函数属性
+ * @param {Object} opts
+ */
+const mergeOptionsToData = (opts = {}) => {
+    const options = Object.assign({}, opts)
+
+    for (const key in options) {
+        if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+            delete options[key]
+        }
+    }
+
+    return options
+}
+
+/**
+ * Simple bind, faster than native
+ *
+ * @param {Function} fn
+ * @param {Object} ctx
+ * @return {Function}
+ */
+const bind = (fn, ctx) => {
+    return (...args) => {
+        return args.length ? fn.apply(ctx, args) : fn.call(ctx)
+    }
+}
+
+/**
+ * Object assign
+ */
+const assign = (...args) => Object.assign({}, ...args)
+
+export default Behavior({
+    definitionFilter(defFields) {
+        defFields.data = mergeOptionsToData(defFields.data)
+        defFields.data.in = false
+        defFields.data.visible = false
+    },
+    methods: {
+        /**
+         * 过滤对象的函数属性
+         * @param {Object} opts
+         */
+        $$mergeOptionsToData: mergeOptionsToData,
+        /**
+         * 合并参数并绑定方法
+         *
+         * @param {Object} opts 参数对象
+         * @param {Object} fns 方法挂载的属性
+         */
+        $$mergeOptionsAndBindMethods (opts = {}, fns = this.fns) {
+            const options = Object.assign({}, opts)
+
+            for (const key in options) {
+                if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+                    fns[key] = bind(options[key], this)
+                    delete options[key]
+                }
+            }
+
+            return options
+        },
+        /**
+         * Promise setData
+         * @param {Array} args 参数对象
+         */
+        $$setData (...args) {
+            const params = assign({}, ...args)
+
+            return new Promise((resolve) => {
+                this.setData(params, resolve)
+            })
+        },
+        /**
+         * 延迟指定时间执行回调函数
+         * @param {Function} callback 回调函数
+         * @param {Number} timeout 延迟时间
+         */
+        $$requestAnimationFrame (callback = () => {}, timeout = 1000 / 60) {
+            return new Promise((resolve) => setTimeout(resolve, timeout)).then(callback)
+        },
+    },
+    /**
+     * 组件生命周期函数，在组件实例进入页面节点树时执行
+     */
+    created () {
+        this.fns = {}
+    },
+    /**
+     * 组件生命周期函数，在组件实例被从页面节点树移除时执行
+     */
+    detached () {
+        this.fns = {}
+    },
+})

components/dist/helpers/gestures.js

@@ -0,0 +1,50 @@
+/**
+ * 获取触摸点位置信息
+ */
+export const getTouchPoints = (nativeEvent, index = 0) => {
+    const touches = nativeEvent.touches
+    const changedTouches = nativeEvent.changedTouches
+    const hasTouches = touches && touches.length > 0
+    const hasChangedTouches = changedTouches && changedTouches.length > 0
+    const points = !hasTouches && hasChangedTouches ? changedTouches[index] : hasTouches ? touches[index] : nativeEvent
+
+    return {
+        x: points.pageX,
+        y: points.pageY,
+    }
+}
+
+/**
+ * 获取触摸点个数
+ */
+export const getPointsNumber = (e) => e.touches && e.touches.length || e.changedTouches && e.changedTouches.length
+
+/**
+ * 判断是否为同一点
+ */
+export const isEqualPoints = (p1, p2) => p1.x === p2.x && p1.y === p2.y
+
+/**
+ * 判断是否为相近的两点
+ */
+export const isNearbyPoints = (p1, p2, DOUBLE_TAP_RADIUS = 25) => {
+    const xMove = Math.abs(p1.x - p2.x)
+    const yMove = Math.abs(p1.y - p2.y)
+    return xMove < DOUBLE_TAP_RADIUS & yMove < DOUBLE_TAP_RADIUS
+}
+
+/**
+ * 获取两点之间的距离
+ */
+export const getPointsDistance = (p1, p2) => {
+    const xMove = Math.abs(p1.x - p2.x)
+    const yMove = Math.abs(p1.y - p2.y)
+    return Math.sqrt(xMove * xMove + yMove * yMove)
+}
+
+/**
+ * 获取触摸移动方向
+ */
+export const getSwipeDirection = (x1, x2, y1, y2) => {
+    return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
+}

components/dist/helpers/isEmpty.js

@@ -0,0 +1,19 @@
+/**
+ * Checks if a value is empty.
+ */
+function isEmpty(value) {
+    if (Array.isArray(value)) {
+        return value.length === 0
+    } else if (typeof value === 'object') {
+        if (value) {
+            for (const _ in value) {
+                return false
+            }
+        }
+        return true
+    } else {
+        return !value
+    }
+}
+
+export default isEmpty

components/dist/helpers/mergeOptionsToData.js

@@ -0,0 +1,17 @@
+/**
+ * 过滤对象的函数属性
+ * @param {Object} opts
+ */
+const mergeOptionsToData = (opts = {}) => {
+    const options = Object.assign({}, opts)
+
+    for (const key in options) {
+        if (options.hasOwnProperty(key) && typeof options[key] === 'function') {
+            delete options[key]
+        }
+    }
+
+    return options
+}
+
+export default mergeOptionsToData

components/dist/helpers/popupMixin.js

@@ -0,0 +1,314 @@
+import classNames from './classNames'
+import eventsMixin from './eventsMixin'
+
+const DEFAULT_TRIGGER = 'onClick'
+const CELL_NAME = '../cell/index'
+const FIELD_NAME = '../field/index'
+
+const defaultToolbar = {
+    title: '请选择',
+    cancelText: '取消',
+    confirmText: '确定',
+}
+
+const defaultEvents = {
+    onChange() {},
+    onConfirm() {},
+    onCancel() {},
+    onVisibleChange() {},
+    onValueChange() {},
+}
+
+const defaultPlatformProps = {
+    labelPropName: 'label',
+    format(values, props) {
+        return Array.isArray(values.displayValue) ? values.displayValue.join(',') : values.displayValue
+    },
+}
+
+const defaultFieldNames = {
+    label: 'label',
+    value: 'value',
+    children: 'children',
+}
+
+export default function popupMixin(selector = '#wux-picker', platformProps = defaultPlatformProps) {
+    return Behavior({
+        behaviors: [eventsMixin({ defaultEvents })],
+        properties: {
+            toolbar: {
+                type: Object,
+                value: defaultToolbar,
+            },
+            trigger: {
+                type: String,
+                value: DEFAULT_TRIGGER,
+            },
+            defaultVisible: {
+                type: Boolean,
+                value: false,
+            },
+            visible: {
+                type: Boolean,
+                value: false,
+            },
+            controlled: {
+                type: Boolean,
+                value: false,
+            },
+            disabled: {
+                type: Boolean,
+                value: false,
+            },
+        },
+        data: {
+            mounted: false,
+            popupVisible: false,
+            inputValue: [],
+        },
+        methods: {
+            /**
+             * 设置组件显示或隐藏
+             */
+            setVisibleState(popupVisible, callback = () => {}) {
+                if (this.data.popupVisible !== popupVisible) {
+                    const params = {
+                        mounted: true,
+                        inputValue: this.data.value, // forceUpdate
+                        popupVisible,
+                    }
+                    this.setData(popupVisible ? params : { popupVisible }, () => {
+                        // collect field component & forceUpdate
+                        if (popupVisible && this.hasFieldDecorator) {
+                            const field = this.getFieldElem()
+                            if (field) {
+                                field.changeValue(field.data.value)
+                            }
+                        }
+                        callback()
+                    })
+                }
+            },
+            /**
+             * 触发 visibleChange 事件
+             */
+            fireVisibleChange(popupVisible) {
+                if (this.data.popupVisible !== popupVisible) {
+                    if (!this.data.controlled) {
+                        this.setVisibleState(popupVisible)
+                    }
+                    this.setScrollValue(undefined)
+                    this.triggerEvent('visibleChange', { visible: popupVisible })
+                }
+            },
+            /**
+             * 打开
+             */
+            open() {
+                this.fireVisibleChange(true)
+            },
+            /**
+             * 关闭
+             */
+            close(callback) {
+                if (typeof callback === 'function') {
+                    const values = this.getPickerValue(this.scrollValue || this.data.inputValue)
+                    callback.call(this, this.formatPickerValue(values))
+                }
+                this.fireVisibleChange(false)
+            },
+            /**
+             * 组件关闭时重置其内部数据
+             */
+            onClosed() {
+                this.picker = null
+                this.setData({ mounted: false, inputValue: null })
+            },
+            /**
+             * 点击确定按钮时的回调函数
+             */
+            onConfirm() {
+                this.close((values) => {
+                    this.triggerEvent('change', values) // collect field component
+                    this.triggerEvent('confirm', values)
+                })
+            },
+            /**
+             * 点击取消按钮时的回调函数
+             */
+            onCancel() {
+                this.close((values) => this.triggerEvent('cancel', values))
+            },
+            /**
+             * 每列数据选择变化后的回调函数
+             */
+            onValueChange(e) {
+                if (!this.data.mounted) return
+                const { value } = e.detail
+                if (this.data.cascade) {
+                    this.setCasecadeScrollValue(value)
+                } else {
+                    this.setScrollValue(value)
+                }
+
+                this.updated(value, true)
+                this.triggerEvent('valueChange', this.formatPickerValue(e.detail))
+            },
+            /**
+             * 获取当前 picker 的值
+             */
+            getPickerValue(value = this.data.inputValue) {
+                this.picker = this.picker || this.selectComponent(selector)
+                return this.picker && this.picker.getValue(value)
+            },
+            /**
+             * 格式化 picker 返回值
+             */
+            formatPickerValue(values) {
+                return {
+                    ...values,
+                    [platformProps.labelPropName]: platformProps.format(values, this.data),
+                }
+            },
+            /**
+             * 获取 field 父元素
+             */
+            getFieldElem() {
+                return this.field = (this.field || this.getRelationNodes(FIELD_NAME)[0])
+            },
+            /**
+             * 设置子元素 props
+             */
+            setChildProps() {
+                if (this.data.disabled) return
+                const elements = this.getRelationNodes(CELL_NAME)
+                const { trigger = DEFAULT_TRIGGER } = this.data
+                if (elements.length > 0) {
+                    elements.forEach((inputElem) => {
+                        const { inputEvents } = inputElem.data
+                        const oriInputEvents = inputElem.data.oriInputEvents || { ...inputEvents }
+                        inputEvents[trigger] = (...args) => {
+                            if (oriInputEvents && oriInputEvents[trigger]) {
+                                oriInputEvents[trigger](...args)
+                            }
+                            this.onTriggerClick()
+                        }
+                        inputElem.setData({ oriInputEvents, inputEvents })
+                    })
+                }
+            },
+            /**
+             * 触发事件
+             */
+            onTriggerClick() {
+                this.fireVisibleChange(!this.data.popupVisible)
+            },
+            /**
+             * 阻止移动触摸
+             */
+            noop() {},
+            /**
+             * 更新值
+             */
+            updated(inputValue, isForce) {
+                if (!this.hasFieldDecorator || isForce) {
+                    if (this.data.inputValue !== inputValue) {
+                        this.setData({ inputValue })
+                    }
+                }
+            },
+            /**
+             * 记录每列数据的变化值
+             */
+            setScrollValue(value) {
+                this.scrollValue = value
+            },
+            /**
+             * 记录每列数据的变化值 - 针对于级联
+             */
+            setCasecadeScrollValue(value) {
+                if (value && this.scrollValue) {
+                    const length = this.scrollValue.length
+                    if (length === value.length && this.scrollValue[length - 1] === value[length - 1]) {
+                        return
+                    }
+                }
+                this.setScrollValue(value)
+            },
+        },
+        lifetimes: {
+            ready() {
+                const { defaultVisible, visible, controlled, value } = this.data
+                const popupVisible = controlled ? visible : defaultVisible
+
+                // 若 defaultFieldNames 存在，则缓存之，并传递给子组件，只生效一次
+                if ('defaultFieldNames' in this.data) {
+                    this.setData({
+                        fieldNames: Object.assign({}, defaultFieldNames, this.data.defaultFieldNames),
+                    })
+                }
+
+                this.mounted = true
+                this.scrollValue = undefined
+                this.setVisibleState(popupVisible)
+                this.setChildProps()
+            },
+            detached() {
+                this.mounted = false
+            },
+        },
+        definitionFilter(defFields) {
+            // set default child
+            Object.assign(defFields.relations = (defFields.relations || {}), {
+                [CELL_NAME]: {
+                    type: 'child',
+                    observer() {
+                        this.setChildProps()
+                    },
+                },
+                [FIELD_NAME]: {
+                    type: 'ancestor',
+                },
+            })
+
+            // set default classes
+            Object.assign(defFields.computed = (defFields.computed || {}), {
+                classes: ['prefixCls', function(prefixCls) {
+                    const wrap = classNames(prefixCls)
+                    const toolbar = `${prefixCls}__toolbar`
+                    const inner = `${prefixCls}__inner`
+                    const cancel = classNames(`${prefixCls}__button`, {
+                        [`${prefixCls}__button--cancel`]: true,
+                    })
+                    const confirm = classNames(`${prefixCls}__button`, {
+                        [`${prefixCls}__button--confirm`]: true,
+                    })
+                    const hover = `${prefixCls}__button--hover`
+                    const title = `${prefixCls}__title`
+
+                    return {
+                        wrap,
+                        toolbar,
+                        inner,
+                        cancel,
+                        confirm,
+                        hover,
+                        title,
+                    }
+                }],
+            })
+
+            // set default observers
+            Object.assign(defFields.observers = (defFields.observers || {}), {
+                visible(popupVisible) {
+                    if (this.data.controlled) {
+                        this.setVisibleState(popupVisible)
+                    }
+                },
+                value(value) {
+                    this.updated(value)
+                },
+            })
+        },
+    })
+}

components/dist/helpers/relationsBehavior.js

@@ -0,0 +1,67 @@
+import isEmpty from './isEmpty'
+import debounce from './debounce'
+
+/**
+ * bind func to obj
+ */
+function bindFunc(obj, method, observer) {
+    const oldFn = obj[method]
+    obj[method] = function(target) {
+        if (observer) {
+            observer.call(this, target, {
+                [method]: true,
+            })
+        }
+        if (oldFn) {
+            oldFn.call(this, target)
+        }
+    }
+}
+
+// default methods
+const methods = ['linked', 'linkChanged', 'unlinked']
+
+// extra props
+const extProps = ['observer']
+
+export default Behavior({
+    lifetimes: {
+        created() {
+            this._debounce = null
+        },
+        detached() {
+            if (this._debounce && this._debounce.cancel) {
+                this._debounce.cancel()
+            }
+        },
+    },
+    definitionFilter(defFields) {
+        const { relations } = defFields
+
+        if (!isEmpty(relations)) {
+            for (const key in relations) {
+                const relation = relations[key]
+
+                // bind func
+                methods.forEach((method) => bindFunc(relation, method, relation.observer))
+
+                // delete extProps
+                extProps.forEach((prop) => delete relation[prop])
+            }
+        }
+
+        Object.assign(defFields.methods = (defFields.methods || {}), {
+            getRelationsName: function(types = ['parent', 'child', 'ancestor', 'descendant']) {
+                return Object.keys(relations || {}).map((key) => {
+                    if (relations[key] && types.includes(relations[key].type)) {
+                        return key
+                    }
+                    return null
+                }).filter((v) => !!v)
+            },
+            debounce: function(func, wait = 0, immediate = false) {
+                return (this._debounce = this._debounce || debounce(func.bind(this), wait, immediate)).call(this)
+            },
+        })
+    },
+})

components/dist/helpers/safeAreaBehavior.js

@@ -0,0 +1,46 @@
+import { getSystemInfo, checkIPhoneX } from './checkIPhoneX'
+
+const defaultSafeArea = {
+    top: false,
+    bottom: false,
+}
+
+const setSafeArea = (params) => {
+    if (typeof params === 'boolean') {
+        return Object.assign({}, defaultSafeArea, {
+            top: params,
+            bottom: params,
+        })
+    } else if (params !== null && typeof params === 'object') {
+        return Object.assign({}, defaultSafeArea)
+    } else if (typeof params === 'string') {
+        return Object.assign({}, defaultSafeArea, {
+            [params]: true,
+        })
+    }
+    return defaultSafeArea
+}
+
+export default Behavior({
+    properties: {
+        safeArea: {
+            type: [Boolean, String, Object],
+            value: false,
+        },
+    },
+    observers: {
+        safeArea(newVal) {
+            this.setData({ safeAreaConfig: setSafeArea(newVal) })
+        },
+    },
+    definitionFilter(defFields) {
+        const { statusBarHeight } = getSystemInfo() || {}
+        const isIPhoneX = checkIPhoneX()
+
+        Object.assign(defFields.data = (defFields.data || {}), {
+            safeAreaConfig: defaultSafeArea,
+            statusBarHeight,
+            isIPhoneX,
+        })
+    },
+})

components/dist/helpers/safeSetDataBehavior.js

@@ -0,0 +1,57 @@
+export default Behavior({
+    lifetimes: {
+        created() {
+            this.nextCallback = null
+        },
+        detached() {
+            this.cancelNextCallback()
+        },
+    },
+    methods: {
+        /**
+         * safeSetData
+         * @param {Object} nextData 数据对象
+         * @param {Function} callback 回调函数
+         */
+        safeSetData(nextData, callback) {
+            this.pendingData = Object.assign({}, this.data, nextData)
+            callback = this.setNextCallback(callback)
+
+            this.setData(nextData, () => {
+                this.pendingData = null
+                callback()
+            })
+        },
+        /**
+         * 设置下一回调函数
+         * @param {Function} callback 回调函数
+         */
+        setNextCallback(callback) {
+            let active = true
+
+            this.nextCallback = (event) => {
+                if (active) {
+                    active = false
+                    this.nextCallback = null
+
+                    callback.call(this, event)
+                }
+            }
+
+            this.nextCallback.cancel = () => {
+                active = false
+            }
+
+            return this.nextCallback
+        },
+        /**
+         * 取消下一回调函数
+         */
+        cancelNextCallback() {
+            if (this.nextCallback !== null) {
+                this.nextCallback.cancel()
+                this.nextCallback = null
+            }
+        },
+    },
+})

components/dist/helpers/shallowEqual.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @typechecks
+ * 
+ */
+
+/*eslint-disable no-self-compare */
+
+'use strict';
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x, y) {
+    // SameValue algorithm
+    if (x === y) {
+        // Steps 1-5, 7-10
+        // Steps 6.b-6.e: +0 != -0
+        // Added the nonzero y check to make Flow happy, but it is redundant
+        return x !== 0 || y !== 0 || 1 / x === 1 / y;
+    } else {
+        // Step 6.a: NaN == NaN
+        return x !== x && y !== y;
+    }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA, objB) {
+    if (is(objA, objB)) {
+        return true;
+    }
+
+    if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+        return false;
+    }
+
+    var keysA = Object.keys(objA);
+    var keysB = Object.keys(objB);
+
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+
+    // Test for A's keys different from B.
+    for (var i = 0; i < keysA.length; i++) {
+        if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export default shallowEqual

components/dist/helpers/styleToCssString.js

@@ -0,0 +1,139 @@
+'use strict';
+
+/**
+ * CSS properties which accept numbers but are not in units of "px".
+ */
+var isUnitlessNumber = {
+    boxFlex: true,
+    boxFlexGroup: true,
+    columnCount: true,
+    flex: true,
+    flexGrow: true,
+    flexPositive: true,
+    flexShrink: true,
+    flexNegative: true,
+    fontWeight: true,
+    lineClamp: true,
+    lineHeight: true,
+    opacity: true,
+    order: true,
+    orphans: true,
+    widows: true,
+    zIndex: true,
+    zoom: true,
+
+    // SVG-related properties
+    fillOpacity: true,
+    strokeDashoffset: true,
+    strokeOpacity: true,
+    strokeWidth: true
+};
+
+/**
+ * @param {string} prefix vendor-specific prefix, eg: Webkit
+ * @param {string} key style name, eg: transitionDuration
+ * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
+ * WebkitTransitionDuration
+ */
+function prefixKey(prefix, key) {
+    return prefix + key.charAt(0).toUpperCase() + key.substring(1);
+}
+
+/**
+ * Support style names that may come passed in prefixed by adding permutations
+ * of vendor prefixes.
+ */
+var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
+
+// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
+// infinite loop, because it iterates over the newly added props too.
+Object.keys(isUnitlessNumber).forEach(function(prop) {
+    prefixes.forEach(function(prefix) {
+        isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
+    });
+});
+
+var msPattern = /^ms-/;
+
+var _uppercasePattern = /([A-Z])/g;
+
+/**
+ * Hyphenates a camelcased string, for example:
+ *
+ *   > hyphenate('backgroundColor')
+ *   < "background-color"
+ *
+ * For CSS style names, use `hyphenateStyleName` instead which works properly
+ * with all vendor prefixes, including `ms`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenate(string) {
+    return string.replace(_uppercasePattern, '-$1').toLowerCase();
+}
+
+/**
+ * Hyphenates a camelcased CSS property name, for example:
+ *
+ *   > hyphenateStyleName('backgroundColor')
+ *   < "background-color"
+ *   > hyphenateStyleName('MozTransition')
+ *   < "-moz-transition"
+ *   > hyphenateStyleName('msTransition')
+ *   < "-ms-transition"
+ *
+ * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
+ * is converted to `-ms-`.
+ *
+ * @param {string} string
+ * @return {string}
+ */
+function hyphenateStyleName(string) {
+    return hyphenate(string).replace(msPattern, '-ms-');
+}
+
+var isArray = Array.isArray;
+var keys = Object.keys;
+
+var counter = 1;
+// Follows syntax at https://developer.mozilla.org/en-US/docs/Web/CSS/content,
+// including multiple space separated values.
+var unquotedContentValueRegex = /^(normal|none|(\b(url\([^)]*\)|chapter_counter|attr\([^)]*\)|(no-)?(open|close)-quote|inherit)((\b\s*)|$|\s+))+)$/;
+
+function buildRule(key, value) {
+    if (!isUnitlessNumber[key] && typeof value === 'number') {
+        value = '' + value + 'px';
+    } else if (key === 'content' && !unquotedContentValueRegex.test(value)) {
+        value = "'" + value.replace(/'/g, "\\'") + "'";
+    }
+
+    return hyphenateStyleName(key) + ': ' + value + ';  ';
+}
+
+function styleToCssString(rules) {
+    var result = ''
+    if (typeof rules === 'string') {
+        rules = rules.trim()
+        return rules.slice(-1) === ";" ? `${rules} ` : `${rules}; `
+    }
+    if (!rules || keys(rules).length === 0) {
+        return result;
+    }
+    var styleKeys = keys(rules);
+    for (var j = 0, l = styleKeys.length; j < l; j++) {
+        var styleKey = styleKeys[j];
+        var value = rules[styleKey];
+
+        if (isArray(value)) {
+            for (var i = 0, len = value.length; i < len; i++) {
+                result += buildRule(styleKey, value[i]);
+            }
+        } else {
+            result += buildRule(styleKey, value);
+        }
+    }
+    return result;
+}
+
+export default styleToCssString

components/dist/index.js

@@ -0,0 +1,67 @@
+/**
+ * Wux Weapp 3.8.7
+ * 一套组件化、可复用、易扩展的微信小程序 UI 组件库
+ * https://github.com/wux-weapp/wux-weapp#readme
+ *
+ * Copyright 2017-2021 skyvow
+ *
+ * Released under the MIT License
+ *
+ * Released on: 2021-4-12
+ */
+
+import $wuxCountDown from './countdown/index'
+import $wuxCountUp from './countup/index'
+
+/**
+ * 使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象
+ * @param {String} selector 节点选择器
+ * @param {Object} ctx 页面栈或组件的实例，默认为当前页面栈实例
+ */
+export const getCtx = (selector, ctx = getCurrentPages()[getCurrentPages().length - 1]) => {
+    const componentCtx = ctx.selectComponent(selector)
+
+    if (!componentCtx) {
+        throw new Error('无法找到对应的组件，请按文档说明使用组件')
+    }
+
+    return componentCtx
+}
+
+const version = '3.8.7'
+const $wuxActionSheet = (selector = '#wux-actionsheet', ctx) => getCtx(selector, ctx)
+const $wuxBackdrop = (selector = '#wux-backdrop', ctx) => getCtx(selector, ctx)
+const $wuxCalendar = (selector = '#wux-calendar', ctx) => getCtx(selector, ctx)
+const $wuxDialog = (selector = '#wux-dialog', ctx) => getCtx(selector, ctx)
+const $wuxForm = (selector = '#wux-form', ctx) => getCtx(selector, ctx)
+const $wuxGallery = (selector = '#wux-gallery', ctx) => getCtx(selector, ctx)
+const $wuxKeyBoard = (selector = '#wux-keyboard', ctx) => getCtx(selector, ctx)
+const $wuxLoading = (selector = '#wux-loading', ctx) => getCtx(selector, ctx)
+const $wuxNotification = (selector = '#wux-notification', ctx) => getCtx(selector, ctx)
+const $startWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).triggerRefresh()
+const $stopWuxRefresher = (selector = '#wux-refresher', ctx) => getCtx(selector, ctx).finishPullToRefresh()
+const $stopWuxLoader = (selector = '#wux-refresher', ctx, isEnd) => getCtx(selector, ctx).finishLoadmore(isEnd)
+const $wuxSelect = (selector = '#wux-select', ctx) => getCtx(selector, ctx)
+const $wuxToast = (selector = '#wux-toast', ctx) => getCtx(selector, ctx)
+const $wuxToptips = (selector = '#wux-toptips', ctx) => getCtx(selector, ctx)
+
+export {
+    version,
+	$wuxCountDown,
+	$wuxCountUp,
+	$wuxActionSheet,
+	$wuxBackdrop,
+	$wuxCalendar,
+	$wuxDialog,
+	$wuxForm,
+	$wuxGallery,
+	$wuxKeyBoard,
+	$wuxLoading,
+	$wuxNotification,
+	$startWuxRefresher,
+	$stopWuxRefresher,
+	$stopWuxLoader,
+	$wuxSelect,
+	$wuxToast,
+	$wuxToptips
+}

components/dist/landscape/index.js

@@ -0,0 +1,66 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-landscape',
+        },
+        newPrefixCls: {
+            type: String,
+            value: '',
+        },
+        visible: {
+            type: Boolean,
+            value: false,
+        },
+        mask: {
+            type: Boolean,
+            value: true,
+            observer(newVal) {
+                this.setData({ showMask: newVal })
+            },
+        },
+        maskClosable: {
+            type: Boolean,
+            value: false,
+        },
+        closable: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        showMask: true,
+    },
+    computed: {
+        classes: ['prefixCls, showMask', function(prefixCls, showMask) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--has-mask`]: showMask,
+            })
+            const popup = `${prefixCls}__popup`
+            const popupBody = `${prefixCls}__popup-body`
+            const popupClose = `${prefixCls}__popup-close`
+            const inner = `${prefixCls}__inner`
+            const close = `${prefixCls}__close`
+            const x = `${prefixCls}__close-x`
+
+            return {
+                wrap,
+                popup,
+                popupBody,
+                popupClose,
+                inner,
+                close,
+                x,
+            }
+        }],
+    },
+    methods: {
+        onClose() {
+            this.triggerEvent('close', { visible: !this.data.visible })
+        },
+    },
+    attached() {},
+})

components/dist/landscape/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-popup": "../popup/index"
+    }
+}

components/dist/landscape/index.wxml

@@ -0,0 +1,22 @@
+<wux-popup
+    wux-content-class="{{ classes.popup }}"
+    wux-body-class="{{ classes.popupBody }}"
+    wux-close-class="{{ classes.popupClose }}"
+    visible="{{ visible }}"
+    hasHeader="{{ false }}"
+    hasFooter="{{ false }}"
+    mask="{{ showMask }}"
+    maskClosable="{{ maskClosable }}"
+    bind:close="onClose"
+    newPrefixCls="{{ newPrefixCls }}"
+>
+	<view class="wux-class {{ classes.wrap }}">
+	    <view class="{{ classes.inner }}">
+	    	<slot></slot>
+	    </view>
+        <view class="{{ classes.close }}" wx:if="{{ closable }}" bindtap="onClose">
+            <!-- <text class="{{ classes.x }}"></text> -->
+            <image class="close" src="/images/home_popup_close.png"></image>
+        </view>
+	</view>
+</wux-popup>

components/dist/landscape/index.wxss

@@ -0,0 +1,36 @@
+.wux-landscape__popup {
+  background-color: transparent!important
+}
+.wux-landscape__popup-body {
+  padding: 0!important
+}
+.wux-landscape__inner {
+  padding: 30rpx;
+  font-size: 30rpx;
+  line-height: 1.5;
+  color: rgba(0,0,0,.65)
+}
+.wux-landscape__inner > image {
+  width: 100%;
+  max-width: 100%
+}
+.wux-landscape__close {
+  position: relative;
+  display: inline-block;
+  margin-top: 10rpx
+}
+.wux-landscape__close image {
+  width: 96rpx;
+  height: 96rpx;
+}
+.wux-landscape__close-x {
+  display: inline-block;
+  width: 48rpx;
+  height: 48rpx;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}
+.wux-landscape--has-mask .wux-landscape__close-x {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}

components/dist/popup/index.js

@@ -0,0 +1,194 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+import styleToCssString from '../helpers/styleToCssString'
+import { $wuxBackdrop } from '../index'
+
+baseComponent({
+    useSafeArea: true,
+    externalClasses: ['wux-content-class', 'wux-header-class', 'wux-body-class', 'wux-footer-class', 'wux-close-class'],
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-popup',
+        },
+        newPrefixCls: {
+            type: String,
+            value: '',
+        },
+        animationPrefixCls: {
+            type: String,
+            value: 'wux-animate',
+        },
+        title: {
+            type: String,
+            value: '',
+        },
+        content: {
+            type: String,
+            value: '',
+        },
+        extra: {
+            type: String,
+            value: '',
+        },
+        position: {
+            type: String,
+            value: 'center',
+            observer: 'getTransitionName',
+        },
+        wrapStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        closable: {
+            type: Boolean,
+            value: false,
+        },
+        mask: {
+            type: Boolean,
+            value: true,
+        },
+        maskClosable: {
+            type: Boolean,
+            value: true,
+        },
+        visible: {
+            type: Boolean,
+            value: false,
+            observer: 'setPopupVisible',
+        },
+        zIndex: {
+            type: Number,
+            value: 1000,
+        },
+        hasHeader: {
+            type: Boolean,
+            value: true,
+        },
+        hasFooter: {
+            type: Boolean,
+            value: true,
+        },
+        mountOnEnter: {
+            type: Boolean,
+            value: true,
+        },
+        unmountOnExit: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        transitionName: '',
+        popupVisible: false,
+        extStyle: '',
+    },
+    computed: {
+        classes: ['prefixCls, position, safeAreaConfig, isIPhoneX', function(prefixCls, position, safeAreaConfig, isIPhoneX) {
+            const wrap = classNames(`${prefixCls}-position`, {
+                [`${prefixCls}-position--${position}`]: position,
+                [`${prefixCls}-position--is-iphonex`]: safeAreaConfig.bottom && isIPhoneX,
+            })
+            const content = `${prefixCls}__content`
+            const hd = `${prefixCls}__hd`
+            const title = `${prefixCls}__title`
+            const bd = `${prefixCls}__bd`
+            const ft = `${prefixCls}__ft`
+            const extra = `${prefixCls}__extra`
+            const close = `${prefixCls}__close`
+            const x = `${prefixCls}__close-x`
+
+            return {
+                wrap,
+                content,
+                hd,
+                title,
+                bd,
+                ft,
+                extra,
+                close,
+                x,
+            }
+        }],
+    },
+    methods: {
+        /**
+         * 点击关闭按钮事件
+         */
+        close() {
+            this.triggerEvent('close')
+        },
+        /**
+         * 点击蒙层事件
+         */
+        onMaskClick() {
+            if (this.data.maskClosable) {
+                this.close()
+            }
+        },
+        /**
+         * 组件关闭后的回调函数
+         */
+        onExited() {
+            this.triggerEvent('closed')
+        },
+        /**
+         * 获取过渡的类名
+         */
+        getTransitionName(value = this.data.position) {
+            const { animationPrefixCls } = this.data
+            let transitionName = ''
+
+            switch (value) {
+                    case 'top':
+                        transitionName = `${animationPrefixCls}--slideInDown`
+                        break
+                    case 'right':
+                        transitionName = `${animationPrefixCls}--slideInRight`
+                        break
+                    case 'bottom':
+                        transitionName = `${animationPrefixCls}--slideInUp`
+                        break
+                    case 'left':
+                        transitionName = `${animationPrefixCls}--slideInLeft`
+                        break
+                    default:
+                        transitionName = `${animationPrefixCls}--fadeIn`
+                        break
+            }
+
+            this.setData({ transitionName })
+        },
+        /**
+         * 设置 popup 组件的显示隐藏
+         */
+        setPopupVisible(popupVisible) {
+            if (this.data.popupVisible !== popupVisible) {
+                this.setData({ popupVisible })
+                this.setBackdropVisible(popupVisible)
+            }
+        },
+        /**
+         * 设置 backdrop 组件的显示隐藏
+         */
+        setBackdropVisible(visible) {
+            if (this.data.mask && this.$wuxBackdrop) {
+                this.$wuxBackdrop[visible ? 'retain' : 'release']()
+            }
+        },
+    },
+    created() {
+        if (this.data.mask) {
+            this.$wuxBackdrop = $wuxBackdrop('#wux-backdrop', this)
+        }
+    },
+    attached() {
+        this.setPopupVisible(this.data.visible)
+        this.getTransitionName()
+    },
+})

components/dist/popup/index.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index",
+        "wux-backdrop": "../backdrop/index"
+    }
+}

components/dist/popup/index.wxml

@@ -0,0 +1,26 @@
+<wux-backdrop id="wux-backdrop" wx:if="{{ mask }}" bind:click="onMaskClick" zIndex="{{ zIndex }}" />
+<view class="wux-class {{ classes.wrap }}" style="{{ extStyle }}">
+    <wux-animation-group wux-class="{{ prefixCls }} {{ newPrefixCls }}" in="{{ popupVisible }}" classNames="{{ transitionName }}" bind:exited="onExited" wrapStyle="{{ { zIndex } }}" mountOnEnter="{{ mountOnEnter }}" unmountOnExit="{{ unmountOnExit }}">
+        <view class="wux-content-class {{ classes.content }}">
+            <view class="wux-header-class {{ classes.hd }}" wx:if="{{ hasHeader }}">
+                <view class="{{ classes.title }}" wx:if="{{ title }}">{{ title }}</view>
+                <block wx:else>
+                    <slot name="header"></slot>
+                </block>
+            </view>
+            <view class="wux-body-class {{ classes.bd }}">
+                <view wx:if="{{ content }}">{{ content }}</view>
+                <slot></slot>
+            </view>
+            <view class="wux-footer-class {{ classes.ft }}" wx:if="{{ hasFooter }}">
+                <view class="{{ classes.extra }}" wx:if="{{ extra }}">{{ extra }}</view>
+                <block wx:else>
+                    <slot name="footer"></slot>
+                </block>
+            </view>
+            <view class="wux-close-class {{ classes.close }}" wx:if="{{ closable }}" bindtap="close">
+                <text class="{{ classes.x }}"></text>
+            </view>
+        </view>
+    </wux-animation-group>
+</view>

components/dist/popup/index.wxss

@@ -0,0 +1,121 @@
+.wux-popup {
+  position: fixed;
+  z-index: 1000;
+  width: 80%;
+  max-width: 600rpx
+}
+
+.wux-popup-widtn {
+  width: 100%;
+  max-width: 100%
+}
+
+.wux-popup-position.wux-popup-position--center .wux-popup {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%)
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__content {
+  border-radius: 8rpx
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__hd {
+  padding: 1.3em 1.6em .5em
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__bd {
+  padding: 0 1.6em .8em
+}
+.wux-popup-position.wux-popup-position--center .wux-popup__ft::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1PX;
+  border-top: 1PX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 0;
+  transform: scaleY(.5)
+}
+.wux-popup-position.wux-popup-position--top .wux-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  max-width: 100%
+}
+.wux-popup-position.wux-popup-position--right .wux-popup {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 80%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%
+}
+.wux-popup-position.wux-popup-position--bottom .wux-popup {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: 100%
+}
+.wux-popup-position.wux-popup-position--left .wux-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 80%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%
+}
+.wux-popup-position.wux-popup-position--is-iphonex .wux-popup__content {
+  padding-bottom: 68rpx
+}
+.wux-popup__content {
+  position: relative;
+  background-color: #fff;
+  border: 0;
+  background-clip: padding-box;
+  height: 100%;
+  text-align: center;
+  overflow: hidden
+}
+.wux-popup__title {
+  font-weight: 400;
+  font-size: 36rpx;
+  color: rgba(0,0,0,.85)
+}
+.wux-popup__bd {
+  min-height: 80rpx;
+  font-size: 30rpx;
+  line-height: 1.3;
+  word-wrap: break-word;
+  word-break: break-all;
+  color: rgba(0,0,0,.45)
+}
+.wux-popup__ft {
+  position: relative;
+  line-height: 96rpx;
+  font-size: 36rpx;
+  display: -ms-flexbox;
+  display: flex
+}
+.wux-popup__close {
+  border: 0;
+  padding: 6rpx;
+  background-color: transparent;
+  outline: 0;
+  position: absolute;
+  top: 12rpx;
+  right: 12rpx;
+  height: 42rpx;
+  width: 42rpx
+}
+.wux-popup__close-x {
+  display: inline-block;
+  width: 30rpx;
+  height: 30rpx;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22%23888%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M1.414%200l28.284%2028.284-1.414%201.414L0%201.414z%22%2F%3E%3Cpath%20d%3D%22M28.284%200L0%2028.284l1.414%201.414L29.698%201.414z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")
+}

components/dist/progress/index.js

@@ -0,0 +1,103 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+import styleToCssString from '../helpers/styleToCssString'
+import { colors } from '../helpers/colors'
+
+const defaultColors = {
+    normal: colors.positive,
+    progress: colors.positive,
+    error: colors.assertive,
+    success: colors.balanced,
+}
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-progress',
+        },
+        percent: {
+            type: Number,
+            value: 0,
+            observer: 'updateStyle',
+        },
+        strokeWidth: {
+            type: Number,
+            value: 10,
+            observer: 'updateStyle',
+        },
+        activeColor: {
+            type: String,
+            value: '',
+            observer: 'updateStyle',
+        },
+        backgroundColor: {
+            type: String,
+            value: '#f3f3f3',
+        },
+        status: {
+            type: String,
+            value: 'normal',
+            observer: 'updateStyle',
+        },
+        shape: {
+            type: String,
+            value: 'round',
+        },
+        barStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        showInfo: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        width: 0,
+        style: '',
+        extStyle: '',
+    },
+    computed: {
+        classes: ['prefixCls, shape, status', function(prefixCls, shape, status) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--${shape}`]: shape,
+                [`${prefixCls}--${status}`]: status,
+            })
+            const outer = `${prefixCls}__outer`
+            const inner = `${prefixCls}__inner`
+            const bar = `${prefixCls}__bar`
+            const text = `${prefixCls}__text`
+
+            return {
+                wrap,
+                outer,
+                inner,
+                bar,
+                text,
+            }
+        }],
+    },
+    methods: {
+        updateStyle(opts = {}) {
+            const { percent, strokeWidth, activeColor, status } = Object.assign({}, this.data, opts)
+            const width = percent < 0 ? 0 : percent > 100 ? 100 : percent
+            const height = strokeWidth > 0 ? strokeWidth : 10
+            const backgroundColor = activeColor ? activeColor : (defaultColors[status] || defaultColors['normal'])
+            const style = `background-color: ${backgroundColor}; width: ${width}%; height: ${height}px;`
+
+            this.setData({
+                width,
+                style,
+            })
+        },
+    },
+    attached() {
+        this.updateStyle()
+    },
+})

components/dist/progress/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/dist/progress/index.wxml

@@ -0,0 +1,8 @@
+<view class="wux-class {{ classes.wrap }}">
+    <view class="{{ classes.outer }}">
+    	<view class="{{ classes.inner }}" style="background-color: {{ backgroundColor }}">
+    		<view class="{{ classes.bar }}" style="{{ style }} {{ extStyle }}"></view>
+    	</view>
+    </view>
+    <view class="{{ classes.text }}" wx:if="{{ showInfo }}">{{ width + '%' }}</view>
+</view>

components/dist/progress/index.wxss

@@ -0,0 +1,51 @@
+.wux-progress {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+  align-items: center
+}
+.wux-progress__outer {
+  -ms-flex: 1;
+  flex: 1
+}
+.wux-progress__inner {
+  background-color: #f3f3f3
+}
+.wux-progress__bar {
+  background-color: #33cd5f;
+  transition: all .3s linear 0s
+}
+.wux-progress__text {
+  margin-left: 10rpx;
+  text-align: left;
+  vertical-align: middle
+}
+.wux-progress--round .wux-progress__bar,
+.wux-progress--round .wux-progress__inner {
+  border-radius: 200rpx
+}
+.wux-progress--progress .wux-progress__bar {
+  position: relative
+}
+.wux-progress--progress .wux-progress__bar::before {
+  content: '';
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #fff;
+  border-radius: 20rpx;
+  animation: progress 2s ease-in-out infinite
+}
+@keyframes progress {
+  0% {
+    opacity: .3;
+    width: 0
+  }
+  100% {
+    opacity: 0;
+    width: 100%
+  }
+}

components/dist/search-bar/index.js

@@ -0,0 +1,203 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+import styleToCssString from '../helpers/styleToCssString'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-search-bar',
+        },
+        defaultValue: {
+            type: String,
+            value: '',
+        },
+        value: {
+            type: String,
+            value: '',
+            observer(newVal) {
+                if (this.data.controlled) {
+                    this.updated(newVal)
+                }
+            },
+        },
+        placeholder: {
+            type: String,
+            value: '搜索',
+        },
+        placeholderStyle: {
+            type: [String, Object],
+            value: '',
+            observer(newVal) {
+                this.setData({
+                    extStyle: styleToCssString(newVal),
+                })
+            },
+        },
+        placeholderClass: {
+            type: String,
+            value: 'input-placeholder',
+        },
+        disabled: {
+            type: Boolean,
+            value: false,
+        },
+        maxlength: {
+            type: Number,
+            value: 140,
+        },
+        cursorSpacing: {
+            type: Number,
+            value: 11,
+        },
+        focus: {
+            type: Boolean,
+            value: false,
+            observer(newVal) {
+                this.setData({
+                    inputFocus: newVal,
+                })
+            },
+        },
+        confirmType: {
+            type: String,
+            value: 'search',
+        },
+        confirmHold: {
+            type: Boolean,
+            value: false,
+        },
+        cursor: {
+            type: Number,
+            value: -1,
+        },
+        selectionStart: {
+            type: Number,
+            value: -1,
+        },
+        selectionEnd: {
+            type: Number,
+            value: -1,
+        },
+        adjustPosition: {
+            type: Boolean,
+            value: true,
+        },
+        clear: {
+            type: Boolean,
+            value: false,
+        },
+        cancelText: {
+            type: String,
+            value: '取消',
+        },
+        showCancel: {
+            type: Boolean,
+            value: false,
+        },
+        controlled: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        inputValue: '',
+        inputFocus: false,
+        extStyle: '',
+    },
+    computed: {
+        classes: ['prefixCls, disabled, inputFocus', function(prefixCls, disabled, inputFocus) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--focus`]: inputFocus,
+                [`${prefixCls}--disabled`]: disabled,
+            })
+            const form = `${prefixCls}__form`
+            const box = `${prefixCls}__box`
+            const search = `${prefixCls}__search`
+            const input = `${prefixCls}__input`
+            const clear = `${prefixCls}__clear`
+            const label = `${prefixCls}__label`
+            const icon = `${prefixCls}__icon`
+            const text = `${prefixCls}__text`
+            const cancel = `${prefixCls}__cancel`
+
+            return {
+                wrap,
+                form,
+                box,
+                search,
+                input,
+                clear,
+                label,
+                icon,
+                text,
+                cancel,
+            }
+        }],
+    },
+    methods: {
+        updated(inputValue) {
+            if (this.data.inputValue !== inputValue) {
+                this.setData({
+                    inputValue,
+                })
+            }
+        },
+        onChange(e) {
+            if (!this.data.controlled) {
+                this.updated(e.detail.value)
+            }
+
+            if (!this.data.inputFocus) {
+                this.setData({
+                    inputFocus: true,
+                })
+            }
+
+            this.triggerEvent('change', e.detail)
+        },
+        onFocus(e) {
+            this.setData({
+                inputFocus: true,
+            })
+
+            this.triggerEvent('focus', e.detail)
+        },
+        onBlur(e) {
+            this.setData({
+                inputFocus: false,
+            })
+
+            this.triggerEvent('blur', e.detail)
+        },
+        onConfirm(e) {
+            this.triggerEvent('confirm', e.detail)
+        },
+        onClear() {
+            const { controlled, inputValue } = this.data
+
+            this.setData({
+                inputValue: controlled ? inputValue : '',
+                inputFocus: true,
+            })
+
+            this.triggerEvent('clear', { value: '' })
+        },
+        onCancel() {
+            this.triggerEvent('cancel', { value: this.data.inputValue })
+        },
+        onClick() {
+            if (this.data.disabled) return
+
+            this.setData({
+                inputFocus: true,
+            })
+        },
+    },
+    attached() {
+        const { defaultValue, value, controlled } = this.data
+        const inputValue = controlled ? value : defaultValue
+
+        this.updated(inputValue)
+    },
+})

components/dist/search-bar/index.json

@@ -0,0 +1,3 @@
+{
+    "component": true
+}

components/dist/search-bar/index.wxml

@@ -0,0 +1,35 @@
+<view class="wux-class wux-class-flex {{ classes.wrap }}">
+    <view class="{{ classes.form }}">
+        <view class="{{ classes.box }}" wx:if="{{ showCancel || inputFocus || (inputValue && inputValue.length > 0) }}">
+            <icon class="{{ classes.search }}" type="search" color="#B2B2B2" size="14" />
+            <input
+            	type="text"
+            	class="{{ classes.input }}"
+            	value="{{ inputValue }}"
+            	placeholder="{{ placeholder }}"
+                placeholder-style="{{ extStyle }}"
+                placeholder-class="{{ placeholderClass }}"
+                disabled="{{ disabled }}"
+                maxlength="{{ maxlength }}"
+                cursor-spacing="{{ cursorSpacing }}"
+                focus="{{ inputFocus }}"
+                confirm-type="{{ confirmType }}"
+                confirm-hold="{{ confirmHold }}"
+                cursor="{{ cursor }}"
+                selection-start="{{ selectionStart }}"
+                selection-end="{{ selectionEnd }}"
+                adjust-position="{{ adjustPosition }}"
+            	bindinput="onChange"
+            	bindfocus="onFocus"
+            	bindblur="onBlur"
+            	bindconfirm="onConfirm"
+            />
+            <icon class="{{ classes.clear }}" type="clear" color="#B2B2B2" size="14" wx:if="{{ clear && !disabled && inputValue && inputValue.length > 0 }}" bindtap="onClear" />
+        </view>
+        <label class="{{ classes.label }}" wx:if="{{ !inputFocus && !inputValue }}" bindtap="onClick">
+            <icon class="{{ classes.icon }}" type="search" color="#B2B2B2" size="14" />
+            <text class="{{ classes.text }}">{{ placeholder }}</text>
+        </label>
+    </view>
+    <view class="{{ classes.cancel }}" wx:if="{{ showCancel || inputFocus || (inputValue && inputValue.length > 0) }}" bindtap="onCancel">{{ cancelText }}</view>
+</view>

components/dist/search-bar/index.wxss

@@ -0,0 +1,135 @@
+.wux-class-flex {
+  display: flex;
+  align-items: center;
+}
+
+.wux-search-bar {
+  position: relative;
+  padding: 16rpx 20rpx;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  background-color: #efeff4
+}
+
+.wux-search-bar::before {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 2rPX;
+  /* border-top: 2rPX solid #d9d9d9; */
+  color: #d9d9d9;
+  transform-origin: 0 0;
+  transform: scaleY(.5)
+}
+
+.wux-search-bar::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  height: 2rPX;
+  border-bottom: 2rPX solid #d9d9d9;
+  color: #d9d9d9;
+  transform-origin: 0 100%;
+  transform: scaleY(.5)
+}
+
+.wux-search-bar__form {
+  position: relative;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+  height: 56rpx;
+  overflow: hidden;
+  background-color: #fff;
+  background-clip: padding-box;
+  border-radius: 8rpx
+}
+
+.wux-search-bar__box {
+  position: relative;
+  padding-left: 60rpx;
+  padding-right: 60rpx;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 1
+}
+
+.wux-search-bar__input {
+  padding: 8rpx 0;
+  width: 100%;
+  height: 56rpx;
+  min-height: inherit;
+  border: 0;
+  font-size: 28rpx;
+  line-height: 56rpx;
+  box-sizing: border-box;
+  background: 0 0
+}
+
+.wux-search-bar__label {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: absolute;
+  top: 2rpx;
+  right: 2rpx;
+  bottom: 2rpx;
+  left: 2rpx;
+  z-index: 2;
+  border-radius: 8rpx;
+  text-align: center;
+  color: rgba(0, 0, 0, .45);
+  background: #fff
+}
+
+.wux-search-bar__text {
+  display: inline-block;
+  font-size: 28rpx;
+  vertical-align: middle;
+  margin-left: 10rpx
+}
+
+.wux-search-bar__cancel {
+  margin-left: 20rpx;
+  line-height: 56rpx;
+  /* color: #33cd5f; */
+  white-space: nowrap;
+  font-size: 36rpx;
+  font-family: PingFangSC-Medium;
+  color: #FA7D22;
+}
+
+.wux-search-bar__icon {
+  vertical-align: middle
+}
+
+.wux-search-bar__search {
+  position: absolute;
+  left: 20rpx;
+  top: 16rpx
+}
+
+.wux-search-bar__clear {
+  display: none;
+  position: absolute;
+  top: 16rpx;
+  right: 0;
+  padding: 0 20rpx
+}
+
+.wux-search-bar--focus .wux-search-bar__clear {
+  display: block
+}
+
+.wux-search-bar--disabled {
+  opacity: .3
+}

components/dist/spin/index.js

@@ -0,0 +1,77 @@
+import baseComponent from '../helpers/baseComponent'
+import classNames from '../helpers/classNames'
+
+baseComponent({
+    properties: {
+        prefixCls: {
+            type: String,
+            value: 'wux-spin',
+        },
+        classNames: {
+            type: null,
+            value: 'wux-animate--fadeIn',
+        },
+        tip: {
+            type: String,
+            value: '',
+        },
+        size: {
+            type: String,
+            value: 'default',
+        },
+        spinning: {
+            type: Boolean,
+            value: true,
+            observer: 'updated',
+        },
+        nested: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    data: {
+        spinVisible: true,
+    },
+    computed: {
+        classes: ['prefixCls, size, nested, tip, spinVisible', function(prefixCls, size, nested, showText, spinVisible) {
+            const wrap = classNames(prefixCls, {
+                [`${prefixCls}--${size}`]: size,
+                [`${prefixCls}--nested`]: nested,
+                [`${prefixCls}--show-text`]: showText,
+            })
+            const anim = !nested ? `${prefixCls}__spinning` : `${prefixCls}__spinning--nested`
+            const dots = `${prefixCls}__dots`
+            const dot = `${prefixCls}__dot`
+            const tip = `${prefixCls}__tip`
+            const container = classNames(`${prefixCls}__container`, {
+                [`${prefixCls}__container--blur`]: spinVisible,
+            })
+
+            return {
+                wrap,
+                anim,
+                dots,
+                dot,
+                tip,
+                container,
+            }
+        }],
+    },
+    methods: {
+        updated(spinVisible) {
+            if (this.data.nested) {
+                if(spinVisible) {
+                    this.setData({
+                        spinVisible,
+                    }) 
+                } else {
+                    setTimeout(() => {
+                        this.setData({
+                            spinVisible,
+                        })
+                    }, 500);
+                }
+            }
+        },
+    },
+})

components/dist/spin/index.json

@@ -0,0 +1,6 @@
+{
+    "component": true,
+    "usingComponents": {
+        "wux-animation-group": "../animation-group/index"
+    }
+}

components/dist/spin/index.wxml

@@ -0,0 +1,14 @@
+<view class="wux-class {{ classes.wrap }}">
+    <wux-animation-group wux-class="{{ classes.anim }}" in="{{ spinVisible }}" classNames="{{ classNames }}">
+        <view class="{{ classes.dots }}">
+            <view class="{{ classes.dot }}">dot</view>
+            <view class="{{ classes.dot }}">dot</view>
+            <view class="{{ classes.dot }}">dot</view>
+            <view class="{{ classes.dot }}">dot</view>
+        </view>
+        <view class="{{ classes.tip }}" wx:if="{{ tip }}">{{ tip }}</view>
+    </wux-animation-group>
+    <view class="{{ classes.container }}" wx:if="{{ nested }}">
+        <slot></slot>
+    </view>
+</view>

components/dist/spin/index.wxss

@@ -0,0 +1,168 @@
+.wux-spin {
+  position: relative;
+  display: inline-block
+}
+
+.wux-spin__spinning {
+  opacity: 1;
+  position: static;
+  display: inline-block;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 28rpx;
+  line-height: 1.5;
+  color: #FA7D22
+}
+
+.wux-spin__spinning--nested {
+  vertical-align: middle;
+  text-align: center;
+  font-size: 28rpx;
+  line-height: 1.5;
+  color: #FA7D22;
+  display: block;
+  position: absolute;
+  height: 100%;
+  max-height: 640rpx;
+  width: 100%;
+  z-index: 4
+}
+
+.wux-spin--nested {
+  display: block;
+  height: 100%;
+}
+
+.wux-spin--nested .wux-spin__tip {
+  position: absolute;
+  top: 50%;
+  width: 100%;
+  padding-top: 12rpx;
+  text-shadow: 0 2rpx 4rpx #fff
+}
+
+.wux-spin__dots {
+  width: 40rpx;
+  height: 40rpx;
+  overflow: hidden;
+  display: inline-block;
+  transform: rotate(45deg);
+  animation: rotate 1.2s infinite linear
+}
+
+.wux-spin--nested .wux-spin__dots {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -20rpx
+}
+
+.wux-spin__dot {
+  width: 18rpx;
+  height: 18rpx;
+  border-radius: 100%;
+  background-color: #FA7D22;
+  transform: scale(.75);
+  display: block;
+  position: absolute;
+  opacity: .3;
+  animation: spinMove 1s infinite linear alternate;
+  transform-origin: 50% 50%;
+  text-indent: -999em
+}
+
+.wux-spin__dot:first-child {
+  left: 0;
+  top: 0
+}
+
+.wux-spin__dot:nth-child(2) {
+  right: 0;
+  top: 0;
+  animation-delay: .4s
+}
+
+.wux-spin__dot:nth-child(3) {
+  right: 0;
+  bottom: 0;
+  animation-delay: .8s
+}
+
+.wux-spin__dot:nth-child(4) {
+  left: 0;
+  bottom: 0;
+  animation-delay: 1.2s
+}
+
+.wux-spin--show-text.wux-spin--nested .wux-spin__dots {
+  margin-top: -40rpx
+}
+
+.wux-spin__container {
+  position: relative;
+  transition: opacity .3s;
+  zoom: 1
+}
+
+.wux-spin__container--blur {
+  overflow: hidden;
+  opacity: .5;
+  filter: blur(1rpx);
+  transform: translateZ(0)
+}
+
+.wux-spin--small .wux-spin__tip {
+  padding-top: 6rpx
+}
+
+.wux-spin--small .wux-spin__dots {
+  width: 28rpx;
+  height: 28rpx
+}
+
+.wux-spin--small.wux-spin--nested .wux-spin__dots {
+  margin: -14rpx
+}
+
+.wux-spin--small .wux-spin__dot {
+  width: 12rpx;
+  height: 12rpx
+}
+
+.wux-spin--small.wux-spin--show-text.wux-spin--nested .wux-spin__dots {
+  margin-top: -34rpx
+}
+
+.wux-spin--large .wux-spin__tip {
+  padding-top: 24rpx
+}
+
+.wux-spin--large .wux-spin__dots {
+  width: 64rpx;
+  height: 64rpx
+}
+
+.wux-spin--large.wux-spin--nested .wux-spin__dots {
+  margin: -32rpx
+}
+
+.wux-spin--large .wux-spin__dot {
+  width: 28rpx;
+  height: 28rpx
+}
+
+.wux-spin--large.wux-spin--show-text.wux-spin--nested .wux-spin__dots {
+  margin-top: -52rpx
+}
+
+@keyframes rotate {
+  to {
+    transform: rotate(405deg)
+  }
+}
+
+@keyframes spinMove {
+  to {
+    opacity: 1
+  }
+}

components/local/change-env/change-env.js

@@ -0,0 +1,106 @@
+// components/local/change-env/change-env.js
+// app.js
+import {
+  login
+} from '../../../utils/http';
+Component({
+  /**
+   * 组件的属性列表
+   */
+  options: {
+    addGlobalClass: true
+  },
+  properties: {
+    visible: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    inputVal: "",
+    env: false,
+    items: [{
+        value: 'ijolijoli',
+        name: '正式环境',
+        checked: true
+      },
+      {
+        value: 'dev',
+        name: '测试环境',
+        checked: false
+      },
+    ]
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 监听输入框
+    onChangeInput(e) {
+      this.setData({
+        inputVal: e.detail.value
+      })
+    },
+
+    // 点击确定事件
+    onConfirm() {
+      let {
+        env,
+        items
+      } = this.data;
+      if (env) {
+        items.forEach((item, index) => {
+          if (item.checked) {
+            wx.setStorageSync('env', item.value)
+            this.setData({
+              visible: false,
+              env: false,
+            }, () => {
+              login()
+              wx.reLaunch({
+                url: '/pages/home/home',
+              })
+            })
+          }
+        })
+        return;
+      }
+      if (this.data.inputVal == 'ijolijoli') {
+        this.setData({
+          env: true
+        })
+      } else {
+        wx.showToast({
+          title: '密码错误',
+          icon: 'none'
+        })
+      }
+      console.log(this.data.inputVal)
+    },
+
+    // 点击取消事件
+    onCancel() {
+      this.setData({
+        visible: false,
+        env: false
+      })
+    },
+
+    // 监听却换环境
+    onChangeRadio(e) {
+      console.log('radio发生change事件，携带value值为：', e.detail.value)
+      const items = this.data.items
+      for (let i = 0, len = items.length; i < len; ++i) {
+        items[i].checked = items[i].value === e.detail.value
+      }
+      this.setData({
+        items
+      })
+    },
+  }
+})

components/local/change-env/change-env.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "wux-landscape": "../../dist/landscape/index"
+  }
+}

components/local/change-env/change-env.wxml

@@ -0,0 +1,15 @@
+<wux-landscape visible="{{ visible }}"  maskClosable="{{ true }}" closable="{{ false }}" bind:close="onCancelUse">
+  <view class="use-popup flex-column" wx:if="{{ visible }}">
+    <input wx:if="{{!env}}" class="weui-input" auto-focus placeholder="请输入密码" bindinput="onChangeInput" />
+    <radio-group bindchange="onChangeRadio" wx:if="{{env}}">
+      <label class="flex" wx:for="{{items}}" wx:key="index">
+        <radio value="{{item.value}}" checked="{{item.checked}}"/>
+        <view style="margin-left: 30rpx;">{{item.name}}</view>
+      </label>
+    </radio-group>
+    <view class="use-btn flex">
+      <view class="btn cancel flex-center" bindtap="onCancel">取消</view>
+      <view class="btn confirm flex-center" bindtap="onConfirm">确定</view>
+    </view>
+  </view>
+</wux-landscape>

components/local/change-env/change-env.wxss

@@ -0,0 +1,53 @@
+.use-popup {
+  width: 558rpx;
+  /* height: 350rpx; */
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  overflow: hidden;
+  /* justify-content: center; */
+  justify-content: space-evenly;
+}
+
+/* .use-popup .red {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #E95564;
+} */
+
+.use-popup input {
+  text-align: left;
+  padding: 30rpx;
+}
+
+radio-group {
+  padding: 30rpx 30rpx 0;
+}
+
+radio-group label {
+  margin-bottom: 30rpx;
+}
+
+.use-btn {
+  padding: 30rpx;
+  border-top: 1rpx solid #ccc;
+}
+
+.use-btn .btn {
+  flex: 1;
+  /* width: 208rpx; */
+  height: 92rpx;
+  /* margin: 0 48rpx; */
+  font-size: 36rpx;
+  color: #FA7D22;
+  border-radius: 52rpx;
+  border: 2rpx solid #FA7D22;
+}
+
+
+.use-btn .confirm {
+  /* margin-top: 28rpx; */
+  margin-left: 46rpx;
+  background-color: #FA7D22;
+  color: #fff;
+}

components/local/couponItem/couponItem.js

@@ -0,0 +1,124 @@
+// components/local/couponItem/couponItem.js
+Component({
+  // options: {
+  //   addGlobalClass: true
+  // },
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    source: {
+      type: String,
+      value: '' // 场景 默认为空（简单的列表），可选值：checkBox（勾选操作）
+    },
+    item: {
+      type: Object,
+      value: {}
+    },
+    couponStatus: {
+      type: Number,
+      value: 0 // 0待使用，1已使用，2已过期
+    },
+    checkStatus: {
+      type: Boolean,
+      value: false // 是否选中 0 未选择， 1选中
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    showRuleText: false,
+    marks: {
+      // 优惠券类型，1直接抵扣券，2满减券，3全额减免券，4卡券
+      1: '抵扣券',
+      2: '满减券',
+      3: '全额减免券',
+      4: '项目卡券'
+    }
+  },
+
+  /**
+   * 组件生命周期函数-在组件实例进入页面节点树时执行)
+   */
+  attached: function () {
+    let { item } = this.data
+    // 数据结构不一致，对齐参数
+    this.setData({
+      'item.coupon_type':
+        item.coupon_type == undefined ? item.type : item.coupon_type
+    })
+  },
+
+  // /**
+  //  * 组件数据字段监听器，用于监听 properties 和 data 的变化
+  //  */
+  // observers: {
+  //   checkStatus: function (checkStatus) {
+  //     checkStatus == this.data.checkStatus
+  //   }
+  // },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 点击整条优惠券
+     */
+    clickItem: function (e) {
+      let { source } = this.data
+      if (source == 'checkbox') {
+        this.check(e)
+      }
+    },
+    /**
+     * 展开、收起规则
+     */
+    clickRuleText: function () {
+      this.setData({
+        showRuleText: !this.data.showRuleText
+      })
+    },
+    /**
+     * 点击使用按钮、勾选按钮
+     */
+    check: function (e) {
+      // 判断美妆产品的优惠条件
+      if(this.data.item.couponSource=='goods'){
+        if (this.data.item.coupon_type == 2) {
+          if(this.data.item.allow_time!=1){
+            wx.showToast({
+              title: '抱歉,优惠券没到使用日期',
+              icon: 'none'
+            })
+            return
+          }
+          let full_price = this.data.item.full_price
+          let price = this.data.item.showMoneyGood
+          if (Number(price) < Number(full_price)) {
+            wx.showToast({
+              title: '订单不满足优惠条件',
+              icon: 'none'
+            })
+            return
+          }
+        }
+      }
+      if (this.data.couponStatus != 0) {
+        return
+      }
+      let checkStatus = !this.data.checkStatus
+      this.setData(
+        {
+          checkStatus: checkStatus
+        },
+        this.triggerEvent('check', {
+          id: e.currentTarget.dataset.id,
+          checkStatus: checkStatus
+        })
+      )
+    }
+  }
+})

components/local/couponItem/couponItem.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/local/couponItem/couponItem.wxml

@@ -0,0 +1,35 @@
+<view class="component-coupon-item flex-justify-center flex-column {{couponStatus == 0 ? '' : 'invalid' }}">
+  <view class="coupon-item-mark">{{marks[item.coupon_type]}}</view>
+  <view class="coupon-item-content" bindtap="clickItem" data-id="{{item.id}}">
+    <view class="coupon-item-money">
+      <view class="coupon-item-money-detail flex-row justify-between" style="margin-top: 30rpx;" wx:if="{{item.coupon_type == 3 || item.coupon_type == 4}}">
+        <text class="yuan" style="font-size: 44rpx">全免</text>
+      </view>
+      <view class="coupon-item-money-detail flex-row justify-between {{item.coupon_type == 2 ? 'line2' : ''}}" wx:else>
+        <text class="currency">¥</text>
+        <text class="yuan-price">{{item.price}}</text>
+        <!-- <text class="fen">.00</text> -->
+      </view>
+      <text class="coupon-item-limit-text ellipsis" wx:if="{{item.coupon_type == 2}}">满{{item.full_price}}元可用</text>
+    </view>
+    <view class="coupon-item-title flex-col justify-between flex1">
+      <text class="ellipsis">{{item.coupon_name}}</text>
+      <text class="coupon-time ellipsis">有效期{{item.ex_time}}</text>
+    </view>
+    <view wx:if="{{!source&&couponStatus==0}}" class="coupon-item-btn1 flex-col justify-center align-center" catchtap="check" data-id="{{item.id}}">
+      去使用 
+    </view>
+    <view wx:elif="{{source=='checkbox'}}" class="coupon-item-btn2 flex-col justify-center align-center" catchtap="check" data-id="{{item.id}}">
+      <image src="{{checkStatus ? '/images/icon_17.png' : '/images/icon_16.png'}}"></image>
+    </view>
+  </view>
+  <!-- 0待使用，1已使用，2已过期 -->
+  <image class="coupon-item-status-icon" wx:if="{{couponStatus == 1 || couponStatus == 2}}" src="{{couponStatus == 1 ? '/images/my/icon_coupon_used.png' : '/images/my/icon_coupon_expired.png'}}"></image>
+  <view class="coupon-item-line flex-col"></view>
+  <view class="coupon-item-rules flex-row flex-center" bindtap="clickRuleText">
+    <text class="coupon-item-rules-text {{showRuleText ? ' rules-show ' : ' ellipsis '}}">{{item.coupon_desc}}</text>
+    <view class="flex-center" style="justify-content: flex-end;">
+      <image style="{{showRuleText ? 'transform: rotate(180deg);' : ''}}" src="{{couponStatus == 0 ? '/images/icon_arrow_2.png' : '/images/icon_arrow_gray.png'}}"></image>
+    </view>
+  </view>
+</view>

components/local/couponItem/couponItem.wxss

@@ -0,0 +1,274 @@
+/* components/local/couponItem/couponItem.wxss */
+.flex {
+  display: flex;
+}
+
+.flex-start {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.flex-align-center {
+  display: flex;
+  align-items: center;
+}
+
+.flex-align-baseline {
+  display: flex;
+  align-items: baseline;
+}
+
+.flex-justify-center {
+  display: flex;
+  justify-content: center;
+}
+
+.flex-justify-space-around {
+  display: flex;
+  justify-content: space-around;
+}
+
+.flex-justify-space-between {
+  display: flex;
+  justify-content: space-between;
+}
+
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  /* align-items: flex-start;
+  justify-content: flex-start; */
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.component-coupon-item text {
+  font-family: PingFangSC-Medium, PingFang SC;
+}
+
+.component-coupon-item.invalid {
+  background: #E6E6E6 !important;
+}
+
+.component-coupon-item.invalid text {
+  color: #B1B1B1 !important;
+}
+
+.component-coupon-item.invalid .coupon-item-mark {
+  background: #B3B3B3 !important;
+}
+
+.component-coupon-item.invalid .coupon-item-btn1 {
+  background: #B3B3B3 !important;
+}
+
+.component-coupon-item.invalid .coupon-item-line {
+  border-top: 2rpx dashed #D7D7D7 !important;
+}
+
+.component-coupon-item .flex2 {
+  flex: 2;
+}
+
+.component-coupon-item .flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.component-coupon-item .flex-col {
+  display: flex;
+  flex-direction: column;
+}
+
+.component-coupon-item {
+  position: relative;
+  background: #FFF4E6;
+  border-radius: 24rpx;
+  overflow: hidden;
+  padding: 20rpx 28rpx 12rpx;
+  text-align: left;
+}
+
+.coupon-item-mark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 36rpx;
+  background: #875617;
+  border-radius: 24rpx 0rpx 24rpx 0rpx;
+  text-align: center;
+  line-height: 36rpx;
+  font-size: 20rpx;
+  font-weight: 500;
+  color: #FFFFFF;
+  padding: 0 16rpx;
+}
+
+.coupon-item-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.coupon-item-money {
+  flex: 1.2;
+  overflow: hidden;
+}
+
+.coupon-item-money text {
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #FF3007;
+}
+
+.coupon-item-money-detail {
+  align-items: baseline;
+  margin-top: 30rpx;
+}
+
+.coupon-item-money-detail.line2 {
+  margin-top: 10rpx;
+}
+
+.coupon-item-money-detail.line2 .yuan {
+  line-height: 70rpx;
+}
+
+.coupon-item-money-detail .currency {
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  line-height: 40rpx;
+}
+
+.coupon-item-money-detail .yuan {
+  font-size: 56rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  line-height: 80rpx;
+}
+.coupon-item-money-detail .yuan-price{
+  font-size: 42rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  line-height: 80rpx;
+}
+
+.coupon-item-money-detail .fen {
+  font-size: 28rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  line-height: 40rpx;
+}
+
+.coupon-item-limit-text {
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC !important;
+  font-weight: 400;
+  color: #FF3007;
+  line-height: 34rpx;
+}
+
+.coupon-item-btn1 {
+  width: 104rpx;
+  height: 50rpx;
+  background: #FA7D22;
+  border-radius: 25rpx;
+  font-size: 24rpx;
+  font-family: PingFang-SC-Medium, PingFang-SC;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 50rpx;
+  text-align: center;
+}
+
+.coupon-item-btn2 {
+  width: 48rpx;
+  height: 48rpx;
+  font-family: PingFang-SC-Medium, PingFang-SC;
+  font-weight: 500;
+  line-height: 50rpx;
+  text-align: right;
+}
+
+.coupon-item-btn2 image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.coupon-item-title {
+  margin-top: 10rpx;
+  /* margin-left: 36rpx; */
+  flex: 2.5;
+  overflow: hidden;
+}
+
+.coupon-item-title text {
+  width: 100%;
+  height: 44rpx;
+  line-height: 44rpx;
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #875617;
+  margin-top: 16rpx;
+}
+
+.coupon-item-title .coupon-time {
+  height: 34rpx;
+  line-height: 34rpx;
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #875617;
+}
+
+.coupon-item-line {
+  height: 2rpx;
+  border: none;
+  border-top: 2rpx dashed #FFDFB6;
+  margin: 16rpx 0 10rpx;
+}
+
+.coupon-item-rules {
+  justify-content: space-between;
+}
+
+.coupon-item-rules image {
+  width: 48rpx;
+  height: 48rpx;
+}
+
+.coupon-item-rules-text {
+  height: 32rpx;
+  line-height: 32rpx;
+  font-size: 24rpx;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #C38029;
+  margin-right: 56rpx;
+}
+
+.coupon-item-rules-text.rules-show {
+  height: auto;
+  margin-top: 8rpx;
+}
+
+.coupon-item-status-icon {
+  width: 144rpx;
+  height: 144rpx;
+  position: absolute;
+  top: 36rpx;
+  right: 28rpx;
+}

components/local/ec-canvas/ec-canvas.js

@@ -0,0 +1,250 @@
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.')
+  v2 = v2.split('.')
+  const len = Math.max(v1.length, v2.length)
+
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i])
+    const num2 = parseInt(v2[i])
+
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+  return 0
+}
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    },
+
+    forceUseOldCanvas: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  data: {
+    isUseNewCanvas: false
+  },
+
+  ready: function () {
+    // Disable prograssive because drawImage doesn't support DOM as parameter
+    // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+    echarts.registerPreprocessor(option => {
+      if (option && option.series) {
+        if (option.series.length > 0) {
+          option.series.forEach(series => {
+            series.progressive = 0;
+          });
+        }
+        else if (typeof option.series === 'object') {
+          option.series.progressive = 0;
+        }
+      }
+    });
+
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.getSystemInfoSync().SDKVersion
+
+      const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
+      const forceUseOldCanvas = this.data.forceUseOldCanvas;
+      const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
+      this.setData({ isUseNewCanvas });
+
+      if (forceUseOldCanvas && canUseNewCanvas) {
+        console.warn('开发者强制使用旧canvas,建议关闭');
+      }
+
+      if (isUseNewCanvas) {
+        // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+        // 2.9.0 可以使用 <canvas type="2d"></canvas>
+        this.initByNewWay(callback);
+      } else {
+        const isValid = compareVersion(version, '1.9.91') >= 0
+        if (!isValid) {
+          console.error('微信基础库版本过低，需大于等于 1.9.91。'
+            + '参见：https://github.com/ecomfe/echarts-for-weixin'
+            + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+          return;
+        } else {
+          console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
+          this.initByOldWay(callback);
+        }
+      }
+    },
+
+    initByOldWay(callback) {
+      // 1.9.91 <= version < 2.9.0：原来的方式初始化
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+      const canvas = new WxCanvas(ctx, this.data.canvasId, false);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+      const canvasDpr = 1
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height, canvasDpr);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height,
+            canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
+          });
+        }
+      }).exec();
+    },
+
+    initByNewWay(callback) {
+      // version >= 2.9.0：使用新的方式初始化
+      const query = wx.createSelectorQuery().in(this)
+      query
+        .select('.ec-canvas')
+        .fields({ node: true, size: true })
+        .exec(res => {
+          const canvasNode = res[0].node
+          this.canvasNode = canvasNode
+
+          const canvasDpr = wx.getSystemInfoSync().pixelRatio
+          const canvasWidth = res[0].width
+          const canvasHeight = res[0].height
+
+          const ctx = canvasNode.getContext('2d')
+
+          const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
+          echarts.setCanvasCreator(() => {
+            return canvas
+          })
+
+          if (typeof callback === 'function') {
+            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+            this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else {
+            this.triggerEvent('init', {
+              canvas: canvas,
+              width: canvasWidth,
+              height: canvasHeight,
+              dpr: canvasDpr
+            })
+          }
+        })
+    },
+    canvasToTempFilePath(opt) {
+      if (this.data.isUseNewCanvas) {
+        // 新版
+        const query = wx.createSelectorQuery().in(this)
+        query
+          .select('.ec-canvas')
+          .fields({ node: true, size: true })
+          .exec(res => {
+            const canvasNode = res[0].node
+            opt.canvas = canvasNode
+            wx.canvasToTempFilePath(opt)
+          })
+      } else {
+        // 旧的
+        if (!opt.canvasId) {
+          opt.canvasId = this.data.canvasId;
+        }
+        ctx.draw(true, () => {
+          wx.canvasToTempFilePath(opt, this);
+        });
+      }
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'end');
+      }
+    }
+  }
+});
+
+function wrapTouch(event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i];
+    touch.offsetX = touch.x;
+    touch.offsetY = touch.y;
+  }
+  return event;
+}

components/local/ec-canvas/ec-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/local/ec-canvas/ec-canvas.wxml

@@ -0,0 +1,9 @@
+<!-- 新的：接口对其了H5 -->
+<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init"></canvas>
+<!-- 旧的 -->
+<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init"></canvas>
+
+<!-- 新的：接口对其了H5 -->
+<!-- <canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> -->
+<!-- 旧的 -->
+<!-- <canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> -->

components/local/ec-canvas/ec-canvas.wxss

@@ -0,0 +1,4 @@
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

components/local/ec-canvas/wx-canvas.js

@@ -0,0 +1,105 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    }
+    else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

components/local/home-skeleton/home-skeleton.js

@@ -0,0 +1,63 @@
+// components/local/homeSkeleton/homeSkeleton.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  options: {
+    multipleSlots: true
+  },
+  properties: {
+    isLoading: {
+      type: Boolean,
+      value: true,
+      observer(newVal) {
+        if(newVal) {
+          var animation= wx.createAnimation({}) //创建一个动画实例
+          animation.opacity(1).step({
+            duration:0
+          });
+          this.setData({
+            showpic:animation.export(),
+            hidden:true
+          });
+          return;
+        }
+        this.skeletonVis();
+      }
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    hidden:true
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    skeletonVis() {
+      var animation= wx.createAnimation({}) //创建一个动画实例
+      animation.opacity(0).step({
+        duration:500
+      });
+      // this.setData({
+      //   showpic:animation.export(),
+      // });
+      
+      setTimeout(() => {
+        this.setData({
+          showpic:animation.export(),
+        },() => {
+          setTimeout(() => {
+            this.setData({
+              hidden:false,
+            })
+          }, 500);
+        });
+      }, 500);
+    }
+  }
+})

components/local/home-skeleton/home-skeleton.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/local/home-skeleton/home-skeleton.wxml

@@ -0,0 +1,21 @@
+<view class="content">
+
+  <view class="home-skeleton" animation="{{showpic}}" hidden="{{!hidden}}">
+    <view class="home-skeleton-swiper"></view>
+    <view class="home-skeleton-magic">
+      <view class="item jgc" wx:key="index" wx:for="{{10}}"></view>
+    </view>
+    <view class="home-skeleton-img"></view>
+
+    <view class="home-skeleton-magic" style="margin-top: 40rpx;">
+      <view class="item hd" wx:key="index" wx:for="{{2}}"></view>
+    </view>
+    <view class="home-skeleton-magic">
+      <view class="item hd" wx:key="index" wx:for="{{2}}"></view>
+    </view>
+  </view>
+  
+  <view class="home-page">
+    <slot></slot>
+  </view>
+</view>

components/local/home-skeleton/home-skeleton.wxss

@@ -0,0 +1,72 @@
+
+.home-skeleton {
+  position: fixed;
+  background: white;
+  height: 100%;
+  height: 100%;
+  z-index: 1000000000000;
+}
+
+.home-skeleton.hidden {
+  z-index: 0;
+}
+
+.home-page {
+  position: relative;
+  z-index: 1;
+}
+
+.home-skeleton view{
+  margin: 20rpx;
+  background: #eeeeee;
+  /* position: absolute; */
+  border-radius: 8rpx;
+  animation-duration: 2s;
+  animation-name: shine;
+  animation-iteration-count: infinite;
+}
+@keyframes shine {
+  0% {
+    opacity: .4;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: .4;
+  }
+}
+
+.home-skeleton-swiper {
+  height: 150px;
+}
+
+.home-skeleton-magic {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.home-skeleton .home-skeleton-magic {
+  background: transparent;
+}
+
+.home-skeleton-magic .jgc {
+  width: 100rpx;
+  height: 100rpx;
+  flex-wrap: wrap;
+}
+
+.home-skeleton-img {
+  height: 100rpx;
+}
+
+.home-skeleton-magic .hd {
+  flex: 1;
+  height: 140rpx;
+  margin: 0;
+}
+
+.home-skeleton-magic .hd:first-child {
+  margin-right: 20rpx;
+}

components/local/navigation/navigation.js

@@ -0,0 +1,25 @@
+// components/local/navigation/navigation.js
+const app = getApp()
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {},
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    version: 'cover_all',
+    navBarHeight: app.globalData.navBarData.navBarHeight, //导航栏高度
+    menuRight: app.globalData.navBarData.menuRight, // 胶囊距右方间距（方保持左、右间距一致）
+    menuBotton: app.globalData.navBarData.menuBotton,
+    menuHeight: app.globalData.navBarData.menuHeight,
+    navBarBgClass: app.globalData.navBarData.navBarBgClass // 导航栏背景色
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {}
+})

components/local/navigation/navigation.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/local/navigation/navigation.wxml

@@ -0,0 +1,14 @@
+<!-- components/local/navigation/navigation.wxml -->
+<cover-view class="nav" style="height:{{navBarHeight}}px;z-index: 999;">
+  <cover-view class="nav-main" wx:if="{{version == 'normal'}}">
+    <!-- 胶囊区域 -->
+    <cover-view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;">
+      <!-- 导航内容区域 -->
+      <slot></slot>
+    </cover-view>
+  </cover-view>
+  <cover-view class="nav-main" wx:elif="{{version == 'cover_all'}}">
+    <!-- 导航内容区域 -->
+    <slot></slot>
+  </cover-view>
+</cover-view>

components/local/navigation/navigation.wxss

@@ -0,0 +1,19 @@
+/* components/local/navigation/navigation.wxss */
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+}
+
+.nav-main {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.nav .capsule-box {
+  position: absolute;
+  box-sizing: border-box;
+  width: 100%;
+}

components/local/wxParse/html2json.js

@@ -0,0 +1,319 @@
+/**
+ * html2Json 改造来自: https://github.com/Jxck/html2json
+ * 
+ * 
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ * 
+ * github地址: https://github.com/icindy/wxParse
+ * 
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+var __placeImgeUrlHttps = "https";
+var __emojisReg = '';
+var __emojisBaseSrc = '';
+var __emojis = {};
+var wxDiscode = require('./wxDiscode.js');
+var HTMLParser = require('./htmlparser.js');
+// Empty Elements - HTML 5
+var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
+// Block Elements - HTML 5
+var block = makeMap("br,a,code,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video");
+
+// Inline Elements - HTML 5
+var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var");
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
+
+// Attributes that have their values filled in disabled="disabled"
+var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
+
+// Special Elements (can contain anything)
+var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
+function makeMap(str) {
+    var obj = {}, items = str.split(",");
+    for (var i = 0; i < items.length; i++)
+        obj[items[i]] = true;
+    return obj;
+}
+
+function q(v) {
+    return '"' + v + '"';
+}
+
+function removeDOCTYPE(html) {
+    return html
+        .replace(/<\?xml.*\?>\n/, '')
+        .replace(/<.*!doctype.*\>\n/, '')
+        .replace(/<.*!DOCTYPE.*\>\n/, '');
+}
+
+function trimHtml(html) {
+  return html
+        .replace(/\r?\n+/g, '')
+        .replace(/<!--.*?-->/ig, '')
+        .replace(/\/\*.*?\*\//ig, '')
+        .replace(/[ ]+</ig, '<')
+}
+
+
+function html2json(html, bindName) {
+    //处理字符串
+    html = removeDOCTYPE(html);
+    html = trimHtml(html);
+    html = wxDiscode.strDiscode(html);
+    //生成node节点
+    var bufArray = [];
+    var results = {
+        node: bindName,
+        nodes: [],
+        images:[],
+        imageUrls:[]
+    };
+    var index = 0;
+    HTMLParser(html, {
+        start: function (tag, attrs, unary) {
+            //debug(tag, attrs, unary);
+            // node for this element
+            var node = {
+                node: 'element',
+                tag: tag,
+            };
+
+            if (bufArray.length === 0) {
+                node.index = index.toString()
+                index += 1
+            } else {
+                var parent = bufArray[0];
+                if (parent.nodes === undefined) {
+                    parent.nodes = [];
+                }
+                node.index = parent.index + '.' + parent.nodes.length
+            }
+
+            if (block[tag]) {
+                node.tagType = "block";
+            } else if (inline[tag]) {
+                node.tagType = "inline";
+            } else if (closeSelf[tag]) {
+                node.tagType = "closeSelf";
+            }
+
+            if (attrs.length !== 0) {
+                node.attr = attrs.reduce(function (pre, attr) {
+                    var name = attr.name;
+                    var value = attr.value;
+                    if (name == 'class') {
+                        console.dir(value);
+                        //  value = value.join("")
+                        node.classStr = value;
+                    }
+                    // has multi attibutes
+                    // make it array of attribute
+                    if (name == 'style') {
+                        // console.dir(value);
+                        //  value = value.join("")
+                        node.styleStr = value;
+                    }
+                    if (value.match(/ /)) {
+                        value = value.split(' ');
+                    }
+                    
+
+                    // if attr already exists
+                    // merge it
+                    if (pre[name]) {
+                        if (Array.isArray(pre[name])) {
+                            // already array, push to last
+                            pre[name].push(value);
+                        } else {
+                            // single value, make it array
+                            pre[name] = [pre[name], value];
+                        }
+                    } else {
+                        // not exist, put it
+                        pre[name] = value;
+                    }
+
+                    return pre;
+                }, {});
+            }
+
+            //对img添加额外数据
+            if (node.tag === 'img') {
+                node.imgIndex = results.images.length;
+                var imgUrl = node.attr.src;
+                if (imgUrl[0] == '') {
+                    imgUrl.splice(0, 1);
+                }
+                imgUrl = wxDiscode.urlToHttpUrl(imgUrl, __placeImgeUrlHttps);
+                node.attr.src = imgUrl;
+                node.from = bindName;
+                results.images.push(node);
+                results.imageUrls.push(imgUrl);
+            }
+            
+            // 处理font标签样式属性
+            if (node.tag === 'font') {
+                var fontSize = ['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', '-webkit-xxx-large'];
+                var styleAttrs = {
+                    'color': 'color',
+                    'face': 'font-family',
+                    'size': 'font-size'
+                };
+                if (!node.attr.style) node.attr.style = [];
+                if (!node.styleStr) node.styleStr = '';
+                for (var key in styleAttrs) {
+                    if (node.attr[key]) {
+                        var value = key === 'size' ? fontSize[node.attr[key]-1] : node.attr[key];
+                        node.attr.style.push(styleAttrs[key]);
+                        node.attr.style.push(value);
+                        node.styleStr += styleAttrs[key] + ': ' + value + ';';
+                    }
+                }
+            }
+
+            //临时记录source资源
+            if(node.tag === 'source'){
+                results.source = node.attr.src;
+            }
+            
+            if (unary) {
+                // if this tag doesn't have end tag
+                // like <img src="hoge.png"/>
+                // add to parents
+                var parent = bufArray[0] || results;
+                if (parent.nodes === undefined) {
+                    parent.nodes = [];
+                }
+                parent.nodes.push(node);
+            } else {
+                bufArray.unshift(node);
+            }
+        },
+        end: function (tag) {
+            //debug(tag);
+            // merge into parent tag
+            var node = bufArray.shift();
+            if (node.tag !== tag) console.error('invalid state: mismatch end tag');
+
+            //当有缓存source资源时于于video补上src资源
+            if(node.tag === 'video' && results.source){
+                node.attr.src = results.source;
+                delete results.source;
+            }
+            if (node.tag === 'p') { //当前如果是p标签
+              if(node.nodes){
+              if ( node.nodes[0].text == ' ') { //如果没有nodes就强行赋值nodes
+                  var nodes = [{
+                      attr: {
+                          style: ["padding:", "15rpx", "0","display:","inline-block"],
+                      },
+                      index: "0.0.0.0",
+                      node: "element",
+                      tag: "span",
+                      tagType: "inline",
+                      styleStr: "padding:15rpx 0;display:inline-block"
+                  }]
+                  node.nodes = nodes
+                }
+              }
+          }
+            if (bufArray.length === 0) {
+                results.nodes.push(node);
+            } else {
+                var parent = bufArray[0];
+                if (parent.nodes === undefined) {
+                    parent.nodes = [];
+                }
+                parent.nodes.push(node);
+            }
+        },
+        chars: function (text) {
+            //debug(text);
+            var node = {
+                node: 'text',
+                text: text,
+                textArray:transEmojiStr(text)
+            };
+            
+            if (bufArray.length === 0) {
+                node.index = index.toString()
+                index += 1
+                results.nodes.push(node);
+            } else {
+                var parent = bufArray[0];
+                if (parent.nodes === undefined) {
+                    parent.nodes = [];
+                }
+                node.index = parent.index + '.' + parent.nodes.length
+                parent.nodes.push(node);
+            }
+        },
+        comment: function (text) {
+            //debug(text);
+            // var node = {
+            //     node: 'comment',
+            //     text: text,
+            // };
+            // var parent = bufArray[0];
+            // if (parent.nodes === undefined) {
+            //     parent.nodes = [];
+            // }
+            // parent.nodes.push(node);
+        },
+    });
+    return results;
+};
+
+function transEmojiStr(str){
+  // var eReg = new RegExp("["+__reg+' '+"]");
+//   str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
+  
+  var emojiObjs = [];
+  //如果正则表达式为空
+  if(__emojisReg.length == 0 || !__emojis){
+      var emojiObj = {}
+      emojiObj.node = "text";
+      emojiObj.text = str;
+      array = [emojiObj];
+      return array;
+  }
+  //这个地方需要调整
+  str = str.replace(/\[([^\[\]]+)\]/g,':$1:')
+  var eReg = new RegExp("[:]");
+  var array = str.split(eReg);
+  for(var i = 0; i < array.length; i++){
+    var ele = array[i];
+    var emojiObj = {};
+    if(__emojis[ele]){
+      emojiObj.node = "element";
+      emojiObj.tag = "emoji";
+      emojiObj.text = __emojis[ele];
+      emojiObj.baseSrc= __emojisBaseSrc;
+    }else{
+      emojiObj.node = "text";
+      emojiObj.text = ele;
+    }
+    emojiObjs.push(emojiObj);
+  }
+  
+  return emojiObjs;
+}
+
+function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
+    __emojisReg = reg;
+    __emojisBaseSrc=baseSrc;
+    __emojis=emojis;
+}
+
+module.exports = {
+    html2json: html2json,
+    emojisInit:emojisInit
+};
+

components/local/wxParse/htmlparser.js

@@ -0,0 +1,192 @@
+/**
+ * 
+ * htmlParser改造自: https://github.com/blowsie/Pure-JavaScript-HTML5-Parser
+ * 
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ * 
+ * github地址: https://github.com/icindy/wxParse
+ * 
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+// Regular Expressions for parsing tags and attributes
+var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/,
+	endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/,
+	attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g;
+
+// Empty Elements - HTML 5
+var empty = makeMap("area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr");
+
+// Block Elements - HTML 5
+var block = makeMap("a,address,code,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video");
+
+// Inline Elements - HTML 5
+var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var");
+
+// Elements that you can, intentionally, leave open
+// (and which close themselves)
+var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");
+
+// Attributes that have their values filled in disabled="disabled"
+var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");
+
+// Special Elements (can contain anything)
+var special = makeMap("wxxxcode-style,script,style,view,scroll-view,block");
+
+function HTMLParser(html, handler) {
+	var index, chars, match, stack = [], last = html;
+	stack.last = function () {
+		return this[this.length - 1];
+	};
+
+	while (html) {
+		chars = true;
+
+		// Make sure we're not in a script or style element
+		if (!stack.last() || !special[stack.last()]) {
+
+			// Comment
+			if (html.indexOf("<!--") == 0) {
+				index = html.indexOf("-->");
+
+				if (index >= 0) {
+					if (handler.comment)
+						handler.comment(html.substring(4, index));
+					html = html.substring(index + 3);
+					chars = false;
+				}
+
+				// end tag
+			} else if (html.indexOf("</") == 0) {
+				match = html.match(endTag);
+
+				if (match) {
+					html = html.substring(match[0].length);
+					match[0].replace(endTag, parseEndTag);
+					chars = false;
+				}
+
+				// start tag
+			} else if (html.indexOf("<") == 0) {
+				match = html.match(startTag);
+
+				if (match) {
+					html = html.substring(match[0].length);
+					match[0].replace(startTag, parseStartTag);
+					chars = false;
+				}
+			}
+
+			if (chars) {
+				index = html.indexOf("<");
+				var text = ''
+				while (index === 0) {
+                                  text += "<";
+                                  html = html.substring(1);
+                                  index = html.indexOf("<");
+				}
+				text += index < 0 ? html : html.substring(0, index);
+				html = index < 0 ? "" : html.substring(index);
+
+				if (handler.chars)
+					handler.chars(text);
+			}
+
+		} else {
+
+			html = html.replace(new RegExp("([\\s\\S]*?)<\/" + stack.last() + "[^>]*>"), function (all, text) {
+				text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, "$1$2");
+				if (handler.chars)
+					handler.chars(text);
+
+				return "";
+			});
+
+
+			parseEndTag("", stack.last());
+		}
+
+		if (html == last)
+			throw "Parse Error: " + html;
+		last = html;
+	}
+
+	// Clean up any remaining tags
+	parseEndTag();
+
+	function parseStartTag(tag, tagName, rest, unary) {
+		tagName = tagName.toLowerCase();
+
+		if (block[tagName]) {
+			while (stack.last() && inline[stack.last()]) {
+				parseEndTag("", stack.last());
+			}
+		}
+
+		if (closeSelf[tagName] && stack.last() == tagName) {
+			parseEndTag("", tagName);
+		}
+
+		unary = empty[tagName] || !!unary;
+
+		if (!unary)
+			stack.push(tagName);
+
+		if (handler.start) {
+			var attrs = [];
+
+			rest.replace(attr, function (match, name) {
+				var value = arguments[2] ? arguments[2] :
+					arguments[3] ? arguments[3] :
+						arguments[4] ? arguments[4] :
+							fillAttrs[name] ? name : "";
+
+				attrs.push({
+					name: name,
+					value: value,
+					escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"
+				});
+			});
+
+			if (handler.start) {
+				handler.start(tagName, attrs, unary);
+			}
+
+		}
+	}
+
+	function parseEndTag(tag, tagName) {
+		// If no tag name is provided, clean shop
+		if (!tagName)
+			var pos = 0;
+
+		// Find the closest opened tag of the same type
+		else {
+			tagName = tagName.toLowerCase();
+			for (var pos = stack.length - 1; pos >= 0; pos--)
+				if (stack[pos] == tagName)
+					break;
+		}
+		if (pos >= 0) {
+			// Close all the open elements, up the stack
+			for (var i = stack.length - 1; i >= pos; i--)
+				if (handler.end)
+					handler.end(stack[i]);
+
+			// Remove the open elements from the stack
+			stack.length = pos;
+		}
+	}
+};
+
+
+function makeMap(str) {
+	var obj = {}, items = str.split(",");
+	for (var i = 0; i < items.length; i++)
+		obj[items[i]] = true;
+	return obj;
+}
+
+module.exports = HTMLParser;

components/local/wxParse/wxDiscode.js

@@ -0,0 +1,207 @@
+// HTML 支持的数学符号
+function strNumDiscode(str){
+    str = str.replace(/∀/g, '∀');
+    str = str.replace(/∂/g, '∂');
+    str = str.replace(/&exists;/g, '∃');
+    str = str.replace(/∅/g, '∅');
+    str = str.replace(/∇/g, '∇');
+    str = str.replace(/∈/g, '∈');
+    str = str.replace(/∉/g, '∉');
+    str = str.replace(/∋/g, '∋');
+    str = str.replace(/∏/g, '∏');
+    str = str.replace(/∑/g, '∑');
+    str = str.replace(/−/g, '−');
+    str = str.replace(/∗/g, '∗');
+    str = str.replace(/√/g, '√');
+    str = str.replace(/∝/g, '∝');
+    str = str.replace(/∞/g, '∞');
+    str = str.replace(/∠/g, '∠');
+    str = str.replace(/∧/g, '∧');
+    str = str.replace(/∨/g, '∨');
+    str = str.replace(/∩/g, '∩');
+    str = str.replace(/∩/g, '∪');
+    str = str.replace(/∫/g, '∫');
+    str = str.replace(/∴/g, '∴');
+    str = str.replace(/∼/g, '∼');
+    str = str.replace(/≅/g, '≅');
+    str = str.replace(/≈/g, '≈');
+    str = str.replace(/≠/g, '≠');
+    str = str.replace(/≤/g, '≤');
+    str = str.replace(/≥/g, '≥');
+    str = str.replace(/⊂/g, '⊂');
+    str = str.replace(/⊃/g, '⊃');
+    str = str.replace(/⊄/g, '⊄');
+    str = str.replace(/⊆/g, '⊆');
+    str = str.replace(/⊇/g, '⊇');
+    str = str.replace(/⊕/g, '⊕');
+    str = str.replace(/⊗/g, '⊗');
+    str = str.replace(/⊥/g, '⊥');
+    str = str.replace(/⋅/g, '⋅');
+    return str;
+}
+
+//HTML 支持的希腊字母
+function strGreeceDiscode(str){
+    str = str.replace(/Α/g, 'Α');
+    str = str.replace(/Β/g, 'Β');
+    str = str.replace(/Γ/g, 'Γ');
+    str = str.replace(/Δ/g, 'Δ');
+    str = str.replace(/Ε/g, 'Ε');
+    str = str.replace(/Ζ/g, 'Ζ');
+    str = str.replace(/Η/g, 'Η');
+    str = str.replace(/Θ/g, 'Θ');
+    str = str.replace(/Ι/g, 'Ι');
+    str = str.replace(/Κ/g, 'Κ');
+    str = str.replace(/Λ/g, 'Λ');
+    str = str.replace(/Μ/g, 'Μ');
+    str = str.replace(/Ν/g, 'Ν');
+    str = str.replace(/Ξ/g, 'Ν');
+    str = str.replace(/Ο/g, 'Ο');
+    str = str.replace(/Π/g, 'Π');
+    str = str.replace(/Ρ/g, 'Ρ');
+    str = str.replace(/Σ/g, 'Σ');
+    str = str.replace(/Τ/g, 'Τ');
+    str = str.replace(/Υ/g, 'Υ');
+    str = str.replace(/Φ/g, 'Φ');
+    str = str.replace(/Χ/g, 'Χ');
+    str = str.replace(/Ψ/g, 'Ψ');
+    str = str.replace(/Ω/g, 'Ω');
+
+    str = str.replace(/α/g, 'α');
+    str = str.replace(/β/g, 'β');
+    str = str.replace(/γ/g, 'γ');
+    str = str.replace(/δ/g, 'δ');
+    str = str.replace(/ε/g, 'ε');
+    str = str.replace(/ζ/g, 'ζ');
+    str = str.replace(/η/g, 'η');
+    str = str.replace(/θ/g, 'θ');
+    str = str.replace(/ι/g, 'ι');
+    str = str.replace(/κ/g, 'κ');
+    str = str.replace(/λ/g, 'λ');
+    str = str.replace(/μ/g, 'μ');
+    str = str.replace(/ν/g, 'ν');
+    str = str.replace(/ξ/g, 'ξ');
+    str = str.replace(/ο/g, 'ο');
+    str = str.replace(/π/g, 'π');
+    str = str.replace(/ρ/g, 'ρ');
+    str = str.replace(/ς/g, 'ς');
+    str = str.replace(/σ/g, 'σ');
+    str = str.replace(/τ/g, 'τ');
+    str = str.replace(/υ/g, 'υ');
+    str = str.replace(/φ/g, 'φ');
+    str = str.replace(/χ/g, 'χ');
+    str = str.replace(/ψ/g, 'ψ');
+    str = str.replace(/ω/g, 'ω');
+    str = str.replace(/ϑ/g, 'ϑ');
+    str = str.replace(/ϒ/g, 'ϒ');
+    str = str.replace(/ϖ/g, 'ϖ');
+    str = str.replace(/·/g, '·');
+    return str;
+}
+
+// 
+
+function strcharacterDiscode(str){
+    // 加入常用解析
+    str = str.replace(/ /g, ' ');
+    str = str.replace(/"/g, "'");
+    str = str.replace(/&/g, '&');
+    // str = str.replace(/</g, '‹');
+    // str = str.replace(/>/g, '›');
+
+    str = str.replace(/&lt;/g, '<');
+    str = str.replace(/&gt;/g, '>');
+    str = str.replace(/&#8226;/g, '•');
+
+    return str;
+}
+
+// HTML 支持的其他实体
+function strOtherDiscode(str){
+    str = str.replace(/&OElig;/g, 'Œ');
+    str = str.replace(/&oelig;/g, 'œ');
+    str = str.replace(/&Scaron;/g, 'Š');
+    str = str.replace(/&scaron;/g, 'š');
+    str = str.replace(/&Yuml;/g, 'Ÿ');
+    str = str.replace(/&fnof;/g, 'ƒ');
+    str = str.replace(/&circ;/g, 'ˆ');
+    str = str.replace(/&tilde;/g, '˜');
+    str = str.replace(/&ensp;/g, '');
+    str = str.replace(/&emsp;/g, '');
+    str = str.replace(/&thinsp;/g, '');
+    str = str.replace(/&zwnj;/g, '');
+    str = str.replace(/&zwj;/g, '');
+    str = str.replace(/&lrm;/g, '');
+    str = str.replace(/&rlm;/g, '');
+    str = str.replace(/&ndash;/g, '–');
+    str = str.replace(/&mdash;/g, '—');
+    str = str.replace(/&lsquo;/g, '‘');
+    str = str.replace(/&rsquo;/g, '’');
+    str = str.replace(/&sbquo;/g, '‚');
+    str = str.replace(/&ldquo;/g, '“');
+    str = str.replace(/&rdquo;/g, '”');
+    str = str.replace(/&bdquo;/g, '„');
+    str = str.replace(/&dagger;/g, '†');
+    str = str.replace(/&Dagger;/g, '‡');
+    str = str.replace(/&bull;/g, '•');
+    str = str.replace(/&hellip;/g, '…');
+    str = str.replace(/&permil;/g, '‰');
+    str = str.replace(/&prime;/g, '′');
+    str = str.replace(/&Prime;/g, '″');
+    str = str.replace(/&lsaquo;/g, '‹');
+    str = str.replace(/&rsaquo;/g, '›');
+    str = str.replace(/&oline;/g, '‾');
+    str = str.replace(/&euro;/g, '€');
+    str = str.replace(/&trade;/g, '™');
+
+    str = str.replace(/&larr;/g, '←');
+    str = str.replace(/&uarr;/g, '↑');
+    str = str.replace(/&rarr;/g, '→');
+    str = str.replace(/&darr;/g, '↓');
+    str = str.replace(/&harr;/g, '↔');
+    str = str.replace(/&crarr;/g, '↵');
+    str = str.replace(/&lceil;/g, '⌈');
+    str = str.replace(/&rceil;/g, '⌉');
+
+    str = str.replace(/&lfloor;/g, '⌊');
+    str = str.replace(/&rfloor;/g, '⌋');
+    str = str.replace(/&loz;/g, '◊');
+    str = str.replace(/&spades;/g, '♠');
+    str = str.replace(/&clubs;/g, '♣');
+    str = str.replace(/&hearts;/g, '♥');
+
+    str = str.replace(/&diams;/g, '♦');
+    str = str.replace(/&#39;/g, '\'');
+    return str;
+}
+
+function strMoreDiscode(str){
+    str = str.replace(/\r\n/g,"");  
+    str = str.replace(/\n/g,"");
+
+    str = str.replace(/code/g,"wxxxcode-style");
+    return str;
+}
+
+function strDiscode(str){
+    str = strNumDiscode(str);
+    str = strGreeceDiscode(str);
+    str = strcharacterDiscode(str);
+    str = strOtherDiscode(str);
+    str = strMoreDiscode(str);
+    return str;
+}
+function urlToHttpUrl(url,rep){
+    
+    var patt1 = new RegExp("^//");
+    var result = patt1.test(url);
+    if(result){
+        url = rep+":"+url;
+    }
+    return  url;
+}
+
+module.exports = {
+    strDiscode:strDiscode,
+    urlToHttpUrl:urlToHttpUrl
+}

components/local/wxParse/wxParse.js

@@ -0,0 +1,158 @@
+/**
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ * 
+ * github地址: https://github.com/icindy/wxParse
+ * 
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+/**
+ * utils函数引入
+ **/
+import showdown from './showdown.js';
+import HtmlToJson from './html2json.js';
+/**
+ * 配置及公有属性
+ **/
+var realWindowWidth = 0;
+var realWindowHeight = 0;
+wx.getSystemInfo({
+  success: function (res) {
+    realWindowWidth = res.windowWidth
+    realWindowHeight = res.windowHeight
+  }
+})
+
+/**
+ * 主函数入口区
+ **/
+function wxParse(bindName = 'wxParseData', type='html', data='<div class="color:red;">数据不能为空</div>', target,imagePadding) {
+  var that = target;
+  var transData = {};//存放转化后的数据
+  if (type == 'html') {
+    transData = HtmlToJson.html2json(data, bindName);
+  } else if (type == 'md' || type == 'markdown') {
+    var converter = new showdown.Converter();
+    var html = converter.makeHtml(data);
+    transData = HtmlToJson.html2json(html, bindName);
+  }
+  transData.view = {};
+  transData.view.imagePadding = 0;
+  if(typeof(imagePadding) != 'undefined'){
+    transData.view.imagePadding = imagePadding
+  }
+  var bindData = {};
+  bindData[bindName] = transData;
+  that.setData(bindData)
+  that.wxParseImgLoad = wxParseImgLoad;
+  that.wxParseImgTap = wxParseImgTap;
+}
+// 图片点击事件
+function wxParseImgTap(e) {
+  var that = this;
+  var nowImgUrl = e.target.dataset.src;
+  var tagFrom = e.target.dataset.from;
+  if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
+    // wx.previewImage({
+    //   current: nowImgUrl, // 当前显示图片的http链接
+    //   urls: that.data[tagFrom].imageUrls // 需要预览的图片http链接列表
+    // })
+  }
+}
+
+/**
+ * 图片视觉宽高计算函数区 
+ **/
+function wxParseImgLoad(e) {
+  var that = this;
+  var tagFrom = e.target.dataset.from;
+  var idx = e.target.dataset.idx;
+  if (typeof (tagFrom) != 'undefined' && tagFrom.length > 0) {
+    calMoreImageInfo(e, idx, that, tagFrom)
+  } 
+}
+// 假循环获取计算图片视觉最佳宽高
+function calMoreImageInfo(e, idx, that, bindName) {
+  var temData = that.data[bindName];
+  if (!temData || temData.images.length == 0) {
+    return;
+  }
+  var temImages = temData.images;
+  //因为无法获取view宽度 需要自定义padding进行计算，稍后处理
+  var recal = wxAutoImageCal(e.detail.width, e.detail.height,that,bindName); 
+  // temImages[idx].width = recal.imageWidth;
+  // temImages[idx].height = recal.imageheight; 
+  // temData.images = temImages;
+  // var bindData = {};
+  // bindData[bindName] = temData;
+  // that.setData(bindData);
+  var index = temImages[idx].index
+  var key = `${bindName}`
+  for (var i of index.split('.')) key+=`.nodes[${i}]`
+  var keyW = key + '.width'
+  var keyH = key + '.height'
+  that.setData({
+    [keyW]: recal.imageWidth,
+    [keyH]: recal.imageheight,
+  })
+}
+
+// 计算视觉优先的图片宽高
+function wxAutoImageCal(originalWidth, originalHeight,that,bindName) {
+  //获取图片的原始长宽
+  var windowWidth = 0, windowHeight = 0;
+  var autoWidth = 0, autoHeight = 0;
+  var results = {};
+  var padding = that.data[bindName].view.imagePadding;
+  windowWidth = realWindowWidth-2*padding;
+  windowHeight = realWindowHeight;
+  //判断按照那种方式进行缩放
+  // console.log("windowWidth" + windowWidth);
+  if (originalWidth > windowWidth) {//在图片width大于手机屏幕width时候
+    autoWidth = windowWidth;
+    // console.log("autoWidth" + autoWidth);
+    autoHeight = (autoWidth * originalHeight) / originalWidth;
+    // console.log("autoHeight" + autoHeight);
+    results.imageWidth = autoWidth;
+    results.imageheight = autoHeight;
+  } else {//否则展示原来的数据
+    results.imageWidth = originalWidth;
+    results.imageheight = originalHeight;
+  }
+  return results;
+}
+
+function wxParseTemArray(temArrayName,bindNameReg,total,that){
+  var array = [];
+  var temData = that.data;
+  var obj = null;
+  for(var i = 0; i < total; i++){
+    var simArr = temData[bindNameReg+i].nodes;
+    array.push(simArr);
+  }
+
+  temArrayName = temArrayName || 'wxParseTemArray';
+  obj = JSON.parse('{"'+ temArrayName +'":""}');
+  obj[temArrayName] = array;
+  that.setData(obj);
+}
+
+/**
+ * 配置emojis
+ * 
+ */
+
+function emojisInit(reg='',baseSrc="/wxParse/emojis/",emojis){
+   HtmlToJson.emojisInit(reg,baseSrc,emojis);
+}
+
+module.exports = {
+  wxParse: wxParse,
+  wxParseTemArray:wxParseTemArray,
+  emojisInit:emojisInit
+}
+
+

components/local/wxParse/wxParse.wxml

@@ -0,0 +1,967 @@
+<!--**
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ * 
+ * github地址: https://github.com/icindy/wxParse
+ * 
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */-->
+
+<!--基础元素-->
+<template name="wxParseVideo">
+  <!--增加video标签支持，并循环添加-->
+  <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+    <video class="{{item.classStr}} wxParse-{{item.tag}}-video" src="{{item.attr.src}}"></video>
+  </view>
+</template>
+
+<template name="wxParseImg">
+  <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" mode="aspectFit" bindload="wxParseImgLoad" bindtap="wxParseImgTap" mode="widthFix" style="width:{{350}}px;"
+  />
+</template>
+
+<template name="WxEmojiView">
+  <view class="WxEmojiView wxParse-inline" style="{{item.styleStr}}">
+    <block wx:for="{{item.textArray}}" wx:key="index">
+      <block class="{{item.text == '\\n' ? 'wxParse-hide':''}}" wx:if="{{item.node == 'text'}}">{{item.text}}</block>
+      <block wx:elif="{{item.node == 'element'}}">
+        <image class="wxEmoji" src="{{item.baseSrc}}{{item.text}}" />
+      </block>
+    </block>
+  </view>
+</template>
+
+<template name="WxParseBr">
+  <text>\n</text>
+</template>
+<!--入口模版-->
+
+<template name="wxParse">
+  <block wx:for="{{wxParseData}}" wx:key="index">
+    <template is="wxParse0" data="{{item}}" />
+  </block>
+</template>
+
+
+<!--循环模版-->
+<template name="wxParse0">
+  <!--<template is="wxParse1" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse1" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse1" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse1" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+    <block wx:elif="{{item.tag == 'table'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse1" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse1" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse1" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+
+
+<!--循环模版-->
+<template name="wxParse1">
+  <!--<template is="wxParse2" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse2" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse2" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse2" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse2" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse2" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+
+<!--循环模版-->
+<template name="wxParse2">
+  <!--<template is="wxParse3" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse3" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse3" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse3" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse3" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse3" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse3">
+  <!--<template is="wxParse4" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse4" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse4" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse4" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse4" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse4" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse4">
+  <!--<template is="wxParse5" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse5" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse5" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse5" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse5" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse5" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse5">
+  <!--<template is="wxParse6" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse6" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse6" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse6" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse6" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse6" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse6">
+  <!--<template is="wxParse7" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse7" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse7" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse7" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse7" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse7" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+<!--循环模版-->
+<template name="wxParse7">
+  <!--<template is="wxParse8" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse8" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse8" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse8" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse8" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse8" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse8">
+  <!--<template is="wxParse9" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse9" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse9" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse9" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse9" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse9" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse9">
+  <!--<template is="wxParse10" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse10" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse10" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse10" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse10" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse10" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse10">
+  <!--<template is="wxParse11" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse11" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse11" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse11" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse11" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse11" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>
+
+<!--循环模版-->
+<template name="wxParse11">
+  <!--<template is="wxParse12" data="{{item}}" />-->
+  <!--判断是否是标签节点-->
+  <block wx:if="{{item.node == 'element'}}">
+    <block wx:if="{{item.tag == 'button'}}">
+      <button type="default" size="mini">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse12" data="{{item}}" />
+        </block>
+      </button>
+    </block>
+    <!--li类型-->
+    <block wx:elif="{{item.tag == 'li'}}">
+      <view class="{{item.classStr}} wxParse-li" style="{{item.styleStr}}">
+        <view class="{{item.classStr}} wxParse-li-inner">
+          <view class="{{item.classStr}} wxParse-li-text">
+            <view class="{{item.classStr}} wxParse-li-circle"></view>
+          </view>
+          <view class="{{item.classStr}} wxParse-li-text">
+            <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+              <template is="wxParse12" data="{{item}}" />
+            </block>
+          </view>
+        </view>
+      </view>
+    </block>
+
+    <!--video类型-->
+    <block wx:elif="{{item.tag == 'video'}}">
+      <template is="wxParseVideo" data="{{item}}" />
+    </block>
+
+    <!--img类型-->
+    <block wx:elif="{{item.tag == 'img'}}">
+      <template is="wxParseImg" data="{{item}}" />
+    </block>
+
+    <!--a类型-->
+    <block wx:elif="{{item.tag == 'a'}}">
+      <view bindtap="wxParseTagATap" class="wxParse-inline {{item.classStr}} wxParse-{{item.tag}}" data-src="{{item.attr.href}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse12" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <block wx:elif="{{item.tag == 'br'}}">
+      <template is="WxParseBr"></template>
+    </block>
+    <!--其他块级标签-->
+    <block wx:elif="{{item.tagType == 'block'}}">
+      <view class="{{item.classStr}} wxParse-{{item.tag}}" style="{{item.styleStr}}">
+        <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+          <template is="wxParse12" data="{{item}}" />
+        </block>
+      </view>
+    </block>
+
+    <!--内联标签-->
+    <view wx:else class="{{item.classStr}} wxParse-{{item.tag}} wxParse-{{item.tagType}}" style="{{item.styleStr}}">
+      <block wx:for="{{item.nodes}}" wx:for-item="item" wx:key="index">
+        <template is="wxParse12" data="{{item}}" />
+      </block>
+    </view>
+
+  </block>
+
+  <!--判断是否是文本节点-->
+  <block wx:elif="{{item.node == 'text'}}">
+    <!--如果是，直接进行-->
+    <template is="WxEmojiView" data="{{item}}" />
+  </block>
+
+</template>

components/local/wxParse/wxParse.wxss

@@ -0,0 +1,224 @@
+
+/**
+ * author: Di (微信小程序开发工程师)
+ * organization: WeAppDev(微信小程序开发论坛)(http://weappdev.com)
+ *               垂直微信小程序开发交流社区
+ * 
+ * github地址: https://github.com/icindy/wxParse
+ * 
+ * for: 微信小程序富文本解析
+ * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
+ */
+
+.wxParse{
+    margin: 0 5px;
+    font-family: Helvetica,sans-serif;
+    font-size: 28rpx;
+    color: #666;
+    line-height: 1.8;
+}
+view{
+    word-break:break-all; overflow:auto;
+}
+.wxParse-inline{
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+/*//标题 */
+.wxParse-div{margin: 0;padding: 0;}
+.wxParse-h1{ font-size:2em; margin: .67em 0 }
+.wxParse-h2{ font-size:1.5em; margin: .75em 0 }
+.wxParse-h3{ font-size:1.17em; margin: .83em 0 }
+.wxParse-h4{ margin: 1.12em 0}
+.wxParse-h5 { font-size:.83em; margin: 1.5em 0 }
+.wxParse-h6{ font-size:.75em; margin: 1.67em 0 }
+
+.wxParse-h1 {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: .9em;
+}
+.wxParse-h2 {
+  font-size: 16px;
+  font-weight: 400;
+  margin-bottom: .34em;
+}
+.wxParse-h3 {
+  font-weight: 400;
+  font-size: 15px;
+  margin-bottom: .34em;
+}
+.wxParse-h4 {
+  font-weight: 400;
+  font-size: 14px;
+  margin-bottom: .24em;
+}
+.wxParse-h5 {
+  font-weight: 400;
+  font-size: 13px;
+  margin-bottom: .14em;
+}
+.wxParse-h6 {
+  font-weight: 400;
+  font-size: 12px;
+  margin-bottom: .04em;
+}
+
+.wxParse-h1, .wxParse-h2, .wxParse-h3, .wxParse-h4, .wxParse-h5, .wxParse-h6, .wxParse-b, .wxParse-strong  { font-weight: bolder }
+
+.wxParse-i,.wxParse-cite,.wxParse-em,.wxParse-var,.wxParse-address{font-style:italic}
+.wxParse-pre,.wxParse-tt,.wxParse-code,.wxParse-kbd,.wxParse-samp{font-family:monospace}
+.wxParse-pre{white-space:pre}
+.wxParse-big{font-size:1.17em}
+.wxParse-small,.wxParse-sub,.wxParse-sup{font-size:.83em}
+.wxParse-sub{vertical-align:sub}
+.wxParse-sup{vertical-align:super}
+.wxParse-s,.wxParse-strike,.wxParse-del{text-decoration:line-through}
+/*wxparse-自定义个性化的css样式*/
+/*增加video的css样式*/
+.wxParse-strong,.wxParse-s{display: inline}
+.wxParse-a{
+    color: deepskyblue;
+    word-break:break-all;
+    overflow:auto;
+}
+
+.wxParse-video{
+    text-align: center;
+    margin: 10px 0;
+}
+
+.wxParse-video-video{
+    width:100%;
+}
+
+.wxParse-img{
+    /*background-color: #efefef;*/
+    overflow: hidden;
+}
+
+.wxParse-blockquote {
+    margin: 0;
+    padding:10px 0 10px 5px;
+    font-family:Courier, Calibri,"宋体";
+    background:#f5f5f5;
+    border-left: 3px solid #dbdbdb;
+}
+
+.wxParse-code,.wxParse-wxxxcode-style{
+    display: inline;
+    background:#f5f5f5;
+}
+.wxParse-ul{
+    margin: 20rpx 10rpx;
+}
+
+.wxParse-li,.wxParse-li-inner{
+    display: flex;
+    align-items: baseline;
+    margin: 10rpx 0;
+}
+.wxParse-li-text{
+    
+    align-items: center;
+    line-height: 20px;
+}
+
+.wxParse-li-circle{
+    display: inline-flex;
+    width: 5px;
+    height: 5px;
+    background-color: #333;
+    margin-right: 5px;
+}
+
+.wxParse-li-square{
+    display: inline-flex;
+    width: 10rpx;
+    height: 10rpx;
+    background-color: #333;
+    margin-right: 5px;
+}
+.wxParse-li-ring{
+    display: inline-flex;
+    width: 10rpx;
+    height: 10rpx;
+    border: 2rpx solid #333;
+    border-radius: 50%;
+    background-color: #fff;
+    margin-right: 5px;
+}
+
+/*.wxParse-table{
+    width: 100%;
+    height: 400px;
+}
+.wxParse-thead,.wxParse-tfoot,.wxParse-tr{
+    display: flex;
+    flex-direction: row;
+}
+.wxParse-th,.wxParse-td{
+    display: flex;
+    width: 580px;
+    overflow: auto;
+}*/
+
+.wxParse-u {
+  text-decoration: underline;
+}
+.wxParse-hide{
+    display: none;
+}
+.WxEmojiView{
+    align-items: center;
+}
+.wxEmoji{
+    width: 16px;
+    height:16px;
+}
+.wxParse-tr{
+	display: flex;
+	border-right:1px solid #e0e0e0;
+	border-bottom:1px solid #e0e0e0;
+	border-top:1px solid #e0e0e0;
+}
+.wxParse-th,
+.wxParse-td{
+	flex:1;
+	padding:5px;
+	font-size:28rpx;
+	border-left:1px solid #e0e0e0;
+	word-break: break-all;
+}
+.wxParse-td:last{
+	border-top:1px solid #e0e0e0;
+}
+.wxParse-th{
+	background:#f0f0f0;
+	border-top:1px solid #e0e0e0;
+}
+.wxParse-del{
+    display: inline;
+}
+.wxParse-figure {
+  overflow: hidden;
+}
+
+.wxParse-img{
+    display: inline-flex;
+    border: none;
+    outline: none;
+    vertical-align: bottom;
+}
+image[src=""] {
+    opacity: 0;
+}
+
+.wxParse-p {
+  text-align: left;
+  padding: 0 20rpx;
+}
+.wxParse-p image{
+  width: 100% !important;
+}