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

資訊專欄INFORMATION COLUMN

小程序web開發(fā)框架－weweb介紹

codercao / 2802人閱讀

摘要：我們將盡快修正切換成微信開發(fā)者工具自帶的編譯器使用環(huán)境變量如下轉(zhuǎn)換成后，會(huì)存在跨域訪問接口及脫離微信環(huán)境帶來的一些無法支持的問題。

weweb是一個(gè)兼容小程序語法的前端框架，你可以用小程序的寫法，來寫web單面應(yīng)用。如果你已經(jīng)有小程序了，通過它你可以將你的小程序運(yùn)行在瀏覽器中。在小程序大行其道的今天，它可以讓你的小程序代碼得到最大限度的發(fā)揮，他具有以下優(yōu)點(diǎn)：

跨平臺(tái)，一套代碼多端運(yùn)行（小程序、h5、未來直接打包成安卓、ios app也不是夢)

自帶常用組件，完美繼承了小程序內(nèi)置組件

兼容小程序rpx語法，使頁面更容易適配各種機(jī)型

該項(xiàng)目基于小程序開發(fā)者工具內(nèi)置的小程序運(yùn)行框架來實(shí)現(xiàn)的，我們在仔細(xì)研究了小程序官方的底層框架后，實(shí)現(xiàn)了小程序運(yùn)行在web端的service和view引擎，為了使[weweb]能適應(yīng)web端的性能要求，相較小程序原生框架，主要有以下調(diào)整：

框架核心庫進(jìn)行了大量精減，剔除web不相關(guān)的部分,使核心庫體積大大減小

將原有的三層架構(gòu)精簡為Service和View兩層架構(gòu)

頁面資源、框架不常用內(nèi)置組件均使用異步加載，減少核心庫體積，提升加載速度

支持自定義登錄頁面，代替微信登錄功能

去除了小程序?qū)撁鎸蛹壍南拗?/p>

實(shí)現(xiàn)了js版的wxml和wxss編譯器以適應(yīng)跨平臺(tái)編譯需求并無縫整合至weweb

適用場景

喜歡小程序的開發(fā)方式，或者只懂小程序開發(fā)，想通過小程序的開發(fā)方式來寫web應(yīng)用

開發(fā)出小程序后，同時(shí)想擁有同樣功能的h5應(yīng)用，并希望能復(fù)用小程序的代碼

代替小程序開發(fā)者工具對小程序部分功能在瀏覽器端進(jìn)行調(diào)試

開發(fā)

開發(fā)方式可以直接套用你以前開發(fā)小程序的方式，不需要另外的學(xué)習(xí)成本，只是在小程序開發(fā)完后，通過下面介紹的二種運(yùn)行方式，把小程序編譯轉(zhuǎn)換成相應(yīng)的h5應(yīng)用，然后把編譯后的代碼扔到服務(wù)器上就行了

運(yùn)行 
請先在系統(tǒng)中安裝node，官方的安裝包會(huì)同時(shí)為您裝上依賴管理工具npm
方法一：使用cli命令行工具對小程序直接轉(zhuǎn)換

安裝：

npm install weweb-cli -g

運(yùn)行示例：

#./demos/demo20170111/這是小程序的存放路徑
weweb ./demos/demo20170111/

Options:

-h, --help 輸出幫助信息

-V, --version 輸出版本信息

-o, --open 使用 Chrome 打開小程序，僅對 Mac 有效

-l, --list 使用默認(rèn)瀏覽器打開更新歷史

-p, --port 指定服務(wù)端口，默認(rèn) 2000

-d, --dist

指定生成的路徑

-t, --transform 只轉(zhuǎn)換小程序,不起web服務(wù)

方法二：手動(dòng)構(gòu)建并運(yùn)行： 
# clone [weweb]項(xiàng)目后安裝依賴
npm i

# 構(gòu)建核心庫：
npm run build

# 運(yùn)行示例：
./bin/weweb ./demos/demo20170111/

# 壓縮app代碼：使用環(huán)境變量 NODE_ENV=production
NODE_ENV=production ./bin/weweb demos/demo20170111

# 替換編譯器：當(dāng)默認(rèn)編譯出錯(cuò)時(shí)使用環(huán)境變量 DFT_CMP=true 可切換為微信開發(fā)者工具自帶的編譯器
DFT_CMP=true ./bin/weweb demos/demo20170111

# 環(huán)境變量可以組合使用
NODE_ENV=production DFT_CMP=true ./bin/weweb demos/demo20170111
在線演示demo

demo小程序二維碼如下：

點(diǎn)此查看weweb編譯后的h5在線演示
可以比較一下小程序和轉(zhuǎn)換后生成的h5應(yīng)用的差異
[demo源碼]

注意事項(xiàng)

weweb默認(rèn)使用我們自己寫的編譯器對wxml和wxss進(jìn)行編譯，但目前編譯器還處于試用階段，有些case可能沒測全，使用weweb過程中如果發(fā)現(xiàn)一些異常情況，可以嘗試切換成微信官方編譯器，看看是不否能解決問題。出現(xiàn)類似問題歡迎大家給我們提[issue]。我們將盡快修正

# 切換成微信開發(fā)者工具自帶的編譯器：使用環(huán)境變量 DFT_CMP=true 如下：

DFT_CMP=true ./bin/weweb demos/demo20170111

