微信小程序

微信小程序

簡介

騰訊在微信中推出的一種介于 Native App 和 Web App 之間的程序

程序中的程序，生態中的生態

開發工具的下載與使用

下載地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

工具的使用是比較簡單的，可以參照官方提供的文檔https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html

目錄結構的說明

創建項目的時候勾選在當前目錄中創建 quick start 項目，可以生產一個基礎的項目，文件結構如下：

pages
    index
        index.js
        inde.json
        inde.wxml
        index.wxss
    logs
        logs.js
        logs.json
        logs.wxml
        logs.wxss
utils
    util.js
app.js
app.json
app.wxss

結構解釋說明

  • pages 小程序中所有的頁面都會存在此文件夾下，每個頁面都以一個文件夾的形式存在，里面文件分為四種
  • index/index.js index頁面的邏輯代碼
  • index/inde.json index頁面的數據代碼
  • Index/index.wxml index頁面的結構代碼
  • index/index.wxss index頁面的樣式代碼
  • utils 一些工具類，放在此文件夾下
  • app.js 小程序主文件，配置app相關的信息。整個app的生命周期方法也在此文件中
  • app.json 配置整個程序相關信息。例如：主題顏色，tabbar如何切換等等
  • app.wxss 配置整個微信小程序的全局樣式，可以認為是所有頁面的根樣式

特殊文件格式說明

在微信小程序中，不是直接使用HTML和CSS進行頁面的編寫，而是進行了一定的升級

*.wxml代表小程序中頁面的結構文件，*.wxss代表小程序中頁面的樣式文件，每個頁面都應該有這兩個同名文件

index.wxml

在wxml文件中，可以發現，不再是html中的div、img、span等標簽，而是使用了view、image、text等標簽

  • view === div
  • image === img
  • text === p

wxml中的標簽和HTML中的標簽作用一致，只是要求這么編寫而已

<!--index.wxml-->
<view class="container">
    <view  bindtap="bindViewTap" class="userinfo">
        <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </view>
    <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
    </view>
</view>

index.wxss

wxss和css變化到不是很大，除了新增一個單位 rpx以外，其它基本一致

rpx是小程序中的長度單位，好處就是會跟著屏幕變化而變化

如果在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，即1rpx = 0.5px

換算規則如下：

設備 rpx => px px => rpx
iPhone 5 1rpx = 0.42px 1px = 2.34rpx
iPhone 6 1rpx = 0.5px 1px = 2rpx
iPhone 6 Plus 1rpx = 0.552px 1px = 1.81rpx

注意：開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準,單位換算相對簡單

/**index.wxss**/
.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
}

.userinfo-nickname {
    color: #aaa;
}

.usermotto {
    margin-top: 200px;
}

更換項目首頁、動態數據、事件綁定

創建的項目中，有個默認的首頁，我們把它換掉，換成垂直和水平居中的一個大文字

  1. 在app.json文件中添加新頁面
    app.json文件中有個pages的位置，里面放置的小程序頁面的路徑。
    在小程序中，所有的頁面，都需要在app.json的pages中進行注冊。
    為了提高開發效率，沒必要分別創建home.js、home.json、home.wxml、home.wxss這些文件，只需要修改app.json中pages后面的內容即可

    {
  "pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ]
}

    pages對應的是一個數組，在第一個位置添加"pages/home/home"，意為在pages文件夾下創建home文件夾，后面的home代表文件夾中所有文件的名稱

    ?

    注意: 路徑的位置很重要，小程序會認為在pages對應的數組中第一個元素的路徑為首頁

  2. 添加結構
    打開pages/home/home.wxml文件，修改里面的代碼為如下：

    <view class="home">
    <text>HOME PAGE</text>
</view>

  3. 添加樣式
    打開pages/home/home.wxss文件，修改里面的代碼如下：

    /* pages/home/home.wxss */
.home {
    height: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    background-color: #333;
}
.home text {
    font-size: 100rpx;
    color: white;
    font-weight: bold;
}

    把頁面設置高度為100%，然后彈性布局，讓內容居中，發現頁面并沒有居中，還需要添加另外一段代碼
    打開app.wxss文件，在最上面添加如下代碼：

    page {
    height: 100%;
}

    因為在小程序的網頁中，最外層的標簽是page，然后內部才是home.wxml中的內容，所以想要讓home.wxml中的view高度和屏幕一致，即需要先設置page高度和屏幕一致

  4. 頁面效果如下


  5. 把頁面數據改為動態數據
    頁面中的HOME PAGE文字為寫死的，改為動態數據，方便后續更改
    把數據放在home.js文件中，然后渲染到頁面上
    打開pages/home/home.js文件，自動生成了相關生命周期方法，找到data，添加數據

    data: {
    title: 'HOME PAGE'
}

    打開pages/home/home.wxml文件，修改代碼如下：

    <view class="home">
    <text>{{ title }}</text>
