微信小程序基础

原创

星辰大海c

发布于 2023-11-19 15:05:46

2040

发布于 2023-11-19 15:05:46

文章被收录于专栏：前端学习教程

小胡子语法-运算

数字的加减/字符串拼接/三元

模板渲染 wx:

v-for ⇒ wx:for 注意点：wx:for=“{{list}}”默认每一项变量名为item；每一项索引变量名为index。与key同时用，wx:key="index"

v-if ⇒ wx:if

block标签

类似vue中template 不会加载为页面上的真实元素，只是作为模板容器存在

事件及传参

常用事件

类型	触发条件
tap	手指触摸
longpress	手指触摸后，超过350ms再离开
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束

传参

标签行内属性绑定data-属性名在事件函数中接收事件对象e；e.target.dataset'属性名'

<view id="tapTest" data-hi="Weixin" bindtap="tapName"> Click me! </view>

常用组件

view

就是原生div标签

text

原生span标签

注：text 组件内只支持 text 嵌套

除了文本节点以外的其他节点都无法长按选中

decode可以解析的有   < > & ' &ensp; &emsp;

image

image组件默认宽度320px、高度240px

行内属性

属性名	属性值	默认值
src	图片路径
mode	图片缩放/裁剪的模式	scaleToFill
lazy-load	图片懒加载	false

mode有效值

值	模式	说明
scaleToFill	缩放模式	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式	保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式	保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式	宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式	高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式	不缩放图片，只显示图片的顶部区域
bottom	裁剪模式	不缩放图片，只显示图片的底部区域
center	裁剪模式	不缩放图片，只显示图片的中间区域
left	裁剪模式	不缩放图片，只显示图片的左边区域
right	裁剪模式	不缩放图片，只显示图片的右边区域
top left	裁剪模式	不缩放图片，只显示图片的左上边区域
top right	裁剪模式	不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式	不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式	不缩放图片，只显示图片的右下边区域

swiper

默认样式 width: 100%; height: 150px;

常用属性

属性	说明
autoplay	是否自动轮播
interval	自动切换时间间隔
circular	衔接滑动
indicator-dots	是否显示面板指示点
indicator-color	指示点颜色
indicator-active-color	当前选中的指示点颜色

navigator

url: 跳转链接（小程序内部链接）

open-type：跳转方式

open-type有效值

Name	说明
navigate	保留当前页面，跳转到应用内的某个页面。**但是不能跳到 tabbar 页面。
redirect	关闭当前页面，跳转到应用内的某个页面。**但是不允许跳转到 tabbar 页面。
switchTab	关闭其他所有非 tabBar 页面，并跳转tabBar
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

自定义组件

新建组件⇒注册组件⇒使用组件

父子组件传参

在使用子组件时行内属性传参，子组件properties接收；

行内bind事件名，子组件this.triggerEvent('事件名', 参数)

<!-- 父组件使用子组件时 -->
<component-tag-name bindmyevent="onMyEvent" />
<!-- 子组件内部 -->
this.triggerEvent('myevent', myEventDetail, myEventOption);

生命周期

1.应用生命周期

app.js中定义了一些应用的生命周期函数

（1）onLaunch: 初始化小程序时触发，全局只触发一次

（2）onShow: 小程序初始化完成，或用户从后台切换到前台显示时触发页面再次显示时，对应用的数据或效果进行刷新

（3）onHide: 用户从前台切换到后台隐藏时触发页面隐藏时，清除定时器

（4）onError: 小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息

（5）onPageNotFound：应用第一次启动的时候，如果找不到第一个入口页面触发

2.页面生命周期

（*）onInit：百度小程序独有，在onLaunch与onLoad之间的生命周期，数据请求放在这里可以优化性能

（1）onLoad：监听页面加载，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

（2）onShow：监听页面显示；加载完成后、后台切到前台，或重新进入页面时触发

（3）onReady：页面首次渲染完成时触发

（4）onHide：监听页面隐藏，从前台切到后台，或进入其他页面触发

（5）onUnload：监听页面卸载，页面卸载时触发

监听事件

事件名	监听内容
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角转发
onShareTimeline	用户点击右上角转发到朋友圈
onAddToFavorites	用户点击右上角收藏
onPageScroll	页面滚动触发事件的处理函数
onResize	页面尺寸改变时触发，如屏幕旋转
onTabItemTap	当前是 tab 页时，点击 tab 时触发

常用API

setData

// 小程序中改变data中的数据需要用setData，不能直接this.name=''
// 百度小程序支持 this.setData('name', 'xxx');
this.setData({
	name: 'xxx',
	age: 12
})
// 使用数据
this.data.name

getApp()

全局变量

页面跳转

wx.switchTab
wx.reLaunch
wx.redirectTo
wx.navigateTo
wx.navigateBack

详见navigator组件说明

跳转地址后？传参，onLoad接收参数

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期

登录后参与评论

0 条评论

热度