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

Posted 2022-06-10 长安紫薯

需求

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

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