成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

一次微信小程序的快速開發(fā)體驗(yàn)

VioletJack / 1259人閱讀

摘要：起因事情是這樣的一天早上組里還早激烈的討論某個(gè)項(xiàng)目的可用性和發(fā)展前景，突然老大說了句，能不能做個(gè)小程序的版本呢然后大家紛紛討論起來，有反對(duì)有支持，我就說了一句，剛出來的時(shí)候搞過一會(huì)。。。

起因

事情是這樣的

一天早上組里還早激烈的討論某個(gè)項(xiàng)目的可用性和發(fā)展前景，突然老大說了句，能不能做個(gè)小程序的版本呢？然后大家紛紛討論起來，有反對(duì)有支持，我就說了一句，剛出來的時(shí)候搞過一會(huì)。。。然后就把我推出來了（日了狗了~~）

這個(gè)項(xiàng)目大概一個(gè)星期之后就要推出去了，換句話說，我要一個(gè)星期內(nèi)搞個(gè)小程序的版本出來，寶寶有點(diǎn)慌了~~

不過既然接手了還是要好好做的，首先的，完全自己搞肯定是來不及，項(xiàng)目的模塊絕對(duì)要復(fù)用起來，思索下大概有3點(diǎn)需要搞

HTML

CSS

javascript module

CSS

其中CSS在小程序的叫做WXSS，基本和CSS語法類似了，也就需要將標(biāo)簽選擇器改了，比如

table{
    //XXX
}
//改成
.table{

}

還有就是WXSS的尺寸單位比較推薦使用rpx，但是這里還是繼續(xù)使用px，當(dāng)然在響應(yīng)式方面還需要自己改改，工程量不是很大

JS

對(duì)于JS方面就比較棘手了一點(diǎn)，唯一慶幸的是，原項(xiàng)目是用vue來做框架搭建的，仔細(xì)觀察下小程序框架的語法結(jié)構(gòu)，發(fā)現(xiàn)其實(shí)和vue很類似，都具備生命周期和各種事件綁定等等，所以在整體JS結(jié)構(gòu)上面大概有幾點(diǎn)需要修改

生命周期函數(shù)

  created: function () {
    //xx
  }

  //改成
  onLoad: function() {

  }

數(shù)據(jù)綁定

this.container = "";
//改成
this.setData({
    "container": ""
});

剩下的就是模塊的引用，小程序本身也支持ES6語法，但還是有缺陷，比如不支持promise，可以通過引入相應(yīng)的polyfill 來解決，還能順便讓小程序本身的API也應(yīng)用上promise

//util.js
import Promise from "./bluebird.min";
export const wxPromise = function(fn) {
  return function (obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function(res) {
        resolve(res);
      }

      obj.fail = function(err) {
        reject(err);
      }

      fn(obj)
    })
  }
}

可以在需要調(diào)用的地方引入，或者直接在APP.js里面封裝原API，然后掛載在全局上面

import {wxPromise} from "../../utils/util";
let login = wxPromise(wx.login);
let getUserInfo = wxPromise(wx.getUserInfo);
login()
    .then((res) => {
        console.log(res);
        return getUserInfo();
    })
    .then((res) => {
        console.log(res);
    })
    .catch((res) => {
        console.log(res);
    })

原項(xiàng)目里面的模塊還調(diào)用了window對(duì)象的屬性，比如localstorage、innerWidth、innerHeight等等，在開發(fā)工具里面輸出console.log(window)直接甩了我一個(gè)大大undefined，呵呵，都快崩潰了，后來想想，也不是完全沒有辦法，小程序也有類似的API來實(shí)現(xiàn)這些方法和屬性，我要做的就是造一個(gè)window對(duì)象給它就可以了，老樣子，直接掛載全局就行

    App({
        window: {},
        location: {
            href: "http://localhost/index.html?clear"
        },
        onLaunch: function() {
            let _this = this;
            getSystemInfo()
                .then((res)=>{
                    _this.window.innerWidth = res.windowWidth;
                    _this.window.innerHeight = res.windowHeight;
                })
            _this.window.localStorage = {};
            _this.window.localStorage.setItem = wx.setStorageSync;
            _this.window.localStorage.getItem = wx.getStorageSync;
            _this.window.localStorage.clear = wx.removeStorageSync;
        }
    })

//注入到頁面或者模塊
let {window, location} = app;
HTML

最后一個(gè)難題就是HTML了，首先HTML直接套在WXML上面是行不通的，結(jié)果是可以編譯顯示出來，但是完全失去了HTML各個(gè)標(biāo)簽的意義，比如div塊級(jí)標(biāo)簽所具備的屬性都不存在了，當(dāng)然你可以通過WXSS添加屬性來兼容，比如

div, p {
    display:blcok
}

