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

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

　效果圖展示：

　　

 

　　

 

　　

 

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

　　

 

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

　　*.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文件的文件名必須相同，文件夾名字不必和里面的文件名相同，如圖

　　

 

　　

　　先看下最后的效果圖：

　　

 

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

　　

 

　　把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。

　　

 

　　所以需要這樣寫：

　　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://descansotropical.com/xiaocx/kaifa.html