需求

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

注意這里的語法，初學者寫時一定注意標點符號和單詞拼寫

總結

以上是生活随笔為你收集整理的微信小程序-枯木学习笔记2-我的第一个小程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。