1. 程式人生 > >微信小程序笑話小程序實踐開發學習

微信小程序笑話小程序實踐開發學習

nbsp XML 文字 方法 展示 page 顯示 部分 笑話

技術分享圖片

首先做出笑話展示頁面

1.修改app.json文件,在"pages"中添加一條

"pages/joke/joke",然後ctrl+s就可以自動創建joke文件夾,以及其中必須的三個文件,joke.js joke.json joke.wxml joke.wxss 2.在joke.wxml中寫好需要顯示的文字,並為其確認一個類 <view class="joke"> <view>笑話1</view> <view>2019-2-18</view> </view> <view class="joke"> <view>笑話2</view> <view>2019-2-19</view> </view> 3.下面需要修改wxss來改變其樣式 這裏可以選擇修改主文件的app.wxss或者修改joke.wxss .joke{ margin:10px; padding:10px; border-radius:5px; border-top:1px solid #DEDEDE; border-left:1px solid #DEDEDE; box-shadow: 2px 2px 2px #C7C7C7; } 這樣也就完成了第一個頁面的開發 下面嘗試帶圖頁面 技術分享圖片

其實方法與第一個頁面相同,這裏主要考慮加入圖片的部分,需要設置一個image文件存放原來下載好的圖片,然後用和之前相同的方式,只不過在wxml裏面需要放置一個image的雙標簽:

<view class="joke"> <view>笑話1</view> <view> <image src="/image/1.png"></image> </view> <view>2019-2-18</view> </view> <view class="joke"> <view>笑話2</view> <view> <image src="/image/2.jpg"></image> </view> <view>2019-2-19</view> </view> 到此為止成功開發第二個頁面

微信小程序笑話小程序實踐開發學習