微信小程序①

時間 2019-11-06

標籤微信程序简体版

原文原文鏈接

寫一個微信小程序系列的開發關鍵點

小程序基本架構

微信開發者工具工程目錄php

關於小程序的工程架構, 文件目錄, 已經有不少coder發表過相關資料. 這裏不作更多解釋, 留存一篇留待翻閱:小程序工程目錄結構介紹css

小程序DOM佈局

小程序可使用行內樣式, 可使用class樣式html

style 實現行內樣式:

<button style="color:red">{{motto }}</button>

雙括號實現動態樣式

// .wxml
<button style="color:{{color}}">{{motto }}</button>

// .js
var PARAM = {
  data: {
    color: "red"
  },
  onLoad: function (event) {
    // ..
  }
}
//獲取應用實例
var app = getApp();
Page(PARAM)

小程序兼容大部分傳統CSS語法前端
- 包括但不只限於: CSS3, position, float,諸如傳統的聖盃佈局,左右雙飛翼佈局均可以在小程序端實現

小程序擴展了特性json

尺寸單位 rpx小程序

小程序擴展了 `rpx`, 本意是但願  `rpx` 根據屏幕寬度進行自適應。 但前端已經有了 `vw`, `vh` ; 並且通過測試, `vw', 'vh`, 在wxml 中能完美實現, 重複造輪子不是畫蛇添足嗎?　嘿，　具體緣由國內社區居然響應者寥寥無幾, 
// TODO
// 留待個人指引

@import 導入外聯樣式表

/** common.wxss **/
.small-p {
  padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

// TODO
// 日常工做中使用的通常都是 `scss`會大量利用到 `import`; `import` 在小程序的合做開發, 組件引用中確定有他的光彩;
// 能夠嘗試利用諸如 `koala`等工具將 `scss`與 `wxss`結合, 必定事半功倍

微信小程序View組件和Flexbox彈性盒模型segmentfault

微信小程序完美兼容 flex佈局, 之前一直由於flex在各終端, 各平臺兼容性問題顯得不溫不火 這下能夠由得flex 大顯身手了

在小程序ui組件中編輯屬性諸如:

// 行佈局, 實現: flex-direction:column
// 在前端佈局中缺省佈局, 即爲行佈局, display缺省值爲block
<view style="flex:1">
    <view style="display:flex;flex-direction:row">
        <view style="background:green"></view>
        <view style="background:red"></view>
        <view style="background:blue"></view>
    </view>
</view>


// 列布局, 實現: flex-direction:column
<view style="flex:1">
    <view style="display:flex;flex-direction:column">
        <view style="background:green"></view>
        <view style="background:red"></view>
        <view style="background:blue"></view>
    </view>
</view>

flex佈局還有諸如: just-content, align-item等屬性 ; 這方面的資料留存以待翻閱 : CSS 彈性盒子佈局 - CSS | MDN 以及微信小程序flex-demo微信小程序

事件對象

小程序支持的事件

小程序的事件函數命名與傳統的有所出入, 如傳統的移動端點擊事件爲 tap, 而小程序爲 bindtap, 這裏留存一份事件函數資料, 以待查閱 : 微信小程序事件api

小程序事件監聽方法

// wxml
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

// js
Page({
    // event參數爲事件源對象, 包含了諸如currentTarget, dataset, type等等信息
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 會轉爲駝峯寫法
    event.currentTarget.dataset.alphabeta === 2 // 大寫會轉爲小寫
  }
})

操做DOM元素

wxml 不支持像jq同樣操做dom元素,也沒有諸如原生js的appendChild等方法;
WhatF ? 那交互呢?微信

更改class :

// wxml
<view class="{{demoCss}}"> demo</view>

// js
var that = this;
that.setData({
  demoCss: "selectEd";
});

改變dom元素內容

// wxml
<view class="{{demoCss}}"> {{demoText}}</view>

// js
var that = this;
that.setData({
  demoText: "demoText";
});

增刪改查dom元素

這裏不得不放大招了 : 列表渲染 · 小程序

// wxml
view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

// js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

// 效果

![clipboard.png](/img/bVTNcy)

// 思路, 能夠嘗試充分利用dataList屬性
// 操做dom還有 條件渲染, 模板 的方式, 準備把這一塊單獨擰出來寫一份
// TODO

AJAX

使用方式和傳統的使用方式區別不大, 網絡上亦有大量的教材, 這裏不做過多解釋
發起請求 · 小程序:

wx.request({
  url: 'test.php', //僅爲示例，並不是真實的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

頁面切換

2種實現思路

利用`position` 超出屏幕隱藏, 切換頁面即切換 `view`

// 可參考個人接下來的 小程序系列 - <左右切換 tab-demo>
<view>
    // 屏幕內page
    <view class="page-1 page-show"></view>
    // 屏幕外page
    <view class="page-2 "></view>
</view>

利用小程序API, 打開關閉頁面:

導航 · 小程序

this (粗略的)

普通函數內的this:

function f(){
console.log(this) // undefined
}

setTimeout裏的this指向

var f = function(){
    setTimeout(function(){
        console.log(this) // function(){console.log(this)}
    })
}

setInterval裏的this指向

var f = function(){
    setInterval(function(){
        console.log(this) // 小程序的-window對象
    })
}

事件中的this

Page({
    onLoad: function(option){
        console.log(this) // 一個名爲e的對象(包含setData)
    }
})

一些注意事項

- 刷新dom, 在操做數據後後必須經過 setDate方法, 從新渲染
- 調試能夠經過 console.*() 系列方法在控制檯打印信息

總結:

一套代碼, 在多個終端運行, 是符合潮流, 符合發展邏輯的; 微信小程序值得一學。
小程序拋棄了傳統的直接操做 dom的開發方法, 採用了JavaScriptCore的開發思路,實現JS -> WXML動態解析。
借鑑以前炒的很火的MVVM框架思路,實現了諸如 單向數據綁定, 可移植在coding過程當中真的是隻須要關心邏輯的實現, 數據的排序, 避免反覆的查找丶操做dom。對代碼的簡潔度, 邏輯的梳理, 仍是頗有幫助的