2. 程式人生 > >微信小程式 基礎

微信小程式 基礎

阿新 • • 發佈：2019-01-19

官網

新建專案

目錄結構

這裡寫圖片描述

每個小程式都需要包含：

  • app.js 為小程式主邏輯
  • app.wxss 為小程式公共樣式
  • app.json 為小程式公共配置

pages目錄裡存放的是小程式各個頁面的資訊；
每個頁面包含：

  • .js檔案 各個頁面的邏輯
  • wxml檔案 各個頁面所包含的元件的結構
  • .wxss檔案 各個頁面的元件樣式
  • .json檔案 各個頁面的配置（此處的配置會覆蓋app.json下相同的配置）
    頁面的顯示需要在app.json的pages節點以檔案目錄+檔名註冊，第一個註冊的頁面為啟動頁
    這裡寫圖片描述

除錯

這裡寫圖片描述

小程式的註冊

app.js 裡必須要一個有App()函式來註冊當前小程式，App()函式接受一個 object 引數，其指定小程式的生命週期函式等。

//app.js
App({

  /**
   * 當小程式初始化完成時，會觸發 onLaunch（全域性只觸發一次）
   */
  onLaunch: function () {

  },

  /**
   * 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow
   */
  onShow: function (options) {

  },

  /**
   * 當小程式從前臺進入後臺，會觸發 onHide
   */
  onHide: function () {

  },

  /**
   * 當小程式發生指令碼錯誤，或者 api 呼叫失敗時，會觸發 onError 並帶上錯誤資訊
   */
 

  onError: function (msg) {

  }
})

各個頁面的註冊

各個頁面的.js檔案必須有Page() 函式用來註冊當前頁面。Page() 函式接受一個 object 引數，其指定頁面的初始資料、生命週期函式、事件處理函式等。

