摘要：小程序拋棄了傳統(tǒng)的直接操作的開發(fā)方法采用了的開發(fā)思路實(shí)現(xiàn)動態(tài)解析。借鑒之前炒的很火的框架思路實(shí)現(xiàn)了諸如單向數(shù)據(jù)綁定可移植在過程中真的是只需要關(guān)心邏輯的實(shí)現(xiàn)數(shù)據(jù)的排序避免反復(fù)的查找丶操作。

寫一個(gè)微信小程序系列的開發(fā)關(guān)鍵點(diǎn)

微信開發(fā)者工具工程目錄

關(guān)于小程序的工程架構(gòu), 文件目錄, 已經(jīng)有很多coder發(fā)表過相關(guān)資料. 這里不做更多解釋, 留存一篇留待翻閱:小程序工程目錄結(jié)構(gòu)介紹

小程序可以使用行內(nèi)樣式, 可以使用class樣式

style 實(shí)現(xiàn)行內(nèi)樣式:

{{motto }}

雙括號實(shí)現(xiàn)動態(tài)樣式

// .wxml
{{motto }}

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

小程序兼容大部分傳統(tǒng)CSS語法

包括但不僅限于: CSS3, position, float,諸如傳統(tǒng)的圣杯布局,左右雙飛翼布局都可以在小程序端實(shí)現(xiàn)

小程序擴(kuò)展了特性

尺寸單位 rpx

小程序擴(kuò)展了 `rpx`, 本意是希望  `rpx` 根據(jù)屏幕寬度進(jìn)行自適應(yīng)。 但前端已經(jīng)有了 `vw`, `vh` ; 而且經(jīng)過測試, `vw", "vh`, 在wxml 中能完美實(shí)現(xiàn), 重復(fù)造輪子不是多此一舉嗎?　嘿，　具體原因國內(nèi)社區(qū)竟然響應(yīng)者寥寥無幾, 
// TODO
// 留待我的指引

@import 導(dǎo)入外聯(lián)樣式表

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

// TODO
// 平常工作中使用的一般都是 `scss`會大量利用到 `import`; `import` 在小程序的合作開發(fā), 組件引用中肯定有他的光彩;
// 可以嘗試?yán)弥T如 `koala`等工具將 `scss`與 `wxss`結(jié)合, 一定事半功倍

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

微信小程序完美兼容 flex布局, 以前一直因?yàn)閒lex在各終端, 各平臺兼容性問題顯得不溫不火 這下可以由得flex 大顯身手了

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

// 行布局, 實(shí)現(xiàn): flex-direction:column
// 在前端布局中缺省布局, 即為行布局, display缺省值為block

    
        
        
        
    



// 列布局, 實(shí)現(xiàn): flex-direction:column

    
        
        
        
    

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

小程序的事件函數(shù)命名與傳統(tǒng)的有所出入, 如傳統(tǒng)的移動端點(diǎn)擊事件為 tap, 而小程序?yàn)?bindtap, 這里留存一份事件函數(shù)資料, 以待查閱 : 微信小程序 事件

// wxml
 DataSet Test 

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

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

// wxml
 demo

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

// wxml
 {{demoText}}

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

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

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


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

// 效果

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

// 思路, 可以嘗試充分利用dataList屬性
// 操作dom還有 條件渲染, 模板 的方式, 準(zhǔn)備把這一塊多帶帶擰出來寫一份
// TODO 

使用方式和傳統(tǒng)的使用方式區(qū)別不大, 網(wǎng)絡(luò)上亦有大量的教材, 這里不作過多解釋
發(fā)起請求 · 小程序:

wx.request({
  url: "test.php", //僅為示例，并非真實(shí)的接口地址
  data: {
     x: "" ,
     y: ""
  },
  header: {
      "content-type": "application/json"
  },
  success: function(res) {
    console.log(res.data)
  }
})

2種實(shí)現(xiàn)思路

// 可參考我的接下來的 小程序系列 - <左右切換 tab-demo>

    // 屏幕內(nèi)page
    
    // 屏幕外page
    

導(dǎo)航 · 小程序

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

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

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

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

-? 刷新dom, 在操作數(shù)據(jù)后后必須通過 setDate方法, 重新渲染
-? 調(diào)試可以通過 console.*() 系列方法 在控制臺打印信息

一套代碼, 在多個(gè)終端運(yùn)行, 是符合潮流, 符合發(fā)展邏輯的; 微信小程序值得一學(xué)。

小程序拋棄了傳統(tǒng)的直接操作 dom的開發(fā)方法, 采用了JavaScriptCore的開發(fā)思路,實(shí)現(xiàn)JS -> WXML動態(tài)解析。

借鑒之前炒的很火的MVVM框架思路,實(shí)現(xiàn)了諸如 單向數(shù)據(jù)綁定, 可移植在coding過程中真的是只需要關(guān)心邏輯的實(shí)現(xiàn), 數(shù)據(jù)的排序, 避免反復(fù)的查找丶操作dom。 對代碼的簡潔度, 邏輯的梳理, 還是很有幫助的

Q&A · 小程序 !必看

原文地址:  https://segmentfault.com/a/11...
轉(zhuǎn)載無需聯(lián)系, 但請著名來源 @SF.GG-Starch。