微信小程序
小程序事件绑定
我们在js文件中写逻辑, 然后在wxml文件中写标签，最后我们用模拟器来展示最终页面
// 在wxml文件中写标签
<!--
1.需要给input标签绑定 input事件
绑定的关键字 bindinput
2.如何获取输入框的值
通过事件源对象来获取
e.detail.value
3.把输入框的值 赋值到data中
不能直接这样写
1.this.data.num=e.detail.value
2.thisnum=e.detail.value
正确写法
this.setData({
num:e.detail.value
})
4.需要加入一个点击事件
1.bindtap
2.无法在小程序当中的 事件中 直接来传参
3.通过自定义属性的方式来传递参数
-->
<input type="text" bindinput="handleInput" />
<button bindtap="handletap" data-item="{{1}}">+</button>
<button bindtap="handletap" data-item="{{-1}}">-</button>
<view>
{{num}}
</view>
// 在js文件中写逻辑
Page({
data: {
num:0
},
// 输入框的input事件的执行逻辑
handleInput: function(e){
console.log('微信小程序')
console.log(e) // 事件源
console.log(e.detail.value); // 获取输入框输入的值
this.setData({
num:e.detail.value
})
},
// 加 减 按钮的事件
handletap(e){
// 获取自定义的属性 item
const item = e.currentTarget.dataset.item
// console.log(item)
this.setData({
num:this.data.num + item
})
}
})
样式 WXSS
WXSS(WeiXin Style Sheets)是⼀套样式语⾔，⽤于描述 WXML 的组件样式。
与 CSS 相⽐，WXSS 扩展的特性有： 1) 响应式⻓度单位:rpx 2) 样式导⼊
1.1 尺寸单位
rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。
如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素,
1rpx = 0.5px = 1物理像素 。
| 设备 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
注意: 开发微信小程序时设计师可以⽤ iPhone6 作为视觉稿的标准.
尺寸单位 小案例
我们在在wxml文件中写标签, 然后在wxss写样式，最后我们用模拟器来展示最终页面
// wxml文件中写标签
<view>
rpx
</view>
// 在wxss写样式
/*
1.小程序中 不需要主动来引入样式文件
2.需要把页面中某些元素的单位 由 px 改成 rpx
1.设计稿 750px
1px = 1rpx
2.把屏幕宽度 改成 375px
375px = 750rpx
1px = 2rpx
0.5px = 1rpx
3.存在一个设计稿 宽度 414 或者 未知 page
1.设计稿 page 存在一个元素 宽度为 100px
2.拿以上的需求 去实现 不同的宽度的页面适配
page px = 75rpx
1px = 750rpx / page
100px = 750rpx * 100 / page
4.利用一个属性 calc属性 css 和 wxss都支持这个属性
1.750 和 rpx 中间不要留空格
2.运算符的两边页不要留空格
*/
view{
width: 200rpx;
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
/* 以下为错误代码 */
/* width: 750 rpx * 100 / 375; */
width:calc(750rpx * 100 / 375)
}
1.2 样式导入
wxss中直接就⽀持，样式导⼊功能。 使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。
样式导入 小案例
我们在最外层创建css样式文件, 然后在需要它的时候引入它, 最后我们用模拟器来展示最终页面
// 最外层创建css样式文件
view{
color: pink;
font-size: 35px;
}
// 在需要它的时候引入它
/*
1.引入的 代码 是通过 @imopt 来引入
2.路径 只能写相对路径
*/
@import "../../styles/css.wxss"
1.3 选择器
特别需要注意的是 小程序 不⽀持通配符 * 因此以下代码⽆效！
*{
margin:0;
padding:0;
box-sizing:border-box;
}
⽬前⽀持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有 class= intro 的组件 |
| #id | #firstname | 选择拥有 id= firstname 的组件 |
| element | view | 选择所有 view 组件 |
| element, element | view,checkbox | 选择所有⽂档的 view 组件和所有的 checkbox 组 件 |
| nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
| ::after | view::after | 在 view 组件后边插⼊内容 |
| ::before | view::before | 在 view 组件前边插⼊内容 |
1.4 小程序中使用less
原⽣小程序不⽀持 less 其他基于小程序的框架⼤体都⽀持，如 wepy , mpvue , taro 等。
但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现
- 编辑器是 vscode
- 安装插件 easy less
- 在vs code的设置中加⼊如下，配置
"less.compile": {
"outExt":".wxss"
}
4.在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。
常见组件
小程序的常⽤布局组件: view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox 等
1.1 view
代替 原来的 div 标签
<view hover-class="h-class">
点击我试试
</view>
1.2 text
1.⽂本标签 2. 只能嵌套text 3.⻓按⽂字可以复制（只有该标签有这个功能）4.可以对空格 回车 进行编码
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectable | Boolean | false | ⽂本是否可选 |
| decode | Boolean | false | 是否解码 |
模拟器最终效果:
1.3 image
- 图片标签，image组件默认宽度320px、⾼度240px 2) ⽀持懒加载
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | 图片资源地址 | |
| mode | String | scaleToFill | 图片裁剪、缩放的模式 |
| lazy-load | Boolean | false | 图片懒加载 |
mode 有效值： mode 有 13 种模式，其中 4 种是缩放模式，9种是裁剪模式。
| 模式 | 值 | 说明 |
|---|---|---|
| 缩放 | scaleToFill | 不保持纵横比缩放图片，使图片的宽⾼完全拉伸至填满 image 元素 |
| 缩放 | aspectFit | 保持纵横比缩放图片，使图片的长边能完全显示出来。 |
| 缩放 | aspectFill | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。 |
| 缩放 | widthFix | 宽度不变，高度自动变化，保持原图宽高比不变 |
| 裁剪 | top | 不缩放图片，只显示图片的顶部区域 |
| 裁剪 | bottom | 不缩放图片，只显示图片的底部区域 |
| 裁剪 | center | 不缩放图片，只显示图片的中间区域 |
| 裁剪 | left | 不缩放图片，只显示图片的左边区域 |
| 裁剪 | right | 不缩放图片，只显示图片的右边区域 |
| 裁剪 | top left | 不缩放图片，只显示图片的左上边区域 |
| 裁剪 | top right | 不缩放图片，只显示图片的右上边区域 |
| 裁剪 | bottom left | 不缩放图片，只显示图片的左下边区域 |
| 裁剪 | bottom right | 不缩放图片，只显示图片的右下边区域 |
模拟器效果为:
1.4 swiper
微信内置轮播图组件
在wxml文件中写轮播图, wxss文件中写样式 , 模拟器上展示最终结果
// 在wxml文件中写轮播图
<!--
1. 轮播图外层容器 swiper
2. 每一个轮播项 swiper-item
3. swiper标签存在 样式 默认宽度 100% ⾼度 150px, 高度无法有内容撑开
4.先找出 原图的宽度和高度 等比例 给swiper定宽度和高度
原图的宽度和高度 640 * 200 px
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
height: 100vw * 200 / 640
5. autoplay 自动轮播
6. interval 修改轮播时间
7. circular 衔接轮播
8. indicator-dots 开启 分页器
-->
<swiper circular autoplay interval="1000" indicator-dots>
<swiper-item><image mode="widthFix" src="https://aecpm.alicdn.com/simba/img/TB14ab1KpXXXXclXFXXSutbFXXX.jpg_q50.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i4/2206686532409/O1CN01AvWrxo1TfMoGhlUq5_!!2206686532409-0-lubanimage.jpg"></image></swiper-item>
<swiper-item><image mode="widthFix" src="//img.alicdn.com/imgextra/i4/2206686532409/O1CN01Wfw7aW1TfMoFI0ECZ_!!2206686532409-0-lubanimage.jpg"></image></swiper-item>
</swiper>
// wxss文件中写样式
swiper{
width: 100%;
height: calc(100vw * 200 / 640);
}
image{
width: 100%;
}
轮播图常用属性:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显示⾯板指示点 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示点颜⾊ |
| indicator-active-color | Color | #000000 | 当前选中的指示点颜⾊ |
| autoplay | Boolean | false | 是否自动切换 |
| interval | Number | 5000 | 自动切换时间间隔 |
| circular | Boolean | false | 是否循环轮播 |
1.5 navigator
导航组件 类似超链接标签
在wxml文件中写navigator, 模拟器上展示最终结果
// 在wxml文件中写navigator
<!--
导航组件 navigator
-->
<navigator url="/pages/wx07/wx07">轮播图页面</navigator>
<navigator url="/pages/index/index">tabber页面</navigator>
<navigator open-type="redirect" url="/pages/wx07/wx07">轮播图页面</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab 跳到 tabber页面</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch 随便跳</navigator>
navigator常用属性:
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| target | String | self | 在哪个目标上发⽣跳转，默认当前小程序，可选值 self 和 miniProgram |
| url | String | 当前小程序内的跳转链接 | |
| open- type | String | navigate | 跳转方式 |
open-type 有效值：
| 值 | 说明 |
|---|---|
| navigate | 保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar 页面 |
| redirect | 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar 页面。 |
| switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| reLaunch | 关闭所有页面，打开到应⽤内的某个页面 |
| navigateBack | 关闭当前页面，返回上⼀页面或多级页面。可通过 getCurrentPages() 获取当 前的页面栈，决定需要返回几层 |
| exit | 退出小程序，target= miniProgram 时⽣效 |
1.6 rich-text
富文本标签可以将字符串解析成 对应标签，类似 vue中的 v-html 标签
在wxml文件中写标签, js文件中解析 , 模拟器上展示最终结果
// 在wxml文件中写标签
<!--
rich-text 富文本标签
1. nodes属性来实现
1) 接收标签字符串
2) 接收对象数组
-->
<rich-text nodes="{{html}}"></rich-text>
// js文件中解析
Page({
data: {
html:[
{
name:'div',
attrs:{
class:'my-div',
style:'color:red'
},
children:[
{
name:'p',
attrs:{},
children:[
{
type:'text',
text:'hello'
}
]
}
]
},
]
}
})
nodes属性: nodes 属性⽀持 字符串 和 标签节点数组
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| name | 标签名 | string | 是 | ⽀持部分受信任的 HTML 节点 |
| attrs | 属性 | object | 否 | ⽀持部分受信任的属性，遵循 Pascal 命名法 |
| children | ⼦节点列表 | array | 否 | 结构和 nodes ⼀致 |
⽂本节点：type = text
| 属性 | 说明 | 类型 | 必填 | 备注 |
|---|---|---|---|---|
| text | ⽂本 | string | 是 | ⽀持entities |
nodes 不推荐使⽤ String 类型，性能会有所下降.
rich-text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤小写不敏感。 如果使⽤了不受信任的 HTML 节点，该节点及其所有⼦节点将会被移除。
img 标签仅⽀持⽹络图片。
511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