我個(gè)人并不贊同這種做法，因?yàn)樵贖TML中img、canvas等等并沒有要求閉合標(biāo)簽，但是WXML是嚴(yán)格要求每個(gè)標(biāo)簽都要有閉合，就是說你想通過添加WXSS屬性來兼容的話，首先要手動(dòng)加img和canvas的閉合標(biāo)簽(在小程序中img標(biāo)簽應(yīng)該是image，不然還是無法顯示圖片)，其次就是怕官方下次更新迭代突然加入div這個(gè)組件，然后又要改版，煩~~
那么唯一的出路就是將HTML轉(zhuǎn)成符合小程序的WXML出來，作為一個(gè)程序員，手動(dòng)改也太掉價(jià)了。。。直接上工具，google查下，發(fā)現(xiàn)網(wǎng)上也有類似的工具出來，工具的轉(zhuǎn)換原理是這樣的話，首先HTML先轉(zhuǎn)換成json對(duì)象，然后注入到模版，由模版生成。
但是有2個(gè)問題
1、轉(zhuǎn)換出來的WXML是依賴模版渲染的，首先小程序的模版是不支持遞歸調(diào)用的，就是說，假如你的標(biāo)簽有6層嵌套的話，那么你需要復(fù)制6份模版出來，然后tmp1嵌套tmp2...temp6，這樣的話你只能祈禱工具帶來的模版有嵌套了足夠多。
2、無法實(shí)現(xiàn)數(shù)據(jù)綁定，比如

{{text}}

//轉(zhuǎn)換后原樣輸出了{(lán){text}}
{{text}}

既然模版輸出這條路走不通，那就只能借助node動(dòng)態(tài)的輸出WXML，思路和上面差不多，也是HTML生成json dom，然后遞歸渲染wxml節(jié)點(diǎn)，最后輸出一份wxml文件，工具的實(shí)現(xiàn)在這里，細(xì)節(jié)就不多說了，目前還沒有做canvas、audio、video標(biāo)簽的轉(zhuǎn)換，有BUG的話直接提issue，最后求star

總結(jié)

沒事別BB

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50493.html

相關(guān)文章

  • 一次微信小程序的快速開發(fā)體驗(yàn)

    摘要：起因事情是這樣的一天早上組里還早激烈的討論某個(gè)項(xiàng)目的可用性和發(fā)展前景，突然老大說了句，能不能做個(gè)小程序的版本呢然后大家紛紛討論起來，有反對(duì)有支持，我就說了一句，剛出來的時(shí)候搞過一會(huì)。。。 起因 事情是這樣的 一天早上組里還早激烈的討論某個(gè)項(xiàng)目的可用性和發(fā)展前景，突然老大說了句，能不能做個(gè)小程序的版本呢？然后大家紛紛討論起來，有反對(duì)有支持，我就說了一句，剛出來的時(shí)候搞過一會(huì)。。。然后就把...

    or0fun 評(píng)論0 收藏0

  • 記一次微信小程序在安卓的白屏問題

    摘要：在做小程序的時(shí)候，做到了一個(gè)限時(shí)商品售賣，用到了倒計(jì)時(shí)，因?yàn)檫@個(gè)原因?qū)е铝税沧渴謾C(jī)上使用小程序時(shí)，將小程序放入后臺(tái)運(yùn)行一段時(shí)間后，再次進(jìn)入小程序后出現(xiàn)了頁面白屏或者點(diǎn)擊事件失效的情況，這里記錄下相關(guān)代碼文件我這里是使用了自定義組件的形式來渲 在做小程序的時(shí)候，做到了一個(gè)限時(shí)商品售賣，用到了倒計(jì)時(shí)，因?yàn)檫@個(gè)原因?qū)е铝税沧渴謾C(jī)上使用小程序時(shí)，將小程序放入后臺(tái)運(yùn)行一段時(shí)間后，再次進(jìn)入小程序后...

    Hydrogen 評(píng)論0 收藏0

  • 從0到1：微信小程序自選股項(xiàng)目回憶錄

    摘要：小程序自選股項(xiàng)目團(tuán)隊(duì)在長(zhǎng)達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事，不知通宵了多少個(gè)夜晚，只為等待小龍宣布號(hào)小程序正式發(fā)布的到來。第一次被微信開放平臺(tái)開發(fā)二組團(tuán)隊(duì)小程序項(xiàng)目團(tuán)隊(duì)當(dāng)小白鼠各種實(shí)驗(yàn)新特性。。 導(dǎo)語：我很喜歡小龍的一句話，微信因你而變。是的，把事情做到極致的時(shí)候，這個(gè)世界就會(huì)因你而變。 小程序自選股項(xiàng)目團(tuán)隊(duì)在長(zhǎng)達(dá)五個(gè)月的時(shí)間里經(jīng)歷了太多不為人知的故事， 不知通宵了多少個(gè)夜晚，只...

    feng409 評(píng)論0 收藏0

  • 從前端界面開發(fā)談微信小程序體驗(yàn)

    摘要：在開發(fā)之前你要有微信開發(fā)者工具。同時(shí)為了更適合開發(fā)微信小程序，還對(duì)進(jìn)行了擴(kuò)充以及修改，直接幫我們把適配的一部分工作都做了，比如他的，可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，規(guī)定屏幕寬為。 本文由云+社區(qū)發(fā)表 這段時(shí)間有幸加入了一個(gè)關(guān)于微信小程序的項(xiàng)目開發(fā)組，從無到有的根據(jù)文檔自行學(xué)習(xí)了小程序的開發(fā)過程，前面已經(jīng)有幾位前輩的文章珠玉在前，我這里就先從前端界面的開發(fā)方面談一談小程序以及我所遇到的問題吧...

    hellowoody 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<