HTML5（WeX5框架） 開發(fā)概述

一、先了解什么是Hybrid App(混合模式移動應(yīng)用)

http://baike.so.com/doc/6731462-6945763.html

二、這里先來嘗試學(xué)習(xí)下國內(nèi)免費(fèi)開源框架WeX5

    1、先看看綜合演示案例好了：http://www.wex5.com/portfolio-items/demo-wex5portal/

    2、下載些新手入門的視頻看看：http://www.wex5.com/wex5-welcome/

    3、了解Baas（后端即服務(wù)：Backend as a Service）:http://baike.baidu.com/link?url=Q1r5OcvfyBX3b1Dcoip3wTztBqUZnGW-qqpaz1eokTSMpbX3g3MA1sgO_EbZOXmtyGfA9VU74JFC3n1jA6oi7q

        注：我們可以用ajax調(diào)用自己的后臺服務(wù)（java/php等等后臺），也可以使用X5提供的Bass服務(wù)直接訪問數(shù)據(jù)庫。

    4、Bootstrap(web前端css框架），WeX5基于它作的拓展：http://baike.baidu.com/link?url=oZs8VV9b9jzI9mI4aZgLzUaZd9h09vjGtv1EK0yU7D9iZtydVoJoiiYm0i4RP-ng3xL4pmjr9pweeBbsp-hvI6H_by3xf9cO7u3LAmFmi_q

        例一：使用媒體對象組件，http://v3.bootcss.com/components/#media 。按它的div布局，調(diào)用其class名稱，便可以有Bootstrap的模版效果了。

        例二：柵格系統(tǒng)及其響應(yīng)式布局處理： http://v3.bootcss.com/css/#grid

        bootstrap中文網(wǎng)（查詢手冊）：http://www.bootcss.com/

        學(xué)習(xí)bootstrap（基礎(chǔ)篇） http://www.imooc.com/learn/141

        學(xué)習(xí)bootstrap（js插件篇） http://www.imooc.com/learn/262

    5、視頻是基于Baas的，如果要使用自己的web服務(wù)端，那就按正常的ajax方案調(diào)用，再結(jié)合WeX5來處理。值得注意的一點(diǎn)是：由于是訪問另一個服務(wù)端，所以要解決跨域訪問的問題，方案比較簡單，

http://www.wex5.com/ajax-cors-jsonp/

    6、關(guān)于部署（把需要的文件部署到一個新的tomcat,發(fā)布外網(wǎng)就不作說明了）：

        A、把E:\WeX5\model\Native\外賣\www 目錄下項(xiàng)目文件（例如：wm）復(fù)制到 D:\Tomcat6.0\webapps

        B、把E:\WeX5\apache-tomcat\webapps\app-template目錄下的WEB-INF復(fù)制到D:\Tomcat6.0\webapps\wm目錄下

        C、把E:\WeX5\runtime目錄下的BaasServer復(fù)制到D:\Tomcat6.0\webapps目錄下，并且更名為bass。

        D、把E:\WeX5\apache-tomcat\conf\context.xml文件中的數(shù)據(jù)庫相關(guān)的配置復(fù)制到D:\Tomcat6.0\conf\context.xml文件中。

        E、把E:\WeX5\apache-tomcat\lib目錄中的mysql-connector-java-5.1.36-bin.jar復(fù)制到D:\Tomcat6.0\lib目錄中

        F、運(yùn)行tomcat訪問http://127.0.0.1:8181/wm/index.html

    可能會出現(xiàn)的錯誤：

        a、如果新tomcat的jdk版本比WeX5使用的jdk版本低，啟動tomcat會報(bào)錯。

        b、D:\Tomcat6.0\webapps\wm\WEB-INF\web.xml文件中的<url-pattern>*</url-pattern>可能會報(bào)錯。改成<url-pattern>/*</url-pattern>就好了。

            <filter-mapping>

<filter-name>resourceFilter</filter-name>

<url-pattern>/*</url-pattern>

    </filter-mapping>

文檔位置：

    http://docs.wex5.com/ 此處搜索你想要的Wex5開發(fā)說明，例：“頁面跳轉(zhuǎn)”

    案例匯總清單：http://docs.wex5.com/learning-resource-cases/

鏈接備忘：

    1、申請微信測試帳號

    http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

    2、申請服務(wù)號

    https://mp.weixin.qq.com/

    注：接入方式和測試號查不多，先看微信的文檔，少走彎路，畢竟WeX5的教程很多都不具體。

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421135319&token=&lang=zh_CN

根據(jù)文檔描述的配置好服務(wù)器配置之后，記得啟用該功能，然后關(guān)注公眾號，同樣是發(fā)送memu刷新菜單。

    3、微信公眾號本地測試

    http://blog.qqbrowser.cc/wei-xin-gong-zhong-hao-ben-di-diao-shi/

    注：正確的返回路徑應(yīng)該是類似這樣的（沒有端口）：

    http://fw5i7hei9d.proxy.qqbrowser.cc/x5/UI2/v_51ef0819c3504fc4a6cc66896e71db3cl_zh_CNs_d_/zanshequ/index.w

    編碼后：

    http%3A%2F%2Ffw5i7hei9d.proxy.qqbrowser.cc%2Fx5%2FUI2%2Fv_51ef0819c3504fc4a6cc66896e71db3cl_zh_CNs_d_%2Fzanshequ%2Findex.w

    4、wex5微信公眾號支付開發(fā)

    wex5文檔：http://doc.wex5.com/pay-mp-step-by-step/#5

        補(bǔ)充：此文檔頁面最下方的常見問題很有用，第4點(diǎn)就是我遇到的。早看到就好了，也怪坑人的“搶先版”。

    微信官方文檔：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4 （頁面下方）

        補(bǔ)充：遇到簽名錯誤問題，看了文檔才知道，weixin.config.xml中的appkey 是要去微信商戶平臺(pay.weixin.qq.com)設(shè)置的，路徑：賬戶設(shè)置-->API安全-->密鑰設(shè)置。

    5、微信接口返回碼說明：

      https://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html

    6、關(guān)于用戶授權(quán)、獲取用戶信息的規(guī)則，重點(diǎn)看一下。

      https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html

Wex5開發(fā)使用快捷鍵：

    1、js事件方法中獲取當(dāng)前行：listrow + alt /