web前端 -- 微信小程序总结

最新推荐文章于 2023-06-10 10:25:00 发布

大可不必_妄

最新推荐文章于 2023-06-10 10:25:00 发布

阅读量748

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/J_012345/article/details/117561167

版权

微信小程序专栏收录该内容

10 篇文章 2 订阅

订阅专栏

滚动 scroll-view

1、属性：

scroll-x：横向滚动，默认为 false。

scroll-y：纵向滚动，默认为 false。

upper-threshold：距顶部/左边多远时，触发 scrolltoupper 事件。

lower-threshold：距底部/右边多远时，触发 scrolltolower 事件。

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。

scroll-with-animation：在设置滚动条位置时使用动画过渡，默认为 false。

paging-enabled：分页滑动效果 (同时开启 enhanced 属性后生效)，默认为 false。

2、事件：

bindscrolltoupper：滚动到顶部/左边时触发。

bindscrolltolower：滚动到底部/右边时触发。

bindscroll：滚动时触发，event.detail。

按钮 button

1、属性：

size：按钮的大小，（default：默认，mini：小尺寸）。

type：按钮的样式类型，（default：默认白色，primary：绿色，warn：红色）。

plain：按钮是否镂空，背景色透明，默认为 false。

disabled：是否禁用，默认为 false。

loading：名称前是否带 loading 图标，默认为 false。

form-type：用于form组件，点击触发form事件，（submit：提交，reset：重置）。

open-type：微信开放能力，（contact：客服会话，getPhoneNumber：获取用户手机号，launchApp：APP，openSetting：授权设置页，feedback：“意见反馈”页面）。

hover-class：指定按钮按下去的样式类。

hover-stop-propagation：指定是否阻止本节点的祖先节点出现点击态，默认为 false。

show-message-card：是否显示会话内消息卡片。

2、事件：

bindcontact：客服消息回调，open-type="contact"时有效。

bindgetphonenumber：获取用户手机号回调，open-type=getPhoneNumber时有效。

binderror：当使用开放能力时，发生错误的回调，open-type=launchApp时有效。

bindopensetting：在打开授权设置页后回调，open-type=openSetting时有效。

bindlaunchapp：打开 APP 成功的回调，open-type=launchApp时有效。

输入框 input

1、属性：

value：输入框的初始内容；

type：类型，（text：文本，number：数字，idcard：身份证，digit：小数点）；

placeholder：输入框为空时的提示；

placeholder-style：指定的样式；

placeholder-class：指定的样式类；

disabled：是否禁用，默认为 false；

maxlength：最大输入长度，设置为 -1 的时候不限制最大长度；

focus：获取焦点；

confirm-type：键盘右下角按钮的文字，（send：发送，search：搜索，next：下一个，go：前往，done：完成）。

2、事件：

bindinput：键盘输入时触发，event.detail。

bindfocus：输入框聚焦时触发，event.detail。

bindblur：输入框失去焦点时触发，event.detail。

bindconfirm：点击完成按钮时触发，event.detail。

3、input的双向绑定：

{{age}}

<input model:value=”{{age}}” />

data:{
age:67
}

文本 text

user-select：文本是否复制，该属性会使文本节点显示为 inline-block，默认为 false。

space：连续空格，（ensp：中文字符空格一半大小，emsp：中文字符空格大小，nbsp：根据字体设置的空格大小）。

decode：解码，默认为 false。

进度条 progress

percent：百分比0~100；

show-info：在进度条右侧显示百分比；

border-radius：圆角大小；

font-size：右侧百分比字体大小；

stroke-width：进度条线的宽度；

color：进度条颜色（请使用activeColor）；

activeColor：已选择的进度条的颜色；

backgroundColor：未选择的进度条的颜色；

active：进度条从左往右的动画；

active-mode：backwards: 动画从头播；forwards：动画从上次结束点接着播；

duration：进度增加1%所需毫秒数；

bindactiveend：动画完成事件。

富文本 rich-text

nodes：节点列表。

space：连续空格，（ensp：中文字符空格一半大小，emsp：中文字符空格大小，nbsp：根据字体设置的空格大小）。

图片 image

1、lazy-load：懒加载，在即将进入一定范围（上下三屏）时才开始加载，默认为 false。

2、show-menu-by-longpress：长按图片显示识别小程序码菜单，默认为 false。

3、mode：图片的显示方式（裁切、缩放）

scaleToFill：（默认值），图片变形充满整个容器，不保持纵横比缩放图片；

aspectFit：使图片的长边能完全显示出来，缩放图片，不裁切；

aspectFill：使图片的短边能完全显示出来，缩放图片，裁切图片；

widthFix：宽度不变，缩放图片，不裁切；