</view>

    使用{{ }}作為表達式，內部直接寫變量，就可以進行變量的解析（和AngularJS、VueJS的表達式是一樣的）

  6. 查看頁面效果和網頁中是完全一樣的

  7. 添加行為 在頁面中添加一個按鈕，然后點擊彈框顯示
    打開pages/home/home.js文件，在data后面添加事件

    data: {
    title: 'HOME PAGE'
},
showInfo() { // 注意，添加的方法和data是同級的
    wx.showModal({
        title: '標題',
        content: '內容',
        success: function(res) {
            console.log('點擊了確定的回調')
        },
        fail: function(res) {
            console.log('點擊了取消的回調')
        },
        complete: function(res) {
            console.log('無論點擊確定還是取消，都會執行的回調')
        }
    })
}

    打開pages/home/home.wxml文件，添加代碼和綁定事件

    <view class="home">
    <text>{{ title }}</text>
    <button bindtap="showInfo">彈框顯示</button>
</view>

    頁面效果如下：

  8. 添加新事件，修改數據
    打開pages/home/home.js文件，添加事件，目的是修改數據，改變頁面

    changeTitle() {
    // 修改數據
    this.setData({
      title: 'home page'
    })
},

    打開pages/home/home.wxml文件，添加button，并綁定按鈕

    <button bindtap="changeTitle">修改文件</button>

    頁面效果


    點擊修改文字按鈕，上面的文字就會更新

修改整個小程序的樣式

app.json是對整個小程序的全局配置

可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口?背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋

更多可配置項可參考配置詳解

{
  "pages":[
    "pages/home/home",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "微信  小程序",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "home",
      "iconPath": "imgs/icon.png",
      "selectedIconPath": "imgs/icon_selected.png"
    },{
      "pagePath": "pages/index/index",
      "text": "index",
      "iconPath": "imgs/icon.png",
      "selectedIconPath": "imgs/icon_selected.png"
    },{
      "pagePath": "pages/logs/logs",
      "text": "logs",
      "iconPath": "imgs/icon.png",
      "selectedIconPath": "imgs/icon_selected.png"
    }]
  },
  "networkTimeout": {
    "request": 20000,
    "connectSocket": 20000,
    "uploadFile": 20000,
    "downloadFile": 20000
  }
}

pages

接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成

每一項代表對應頁面的【路徑+文件名】信息

數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改

文件名不需要寫文件后綴，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進行整合

window

用于設置小程序的狀態欄、導航條、標題、窗口背景色

tabBar

如果我們的小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），那么我們可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面

  • 當設置 position 為 top 時，將不會顯示 icon
  • tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序

networkTimeout

可以設置各種網絡請求的超時時間

修改單個頁面相關信息

除了app.json以外，每個頁面也都有自己的*.json文件，可以設置相關信息，只對當前頁面有效

頁面的配置比app.json全局配置簡單得多，只是設置app.json中的 window配置項的內容，頁面中配置項會覆蓋 app.json 的 window中相同的配置項。

{
  "navigationBarBackgroundColor": "#000",
  "navigationBarTextStyle": "light",
  "navigationBarTitleText": "導航欄標題文字",
  "backgroundColor": "#fff",
  "backgroundTextStyle": "light"
}

小程序主文件 app.js

在app.js文件中，App() 函數用來注冊一個小程序

接受一個 object 參數，其指定小程序的生命周期函數等

App({
    onLaunch: function(options) {
        // 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
        // Do something initial when launch.
    },
    onShow: function(options) {
        // 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow
        // Do something when show.
    },
    onHide: function() {
        // 當小程序從前臺進入后臺，會觸發 onHide
        // Do something when hide.
    },
    onError: function(msg) {
        // 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息
        console.log(msg)
    },
    globalData: { // 全局的數據，在任何頁面中都可以訪問到
      info: 'I am global data'
    }
})

在子頁面中可以獲取代表小程序的App對象：

// 直接調用getApp()函數
let app = getApp()
// 可以從app中訪問全局數據，可讀可寫
console.log(app.globalData.info)

注意：

  • App() 必須在 app.js 中注冊，且不能注冊多個
  • 不要在定義于 App() 內的函數中調用 getApp() ，使用 this 就可以拿到 app 實例
  • 不要在 onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成
  • 通過 getApp() 獲取實例之后，不要私自調用生命周期函數
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容