结语

github地址:https://github.com/yexiaochai/wxdemo

今天我们似乎找到了一个适合小程序的组件编写方式,明天我们继续完成一些组件,组件完成后我们便开始写实际业务代码了

1 赞 收藏
评论

图片 1

微信小程序开发03-这是一个组件

2018/08/02 · 基础技术 ·
小程序

原文出处: 叶小钗   

改造loading

这里首先改造弹出层都要继承的behaviors behavior-layer:

const util = require(‘../utils/util.js’) module.exports = Behavior({
properties: { //重要属性,每个组件必带,定义组件是否显示 isShow: { type:
String } },
//这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
data: { maskzIndex: util.getBiggerzIndex(), uiIndex:
util.getBiggerzIndex() }, attached: function() { console.log(‘layer’) },
methods: { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const util = require(‘../utils/util.js’)
module.exports = Behavior({
  properties: {
    //重要属性,每个组件必带,定义组件是否显示
    isShow: {
      type: String
    }
  },
  //这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
  data: {
    maskzIndex: util.getBiggerzIndex(),
    uiIndex: util.getBiggerzIndex()
  },
  attached: function() {
    console.log(‘layer’)
  },
  methods: {
  }
})

其次我们改造下我们的mask组件:

let LayerView = require(‘behavior-layer’) Component({ behaviors:
[LayerView], properties: {
//只有mask的z-index属性需要被调用的弹出层动态设置 zIndex: { type: String
} }, data: { }, attached: function () { console.log(‘mask’) }, methods:
{ onTap: function() { this.triggerEvent(‘customevent’, {}, {}) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
let LayerView = require(‘behavior-layer’)
Component({
  behaviors: [LayerView],
  properties: {
    //只有mask的z-index属性需要被调用的弹出层动态设置
    zIndex: {
      type: String
    }
  },
  data: {
  },
  attached: function () {
    console.log(‘mask’)
  },
  methods: {
    onTap: function() {
      this.triggerEvent(‘customevent’, {}, {})
    }
  }
})

WXML不做变化,便完成了我们的代码,并且结构关系似乎更加清晰了,但是作为loading组件其实是有个问题的,比如点击遮盖层要不要关闭整个组件,像类似这种点击遮盖层要不要关闭整个组件,其实该是一个公共属性,所以我们对我们的layer、mask继续进行改造(这里具体请看github代码):

const util = require(‘../utils/util.js’) module.exports = Behavior({
properties: { //重要属性,每个组件必带,定义组件是否显示 isShow: { type:
String } },
//这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
data: { maskzIndex: util.getBiggerzIndex(), uiIndex:
util.getBiggerzIndex(), //默认点击遮盖层不关闭组件 clickToHide: false },
attached: function() { console.log(‘layer’) }, methods: { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const util = require(‘../utils/util.js’)
module.exports = Behavior({
  properties: {
    //重要属性,每个组件必带,定义组件是否显示
    isShow: {
      type: String
    }
  },
  //这里设置弹出层必须带有一个遮盖层,所以每个弹出层都一定具有有个z-index属性
  data: {
    maskzIndex: util.getBiggerzIndex(),
    uiIndex: util.getBiggerzIndex(),
    //默认点击遮盖层不关闭组件
    clickToHide: false
  },
  attached: function() {
    console.log(‘layer’)
  },
  methods: {
  }
})

methods: { onMaskEvent: function (e) { console.log(e);
//如果设置了点击遮盖层关闭组件则关闭 if (this.data.clickToHide)
this.setData({ isShow: ‘none’ }); } }

1
2
3
4
5
6
7
8
9
10
methods: {
  onMaskEvent: function (e) {
    console.log(e);
    //如果设置了点击遮盖层关闭组件则关闭
    if (this.data.clickToHide)
      this.setData({
        isShow: ‘none’
      });
  }
}

这个时候,点击要不要关闭,基本就在组件里面设置一个属性即可,但是我们这个作为了内部属性,没有释放出去,这个时候我们也许发现了另外一个比较幽默的场景了:

我们因为没法获取一个标签的实例,所以我们需要在页面里面动态调用:

onShow: function() { let scope= this; this.setData({ isLoadingShow: ”
}); //3秒后关闭loading setTimeout(function () { scope.setData({
isLoadingShow: ‘none’ }); }, 3000); },

1
2
3
4
5
6
7
8
9
10
11
12
onShow: function() {
  let scope= this;
  this.setData({
    isLoadingShow: ”
  });
  //3秒后关闭loading
  setTimeout(function () {
    scope.setData({
      isLoadingShow: ‘none’
    });
  }, 3000);
},

可以看到,标签接入到页面后,控制标签事实上是动态操作他的属性,也就是说操作页面的状态数据,页面的UI变化全部是数据触发,这样的逻辑会让界面变得更加清晰,但是作为全局类的loading这种参数,我并不想放到各个页面中,因为这样会导致很多重复代码,于是我在utils目录中新建了一个ui-util的工具类,作为一些全局类的ui公共库:

//因为小程序页面中每个页面应该是独立的作用域 class UIUtil {
constructor(opts) { //用于存储各种默认ui属性 this.isLoadingShow =
‘none’; } //产出页面loading需要的参数 getPageData() { return {
isLoadingShow: this.isLoadingShow } } //需要传入page实例
showLoading(page) { this.isLoadingShow = ”; page.setData({
isLoadingShow: this.isLoadingShow }); } //关闭loading hideLoading(page)
{ this.isLoadingShow = ‘none’; page.setData({ isLoadingShow:
this.isLoadingShow }); } } //直接返回一个UI工具了类的实例 module.exports
= new UIUtil

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
//因为小程序页面中每个页面应该是独立的作用域
class UIUtil {
  constructor(opts) {
    //用于存储各种默认ui属性
    this.isLoadingShow = ‘none’;
  }
  //产出页面loading需要的参数
  getPageData() {
    return {
      isLoadingShow: this.isLoadingShow
    }
  }
  //需要传入page实例
  showLoading(page) {
    this.isLoadingShow = ”;
    page.setData({
      isLoadingShow: this.isLoadingShow
    });
  }
  //关闭loading
  hideLoading(page) {
    this.isLoadingShow = ‘none’;
    page.setData({
      isLoadingShow: this.isLoadingShow
    });
  }
}
 
//直接返回一个UI工具了类的实例
module.exports = new UIUtil

index.js使用上产生一点变化:

//获取公共ui操作类实例 const uiUtil = require(‘../../utils/ui-util.js’);
//获取应用实例 const app = getApp() Page({ data: uiUtil.getPageData(),
onShow: function() { let scope= this; uiUtil.showLoading(this);
//3秒后关闭loading setTimeout(function () { uiUtil.hideLoading(scope);
}, 3000); }, onLoad: function () { } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//获取公共ui操作类实例
const uiUtil = require(‘../../utils/ui-util.js’);
//获取应用实例
const app = getApp()
Page({
  data: uiUtil.getPageData(),
  onShow: function() {
    let scope= this;
    uiUtil.showLoading(this);
    //3秒后关闭loading
    setTimeout(function () {
      uiUtil.hideLoading(scope);
    }, 3000);
  },
  onLoad: function () {
  }
})

