feat: 小剧场充值页

.gitignore

@@ -0,0 +1,7 @@
+dist/
+deploy_versions/
+miniprogram_npm/
+.temp/
+.rn_temp/
+node_modules/
+.DS_Store

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,240 @@
+// 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:'', //记录首页跳转到项目页面的滚动下标
+  },
+  invite_id:"null",//邀请人id
+  //记录登录状态相关的配置
+  loginConfig: {
+    code: '',
+    codeTime: ''
+  },
+  address:{},
+  onLaunch(options) {
+    
+    let WHITE_LIST=['pages/login/login','pages/home/home']
+    if(!WHITE_LIST.includes(options.path)){
+      if(wx.getStorageSync('userInfo')==''){
+        console.log('登录');
+        // 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,160 @@
+{
+  "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/payList/payList"
+  ],
+  "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"
+      ]
+    }
+  ],
+  "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/orderBy/orderBy",
+        "iconPath": "images/nav/预约-未选中@2x.png",
+        "selectedIconPath": "images/nav/预约-选中@2x.png",
+        "text": "预约"
+      },
+      {
+        "pagePath": "pages/article/article",
+        "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/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,103 @@
+// 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.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,303 @@
+/**
+ * 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 (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,157 @@
+/**
+ * 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:{{item.width}}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,221 @@
+
+/**
+ * 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: center;
+}
+