需求
1、展现文字、图片
2、设置样式
- 内容居中
- 文字红色
- 图片设置宽高
3、点击按钮,文字改变
准备照片
创建image目录,打开目录所在位置
拷入要展示的图片
开发步骤
模板会自动生成框架性文件,index就是代表首页
第一步:页面文件 index.wxml
<view class="title">{{wording}}</view>
<image src="../images/a.png"></image>
<button bindtap="onclick">点我</button>
- view,类似html的div,展示布局块标签
- image,展现图片标签
- button,按钮标签
第二步:样式文件 index.wxss
Page {
text-align: center;
}
.title{
color: red;
}
image{
height: 300px;
width: 300px;
}
- Page 默认页面的容器
第三步:交互动态文件 index.js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
wording: 'Hello World'
},
onclick: function(){
this.setData({
wording: 'Hello Man'
})
}
})
注意这里的语法,初学者写时一定注意标点符号和单词拼写