微信小程序3天课程学习的第1天笔记
视频教程里,老师在开始讲微信小程序之前,补充了一些基本的概念和理论知识
为后面正式的学习如何开发微信小程序做准备
视频教程中,老师的建议是:
1. 不填写appid,直接点体验
2. 勾选建立普通快速启动模板
如图所示:
由于没有右键菜单,
所以想要审查元素,只能:
1.点击「箭头」
2.点击对应的元素
3.点击「Wxml」
如图所示:
如果觉得调试栏上的「Wxml」比较常用, 可以将其拖动到工具栏的前面来
老师总结的html与微信小程序之间的对比:
1. rpx单位
2. 样式导入
3. json严格模式: 用双引,无注释
关于rpx 的一点补充:
rpx是微信小程序新推出的一个单位,
rpx 全称是: responsive pixel 响应式像素
按官方的定义,rpx可以根据屏幕宽度进行自适应,
在rpx出现之前,web页面的自适应布局已经有了多种解决方案,为什么微信还捣鼓出新的rpx单位?
在解释这个单位前,我们先简单了解一下目前的主流的自适应布局解决方案:
响应式(Responsive web design)
rem
流式布局
scale伸缩布局
响应式
响应式布局的问题在于需要维护多个样式文件,维护成本太大,一般的移动H5页面 都不会优先考虑。
rem
rem是近几年比较流行的方案,淘宝移动web端就是采用此方案,
由于 1 rem = 根元素font-size,所以rem布局的本质就是通过rem把页面按比例分割达到自适应的效果,
因为rem是相对根路径font-size尺寸,不同的页面设置不同的font-size尺寸,即可达到自适应的效果。
document.documentElement.style.fontSize = window.innerWidth + 'px';
然后设置<div class="box"></div>
的宽高等于1rem,就可以使box的宽高自适应各种设备尺寸。
因为box的单位1em是跟页面设备的宽对应的,所以能做到自适应各种尺寸。
流式布局
流式布局需要用到百分比或者flex,即宽度永远铺满页面宽度,但高度和其他单位仍然用px。
一般都比较推荐用流式布局,因为流式布局不需要像 rem 那样额外通过js动态调整根元素的字体尺寸。
虽然某些大屏幕下,无法100%还原设计稿,但这也是流式布局的精髓,它的字体精度可以保持跟设备系统一致(dpi)。
scale伸缩布局
scale伸缩布局顾名思义,就是通过拉伸缩小页面来达到自适应。
有两种方法,一是通过js更改viewport的initial-scale,这种方法比较麻烦,
另一种是直接写死viewport的宽度,例如:<meta name="viewport" content="width=360, user-scalable=no">
,
意思就是告诉浏览器:这个页面我要一直用360px的宽度处理,在不同的尺寸上,麻烦伸缩一下。
假如在320的iphone上,放大到360,在375的iphone上,缩小到360。
这样我只需要以360这个尺寸出设计稿就行,页面会伸缩适应。
scale伸缩的问题在于,不能显式设置minimum-scale=1.0,否则就达不到效果。
而这个值是chromium37以上的webview触发 gpu raster 的一个条件,所以用这种方法就没法利用gpu raster硬件加速。
rpx布局
上面四个方法,各有优缺点,
现在回头看看微信的rpx,相信大家已经有所启发,
rpx实际上就是系统级的rem
(把页面按比例分割 750份 ,1rpx=window.innerWidth/750),或者scale伸缩布局的width=750
。
也就是说,微信小程序的rpx布局帮大家把rem布局的js设置根元素字体尺寸这步省了,
或者减少了scale伸缩布局不能开启gpu raster的问题。
通过rpx,大家只需要根据750的设计稿写代码即可,
不必担心它在各个平台的适配情况,实际上在各个平台都会长得一样
示例效果如下:
关于微信小程序的组织结构示意图:
关于微信小程序中的图片(原图: 2048 * 1280)
1. 可以写相对路径, 也可以写绝对路径
2. 图片宽度: 100%, 高度:写468.75rpx (必须设置)
注意: 这个468.75rpx是根据 整个屏幕宽度为750rpx计算得来的: 1280*750/2048
原图: 2048 * 1280
在iphone 6 7 8 上显示的大小为: 375 * 234.38
代码及效果如下:
下面,再把面板中的9个按钮添加到小程序demo中
1. index.wxml代码如下:
<!--index.wxml--> <view class='class_view_carousel'> <image src='/img/menma.jpg'></image> </view> <!-- 9个按钮 --> <view class='class_view_panel'> <navigator class="class_nav"> <image src='/img/beyond.jpg'></image> <text>未闻花名</text> </navigator> <navigator class="class_nav"> <image src='/img/mathilda.jpg'></image> <text>mathilda</text> </navigator> <navigator class="class_nav"> <image src='/img/jennifer.png'></image> <text>美国往事</text> </navigator> <navigator class="class_nav"> <image src='/img/beyond.jpg'></image> <text>未闻花名</text> </navigator> <navigator class="class_nav"> <image src='/img/mathilda.jpg'></image> <text>mathilda</text> </navigator> <navigator class="class_nav"> <image src='/img/jennifer.png'></image> <text>美国往事</text> </navigator> <navigator class="class_nav"> <image src='/img/beyond.jpg'></image> <text>未闻花名</text> </navigator> <navigator class="class_nav"> <image src='/img/mathilda.jpg'></image> <text>mathilda</text> </navigator> <navigator class="class_nav"> <image src='/img/jennifer.png'></image> <text>美国往事</text> </navigator> </view>
1. wxss样式如下:
.class_view_carousel { width: 100%; height: 469rpx; /* 这个是为了解决图片底部的一小段空白 */ overflow: hidden; } .class_view_carousel image { width: 100%; height: 469rpx; } .class_view_panel { /* 水平排列, 每行3个, wrap */ display: flex; flex-wrap: wrap; } /* 设置nav 33.33% */ .class_nav { width: 33.333%; height: 200rpx; /* 必须添加这个 */ box-sizing: border-box; /* 设置里面的image 和 text 垂直居中 */ display: flex; flex-direction: column; justify-content: center; align-items: center; /* 文字必须使用像素 */ font-size: 16px; /* 边框必须使用 rpx */ /* 只给右 + 底边 添加边框 */ border-right: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; } /* 最右边的 第3|6|9个不需要边框 即: 3n个子元素 */ .class_view_panel .class_nav:nth-child(3n) { border-right: 0rpx none; } /* 设置图片宽高 */ /* 第1个 必须使用类名 */ .class_nav image { width: 80rpx; height: 80rpx; }
效果如下:
关键点: 关于边框的细节处理
第1种处理方法: 使用 右边框 和 底边框
/* 设置nav 33.33% */ .class_nav { ... ... /* 边框必须使用 rpx */ /* 只给右 + 底边 添加边框 */ border-right: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc; } /* 最右边的 第3|6|9个不需要边框 即: 3n个子元素 */ .class_view_panel .class_nav:nth-child(3n) { border-right: 0rpx none; }
第2种处理方法, 对右边框使用 伪(WYL)元素
代码如下:
/* 设置nav 33.33% */ .class_nav { ... ... /* 边框必须使用 rpx */ /* 只给底边 添加边框 */ border-bottom: 1rpx solid #ccc; /* 第2种边框处理方式: 右边框使用伪元素 */ position: relative; } /* 最右边的 第3|6|9个不需要边框 即: 3n个子元素 */ /* .class_view_panel .class_nav:nth-child(3n) { border-right: 0rpx none; } */ /* 边框的第2种处理方式, 使用after伪元素 */ .class_view_panel .class_nav::after { position: absolute; content: ""; width: 1rpx; height: 100%; top: 0; right: 0; background-color: #ccc; } .class_view_panel .class_nav:nth-child(3n)::after { width: 0; }
效果如下:
小程序的大小有限制? 2M 为上限???
还是关于顶部大图的缩放问题,
在CSS3中,使用比较多的就是: background-size:cover;
在小程序中,关于图片建议:
1. 设置宽和高
2. 设置缩放mode,如 aspectFill或者widthFix
3.
我们直接通过IDE的菜单,进入到 开发文档 - 组件 章节, 找到image组件
可以看到缩放mode
mage
图片。
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
src | String | 图片资源地址 | ||
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 | |
lazy-load | Boolean | false | 图片懒加载。只针对page与scroll-view下的image有效 | 1.5.0 |
binderror | HandleEvent | 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} | ||
bindload | HandleEvent | 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:'图片高度px', width:'图片宽度px'} |
注:image组件默认宽度300px、高度225px
mode 有效值:
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
缩放 | aspectFill | 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
缩放 | widthFix | 宽度不变,高度自动变化,保持原图宽高比不变 |
裁剪 | top | 不缩放图片,只显示图片的顶部区域 |
裁剪 | bottom | 不缩放图片,只显示图片的底部区域 |
裁剪 | center | 不缩放图片,只显示图片的中间区域 |
裁剪 | left | 不缩放图片,只显示图片的左边区域 |
裁剪 | right | 不缩放图片,只显示图片的右边区域 |
裁剪 | top left | 不缩放图片,只显示图片的左上边区域 |
裁剪 | top right | 不缩放图片,只显示图片的右上边区域 |
裁剪 | bottom left | 不缩放图片,只显示图片的左下边区域 |
裁剪 | bottom right | 不缩放图片,只显示图片的右下边区域 |
示例:
在开发者工具中预览效果
<view class="page">
<view class="page__hd">
<text class="page__title">image</text>
<text class="page__desc">图片</text>
</view>
<view class="page__bd">
<view class="section section_gap" wx:for="{{array}}" wx:for-item="item">
<view class="section__title">{{item.text}}</view>
<view class="section__ctn">
<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>
</view>
</view>
</view>
</view>
Page({
data: {
array: [{
mode: 'scaleToFill',
text: 'scaleToFill:不保持纵横比缩放图片,使图片完全适应'
}, {
mode: 'aspectFit',
text: 'aspectFit:保持纵横比缩放图片,使图片的长边能完全显示出来'
}, {
mode: 'aspectFill',
text: 'aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来'
}, {
mode: 'top',
text: 'top:不缩放图片,只显示图片的顶部区域'
}, {
mode: 'bottom',
text: 'bottom:不缩放图片,只显示图片的底部区域'
}, {
mode: 'center',
text: 'center:不缩放图片,只显示图片的中间区域'
}, {
mode: 'left',
text: 'left:不缩放图片,只显示图片的左边区域'
}, {
mode: 'right',
text: 'right:不缩放图片,只显示图片的右边边区域'
}, {
mode: 'top left',
text: 'top left:不缩放图片,只显示图片的左上边区域'
}, {
mode: 'top right',
text: 'top right:不缩放图片,只显示图片的右上边区域'
}, {
mode: 'bottom left',
text: 'bottom left:不缩放图片,只显示图片的左下边区域'
}, {
mode: 'bottom right',
text: 'bottom right:不缩放图片,只显示图片的右下边区域'
}],
src: '../../resources/cat.jpg'
},
imageError: function(e) {
console.log('image3发生error事件,携带值为', e.detail.errMsg)
}
})
原图
scaleToFill
不保持纵横比缩放图片,使图片完全适应
aspectFit
保持纵横比缩放图片,使图片的长边能完全显示出来
aspectFill
保持纵横比缩放图片,只保证图片的短边能完全显示出来
top
不缩放图片,只显示图片的顶部区域
bottom
不缩放图片,只显示图片的底部区域
center
不缩放图片,只显示图片的中间区域
left
不缩放图片,只显示图片的左边区域
right
不缩放图片,只显示图片的右边边区域
top left
不缩放图片,只显示图片的左上边区域
top right
不缩放图片,只显示图片的右上边区域
bottom left
不缩放图片,只显示图片的左下边区域
bottom right
不缩放图片,只显示图片的右下边区域
底部新增两个图片按钮,
代码如下:
<!-- 两个图片按钮 --> <view class='class_view_login'> <navigator > <image src='/img/girl.png'></image> </navigator> <navigator > <image src='/img/boy.png'></image> </navigator> </view> /* ============================================ */ /* 登录注册模块 */ .class_view_login { padding: 10rpx 20rpx; display: flex; } .class_view_login navigator { width: 50%; /* 让a 里面的 图片居中 */ display: flex; justify-content: center; } /* 136px 88px */ .class_view_login navigator image{ width: 338rpx; height: 188rpx; }
效果如下:
操作面板 与 底部的按钮之间还有一个间隔,
第1种做法: 直接加一个view(推荐), 然后定义一个全局class样式作为divider
并且,把这一个全局的class样式,放到app.wxss里面
代码如下:
<!-- 分隔线 --> <view class='class_view_sperator'> </view> /* ============================================ */ /* 分隔线 还可以加阴影效果 */ .class_view_sperator { width: 100%; height: 10rpx; background-color: rgb(233, 233, 233) }
效果如下:
下面是把一些样式(比如divider样式 | 右边框样式等) 放到app.wxss公共样式文件里
代码如下:
/* 一些公共的样式,放在app.wxss文件内 */ /* ============================================ */ /* 分隔线 */ .class_view_sperator { width: 100%; height: 10rpx; background-color: rgb(233, 233, 233) } /* ============================================ */ /* 边框的第2种处理方式, 使用after伪元素 */ .class_border_right { /* 底部边框照样加 */ border-bottom: 1rpx solid #ccc; /* 右边的边框则使用伪类 */ /* 最后记得要在第3 6 9 个的时候,把右边的伪类width置0 */ /* .class_border_right:nth-child(3n)::after { width: 0;} */ position: relative; } .class_border_right::after { position: absolute; content: ""; width: 1rpx; height: 100%; top: 0; right: 0; background-color: #ccc; }
关于IDE的 快捷键, 比如: 格式化代码,快速预(cbd)览(jtyq)效果
關於編輯器禁止保存時,自動編譯
如圖所示: (百度五笔-自动切换繁体与简体快捷键-Ctrl+T)
关于轮播图的两点注意事项:
1. swiper 组件 默认高度只有150
2. 给swiper组件 设置值时: 要使用数据绑定的形式 {{ false }} {{ true }}
代码如下:
<!--index.wxml--> <view class='class_view_carousel'> <swiper indicator-dots='{{ true }}' autoplay='{{ true }}'> <swiper-item> <image src='/img/menma.jpg'></image> </swiper-item> <swiper-item> <image src='/img/tiger.jpg'></image> </swiper-item> </swiper> </view> .class_view_carousel { width: 100%; height: 469rpx; /* 这个是为了解决图片底部的一小段空白 */ overflow: hidden; } /* 注意这儿 swiper默认高度只有150,要手动设置 */ .class_view_carousel swiper,.class_view_carousel image { width: 100%; height: 469rpx; }
效果如下:
如果想要让轮播图进行轮播
设置swiper的参数circular={{ true }}
接下来配置一下首页的标题栏
关于app.json
1. 严格模式
2. 不能加注释
3. 不能用单引号
4. 不能有多余的逗号
代码如下:
{ "pages":[ "pages/index/index" ], "window":{ "navigationBarBackgroundColor": "#f60", "navigationBarTitleText": "未闻花名", "navigationBarTextStyle":"white", "enablePullDownRefresh": true, "backgroundTextStyle": "dark" } }
效果如下:
注意: 如果在pages属性对应的数组中, 增加一个路径的话(如pages/user/user)
则,IDE 会自动生成user目录 + user.js + user.wxss + user.wxml + user.json
如图所示:
再补充一点: pages属性中的数组第1个元素路径就是 默认的首页路径
.
未完待续,下一章节,つづく