小程序自动化运营实践

项目背景

美的官方商城小程序上线后，考虑到运营的需求，所以要有相应的工具辅助运营。基于之前PC、H5已有一套完整、成熟的运营工具，可一键发布到2大平台，所以，最好的方法就是在原有的工具上增加发布到小程序平台的功能。

原有思路

对于PC、H5平台，我们采用的是运营每次使用工具制作完成后，点击发布按钮时，动态生成一份相应平台的相关的view、css文件，相关数据也会存入数据库，然后用带参的controller调用view文件即可。一旦运营想更改设置，只需重新保存、发布即可即时生效。

小程序的特殊性

对PC、H5平台而言，上面的思路能很好的解决问题，然而在小程序中却走不通。小程序是个封闭的环境，任何代码、文字等信息的修改都需要重新打包上传至微信，审核通过后才能生效。 这对于需要修改即刻生效的运营而言，显然是需要另辟蹊径的。

新思路

既然不能动代码，就只能利用动态数据了。最终的方案是：点击发布按钮时，会生成一份包含卖场所有信息的json数据，当用户打开小程序页面时，请求这份数据，并根据数据选择对应模板渲染。所有模块的模板事先已封装好，包括wxml、wxss、js,只需根据数据选择不同模板并传参即可。再结合我们已有的banner配置工具，就能实现不发版本便能上线新活动页面了。

所以，我们的流程是：
流程图.jpg

也因此，我们后续有新的模块需求时，只需要开发新模块的wxml,wxss,js，然后按约定规则定义好新模板需要的参数即可。

流程

首先通过我们已有的活动自助平台， 制作活动页面，点击“发布到小程序”后，生成一份这样的json文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
{
  "floorData": {
    "floor-1497701315342": {
      "floorId": "floor-1497701315342",
      "floorType": "0",
      "floorHeight": 300,
      "floorBgImg": [
        {
          "src": "//img.mdcdn.cn/h5/pic/201706/e99fd10158c6.png",
          "height": 300
        }
      ],
      "floorBgColor": "",
      "isFloorBgImgRepeat": false,
      "widgetData": []
    },
    "floor-1497266276723": {
      "floorId": "floor-1497266276723",
      "floorType": 0,
      "floorHeight": 459,
      "floorBgImg": [
        {
          "src": "//img.mdcdn.cn/h5/pic/201706/724f1785af1b.png",
          "height": 459
        }
      ],
      "floorBgColor": "",
      "isFloorBgImgRepeat": false,
      "widgetData": [
        {
          "widgetId": "link-1497679356360",
          "widgetType": "link",
          "floorId": "floor-1497266276723",
          "floorType": "0",
          "position": {
            "top": 168,
            "left": 27
          },
          "size": {
            "width": 352,
            "height": 137
          },
          "userdata": {
            "link_href": {
              "link_type": "1",
              "link_value": "/page/detail/detail?itemid=1000000000100511100381"
            },
            "link_target": "2",
            "link_mtag": "40153.1.2"
          }
        },
        {
          "floorId": "floor-1497266276723",
          "size": {
            "width": 352,
            "height": 137
          },
          "userdata": {
            "link_href": {
              "link_type": "1",
              "link_value": "/page/detail/detail?itemid=1000000000100511100380"
            },
            "link_target": "2",
            "link_mtag": "40153.1.3"
          },
          "widgetId": "link-1497679375424",
          "widgetType": "link",
          "position": {
            "top": 308,
            "left": 29
          }
        }
      ]
    },
    "floor-1496250298103": {
      "floorId": "floor-1496250298103",
      "floorType": 0,
      "floorHeight": 122,
      "floorBgImg": [
        {
          "src": "//img.mdcdn.cn/h5/pic/201706/794806e39ee3.png",
          "height": 122
        }
      ],
      "floorBgColor": "",
      "isFloorBgImgRepeat": false,
      "widgetData": []
    },
    "floor-1496250305224": {
      "floorId": "floor-1496250305224",
      "floorType": "1",
      "floorHeight": 97,
      "floorBgImg": [
        {
          "src": "//img.mdcdn.cn/h5/pic/201706/b55dda0214d9.png",
          "height": 97
        }
      ],
      "floorBgColor": "#00cb62",
      "isFloorBgImgRepeat": false,
      "widgetData": [
        {
          "widgetId": "pool-goodslist-1496250564692",
          "widgetType": "pool-goodslist",
          "floorId": "floor-1496250305224",
          "floorType": "1",
          "position": {
            "left": 146,
            "top": 19
          },
          "size": {
            "width": 100,
            "height": 100
          },
          "userdata": {
            "pool_id": "1021",
            "pool_length": "8",
            "style_type": "h5_1",
            "style_color": "mc_pro_color_pink",
            "show_fields": [
              "goods_title",
              "goods_img",
              "goods_price",
              "old_price",
              "sale_tips",
              "sellingpoint",
              "buy_btn"
            ]
          }
        }
      ]
    },
    "floor-1496833183886": {
      "floorId": "floor-1496833183886",
      "floorType": 0,
      "floorHeight": 14,
      "floorBgImg": [
        {
          "src": "//img.mdcdn.cn/h5/pic/201706/82a65c163e20.png",
          "height": 14
        }
      ],
      "floorBgColor": "",
      "isFloorBgImgRepeat": false,
      "widgetData": []
    }
  },
  "id": 377,
  "isInterior": 0,
  "interiorJumpPath": "",
  "templateId": 3
}