heightFix：高度不变，缩放图片，不裁切；

center：图片居中，不缩放，裁切图片。

富文本编辑器 editor

1、属性

read-only：设置编辑器为只读，默认为 false；

placeholder：提示信息；

show-img-size：点击图片时显示图片大小控件，默认为 false；

show-img-toolbar：点击图片时显示工具栏控件，默认为 false；

show-img-resize：点击图片时显示修改尺寸控件，默认为 false。

2、事件：

bindready：编辑器初始化完成时触发；

bindfocus：编辑器聚焦时触发，event.detail；

bindblur：编辑器失去焦点时触发，detail；

bindinput：编辑器内容改变时触发，detail；

bindstatuschange：通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式。

快速新建页面

小程序中的每个页面，都有4个文件组成，建议把他们放在同一个文件夹下，并且文件夹的名字和页面名字保持一致，在微信小程序开发工具中进行新建，4个页面会自动生成

定时器

Timeout：只触发一次。

setTimeout(function, number)：设定一个定时器。

clearTimeout(timeoutID)：取消由 setTimeout 设置的定时器。

Interval：循环触发。

setInterval(function, number)：设定一个定时器。

clearInterval(intervalID)：取消由 setInterval 设置的定时器。

data

自定义属性名，事件传参中使用

<view data-age=”45”>111</view>



Page({
    data:{
        age:18，
        arr:[4,6]
    }
})

1、读取

var a=this.data.age;

2、修改

this.setData({
    age:20,
    “arr[0]”:88
})

事件

tap：单击。

longpress：长按（按下>350ms）。

touchmove：按下并且手指滑动。

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递，例如：bindtap。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递，例如：catchtap。

互斥事件绑定：例如：mut-bind:tap。

wxml页面:

<view bindtap="tapName"> Click me! </view>


js页面：

Page({
    tapName: function(event) {
        console.log(event)
    }
})

事件传参

小程序的事件传参和vue的不一样，它把参数写在data-*中，通过e.currentTarget.dataset接收。

wxml页面:

<view data-age=”67” data-num=”{{num}}” bindtap=”tap1”>点我</view>


js页面:

data:{
    num:8
}，
// 触发事件
tap1(e){
    var obj = e.currentTarget.dataset;//{age:67,num:8}
}

数据绑定

关键字(需要在双引号之内)：boolean 类型的 true，代表真值。boolean 类型的 false，代表假值。

wxml页面：

<view> {{ message }} </view>

js页面：

Page({
    data: {
        message: 'Hello MINA!'
    }
})


<checkbox checked="{{false}}"> </checkbox>

不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

条件渲染

wx:if：是惰性的，如果在初始渲染条件为false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染，具有更高的切换消耗。

hidden：组件始终会被渲染，只是简单的控制显示与隐藏，有更高的初始渲染消耗。

如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

列表渲染 wx:for

wx:key：唯一的标识符，（字符串，保留关键字*this 两种形式）。

wx:for-item：元素的变量名。

wx:for-index：下标的变量名。

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
        <view wx:if="{{i <= j}}">
            {{i}} * {{j}} = {{i * j}}
        </view>
    </view>
</view>

路由