这样,我们将页面里面要用于操作组件的数据全部放到了一个util类中,这样代码会变得清晰一些,组件管理也放到了一个地方,只是命名规范一定要安规则来,似乎到这里,我们的loading组件改造结束了,这里却有一个问题,我们在ui-util类中存储的事实上是页面级的数据,其中包含是组件的状态,但是真实情况我们点击遮盖层关闭组件,根本不会知会page层的数据,这个时候我们loading的显示状态搞不好是显示,而真实的组件已经关闭了,如何保证状态统一我们后面点再说,我暂时没有想到好的办法。

总结

我们今天花了很多功夫写一个loading,发现小程序中的组件事实上是标签,我们没法使用js获取到我们“组件”的实例,所以使用上有很大的区别,但是什么都不能阻碍我们写通用组件的决心,于是我们明天来写一些通用的组件库,并且形成一个小程序的体系,这里想的是有:

① 消息框

② toast提示

③ 日历组件

④ 然后再做一个需要定位的气泡组件

1 赞 收藏
评论

图片 2

alert类组件

本篇篇幅已经比较长了,我们最后完成一个alert组件便结束今天的学习,明天主要实现日历等组件,alert组件一般是一个带确定框的提示弹出层,有可能有两个按钮,那个情况要稍微复杂点,我们这里依旧为其新增组件结构wxml以及wxss:

//获取公共ui操作类实例 const _page =
require(‘../../utils/abstract-page.js’); //获取应用实例 const app =
getApp() Page(_page.initPage({ data: { }, // methods:
uiUtil.getPageMethods(), methods: { }, onShow: function () { global.sss
= this; let scope = this; this.showMessage({ message: ‘我是一个确定框’,
ok: { name: ‘确定’, callback: function () { scope.hideMessage();
scope.showMessage(‘我选择了确定’); } }, cancel: { name: ‘取消’,
callback: function () { scope.hideMessage();
scope.showToast(‘我选择了取消’); } } }); }, onLoad: function () { //
this.setPageMethods(); } }))

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
//获取公共ui操作类实例
const _page = require(‘../../utils/abstract-page.js’);
//获取应用实例
const app = getApp()
 
Page(_page.initPage({
  data: {
  },
  // methods: uiUtil.getPageMethods(),
  methods: {
  },
  onShow: function () {
    global.sss = this;
    let scope = this;
    this.showMessage({
      message: ‘我是一个确定框’,
      ok: {
        name: ‘确定’,
        callback: function () {
          scope.hideMessage();
          scope.showMessage(‘我选择了确定’);
        }
      },
      cancel: {
        name: ‘取消’,
        callback: function () {
          scope.hideMessage();
          scope.showToast(‘我选择了取消’);
        }
      }
    });
 
  },
  onLoad: function () {
    // this.setPageMethods();
  }
}))

图片 3

图片 4

图片 5

添加事件

于是,我们开始添加事件了,这里添加一个点击遮盖层关闭整个组件的功能,这里有个问题是,我们点击遮盖层事实上关闭的是遮盖以及loading两个标签,而我们这里的isShow属性便派上了用处,我们现在page中设置下属性:

<ui-loading is-show=”{{isLoadingShow}}”></ui-loading>

1
<ui-loading is-show="{{isLoadingShow}}"></ui-loading>

onShow: function() { this.setData({ isLoadingShow: ” }); },

1
2
3
4
5
onShow: function() {
  this.setData({
    isLoadingShow: ”
  });
},

然后我们改造mask以及loading添加事件:

<view class=”cm-overlay” style=”z-index: {{zIndex}}; display:
{{isShow}}” bindtap=”onTap”> </view>

1
2
<view class="cm-overlay" style="z-index: {{zIndex}}; display: {{isShow}}" bindtap="onTap">
</view>

