從一個簡單的“歡迎“頁面開始小程式之旅-有解無憂

首先洗掉index/log/utils檔案夾

還有app.json/app.js/app.wxss

會出現報錯，未找到app.json檔案

然后新建自己的app.js/app.json/app.wxss

現在的報錯是

先不管它，等下再說

在pages目錄下新建一個welcome目錄

在welcome目錄下新建page，快速新建4種頁面

然后你會發現無法創建，大概是因為現在頁面處于報錯狀態吧

那就一個一個創建好了

那為啥會報錯呢，我們去官方檔案找答案

在幫助-開發者檔案，打開

選擇檔案的框架-配置

看，寫的明明白白

所以我們乖乖在app.json中加入

{
  "pages": [
    "pages/welcome/welcome"
  ]
}

現在的報錯是：

理由是：welcome.json是可以不創建的，但是一旦創建之后，不能全部為空，必須加上花括號

剛才的錯誤就消失了，這是現在的控制臺

另外，在welcome.js中其實也不能為空白，需要加上

Page({
  
})

其實這些并不需要手寫，只是為了幫助大家理解所以我們最開始把所有檔案都刪了

大家創建的時候可以不洗掉那些自動生成的檔案，就沒這么麻煩了哈

在welcome.wxml中添加代碼

<view>
  <text>hello</text>
</view>

wxml是用來撰寫頁面骨架的檔案

在小程式中<view>的功能基本等同于<div>，主要用來作為容器或者分割檔案

<image>顯示圖片

<text>顯示文本（當然要顯示文本并不一定需要text標簽，不要標簽也是可以顯示的）

小程式里面是有button組件的，但是如果有特殊需求，可以不使用button組件，可以用view+text完成按鈕的效果

新建目錄images

復制好你準備好的圖片素材

然后在images檔案夾上，右鍵-硬碟打開，把圖片黏貼進去

可以看到圖片已同步（我又湊不要臉的放頭像了哈哈哈）

修改welcome.wxml代碼

<view>
  <!-- /開始表示絕對路徑的根目錄 -->
  <image src="/images/logo.jpg"></image>
  <text>Hello, 小仙女</text>
  <view>
    <text>開啟小程式之旅</text>
  </view>
</view>

可以看到圖片是變形的，這是因為沒有設定樣式的情況下，圖片默認尺寸是300*225px

在官方檔案-組件-text組件，可以看到很多屬性

接下來來寫樣式

可以直接在組件上寫style樣式，跟html里面是一樣一樣的

給圖片添加樣式width:200px;height:200px;

發現圖片比想象的要大大大很多

因此，需要把單位px改成rpx！！！

rpx是小程式設計出來，讓寬高能隨著設備的變化進行回應

注意一個知識點：如果你需要實作200px的效果，樣式要么就設定200rpx，要么就設定100px！！！

（這個2倍關系前提是iphone6設備，否則是其他的換算關系）

其實我們并不建議直接把樣式寫在標簽上，最好是寫在wxss里

當然不是所有的css語法都可用，大家嘗試之后大概心里就有數了

小程式在windows默認字體是微軟雅黑，mac上是蘋方字體

最好不要太糾結字體，因為取決于小程式的運行系統

如何設定全頁面背景色：

查看除錯器的頁面結構

放代碼：

welcome.wxml

<view class="container">
  <!-- /開始表示絕對路徑的根目錄 -->
  <image class="user-avatar" src="/images/logo.jpg"></image>
  <text class="user-name">Hello, 小仙女</text>
  <view class="moto-container">
    <text class="moto">開啟小程式之旅</text>
  </view>
</view>

welcome.wxss

page{
  background:#b3d4db;

;
  height:100%;
}

/* flex彈性盒子模型 */
.container{
  display: flex;
  flex-direction:column;
  align-items:center;
}

.user-avatar{
  width:200rpx;
  height:200rpx;
  border-radius:50%;
  margin-top:160rpx;
}

.user-name{
  font-size:32rpx;
  font-weight:bold;
  margin-top:40rpx;
}

.moto-container{
  border:1px solid rgb(75,108,132);
  width:200rpx;
  height:80rpx;
  text-align: center;
  line-height:80rpx;
  border-radius:5px;
  margin-top:200rpx;
}

.moto{
  font-size:22rpx;
  font-weight:bold;
  color:rgb(75,108,132);
}

關于字體的設定可以寫在全域樣式里 app.wxss

text{
  font-family: "Microsoft Yahei";
}

現在效果圖

修改頂部這塊的背景顏色

在app.json中添加

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"rgb(170,204,216)"
  }
}

報錯了……

原來官網說只支持十六進制，好吧，改

{
  "pages": [
    "pages/welcome/welcome"
  ],
  "window":{
    "navigationBarBackgroundColor":"#b3d4db"
  }
}

效果圖

補充：文字里加 \n 會有換行的效果

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141446.html

標籤：JavaScript

上一篇：關于查看本機ssh公鑰以及生成公鑰

下一篇：js繼承的封裝