小程序模板網(wǎng)

微信小程序開(kāi)發(fā)實(shí)戰(zhàn)&電影小程序之(1)——基礎(chǔ)目錄、歡迎頁(yè)面的創(chuàng)建 ...

發(fā)布時(shí)間:2018-04-23 11:43 所屬欄目:小程序開(kāi)發(fā)教程

0、效果圖展示:

這里寫(xiě)圖片描述 
這里寫(xiě)圖片描述 
這里寫(xiě)圖片描述

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

這里寫(xiě)圖片描述

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

  1. *.wxml
  2. *.wxss
  3. *.js
  4. *.json

wxml:類似網(wǎng)頁(yè)里的html頁(yè)面; 
wxss:類似于網(wǎng)頁(yè)里的css樣式; 
js:js文件,用來(lái)定義函數(shù)方法等; 
json:配置頁(yè)面屬性,例如標(biāo)題欄;

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

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

頁(yè)面文件夾里的wxml、 wxss、 js、 json文件的文件名必須相同,文件夾名字不必和里面的文件名相同,如圖 
這里寫(xiě)圖片描述

微信開(kāi)發(fā)者工具下載地址:官方下載地址

先看下最后的效果圖: 
這里寫(xiě)圖片描述

首先打開(kāi)開(kāi)發(fā)工具,創(chuàng)建quick start項(xiàng)目,簡(jiǎn)單的修改一下。 
這里寫(xiě)圖片描述

  • 把Index文件夾重命名為welcome;
  • 底部的hello world改為一個(gè)類似于按鈕的樣式;
  • 添加背景顏色; 修改頂部樣式;

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

welcome.wxml

 <view class="usermotto">
    <text class="btn">開(kāi)啟小程序之旅</text>
  </view>
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

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

注意:在最外部的view設(shè)置寬高百分百,添加背景顏色是無(wú)效的。因?yàn)槲⑿拍J(rèn)外面還有一層page。  這里寫(xiě)圖片描述  所以需要這樣寫(xiě):

page{
  height: 100%;
  background: #b3d4db;
}
  •  

頂部設(shè)置:

app.jason

{
  "pages":[
    "pages/welcome/welcome"

  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "歡迎",
    "navigationBarTextStyle":"black"
  }
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/23921.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