HTML5(WeX5框架)开发概述
一、先了解什么是Hybrid App(混合模式移动应用)
创新互联从2013年成立,是专业互联网技术服务公司,拥有项目成都网站设计、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元郊区做网站,已为上家服务,为郊区各地企业和个人服务,联系电话:18980820575
http://baike.so.com/doc/6731462-6945763.html
二、这里先来尝试学习下国内免费开源框架WeX5
1、先看看综合演示案例好了:http://www.wex5.com/portfolio-items/demo-wex5portal/
2、下载些新手入门的视频看看:http://www.wex5.com/wex5-welcome/
3、了解Baas(后端即服务:Backend as a Service):http://baike.baidu.com/link?url=Q1r5OcvfyBX3b1Dcoip3wTztBqUZnGW-qqpaz1eokTSMpbX3g3MA1sgO_EbZOXmtyGfA9VU74JFC3n1jA6oi7q
注:我们可以用ajax调用自己的后台服务(java/php等等后台),也可以使用X5提供的Bass服务直接访问数据库。
4、Bootstrap(web前端css框架),WeX5基于它作的拓展:http://baike.baidu.com/link?url=oZs8VV9b9jzI9mI4aZgLzUaZd9h09vjGtv1EK0yU7D9iZtydVoJoiiYm0i4RP-ng3xL4pmjr9pweeBbsp-hvI6H_by3xf9cO7u3LAmFmi_q
例一:使用媒体对象组件,http://v3.bootcss.com/components/#media 。按它的div布局,调用其class名称,便可以有Bootstrap的模版效果了。
例二:栅格系统及其响应式布局处理: http://v3.bootcss.com/css/#grid
bootstrap中文网(查询手册):http://www.bootcss.com/
学习bootstrap(基础篇) http://www.imooc.com/learn/141
学习bootstrap(js插件篇) http://www.imooc.com/learn/262
5、视频是基于Baas的,如果要使用自己的web服务端,那就按正常的ajax方案调用,再结合WeX5来处理。值得注意的一点是:由于是访问另一个服务端,所以要解决跨域访问的问题,方案比较简单,
http://www.wex5.com/ajax-cors-jsonp/
6、关于部署(把需要的文件部署到一个新的tomcat,发布外网就不作说明了):
A、把E:\WeX5\model\Native\外卖\www 目录下项目文件(例如:wm)复制到 D:\Tomcat6.0\webapps
B、把E:\WeX5\apache-tomcat\webapps\app-template目录下的WEB-INF复制到D:\Tomcat6.0\webapps\wm目录下
C、把E:\WeX5\runtime目录下的BaasServer复制到D:\Tomcat6.0\webapps目录下,并且更名为bass。
D、把E:\WeX5\apache-tomcat\conf\context.xml文件中的数据库相关的配置复制到D:\Tomcat6.0\conf\context.xml文件中。
E、把E:\WeX5\apache-tomcat\lib目录中的MySQL-connector-java-5.1.36-bin.jar复制到D:\Tomcat6.0\lib目录中
F、运行tomcat访问http://127.0.0.1:8181/wm/index.html
可能会出现的错误:
a、如果新tomcat的jdk版本比WeX5使用的jdk版本低,启动tomcat会报错。
b、D:\Tomcat6.0\webapps\wm\WEB-INF\web.xml文件中的
文档位置:
http://docs.wex5.com/ 此处搜索你想要的Wex5开发说明,例:“页面跳转”
案例汇总清单:http://docs.wex5.com/learning-resource-cases/
链接备忘:
1、申请微信测试帐号
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login
2、申请服务号
https://mp.weixin.qq.com/
注:接入方式和测试号查不多,先看微信的文档,少走弯路,毕竟WeX5的教程很多都不具体。
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421135319&token=&lang=zh_CN
根据文档描述的配置好服务器配置之后,记得启用该功能,然后关注公众号,同样是发送memu刷新菜单。
3、微信公众号本地测试
http://blog.qqbrowser.cc/wei-xin-gong-zhong-hao-ben-di-diao-shi/
注:正确的返回路径应该是类似这样的(没有端口):
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微信公众号支付开发
wex5文档:http://doc.wex5.com/pay-mp-step-by-step/#5
补充:此文档页面最下方的常见问题很有用,第4点就是我遇到的。早看到就好了,也怪坑人的“抢先版”。
微信官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4 (页面下方)
补充:遇到签名错误问题,看了文档才知道,weixin.config.xml中的appkey 是要去微信商户平台(pay.weixin.qq.com)设置的,路径:账户设置-->API安全-->密钥设置。
5、微信接口返回码说明:
https://mp.weixin.qq.com/wiki/17/fa4e1434e57290788bde25603fa2fcbd.html
6、关于用户授权、获取用户信息的规则,重点看一下。
https://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html
Wex5开发使用快捷键:
1、js事件方法中获取当前行:listrow + alt /
分享标题:HTML5(WeX5框架)开发概述
本文网址:http://hbruida.cn/article/gpcjjc.html