let LayerView = require(‘behavior-layer-view’) Component({ behaviors:
[LayerView], data: { myData: {} }, attached: function () {
console.log(‘mask’) }, methods: { onTap: function() {
this.triggerEvent(‘customevent’, {}, {}) } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let LayerView = require(‘behavior-layer-view’)
 
Component({
  behaviors: [LayerView],
 
  data: {
    myData: {}
  },
  attached: function () {
    console.log(‘mask’)
  },
  methods: {
    onTap: function() {
      this.triggerEvent(‘customevent’, {}, {})
    }
  }
})

<ui-mask z-index=”{{maskzIndex}}” is-show=”{{isShow}}”
bindcustomevent=”onMaskEvent”></ui-mask> <view
class=”spinner” style=”z-index: {{meIndex}}; display: {{isShow}}; “>
<view class=”spinner-container container1″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> <view
class=”spinner-container container2″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4″></view> </view> <view
class=”spinner-container container3″> <view
class=”circle1″></view> <view
class=”circle2″></view> <view
class=”circle3″></view> <view
class=”circle4”></view> </view> </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<ui-mask z-index="{{maskzIndex}}" is-show="{{isShow}}" bindcustomevent="onMaskEvent"></ui-mask>
<view class="spinner" style="z-index: {{meIndex}}; display: {{isShow}}; ">
  <view class="spinner-container container1">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
  <view class="spinner-container container2">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
  <view class="spinner-container container3">
    <view class="circle1"></view>
    <view class="circle2"></view>
    <view class="circle3"></view>
    <view class="circle4"></view>
  </view>
</view>

const util = require(‘../utils/util.js’); let LayerView =
require(‘behavior-layer-view’); Component({ behaviors: [LayerView],
data: { maskzIndex: util.getBiggerzIndex(), meIndex:
util.getBiggerzIndex() }, attached: function () { console.log(‘loading’)
}, methods: { onMaskEvent: function (e) { console.log(e); this.setData({
isShow: ‘none’ }); } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const util = require(‘../utils/util.js’);
let LayerView = require(‘behavior-layer-view’);
 
Component({
  behaviors: [LayerView],
 
  data: {
    maskzIndex: util.getBiggerzIndex(),
    meIndex: util.getBiggerzIndex()
  },
  attached: function () {
    console.log(‘loading’)
  },
  methods: {
    onMaskEvent: function (e) {
      console.log(e);
      this.setData({
        isShow: ‘none’
      });
    }
  }
})

这个时候,当我们点击遮盖层的时候,我们整个组件便关闭了。

前言

github地址:https://github.com/yexiaochai/wxdemo

接上文继续,我们前面学习了小程序的生命周期、小程序的标签、小程序的样式,后面我们写了一个简单的loading组件,显然他是个半成品,我们在做loading组件的时候意识到一个问题:

小程序的组件事实上是标签 我们没有办法获得标签的实例,至少我暂时没有办法
所以这些前提让我们对标签的认识有很大的不同,完成小程序特有的UI库,那么就需要从标签出发
这里面关注的点从js中的实例变成了wxml中的属性

1
2
3
4
小程序的组件事实上是标签
我们没有办法获得标签的实例,至少我暂时没有办法
所以这些前提让我们对标签的认识有很大的不同,完成小程序特有的UI库,那么就需要从标签出发
这里面关注的点从js中的实例变成了wxml中的属性

我们今天尝试做几个组件,然后先做未完成的loading,然后做消息类弹出组件,然后做日历组件,我希望在这个过程中,我们形成一套可用的体系,这里涉及了组件体系,我们可能需要整理下流程:

① 首先我们这里做的组件其实是“标签”,这个时候就要考虑引入时候的怎么处理了


因为写业务页面的同事(写page的同事),需要在json配置中引入需要使用的标签:

“usingComponents”: { “ui-loading”: “/components/ui-loading” }

1
2
3
"usingComponents": {
  "ui-loading": "/components/ui-loading"
}

因为不能动态插入标签,所以需要一开始就把标签放入页面wxml中:

<ui-loading is-show=”{{isLoadingShow}}”></ui-loading>

1
<ui-loading is-show="{{isLoadingShow}}"></ui-loading>


json中的配置暂时只能拷贝,但是我们可以提供一个ui-set.wxml来动态引入一些组件,如全局使用的loading弹出类提示框


像日历类组件或者平时用的比较少的弹出层组件便需要自己在页面中引入了,工作量貌似不大,后续看看情况,如何优化


我们这里给每个组件设置一个behaviors,behaviors原则只设置一层(这里有点继承的关系),层级多了变比较复杂了,弹出层类是一个、一般类一个(用于日历类组件)

有了以上标准,我们这里先来改造我们的loading组件

⑥ 默认所有的组件初期WXSS直接设置为隐藏

基本结构

接上文:微信小程序开发02-小程序基本介绍

我们今天先来实现这个弹出层:

图片 6

之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点:

① 只提供Header部分以及容器部分

② 容器部分的HTML结构由业务层提供

③ 容器部分对应样式由业务层提供

我们如果要在小程序中实现这类组件,意味着我们需要往小程序中动态插入WXML结构,我们这里先做个demo,试试往动态插入WXML是不是可行

this.setData({‘wxml’: ` <my-component>
<view>动态插入的节点</view> </my-component> `});

1
2
3
4
5
this.setData({‘wxml’: `
  <my-component>
  <view>动态插入的节点</view>
  </my-component>
`});

图片 7

小程序对应设置的数据进行了转义,所以并不能动态解析,如果站在性能角度思考,不进行动态解析也不是错误的;另一方面,一旦小程序能动态解析wxml,那么可能会涌出各种花式用法,控制力会减低,那么我们这里如何解决这个问题呢?

我想的是,直接将业务级wxml结构放到页面里面,隐藏起来,需要使用弹出层的时候,直接将之装载进去,我们来看看是否可行,我们将我们需要展示的结构放到一个模板当中:

<template name=”searchbox”> <my-component>
<view>动态组件部分</view> </my-component>
</template>

1
2
3
4
5
<template name="searchbox">
  <my-component>
      <view>动态组件部分</view>
  </my-component>
</template>

然后,我们在我们主界面中载入模板:

<import src=”mod.searchbox.wxml”/> <view>
<my-component> <!– 这部分内容将被放置在组件 <slot>
的位置上 –> <view>这里是插入到组件slot中的内容</view>
</my-component> </view> <view> <template
is=”searchbox” /> </view>

1
2
3
4
5
6
7
8
9
10
<import src="mod.searchbox.wxml"/>
<view>
   <my-component>
     <!– 这部分内容将被放置在组件 <slot> 的位置上 –>
      <view>这里是插入到组件slot中的内容</view>
   </my-component>
</view>
<view>
   <template is="searchbox" />
</view>

图片 8

主体结构放到页面中,我们传入数据模型或者控制显示即可,看起来是可行的,于是我们先实现我们基本的样式,因为业务模块的样子应该由业务提供,所以对应样式写到index.wxss里面:

.btn-primary { background-color: #00b358; color: #fff; border: 0 none;
} .btn, .btn-primary, .btn-secondary, .btn-sub { line-height: 88rpx;
height: 88rpx; padding: 0 20rpx; display: inline-block; vertical-align:
middle; text-align: center; border-radius: 8rpx; cursor: pointer;
font-size: 32rpx; -webkit-box-sizing: border-box; box-sizing:
border-box; } .full-width { width: 100%; -webkit-box-sizing: border-box;
box-sizing: border-box; } .c-row { width: auto; display: -webkit-box;
-webkit-box-orient: horizontal; -webkit-box-direction: normal;
-webkit-box-pack: justify; -webkit-box-align: stretch;
-webkit-box-lines: single; display: -webkit-flex;
-webkit-flex-direction: row; -webkit-justify-content: space-between;
-webkit-align-items: strecth; -webkit-align-content: flex-start;
-webkit-flex-wrap: nowrap; padding: 20rpx 40rpx; } .c-span3 { width:
25%; -webkit-box-flex: 3; -webkit-flex: 3 3 auto; } .c-span9 { width:
75%; -webkit-box-flex: 9; -webkit-flex: 9 9 auto; } .search-line {
position: relative; height: 96rpx; line-height: 96rpx; font-size: 30rpx;
font-weight: 600; border-bottom: 1rpx solid #e6e6e6; }
.search-line::after { content: “”; display: inline-block;
vertical-align: middle; width: 20rpx; height: 20rpx; border-top: 4rpx
solid #00b358; border-right: 4rpx solid #00b358; position: absolute;
right: 60rpx; top: 50%; margin-top: -4rpx; -webkit-transform:
rotate(45deg) translateY(-50%); transform: rotate(45deg)
translateY(-50%); -webkit-box-sizing: border-box; box-sizing:
border-box; } .search-line-txt { text-align: right; padding-right:
60rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

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
.btn-primary {
    background-color: #00b358;
    color: #fff;
    border: 0 none;
}
.btn, .btn-primary, .btn-secondary, .btn-sub {
    line-height: 88rpx;
    height: 88rpx;
    padding: 0 20rpx;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    border-radius: 8rpx;
    cursor: pointer;
    font-size: 32rpx;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.full-width {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
 
.c-row {
    width: auto;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-box-pack: justify;
    -webkit-box-align: stretch;
    -webkit-box-lines: single;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-justify-content: space-between;
    -webkit-align-items: strecth;
    -webkit-align-content: flex-start;
    -webkit-flex-wrap: nowrap;
    padding: 20rpx 40rpx;
}
 
.c-span3 {
    width: 25%;
    -webkit-box-flex: 3;
    -webkit-flex: 3 3 auto;
}
 
.c-span9 {
    width: 75%;
    -webkit-box-flex: 9;
    -webkit-flex: 9 9 auto;
}
 
.search-line {
    position: relative;
    height: 96rpx;
    line-height: 96rpx;
    font-size: 30rpx;
    font-weight: 600;
    border-bottom: 1rpx solid #e6e6e6;
}
 
.search-line::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 20rpx;
    height: 20rpx;
    border-top: 4rpx solid #00b358;
    border-right: 4rpx solid #00b358;
    position: absolute;
    right: 60rpx;
    top: 50%;
    margin-top: -4rpx;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
 
.search-line-txt {
    text-align: right;
    padding-right: 60rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

<template name=”searchbox”> <view class=”c-row search-line”
data-flag=”start”> <view class=”c-span3″> 出发</view>
<view class=”c-span9 js-start search-line-txt”>
请选择出发地</view> </view> <view class=”c-row
search-line” data-flag=”arrive”> <view class=”c-span3″>
到达</view> <view class=”c-span9 js-arrive search-line-txt”>
请选择到达地</view> </view> <view class=”c-row ”
data-flag=”arrive”> <span class=”btn-primary full-width
js_search_list”>查询</span> </view> </template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template name="searchbox">
  <view class="c-row search-line" data-flag="start">
      <view class="c-span3">
          出发</view>
      <view class="c-span9 js-start search-line-txt">
          请选择出发地</view>
  </view>
  <view class="c-row search-line" data-flag="arrive">
      <view class="c-span3">
          到达</view>
      <view class="c-span9 js-arrive search-line-txt">
          请选择到达地</view>
  </view>
  <view class="c-row " data-flag="arrive">
      <span class="btn-primary full-width js_search_list">查询</span>
  </view>
</template>

图片 9

如此一来,我们基本的弹出层样式就七七八八了,这里可以看出一些特点:小程序与平时我们的样式差距不大,稍微改点就能用,甚至能直接通用;另一方面,我们也需要思考一个问题:公共部分的CSS该怎么处理?其实我这里需要解决的不只是公共的样式部分,还需要解决公共的组件部分。

我这里想的是将所有公共部分的CSS放到一个全局的文件global.wxss中,然后在每个业务级页面import即可,所以我们这里需要形成一个公共的WXSS库,这个与纯web映射起来即可,我们这里便不深入。