資訊專欄INFORMATION COLUMN
摘要：在微信小程序中，要更新視圖就只能修改，而視圖層也只能通過(guò)事件向邏輯層傳遞交互信息。頁(yè)面移植到微信小程序要修改的地方也還比較多，主要是標(biāo)簽和的交互及小程序提供的功能部分。
微信小程序框架小程序是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用「觸手可及」的夢(mèng)想，用戶掃一掃或搜一下即可打開(kāi)應(yīng)用。也體現(xiàn)了「用完即走」的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問(wèn)題。應(yīng)用將無(wú)處不在，隨時(shí)可用，但又無(wú)需安裝卸載。 ——張小龍
微信小程序分為視圖層和邏輯層，視圖層包含WXML（類似HTML）、WXSS（類似css），邏輯層包含javascript文件。視圖層通過(guò)事件通知邏輯層，而邏輯層通過(guò)控制data來(lái)更新視圖。此外，微信還提供了API、組件、配置文件，使微信小程序的開(kāi)發(fā)更加簡(jiǎn)單。
在開(kāi)發(fā)微信小程序時(shí)，我們通過(guò)網(wǎng)絡(luò)請(qǐng)求請(qǐng)求數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行一定的處理綁定到視圖即可，由于組件的存在，簡(jiǎn)單的展示變得更加簡(jiǎn)單。涉及網(wǎng)絡(luò)請(qǐng)求、媒體、文件、緩存、位置、設(shè)備、支付、二維碼等功能時(shí)，都可以去調(diào)用相應(yīng)的API。所以，微信小程序的開(kāi)發(fā)足夠簡(jiǎn)單，可以快速開(kāi)發(fā)并實(shí)現(xiàn)。
當(dāng)然，利弊是共存的，微信小程序開(kāi)發(fā)起來(lái)雖然簡(jiǎn)單，但是限制也較多、靈活性卻不足。在微信小程序中，要更新視圖就只能修改data，而視圖層也只能通過(guò)事件向邏輯層傳遞交互信息。前端傳統(tǒng)的Dom操作在微信小程序中是不可用的，因?yàn)閣indow、document在微信小程序中都不存在，所以，只要涉及操作Dom的代碼均不可復(fù)用。微信小程序WXML提供的標(biāo)簽也比HTML要少很多，但是常見(jiàn)的標(biāo)簽都是有的，WXSS支持的樣式也比CSS要少一些。如果要將H5頁(yè)面移植到微信小程序，要修改的地方還比較多：
WXML標(biāo)簽與HTML標(biāo)簽并不一致，要重寫；
微信小程序無(wú)DOM交互能力，涉及DOM操作的代碼需要在小程序中多帶帶設(shè)計(jì)；
網(wǎng)絡(luò)請(qǐng)求、媒體、文件、緩存、界面等相關(guān)內(nèi)容需要使用小程序提供的API來(lái)實(shí)現(xiàn)，API的使用比較簡(jiǎn)單；
與上述內(nèi)容無(wú)關(guān)的JS邏輯代碼是可以復(fù)用的；
css代碼可復(fù)用率高，除了一些復(fù)雜的CSS3樣式外，基本移植可用。小程序額外提供了flex、rpx的實(shí)現(xiàn)，做響應(yīng)式頁(yè)面變得更加容易。
綜上，微信小程序開(kāi)發(fā)簡(jiǎn)單，碼農(nóng)們可以快速上手，開(kāi)發(fā)出一個(gè)可用的小程序。但是，微信小程序限制也不少，不能操作DOM，支持的HTML標(biāo)簽和CSS樣式少一些，做一些炫酷的動(dòng)畫或者復(fù)雜的功能就比較困難。H5頁(yè)面移植到微信小程序要修改的地方也還比較多，主要是WXML標(biāo)簽、JS和HTML的交互及小程序提供的API功能部分。
微信小程序開(kāi)發(fā)姿勢(shì)如果你要開(kāi)始開(kāi)發(fā)一款微信小程序了，那么正確的步驟是什么呢？我也不知道啊。。。以下我的個(gè)人推薦步驟：
先了解微信小程序?yàn)楹味?，從產(chǎn)品的角度去思考微信小程序的利與弊（對(duì)于程序員思考為什么小程序要如此設(shè)計(jì)、為什么里面有各種限制是非常有幫助的）,推薦《一篇文章讀懂微信小程序(應(yīng)用號(hào))是什么?》、《你的產(chǎn)品適不適合做微信小程序？》；
整體認(rèn)識(shí)小程序的框架、設(shè)計(jì)理念、開(kāi)發(fā)的利弊；
通讀微信小程序官網(wǎng)；
仔細(xì)閱讀小程序官網(wǎng)的開(kāi)發(fā)部分(https://mp.weixin.qq.com/debu...，下載微信小程序開(kāi)發(fā)者工具，體驗(yàn)官網(wǎng)提供的Demo；
開(kāi)始開(kāi)發(fā)微信小程序。
模塊化 JavaScript模塊化微信小程序中，JS文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件可以聲明相同名字的變量和函數(shù)，不會(huì)相互影響。如果需要獲取全局的應(yīng)用實(shí)例，可以在App()中設(shè)置。
// app.js
App({
globalData: 1
})
// a.js
// The localValue can only be used in file a.js.
var localValue = "a"
// Get the app instance.
var app = getApp()
// Get the global data and change it.
app.globalData++
此外，可以通過(guò)require()引入其他JS文件，在文件中可以通過(guò)module.exports來(lái)暴露模塊接口。
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
module.exports.sayHello = sayHello
// index.js
var common = require("common.js")
Page({
helloMINA: function() {
common.sayHello("MINA")
}
})
WXML模塊化
WXML可以通過(guò)模板(template)來(lái)組織標(biāo)簽，使WXML拆分合理、清晰易讀。使用template標(biāo)簽來(lái)定義模版，使用name屬性指定模版名稱；通過(guò)import標(biāo)簽來(lái)引入模版，并使用is屬性來(lái)指定使用的模版名稱，data傳入屬性。
// template/msgItem.wxml{{index}}: {{msg}} Time: {{time}}
// index.wxmlWXSS模塊化
使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束。
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
視圖層與邏輯層交互
視圖層包含類似HTML的WXML、基本等同于CSS的WXSS，邏輯層則包含ES，去除了window、document等對(duì)象及方法，提供了一些API。視圖層通過(guò)事件來(lái)通知邏輯層交互，邏輯層通過(guò)修改data來(lái)更新視圖。
簡(jiǎn)單交互例子{{userName}}, Click me!
Page({
data: {
userName: "xxx"
},
tapName: function(e){
wx.showToast({
title: "hi," + this.data.userName + "I`m " + e.currentTarget.dataset.name,
icon: "success",
duration: 2000
})
}
})
WXML中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data。數(shù)據(jù)綁定使用雙大括號(hào)將變量包起來(lái)，數(shù)據(jù)改變(this.setData())時(shí)就會(huì)更新視圖，更新方式類似于虛擬dom。而事件的定義需要在標(biāo)簽屬性中指定事件處理函數(shù)名稱，事件處理函數(shù)在Page({})中定義，如果事件處理函數(shù)需要傳遞參數(shù)，則要在標(biāo)簽的data-中定義，但是一般情況下，我們是不需要傳遞參數(shù)的，因?yàn)榇蟛糠值臄?shù)據(jù)我們可以在事件處理函數(shù)中只是使用this.data.的方式取得。
修改data在小程序中，要使用this.setData()的方式來(lái)修改data，進(jìn)而更新視圖。但是，當(dāng)要修改data中的二級(jí)數(shù)據(jù)時(shí)，將不會(huì)進(jìn)行合并修改。如：
Page({
data: {
userInfo: {
name: "payton",
sex: 1
},
tip: "hello, world"
},
onLoad: function(){
this.setData({tip: "hello, world!"}) // 進(jìn)行合并修改，userInfo不變
this.setData({userInfo: {name: "peyton"}}) // 二級(jí)數(shù)據(jù)，整體修改。userInfo中sex消失,userInfo為{name: "peyton"}
}
})
很多時(shí)候，我們?cè)谛薷膁ata時(shí)，是希望只修改我們傳入的參數(shù)，而原有的參數(shù)不進(jìn)行變更的，如上面我們只希望修改name，而sex保持和原來(lái)一致。所以，我們可以采取一下方式：
this.setData({
userInfo: {
name: "peyton",
sex: this.data.userInfo.sex
}
})
但是這種方式很麻煩，而且很容易造成忘記一些內(nèi)容，或者修改屬性名時(shí)很容易漏掉。所以，我們?cè)O(shè)計(jì)了一個(gè)函數(shù)，來(lái)實(shí)現(xiàn)這種深層次數(shù)據(jù)的合并修改。使用下面的方式，便可以進(jìn)行合并了。
// util.js
function mergeObject(to, source) {
var from;
var symbols;
for(var s = 1; s < arguments.length; s++) {
from = Object(arguments[s]);
for(var key in from) {
if(hasOwnProperty.call(from, key)) {
to[key] = from[key];
}
}
}
return to;
};
module.exports.mergeObject = mergeObject;
var util = require("../util.js");
Page({
...
onLoad: function(){
this.setData({tip: "hello, world!"}) //進(jìn)行合并修改，userInfo不變
this.setData({
userInfo: util.mergeObject(this.data.userInfo, {
name: "peyton"
})
}) // 合并修改，sex不會(huì)消失。userInfo為{name:"peyton",sex:1}
}
})
插入HTML
在開(kāi)發(fā)H5頁(yè)面時(shí)，我們通常要使用innerHTML來(lái)修改一個(gè)標(biāo)簽內(nèi)的HTML，在小程序中，我們無(wú)法手動(dòng)修改DOM。比如：后臺(tái)傳遞過(guò)來(lái)一短內(nèi)容，這段內(nèi)容要展現(xiàn)在頁(yè)面中，但是其中包含圖片，且圖片數(shù)目不定。我們就沒(méi)有辦法通過(guò)js來(lái)構(gòu)造HTML片段，并插入到視圖中。在開(kāi)發(fā)花樣直播時(shí)，有時(shí)候一個(gè)用戶發(fā)送的內(nèi)容中包含表情，也就是圖片，此時(shí)，使用小程序的data是無(wú)法解析標(biāo)簽的，這個(gè)功能實(shí)現(xiàn)起來(lái)就很麻煩。我的實(shí)現(xiàn)方式如下：
// msg.wxml{{content.text}}
// 后臺(tái)傳遞的content: 主播好漂亮/:149/ (注：/:149/表示微笑表情)
if (...) {
return {
type: "text",
text: text
}
} else if (..){
return {
type: "image",
src: src
}
}
也就是要將后臺(tái)傳遞的內(nèi)容轉(zhuǎn)成數(shù)組，并且需要標(biāo)明類型，再根據(jù)條件渲染，分別渲染成文字和圖片。由于我這里的需求只需要關(guān)注展示文字和表情，所以這種方式處理起來(lái)就OK。但是，如果后臺(tái)傳遞的是文章類型的內(nèi)容（包含圖片、標(biāo)題等等），需要轉(zhuǎn)換成多種格式，再自己寫就會(huì)很麻煩了。這個(gè)時(shí)候推薦使用wxParse(https://github.com/icindy/wxP...，支持HTML及markdown解析，其實(shí)現(xiàn)思路其實(shí)和上面方式類似。使用wxParse的話，可以將H5版本構(gòu)造的html片段直接傳入wxParse，wxParse會(huì)進(jìn)行解析，最終轉(zhuǎn)換成小程序版本。不過(guò)，有同事用過(guò)，不過(guò)反饋說(shuō)頁(yè)面中圖片多的話，用wxParse會(huì)比較卡，我自己沒(méi)有嘗試過(guò)，此處就不再多說(shuō)。
小程序組件及API小程序本身提供了很多組件和API，使用這些組件和API可以很方便的進(jìn)行開(kāi)發(fā)，極大的加快開(kāi)發(fā)進(jìn)程。目前來(lái)說(shuō)，有些組件和API還有些小坑，目前仍在動(dòng)態(tài)完善中。關(guān)注此部分，官網(wǎng)上全面很多，此處只做簡(jiǎn)述。
配置在小程序中，可以通過(guò)app.json對(duì)小程序進(jìn)行全局的配置，在每個(gè)頁(yè)面中可以進(jìn)行有關(guān)配置（只能配置頁(yè)面內(nèi)的配置項(xiàng)，比全局配置要少）。在全局配置中，可以配置的內(nèi)容為：
pages，設(shè)置頁(yè)面路徑，第一個(gè)路徑即為默認(rèn)初始頁(yè)，所有的頁(yè)面路徑均需要配置；
window，設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn)，如狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等（可以在頁(yè)面中配置，覆蓋全局配置）；
tabBar，設(shè)置tab的表現(xiàn)，可以設(shè)置圖片、文字等；
networkTimeout，網(wǎng)絡(luò)超時(shí)時(shí)間；
debug，設(shè)置是否開(kāi)啟 debug 模式。
組件與H5相比，WXML提供的組件種類并不算多，但是常用的都有，開(kāi)發(fā)個(gè)小程序不成問(wèn)題。其組件中提供了一些便捷的屬性，還是很方便的，但是屬性與H5相比仍然不全面。
視圖容器：view(類似div)、scroll-view(類似帶滾動(dòng)條的div)、swiper(滑塊視圖容器);
表單組件：button、checkbox、form、input、label等；
基礎(chǔ)內(nèi)容：icon(小程序提供的圖標(biāo))、text(行內(nèi)文本)、progress(進(jìn)度條)；
媒體組件：audio、image(background-image的形式有很多坑，最好用image)、video；
地圖、畫布、導(dǎo)航、客服會(huì)話等。
API微信小程序提供的API還是挺多，用起來(lái)也還不錯(cuò)。
網(wǎng)絡(luò)：請(qǐng)求(http請(qǐng)求，使用手感不錯(cuò))、上傳、下載、WebSocket(服務(wù)器能支持就很爽了)；
媒體：圖片、錄音、音頻控制、視頻控制（目前感覺(jué)這部分提供的API仍然不足）；
界面：提示框、彈框、導(dǎo)航條設(shè)置、跳轉(zhuǎn)、下拉刷新、繪圖等；
數(shù)據(jù)緩存、設(shè)備（羅盤、掃碼、撥打電話、重力感應(yīng)等）、文件等；
開(kāi)放接口：登錄、微信支付、用戶信息、模板消息、分享等。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81338.html
摘要：瞬時(shí)加載程序與微信小程序的對(duì)比年的大會(huì)，發(fā)布了技術(shù)，而微信小程序公開(kāi)內(nèi)側(cè)的時(shí)間是同年月日。但是從可實(shí)施角度看我指的是只在大陸范圍內(nèi)，天生就不如微信小程序，因?yàn)樯赌愣?。新技術(shù)全拆解系列預(yù)告第二篇新技術(shù)全拆解剖析 作者：Darkbug原文標(biāo)題：Google新技術(shù)：Instant App全拆解（1）——初探原文鏈接：https://segmentfault.com/a/11...首發(fā)地址：...
摘要：瞬時(shí)加載程序與微信小程序的對(duì)比年的大會(huì)，發(fā)布了技術(shù)，而微信小程序公開(kāi)內(nèi)側(cè)的時(shí)間是同年月日。但是從可實(shí)施角度看我指的是只在大陸范圍內(nèi)，天生就不如微信小程序，因?yàn)樯赌愣?。新技術(shù)全拆解系列預(yù)告第二篇新技術(shù)全拆解剖析 作者：Darkbug原文標(biāo)題：Google新技術(shù)：Instant App全拆解（1）——初探原文鏈接：https://segmentfault.com/a/11...首發(fā)地址：...
摘要：近些天有接觸到框架，使用軟件進(jìn)行編譯，能生成多端項(xiàng)目文件，如微信百度支付寶小程序及和端，記錄遇到的問(wèn)題條件編譯我覺(jué)得比較突出的一點(diǎn)功能，就是這個(gè)條件編譯，指定對(duì)應(yīng)的代碼執(zhí)行在對(duì)應(yīng)的一端僅在某平臺(tái)存在除了某平臺(tái)均存在如只在微信小程序中才執(zhí)行 近些天有接觸到uni-app框架，使用HBuilderX軟件進(jìn)行編譯，能生成多端項(xiàng)目文件，如微信、百度、支付寶小程序及Android和ios端，記錄...
閱讀 2059·2021-08-21 14:09
閱讀 524·2019-08-30 15:44
閱讀 2164·2019-08-29 16:32
閱讀 1419·2019-08-29 15:36
閱讀 3524·2019-08-29 12:43
閱讀 2823·2019-08-29 11:14
閱讀 462·2019-08-28 18:26
閱讀 2280·2019-08-26 13:57