Page({

  /**
   * 頁面的初始資料
   */
  data: {

  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
 

  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

佈局

1.flex佈局
2.相對定位和絕對定位

flex佈局

預設的主軸和交叉軸方向
這裡寫圖片描述
flex容器屬性：

  • flex-direction 決定元素的排列方向（指定哪個方向是主軸）
  • flex-wrap 決定元素如何換行（排列不下時）
  • flex-flow flex-direction和flex-wrap的簡寫
  • justify-content 元素在主軸上的對齊方式
  • align-items 元素在交叉軸上的對齊方式

flex元素屬性：

  • flex-grow 當有多餘空間時，元素的放大比例
  • flex-shrink 當空間不足時，元素的縮小比例
  • flex-basis 元素在主軸上佔據的空間（若空間不足時不會被壓縮）
  • flex時grow、shrink、basis的簡寫
  • order定義元素的排列順序
  • align-self定義元素自身的對齊方式 會複寫flex容器對此元素的align-items屬性

我們在例子裡慢慢分析好了。。。
flex-direction
wxml：

<view class="container">
  <view class="item">
    1
  </view>
  <view class="item">
    2
  </view>
  <view class="item">
    3
  </view>
  <view class="item">
    4
  </view>
</view>

wxss：

.container {
  width: 100%;
  /*vh
    *vh就是當前螢幕可見高度的1%，也就是說
    *height:100vh == height:100%;
    *但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
    *但是設定height:100vh，該元素會被撐開螢幕高度一致  */
  height: 100vh;
  background-color: rebeccapurple;
  /*指定flex佈局方式  */
  display: flex;
  /*決定由左到右為主軸，從上到下為交叉軸  */
  flex-direction: row;
}

.item {
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
  /*邊框 1px 白色  */
  border: 1px solid white;
}

看下結果吧
這裡寫圖片描述
很好理解吧。。
最外層的view是flex容器，容器的樣式為container，裡面有四個item，item樣式為item（註釋上分析了我們使用的屬性）
flex-wrap
當我們新增幾個條目，修改wxml如下時，發現條目被擠的變形了
wxml：

<view class="container">
  <view class="item">
    1
  </view>
  <view class="item">
    2
  </view>
  <view class="item">
    3
  </view>
  <view class="item">
    4
  </view>
  <view class="item">
    5
  </view>
  <view class="item">
    6
  </view>
  <view class="item">
    7
  </view>
  <view class="item">
    8
  </view>
  <view class="item">
    9
  </view>
</view>

顯示：
這裡寫圖片描述
加上flex-wrap屬性後
wxml：

.container {
  width: 100%;
  /*vh
    *vh就是當前螢幕可見高度的1%，也就是說
    *height:100vh == height:100%;
    *但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
    *但是設定height:100vh，該元素會被撐開螢幕高度一致  */
  height: 100vh;
  background-color: rebeccapurple;
  /*指定flex佈局方式  */
  display: flex;
  /*決定由左到右為主軸，從上到下為交叉軸  */
  flex-direction: row;
  /*wrap 當一行排列不下時換行 nowrap當排列不下時不換行 wrap-reverse反轉  */
  flex-wrap: wrap;
  /*flex-flow 指定  flex-direction對應屬性值+空格+flex-wrap對應屬性值 相當於上兩個屬性同時指定 */
}

.item {
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
  /*邊框 1px 白色  */
  border: 1px solid white;
}

結果：
這裡寫圖片描述
justify-content
wxml:

.container {
  width: 100%;
  /*vh
    *vh就是當前螢幕可見高度的1%，也就是說
    *height:100vh == height:100%;
    *但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
    *但是設定height:100vh，該元素會被撐開螢幕高度一致  */
  height: 100vh;
  background-color: rebeccapurple;
  /*指定flex佈局方式  */
  display: flex;
  /*決定由左到右為主軸，從上到下為交叉軸  */
  flex-direction: row;
  /*wrap 當一行排列不下時換行
   *nowrap當排列不下時不換行
   *wrap-reverse反轉  */
  flex-wrap: wrap;
  /*flex-flow 指定  flex-direction對應屬性值+空格+flex-wrap對應屬性值 相當於上兩個屬性同時指定 */
  /*
   *指定主軸的排列方式
   *center 居中 
   *flex-start 居於主軸方向起點依次排列
   *flex-end 居於主軸方向終點依次排列
   *space-between 主軸起點、終點分別為第一個、最後一個元素，其餘元素分割剩餘空間
   *space-around 主軸上每個元素兩邊佔據的空間相等 */
  justify-content: center;
}

.item {
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
  /*邊框 1px 白色  */
  border: 1px solid white;
}

顯示：
這裡寫圖片描述
align-item：
前三種類似上面，後兩種不再舉例，可動手實驗

  • flex-start
  • flex-end
  • center
  • stretch 當元素沒有設定高度時，設定此屬性，元素高度會佔滿容器
  • baseline 讓元素以元素中第一行文字來對齊

好了，flex容器屬性介紹完了，再挑幾個flex元素屬性再舉個例子

order
我們把元素數量減少為4個，為4個條目均新增樣式，指定其不同的order值。
wxml：

<view class="container">
  <view class="item1">
    1
  </view>
  <view class="item2">
    2
  </view>
  <view class="item3">
    3
  </view>
  <view class="item4">
    4
  </view>
</view>

顯示：
這裡寫圖片描述
可以看到，order即為元素排列的順序（由1至4 為 從大到小）

align-self
此例中item1 item2 item4 公用item樣式，item3的樣式中添加了align-self為center
wxml:

<view class="container">
  <view class="item">
    1
  </view>
  <view class="item">
    2
  </view>
  <view class="item3">
    3
  </view>
  <view class="item">
    4
  </view>
</view>

wxss：

.container {
  width: 100%;
  /*vh
    *vh就是當前螢幕可見高度的1%，也就是說
    *height:100vh == height:100%;
    *但是有個好處是當元素沒有內容時候，設定height:100%該元素不會被撐開，
    *但是設定height:100vh，該元素會被撐開螢幕高度一致  */
  height: 100vh;
  background-color: rebeccapurple;
  /*指定flex佈局方式  */
  display: flex;
  /*決定由左到右為主軸，從上到下為交叉軸  */
  flex-direction: row;
  /*wrap 當一行排列不下時換行
   *nowrap當排列不下時不換行
   *wrap-reverse反轉  */
  flex-wrap: wrap;
  /*flex-flow 指定  flex-direction對應屬性值+空格+flex-wrap對應屬性值 相當於上兩個屬性同時指定 *//*
   *指定主軸的排列方式
   *center 居中 
   *flex-start 居於主軸方向起點依次排列
   *flex-end 居於主軸方向終點依次排列
   *space-between 主軸起點、終點分別為第一個、最後一個元素，其餘元素分割剩餘空間
   *space-around 主軸上每個元素兩邊佔據的空間相等 */
  justify-content: center;
  /*
   *flex-start
   *flex-end
   *center
   *stretch 當元素沒有設定高度時，設定此屬性，元素高度會佔滿容器
   *baseline 讓元素以元素中第一行文字來對齊
   */
  align-items: baseline;
}

.item {
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
  /*邊框 1px 白色  */
  border: 1px solid white;
}

.item3 {
  width: 100rpx;
  height: 100rpx;
  background-color: yellow;
  /*邊框 1px 白色  */
  border: 1px solid white;
  /*
   *flex-start 不再贅述
   *flex-end
   *center
   *
   */
  align-self: center;
}

這裡寫圖片描述

相對定位和絕對定位

相對定位的元素時相對自身進行定位，參照物是自己
絕對定位的元素時相對離它最近的一個已定位的父級元素進行定位

相對定位：

wxml：

<view class="container">
  <view class='item'>
    1
  </view>
  <view class='item2'>
    2
  </view>
  <view class='item'>
    3
  </view>
  <view class='item'>
    4
  </view>
</view>

wxss：

.container {
  width: 100%;
  height: 100%;
  background-color: rebeccapurple;
}

.item {
  width: 150rpx;
  height: 150rpx;
  background-color: yellow;
  border: 1px solid white;
}

.item2 {
  width: 150rpx;
  height: 150rpx;
  background-color: yellow;
  border: 1px solid white;
  /*相對定位，相對於自身向左偏移150rpx*/
  position: relative;
  /*距離左邊150rpx*/
  left: 150rpx;
}

顯示：
這裡寫圖片描述

絕對定位：
wxml：

<view class="container">
  <view class='item'>
    1
  </view>
  <view class='item2'>
    2
  </view>
  <view class='item'>
    3
  </view>
  <view class='item'>
    4
  </view>
</view>

wxss：


.item {
  width: 150rpx;
  height: 150rpx;
  background-color: yellow;
  border: 1px solid white;
}

.item2 {
  width: 150rpx;
  height: 150rpx;
  background-color: yellow;
  border: 1px solid white;
  /*絕對定位，由於父容器未指定位置，所以是相對於整個頁面距離左邊50rpx，距離上邊50rpx*/
  position: absolute;
  left: 50rpx;
  top: 50rpx;
}

顯示：
這裡寫圖片描述
絕對定位，由於父容器未指定位置，所以是相對於整個頁面距離左邊50rpx，距離上邊50rpx
感覺不夠有說服力是吧？
我們給父容器view新增一個margintop
這裡寫圖片描述
好了，很清楚咯
當我們給父容器view新增position屬性，使其已定位
這裡寫圖片描述
好了，佈局就介紹到這裡。。23：16，明天還要上班，洗洗睡了

相關推薦

微信小程式 基礎元件

基礎元件 框架為開發者提供了一系列基礎元件，開發者可以通過組合這些基礎元件進行快速開發。 什麼是元件： 元件是檢視層的基本組成單元。 元件自帶一些功能與微信風格的樣式。 一個元件通常包括開始標籤和結束標籤，屬性用來修飾這個元件，內容在兩個標籤之內。<tagname

微信小程式 基礎類庫

console console.log 方法用於在 console 視窗輸出資訊。它可以接受多個引數，將它們的結果連線起來輸出。 Math 屬性 E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 以上

微信小程式 基礎庫版本與客戶端版本對應關係

iOS 客戶端版本 基礎庫版本 6.7.2 2.3.0 6.7.0 2.2.5 6.6.7 2.1.3 6.6.6

迅速上手：使用taro構建微信小程式基礎教程

前言 由於微信小程式在開發上不能安裝npm依賴，和開發流程上也飽受詬病；Taro 是由京東·凹凸實驗室(aotu.io)傾力打造的 多端開發解決方案，它的api基於react，在本篇文章中主要介紹了使用taro搭建微信小程式的一些步驟和一個簡單demo的實現。 安裝 先全域性安裝@tarojs/cli

微信小程式基礎-側邊選單的實現

效果 思路： 1、整個頁面分成左右兩個view，橫向佈局；左側view用子選單view一個個填充，縱向佈局。 2、子選單內容存入陣列，點選子選單view，用data-index="{{index}}"回傳陣列索引index，把index賦給程式資料select

微信小程式裡面的標籤和html標籤的對比、微信小程式基礎之常用控制元件

微信小程式和html5標籤的區別： HTML5 微信小程式 <h1></h1>...<h6></h6> <p>&l

微信小程式基礎之互動操作控制元件

好久沒有寫關於微信小程式的文章了，今天簡單的發表一篇，內容比較簡單，包括：ActionSheet上拉選單、AlertAction提示框、SuccessAction完成框、LoadingAction載入框，不做詳細說明，自己研究，不喜勿噴~~         相關程式碼：<

微信小程式基礎之表單Form的使用

表單Form的應用很廣泛，我們可以利用form設計登入註冊，也可以設計一種答題問卷的形式，今天主要講一下form的使用form表單，將元件內輸入的"switch","input","checkbox","slider","radio","picker"的值進行提交,資料的格式

微信小程式基礎元件之檢視容器

什麼是元件？ 元件是檢視層的基本組成單元，元件自帶一些功能與微信風格的樣式，一個元件通常包括開始標籤和結束標籤，屬性用來修飾這個元件，內容在兩個標籤之內。 注意：所有元件與屬性都是小寫，以連字元-連線 共同屬性型別 基礎元件分為以下七大類，分別是：檢

微信小程式基礎入門（一）：小程式介面介紹&創造自己的第一個小程式

承接小程式配置之後 ，先對小程式開發軟體的介面進行介紹： 然後進入第一個小程式的構造：獲取使用者登陸資訊 通過左上角的 “+”新增頁面 然後建立第一個功能頁面 然後頁面構造完成：各部分程式碼： app.

微信小程式基礎入門

準備 Demo 專案地址 https://github.com/zce/weapp-demo Clone or Download（需準備GIT環境） $ cd path/to/project/root $ git clone https://github.com/zce/weapp-demo.git proj

微信小程式 基礎

官網 新建專案 目錄結構 每個小程式都需要包含： app.js 為小程式主邏輯 app.wxss 為小程式公共樣式 app.json 為小程式公共配置 pages目錄裡存放的是小程式各個頁面的資訊； 每個頁面包含： .js

微信小程式基礎-專案結構、app.json和檢視層

一、微信小程式專案基本結構 微信提供了微信小程式專用的開發者工具 必須檔案：app.js/ app.json(配置檔案) /app.wxss(樣式檔案) pages資料夾存放所有頁面，每個頁面的路徑都要在app.json檔案中配置，寫在pages欄位中 每個頁面由

微信小程式基礎

目錄結構json檔案 各個頁面的配置（此處的配置會覆蓋app.json下相同的配置） 頁面的顯示需要在app.json的pages節點以檔案目錄+檔名註冊，第一個註冊的頁面為啟動頁 小程式的註冊、各個頁面的註冊app.js 裡必須要一個有App()函式來註冊當前小程式，App

微信小程式基礎之建立使用教程

本文件將帶你一步步建立完成一個微信小程式，並可以在手機上體驗該小程式的實際效果。這個小程式的首頁將會顯示歡迎語以及當前使用者的微信頭像，點選頭像，可以在新開的頁面中檢視當前小程式的啟動日誌.1. 獲取微信小程式的 AppID登入 http

微信小程式 基礎語法

微信小程式 基礎語法 .wxml檔案中 列表渲染 <view wx:for="{{array}}">{{item}}</view> 如果沒有寫wx:key,這會報警告Now you can provide attr

零基礎入門微信小程式開發

注：本文來源於：《零基礎入門微信小程式開發》 課程介紹 本達人課是一個系列入門教程，目標是從 0 開始帶領讀者上手實戰，課程以微信小程式的核心概念作為主線，介紹配置檔案、頁面樣式檔案、JavaScript 的基本知識並以指南針為例對基本知識進行擴充套件，另外加上開發工具的安裝、小程式釋出等內容，共 9

微信小程式入門基礎教程

準備工作 要開發微信小程式之前，需要做一些準備工作，首先進入https://mp.weixin.qq.com/debug/wxadoc/dev/index.html去下載快速開發原始碼包 然後再進入https://mp.weixin.qq.com/debug/wxadoc/

微信小程式0基礎快速入門(史上最全!!!)

產品定位及功能介紹 微信小程式是一種全新的連線使用者與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。 小程式註冊 註冊小程式帳號 在微信公眾平臺官網首頁（mp.weixin.qq.com）點選右上角的“立即註冊”按鈕。 選擇註冊的帳號型別 選擇“

微信小程式開發入門基礎教程

在這篇部落格中，主要介紹瞭如何從一個微信小程式的使用者轉變為微信小程式的開發者。 1. 首先，需要註冊一個微信小程式賬號 https://mp.weixin.qq.com/  進入微信公眾平臺選擇【立即註冊】   2.註冊賬號型別為【小程式】