商城系統(tǒng) 注冊(cè)

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

2018-03-01|HiShop
導(dǎo)讀:越來越多的人通過小程序來購買電影票了,電影購票小程序也隨之受歡迎,以下是電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例...

 
越來越多的人通過小程序來購買電影票了,電影購票小程序也隨之受歡迎,以下是電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 效果圖展示:

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  1、目錄結(jié)構(gòu)講解:

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

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

  *.wxml

  *.wxss

  *.js

  *.json

  wxml:類似網(wǎng)頁里的html頁面;

  wxss:類似于網(wǎng)頁里的css樣式;

  js:js文件,用來定義函數(shù)方法等;

  json:配置頁面屬性,例如標(biāo)題欄;

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

  2、注意事項(xiàng):

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

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  

  先看下最后的效果圖:

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  首先打開開發(fā)工具,創(chuàng)建quick start項(xiàng)目,簡單的修改一下。

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  把Index文件夾重命名為welcome;

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

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

  按鈕的實(shí)現(xiàn):

  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;

  }

  背景顏色的設(shè)置:

  注意:在最外部的view設(shè)置寬高百分百,添加背景顏色是無效的。因?yàn)槲⑿拍J(rèn)外面還有一層page。

  

電影小程序基礎(chǔ)目錄及歡迎頁面的開發(fā)實(shí)例

 

  所以需要這樣寫:

  page{

  height: 100%;

  background: #b3d4db;

  }

  頂部設(shè)置:

  app.jason

  {

  "pages":[

  "pages/welcome/welcome"

  ],

  "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#b3d4db",

  "navigationBarTitleText": "歡迎",

  "navigationBarTextStyle":"black"

  }

  }
 

HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。

更多小程序開發(fā)案例,盡在:http://m.descansotropical.com/xiaocx/kaifa.html

電話咨詢 預(yù)約演示 0元開店