国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

小程序web開發框架－weweb介紹

codercao / 2790人閱讀

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

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

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

自帶常用組件，完美繼承了小程序內置組件

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

該項目基于小程序開發者工具內置的小程序運行框架來實現的，我們在仔細研究了小程序官方的底層框架后，實現了小程序運行在web端的service和view引擎，為了使[weweb]能適應web端的性能要求，相較小程序原生框架，主要有以下調整：

框架核心庫進行了大量精減，剔除web不相關的部分,使核心庫體積大大減小

將原有的三層架構精簡為Service和View兩層架構

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

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

去除了小程序對頁面層級的限制

實現了js版的wxml和wxss編譯器以適應跨平臺編譯需求并無縫整合至weweb

適用場景

喜歡小程序的開發方式，或者只懂小程序開發，想通過小程序的開發方式來寫web應用

開發出小程序后，同時想擁有同樣功能的h5應用，并希望能復用小程序的代碼

代替小程序開發者工具對小程序部分功能在瀏覽器端進行調試

開發

開發方式可以直接套用你以前開發小程序的方式，不需要另外的學習成本，只是在小程序開發完后，通過下面介紹的二種運行方式，把小程序編譯轉換成相應的h5應用，然后把編譯后的代碼扔到服務器上就行了

運行 
請先在系統中安裝node，官方的安裝包會同時為您裝上依賴管理工具npm
方法一：使用cli命令行工具對小程序直接轉換

安裝：

npm install weweb-cli -g

運行示例：

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

Options:

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

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

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

-l, --list 使用默認瀏覽器打開更新歷史

-p, --port 指定服務端口，默認 2000

-d, --dist

指定生成的路徑

-t, --transform 只轉換小程序,不起web服務

方法二：手動構建并運行： 
# clone [weweb]項目后安裝依賴
npm i

# 構建核心庫：
npm run build

# 運行示例：
./bin/weweb ./demos/demo20170111/

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

# 替換編譯器：當默認編譯出錯時使用環境變量 DFT_CMP=true 可切換為微信開發者工具自帶的編譯器
DFT_CMP=true ./bin/weweb demos/demo20170111

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

demo小程序二維碼如下：

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

注意事項

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

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

DFT_CMP=true ./bin/weweb demos/demo20170111

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

登錄：轉換成H5后將不支持小程序原生的登錄方式，可通過loginUrl項來設置調用wx.login時跳轉到的登錄頁面

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

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

當登錄成功后調用
wx.loginSuccess();
這個api可以自動返回到來源頁面
示例代碼：
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||"登錄失敗");
}
}

跨域請求：當后端接口不支持JSONP時，可以增加requestProxy配置項來設置服務器端代理地址，以實現跨域請求

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

"weweb":{
  "requestProxy":"/remoteProxy"
}
小程序轉換成h5效果說明

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

小程序轉換為H5后，特殊情況下，個別樣式可能會有些異常，得自行調整兼容

最后放上我們github地址

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89092.html

相關文章

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

    摘要：中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示，截至年月，我國網民規模達億人，微信月活億支付寶月活億百度月活億另一方面，中國手機占智能手機整體的比例超過，月活約億。在年末正式發布了面向未來的跨端的。 開源中國專訪：Chameleon原理首發，其它跨多端統一框架都是假的？ 原創： 嘉賓-張楠 開源中國 以往我們說某一功能跨多端，往往是指在諸如 PC、移動等不同類型的設備之...

    GraphQuery 評論0 收藏0

  • wepy框架開發小程序文檔

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

    Luosunce 評論0 收藏0

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

    摘要：新聞熱點國內國外，前端最新動態蘋果開源了版近日，蘋果開源了一款基于事件驅動的跨平臺網絡應用程序開發框架，它有點類似，但開發語言使用的是。蘋果稱的目標是幫助開發者快速開發出高性能且易于維護的服務器端和客戶端應用協議。 showImg(https://segmentfault.com/img/remote/1460000013677379); 前端每周清單專注大前端領域內容，以對外文資料的...

    劉東 評論0 收藏0

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

    摘要：下面圍繞的這樣的目的，即左右知乎網頁上屏幕截圖功能的實現前端掘金背景最近注意到知乎的屏幕截圖反饋功能，感覺非常不錯。正如你期望的，文中的闖關記之垃圾回收和內存管理前端掘金題圖來源，授權基于協議。 微信小程序實戰學習 起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大場景? 微信小程序本質上來說就是一個 HTML 5（移動網頁） 應用，用view、scoll-view代替了div標...

    LdhAndroid 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<