微信小程序开发（入门）
微信小程序开发（入门）
全栈开发日记
发布于 2022-05-12 21:40:35
发布于 2022-05-12 21:40:35
代码可运行
运行总次数：0
代码可运行
目录：
视图容器 插入图片 文字显示 可变数据 按钮元素
温馨提示：微信小程序入门建立在前端的基础上，没有前端基础不建议看本篇推文！
视图容器
类似于前端中的div，是块状元素，会独占一行。
<view>holle word</view>插入图片
注意区别：前端中是单标签，微信小程序中是双标签。
加了mode="widthFix"属性，使图片看起来正常。
<image mode="widthFix" src="url"></image>文字显示
使全局文字图片居中显示，在wxss文件中添加。
page{
text-align:center;
}可变数据
在页面中设置可变数据，可以在js中设置
js中代码
page({
date:{
wording:'word'
}
})wxml代码
<view>holle {{wording}}</view>显示效果：
按钮元素
小程序中的按钮元素，如果需要给按钮添加事件，则需添加属性bindtap="onClick"
wxml代码
<view>holle {{wording}}</view>
<button bindtap="onClick">点击</button>js代码
page({
date:{
wording:'word'
}, onClick:function(){ this.setData({ wording:'boy' }) }
})翻译一下：就是当点击按钮后，将wording可变数据改为'boy'
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2020-06-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
