关注前端 | 前端博客
当前位置: 微信公众号 > 微信公众号开发总结

微信公众号开发总结

2018-12-08 分类:微信公众号 作者:管理员 阅读(329)

微信H5页面 - 框架选取

jQuery WEUI:jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间
需要引入的文件:
weui.css
jquery-weui.css
jquery-2.1.4.js
jquery-weui.js
fastclick.js(iOS 系统下默认的 click 事件会有300毫秒的延迟,这个延迟是iOS系统的特性而不是jQuery WeUI设定的,可以使用 fastclick 来消除这个延迟)
基础组件,WeUI 包含了大量常用的组件:按钮,表单,列表,对话框等。这里的组件全部都是官方的样式。
拓展组件,拓展组件是官方WeUI中暂时没有的组件。这些组件全部都是jQuery WeUI新增的。

微信H5页面 - 适配

移动端适配,已经是必须要解决的问题,个人采取的适配方案:
需要用到的:CSS预处理器(它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件),我选择其中的一种sass,
SASS是Ruby语言写的,但是两者的语法没有关系。不懂Ruby,照样使用。只是必须先安装Ruby,然后再安装SASS。
假定你已经安装好了Ruby,接着在命令行输入下面的命令:gem install sass
然后,就可以使用了。
使用:
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。
下面的命令,可以在屏幕上显示.scss文件转化的css代码。(假设文件名为test。)
sass test.scss
如果要将显示结果保存成文件,后面再跟一个.css文件名。
sass test.scss test.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw!important;
    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px!important;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px!important;
    }
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}

微信H5页面 - 适配兼容jQuery WEUI的插件处理(日历)

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
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw!important;
    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px!important;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px!important;
    }
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
     @return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw!important;
    // 同时,通过Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
        font-size: 64px!important;
    }
    @media screen and (min-width: 540px) {
        font-size: 108px!important;
    }
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
    max-width: 540px;
    min-width: 320px;
}
/* === Calendar === */
.weui-picker-calendar{
  height:rem(300);
}
.toolbar{
  font-size:rem(17);
}
.toolbar .toolbar-inner{
  height:rem(44);
}

.picker-calendar-month-picker, .picker-calendar-year-picker{
  line-height:rem(44);
}

.picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only{
  font-size:rem(17);
  height:44px;
  line-height:rem(40);
}
i.icon.icon-next, i.icon.icon-prev{
  font-size:rem(17);
  width:rem(15);
  height:rem(15);
}
.picker-calendar-month-picker .current-month-value, .picker-calendar-year-picker .current-month-value, .picker-calendar-month-picker .current-year-value, .picker-calendar-year-picker .current-year-value{
  font-size:rem(17);
  height:rem(44);
}
.weui-picker-calendar .picker-modal-inner{
  font-size:rem(16);
  height:rem(256);
}
.picker-calendar-week-days{
  height:rem(18);
}
.picker-calendar-week-days .picker-calendar-week-day{
  font-size:12px;
}
.picker-calendar-week-days + .picker-calendar-months{
  font-size:rem(16);
  height:rem(238);
}
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
html {
  font-size: 20vw !important; }
  @media screen and (max-width: 320px) {
    html {
      font-size: 64px !important; } }
  @media screen and (min-width: 540px) {
    html {
      font-size: 108px !important; } }

body {
  max-width: 540px;
  min-width: 320px; }

html {
  font-size: 20vw !important; }
  @media screen and (max-width: 320px) {
    html {
      font-size: 64px !important; } }
  @media screen and (min-width: 540px) {
    html {
      font-size: 108px !important; } }

body {
  max-width: 540px;
  min-width: 320px; }

/* === Calendar === */
.weui-picker-calendar {
  height: 4rem; }

.toolbar {
  font-size: 0.2266666667rem; }

.toolbar .toolbar-inner {
  height: 0.5866666667rem; }

.picker-calendar-month-picker, .picker-calendar-year-picker {
  line-height: 0.5866666667rem; }

.picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only {
  font-size: 0.2266666667rem;
  height: 44px;
  line-height: 0.5333333333rem; }

i.icon.icon-next, i.icon.icon-prev {
  font-size: 0.2266666667rem;
  width: 0.2rem;
  height: 0.2rem; }

.picker-calendar-month-picker .current-month-value, .picker-calendar-year-picker .current-month-value, .picker-calendar-month-picker .current-year-value, .picker-calendar-year-picker .current-year-value {
  font-size: 0.2266666667rem;
  height: 0.5866666667rem; }

.weui-picker-calendar .picker-modal-inner {
  font-size: 0.2133333333rem;
  height: 3.4133333333rem; }

.picker-calendar-week-days {
  height: 0.24rem; }

.picker-calendar-week-days .picker-calendar-week-day {
  font-size: 12px; }

.picker-calendar-week-days + .picker-calendar-months {
  font-size: 0.2133333333rem;
  height: 3.1733333333rem; }

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 1 条评论 - 微信公众号开发总结

  1. 楚狂人博客 Windows NT Chrome 63.0.3239.132

    很有用的分享,感谢

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线