wx.switchTab(object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

wx.reLaunch(object)：关闭所有页面，打开到应用内的某个页面。

wx.redirectTo(object)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

wx.navigateTo(object)：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。

wx.navigateBack(object)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

页面跳转有2种方法：

1、navigator组件跳转

<navigator  url=”../help/help”>跳到帮助页面</navigator >

wx.switchTab

2、navigateTo编程跳转

wx.navigateTo({
  url:""
})


wx.navigateBack跳转

wx.navigateBack({
  delta: 2
})

页面传参

页面跳转的时候，把参数放在地址栏后面，参数之间用&符隔开。

跳转方式1：

<navigator  url=”../help/help?age=9&num=7”>跳到帮助页面</navigator >

跳转方式2：

wx.navigateTo({
    url:"../about/about?age=6&num=9"
})

接收参数：

在目标页面，通过onLoad声明周期接收参数，参数以对象的方式，放在函数的形参中。
onLoad(option){
    console.log(option.num);
}

弹框

wx.showToast(object)：消息提示框。

wx.showModal(object)：模态对话框。

wx.showLoading(object)：loading 提示框，需主动调用 wx.hideLoading 关闭提示框。

wx.showActionSheet(object)：操作菜单。

wx.hideToast(object)：隐藏消息提示框。

wx.showLoading 和 wx.showToast 同时只能显示一个；wx.showToast 与 wx.hideToast 配对使用。

轮播swiper

indicator-dots：显示面板指示点，默认为 false。

indicator-color：指示点颜色。

indicator-active-color：当前选中的指示点颜色。

current：当前所在滑块的 index。

autoplay：自动切换，默认为 false。

interval：切换时间间隔。

duration：滑动动画时长。

circular：采用衔接滑动，默认为 false。

vertical：滑动方向是否为纵向，默认为 false。

<swiper autoplay=”{{true}}”>
    <swiper-item>11</swiper-item>
    <swiper-item>22</swiper-item>
    <swiper-item>33</swiper-item>
</swiper>

包装元素 block

block是包装元素，不是一个组件，不会再页面做渲染，直接控制属性，类似vue中的template。

<block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
</block>

<block wx:for="{{[1, 2, 3]}}">
    <view> {{index}}: </view>
    <view> {{item}} </view>
</block>

表单 form

将form组件内的表单元素，通过name属性，以键值对的形式，汇总提交给服务器。

提交事件：bindsubmit。

提交按钮：<button form-type="submit">提交</button>。

<form bindsubmit="tap1">
    <view>
        年龄：<input value="12" type="text" name="age" />
    </view>
    <view>
        <button form-type="submit">提交</button>
    </view>
</form>

tabBar

在app.json中，配置底部tab切换，最少2个，最多5个，可以控制tab的文字、图标、位置、颜色、边框。

"tabBar":{
    "selectedColor":"#f00",
    "list":[
        {
            "pagePath":"pages/index/index",
            "text":"首页1",
            "iconPath":"./img/home-1.png",
            "selectedIconPath":"./img/home-2.png"
        }
    ]
},

尺寸单位rpx

rpx全称（responsive pixel），响应式像素，它是小程序中推荐的长度单位，规定任何屏幕的宽度都是750rpx，可以把它看成是layui的栅格布局。这也是推荐美工设计图宽度为750rpx的原因。

view{
    width:750rpx;
}

数据缓存

小程序的本地存储比h5更强大，它可以存储任意数据类型，单个数据最大1M，总数据不得超过10M。

1、同步缓存数据

会阻塞当前任务，等保存成功，程序才会继续往下执行。

wx.setStorageSync(string key, data)：存储数据。

wx.getStorageSync(string key)：获取数据。

wx.removeStorageSync(string key)：清除指定数据。

wx.clearStorageSync()：清空所有数据。

wx.getStorageInfoSync()：获取数据大小。

2、异步缓存数据

不会阻塞当前任务，不管保没保存成功，程序都会继续往下执行。

wx.setStorage(string key, data)：存储数据。

wx.getStorage(string key)：获取数据。

wx.removeStorage(string key)：清除指定数据。

wx.clearStorage()：清空所有数据。

wx.getStorageInfo()：获取数据大小。

存储数据：

wx.setStorage({
    key:"key",
    data:"value"
})

try {
    wx.setStorageSync('key', 'value')
} catch (e) { }

读取数据：

wx.getStorage({
    key: 'key',
    success (res) {
        console.log(res.data)
    }
})

try {
    var value = wx.getStorageSync('key')
    if (value) {
        
    }
} catch (e) {
    
}

生命周期

1、小程序的生命周期：

指的是小程序从启动到关闭的整个过程，在app.js中进行管理。

onLaunch：小程序初始化完成，全局只触发1次。

onShow：小程序初始化完成，或从后台切换到前台时。

onHide：小程序从前台进入后台时。

2、页面的生命周期：

指的是页面从打开到关闭的整个过程，在对应页面的js文件中管理。

onReady：页面初次渲染完成。

onShow：页面显示。

onLoad：页面加载。

onHide：页面隐藏。

onUnload：页面卸载。

request请求

小程序的ajax请求，默认需要在小程序后台设置接口白名单，也可以在微信小程序开发工具中设置允许绕过白名单，测试本地接口。

1、设置绕过白名单

微信小程序开发工具 --> 详情 --> 本地设置，在【不校验合法域名】上面打钩即可。

2、request请求

url：请求的接口地址。

data：请求的参数。

header：请求头部，默认为 content-type': 'application/json'。

method：请求方法，默认为GET。

dataType：返回的数据格式，默认为json。

success：请求成功的回调。

fail：请求失败的回调。

wx.request({
    url:"",
    method:"",
    header:{},
    data:{},
    success:r=>{
        console.log(r);
    },
    fail:err =>{
        console.log(err);
    }
})

大可不必_妄

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端 -- 微信小程序总结

3 组建的公共属性1 id，2 class，3 style4 hidden，组件是否显示，类似vue的v-show<view hidden=”{{true}}”>111</view>5 data-*自定义属性名，事件传参中使用<view data-age=”45”>111</view>4 数据和页面绑定1 定义data数据Page({data:{age:18}})2 页面中使用data&lt...
复制链接

扫一扫