轉(zhuǎn)換成H5后，會(huì)存在跨域訪問接口及脫離微信環(huán)境帶來的一些api無法支持的問題。我們可以通過在小程序的app.json文件中增加weweb配置項(xiàng)來解決一些常見的問題：

登錄：轉(zhuǎn)換成H5后將不支持小程序原生的登錄方式，可通過loginUrl項(xiàng)來設(shè)置調(diào)用wx.login時(shí)跳轉(zhuǎn)到的登錄頁面

/**
 * 此處的loginUrl地址必須是在app.json里注冊了的小程序地址
 */

"weweb":{
  "loginUrl":"/page/H5login"
}

當(dāng)?shù)卿洺晒笳{(diào)用
wx.loginSuccess();
這個(gè)api可以自動(dòng)返回到來源頁面
示例代碼：
success : function(rt){
if(rt.result){
  var login = require("../../modules/login/index.js");
  app.globalData.userInfo = rt.result;
  login.setLoginInfo(rt.result);
  wx.loginSuccess();
}else{
  toast.show(self,rt.status.status_reason||"登錄失敗");
}
}

跨域請求：當(dāng)后端接口不支持JSONP時(shí)，可以增加requestProxy配置項(xiàng)來設(shè)置服務(wù)器端代理地址，以實(shí)現(xiàn)跨域請求

/**
 * 此處/remoteProxy是weweb自帶server實(shí)現(xiàn)的一個(gè)代理接口
 * 實(shí)際項(xiàng)目中請改成自己的真實(shí)代理地址。如果接口支持返回jsonp格式，則無需做此配置
 */

"weweb":{
  "requestProxy":"/remoteProxy"
}
小程序轉(zhuǎn)換成h5效果說明

轉(zhuǎn)換成H5后，依賴微信環(huán)境的相關(guān)接口將無法支持，比如：登錄等，需要自行改造為H5兼容方式

小程序轉(zhuǎn)換為H5后，特殊情況下，個(gè)別樣式可能會(huì)有些異常，得自行調(diào)整兼容

最后放上我們github地址

https://github.com/wdfe/weweb。

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

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

相關(guān)文章

  • 開源中國專訪：Chameleon原理首發(fā)，其它跨多端統(tǒng)一框架都是假的？

    摘要：中國互聯(lián)網(wǎng)絡(luò)信息中心發(fā)布的中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告顯示，截至年月，我國網(wǎng)民規(guī)模達(dá)億人，微信月活億支付寶月活億百度月活億另一方面，中國手機(jī)占智能手機(jī)整體的比例超過，月活約億。在年末正式發(fā)布了面向未來的跨端的。 開源中國專訪：Chameleon原理首發(fā)，其它跨多端統(tǒng)一框架都是假的？ 原創(chuàng)： 嘉賓-張楠 開源中國 以往我們說某一功能跨多端，往往是指在諸如 PC、移動(dòng)等不同類型的設(shè)備之...

    GraphQuery 評論0 收藏0

  • wepy框架開發(fā)小程序文檔

    摘要：目錄項(xiàng)目構(gòu)建文件使用優(yōu)化之處組件通信的使用注意事項(xiàng)報(bào)錯(cuò)記錄踩坑記錄項(xiàng)目構(gòu)建官方文檔地址鏈接項(xiàng)目源碼地址鏈接項(xiàng)目資料地址鏈接簡單介紹是一個(gè)微信小程序框架，支持模塊化開發(fā)，開發(fā)風(fēng)格類似。使用的方式請求小程序原生都將化。 目錄 wepy項(xiàng)目構(gòu)建 wepy文件使用 wepy優(yōu)化之處 wepy組件通信 wepy的API使用 wepy注意事項(xiàng) wepy報(bào)錯(cuò)記錄 wepy踩坑記錄 1. wep...

    Luosunce 評論0 收藏0

  • 前端每周清單第 54 期: SwiftNIO, 自定義 vue-router, Web 緩存與 Gr

    摘要：新聞熱點(diǎn)國內(nèi)國外，前端最新動(dòng)態(tài)蘋果開源了版近日，蘋果開源了一款基于事件驅(qū)動(dòng)的跨平臺(tái)網(wǎng)絡(luò)應(yīng)用程序開發(fā)框架，它有點(diǎn)類似，但開發(fā)語言使用的是。蘋果稱的目標(biāo)是幫助開發(fā)者快速開發(fā)出高性能且易于維護(hù)的服務(wù)器端和客戶端應(yīng)用協(xié)議。 showImg(https://segmentfault.com/img/remote/1460000013677379); 前端每周清單專注大前端領(lǐng)域內(nèi)容，以對外文資料的...

    劉東 評論0 收藏0

  • 我的大前端- 收藏集 - 掘金

    摘要：下面圍繞的這樣的目的，即左右知乎網(wǎng)頁上屏幕截圖功能的實(shí)現(xiàn)前端掘金背景最近注意到知乎的屏幕截圖反饋功能，感覺非常不錯(cuò)。正如你期望的，文中的闖關(guān)記之垃圾回收和內(nèi)存管理前端掘金題圖來源，授權(quán)基于協(xié)議。 微信小程序?qū)崙?zhàn)學(xué)習(xí) 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大場景? 微信小程序本質(zhì)上來說就是一個(gè) HTML 5（移動(dòng)網(wǎng)頁） 應(yīng)用，用view、scoll-view代替了div標(biāo)...

    LdhAndroid 評論0 收藏0

發(fā)表評論

0條評論

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