電影小程序歡迎頁面怎么開發

這篇文章主要介紹“電影小程序歡迎頁面怎么開發”，在日常操作中，相信很多人在電影小程序歡迎頁面怎么開發問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”電影小程序歡迎頁面怎么開發”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　1、目錄結構講解：

　　微信小程序有四種文件類型：

　　*.wxml

　　*.wxss

　　*.js

　　*.json

　　wxml：類似網頁里的html頁面;

　　wxss：類似于網頁里的css樣式;

　　js：js文件，用來定義函數方法等;

　　json：配置頁面屬性，例如標題欄;

　　上圖中的app.js app.json app.wxss 三個文件的文件名是固定的，微信官方定義好的，不可以修改文件名，也不可缺少這三個文件。

　　2、注意事項：

　　頁面文件夾里的wxml、 wxss、 js、 json文件的文件名必須相同，文件夾名字不必和里面的文件名相同

　　首先打開開發工具，創建quick start項目，簡單的修改一下。

　　把Index文件夾重命名為welcome;

　　底部的hello world改為一個類似于按鈕的樣式;

　　添加背景顏色; 修改頂部樣式;

　　按鈕的實現：

　　welcome.wxml

　　開啟小程序之旅

　　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"

　　}

　　}

到此，關于“電影小程序歡迎頁面怎么開發”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！