小程序基础

黑猫_默雨

于 2022-07-01 23:21:30 发布

阅读量70

点赞数

分类专栏：小程序文章标签：小程序前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44001906/article/details/125567320

版权

小程序专栏收录该内容

9 篇文章

订阅专栏

本文介绍了小程序的基础知识，包括使用单位rpx，如何操作data中的数据，事件绑定及传参方法，以及条件和列表的显示技巧。通过实例讲解，帮助开发者快速掌握小程序开发的核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单位rpx

以 iPhone6 为例，iPhone6 的屏幕宽度为 375px ，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

1rpx=0.5px=1物理像素

使用data中的数据

//js文件中
console.log(this.data.queryParams);
this.setData({
    'queryParams.mstId': xxxx
})
//wxml文件中
<view class="gnvqName">{{info.gnvqName}}</view>

绑定事件

<view bindtap="start">开始考试</view>

start() {
    //TODO
},

绑定事件传参

<view data-value="abc" bindtap="start">开始考试</view>

start(e) {
	console.log(e.currentTarget.dataset.value);//abc
},

条件显示

<view wx:if="{{xxxBooleanValue}}">元素AAA</view>
<view wx:elif="{{xxxBooleanValue}}"> 元素BBB</view>
<view wx:else>元素CCC</view>

列表显示

<view wx:for="{{options}}" wx:for-index="idx" wx:for-item="item" wx:key="index">
    <button
    data-value="{{item.value}}"
    bindtap="getValue"
    >
        {{item.value}}
    </button>
</view>