您好,登錄后才能下訂單哦!
這篇“微信小程序中怎么制作歡迎頁面”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“微信小程序中怎么制作歡迎頁面”文章吧。
先看下最后的效果圖:
首先打開開發工具,創建quick start項目,簡單的修改一下。
把Index文件夾重命名為welcome;
底部的hello world改為一個類似于按鈕的樣式;
添加背景顏色; 修改頂部樣式;
按鈕的實現:
welcome.wxml
<view class="usermotto"> <text class="btn">開啟小程序之旅</text> </view>
welcome.wxss
.usermotto { margin-top: 200px; border: 1px solid #405f80; width: 200rpx; height: 80rpx; text-align: center; border-radius: 5px; } .btn{ font-size: 22rpx; font-family: MicroSoft Yahei; font-weight: bold; line-height: 80rpx; }
背景顏色的設置:
注意:在最外部的view設置寬高百分百,添加背景顏色是無效的。因為微信默認外面還有一層page。
所以需要這樣寫:
page{ height: 100%; background: #b3d4db; }
頂部設置:
app.jason
{ "pages":[ "pages/welcome/welcome" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#b3d4db", "navigationBarTitleText": "歡迎", "navigationBarTextStyle":"black" } }
以上就是關于“微信小程序中怎么制作歡迎頁面”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。