微信小程序-枯木学习笔记2-我的第一个小程序

需求

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'
    })
  }
})

注意这里的语法，初学者写时一定注意标点符号和单词拼写