在小程序中请求这个json文件，并对其进行处理：css单位的处理px=>rpx，各种模块需要的参数，滚动加载处理、调后台接口获取数据、合并request请求等等。
最终处理好的数据如下图。

处理好的数据结构.png

接着setData，渲染楼层就OK了。

1
2
3
4
5
6
<import src="modules/floor_template.wxml"/>
<scroll-view scroll-y="true" bindscrolltolower="scrollLoadFloor"
             style="height: {{viewHeight}}px;" lower-threshold="{{viewHeight * vHMultiple}}">
   <template wx:for="{{floorDataArr}}" wx:key="floorId" is="{{item.floorType}}" data="{{...item}}"></template>  
</scroll-view>

从上面可以看出：循环floorDataArr，根据item.floorType即可调用对应的模块。接下来，我们就需要开发对应的模块了。

模块的开发

对每个模块按照制作页面的约定，开发对应的wxml，wxss，js。类似下面这样。

1
2
3
4
5
6
7
8
<!--S:链接控件-->
<template name="widget_link" >
    <view class="widget_link" id="{{widgetId}}" style="position:absolute;width:{{size.width}};height:{{size.height}};top:{{position.top}};left:{{position.left}};">
        <view wx:if="{{userData.link_href.link_type == 3}}" bindtap="getCoupon" class="link_a" data-oid="{{userData.link_href.link_value}}" data-mtag="{{userData.link_mtag}}"></view>
        <navigator wx:else url="{{userData.link_href.link_value}}" class="link_a" data-mtag="{{userData.link_mtag}}"></navigator>
    </view>
</template>
<!--E:链接控件-->

1.width: userData这些格式就是我们之前在json中处理过的；

2.bindtap="getCoupon"这种事件，就会在对应的模块js中处理；

3.其余的不变的样式都会写在模块对应的wxss中，通过import引入；

这就是一个模块的骨架。需要支持新功能时，像上面这样开发新模块即可。

至此，整个流程就完了。当运营改了配置后，点击发布到小程序，便会生成新的json文件，小程序依然会根据新json文件重复上述过程。由此即可实现不发版本便能更新卖场的要求。

踩过的坑

这里只列举几个和此次开发相关的、比较特别的问题。

1.小程序目前只支持自定义的template，并不支持自定义的组件，所以，我们使用了曲线救国的方法：用extend方法将template的相关逻辑js扩展到page对象中，从而达到模拟组件的目的。例如上面提到的链接控件的bindtap="getCoupon"，领券的js就会写在modules/widget_link.js中，通过extend扩展到page中。具体实现如下：

1
2
3
4
5
6
7
8
9
10
import request from '../../util/common/request'
import extend from '../../util/components/extend'
import linkFn from 'modules/widget_link'
import priceFn from 'modules/widget_price'
import poolFn from 'modules/widget_pool'
//用extend方法将linkFn 、priceFn 、poolFn 扩展到page对象中。这样我们就可以在模块各自的js中写逻辑了
Page(extend({
    //这里是主代码
},linkFn,priceFn,poolFn))

2.小程序最多同时只允许发5个http请求，而卖场上的商品池接口会有很多个。最终我们选择合并请求，把所有的商品池请求合并，统一在CGI层处理，返回数据后再重新分发组装。

3.在模块中通过ajax获取的数据，无法在主流程js文件中更新。
解决方法：在模块的js中获取页面实例：let pageInstance = getApp().getPage()，ajax回调成功后更新数据：pageInstance.setData({floorDataArr : floorDataArr})。

4.要注意模拟器和真机的区别。在模拟器上正常之后要在真机预览，因为二者表现并不完全一致。例如：模拟器中图片URL src=”//img.mdcdn.cn/xxx”是正常的，但是真机中图片就出不来，必须是src=”https://img.mdcdn.cn/xxx“ 才行。

5.卖场首页数据、楼层多时，滚动卡顿，不流畅。
解决方法：滚动加载楼层数据。以楼层（floor）为单位，每个楼层内的组件、数据（例如：问题2中提到的合并请求）、模板单独获取和渲染，独立于其他楼层，滚动加载各个楼层。之前是卖场的所有数据统一获取处理，这样当请求接口多，卖场复杂时，就会卡顿。

6.scroll-view的bindscrolltolower事件问题：只有当wxml文档高度大于屏幕高度时，才会触发bindscrolltolower事件，而卖场的楼层是运营自定义制作的，高度不定，因此会出现：第一楼层高度低于手机屏幕高度时，不会触发其余楼层加载的尴尬情况。
解决方法：在卖场制作数据生成时，记录楼层高度，小程序这里根据各个楼层高度，计算首屏应该加载几个楼层，首屏以外的楼层再滚动加载。

7.看代码

1
2
3
4
5
6
7
8
9
10
11
let floorData=[]; 
let floor_item = {}; 
let floorDataArr = [];   //滚动的楼层数据
Page(extend({
	 onLoad:function (option) {
		//这里要对全局定义的变量，手动初始化，否则当用户第二次进入时，floorData这些变量并不会初始化的，依然是退出之前的数据
	floorData=[];
        floor_item={};
        floorDataArr=[];  
	}
}))

最后来张成品：

成品制作页面.png 真机效果.jpg

欢迎来访

美的小程序二维码.png
赏

能帮到你，我很开心

微信
本文总阅读量次

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

前端工程师，小白一枚<br><br>联系我：2455828446@qq.com<br>