common.js` 是每个页面都需要加载的一个 js,里面加载了`fastclick`和`vconsole`.如果全局需要加统计,全局执行的函数,可以放在这个文件里面.
`./src/utils` 做了 `alias`别名,可以 直接这样加载 `import common from “Utils/common”`.
发送请求
请求库
demo 的请求使用的是 axios ,同样你喜欢什么库都可以自己去封装.
常见的请求库有 fetch , request , SuperAgent , jquery-ajax .
跨域
由于 npm start 后,调试网页是挂在局域网上,并且作为 Hbuilder 的 页面入口 ,因此,在请求时会出现 跨域 .
在 ./build.js 中使用本地代理,将下面的 https://api.douban.com 修改成自己使用的业务域名即可.
proxy: {
"/api": {
name:"DOUBANAPI", // 自己取名
target: "https://api.douban.com",
pathRewrite: { "^/api": "" },
changeOrigin: true,
secure: false
},
"/baidu_api": {
name:"BAIDUAPI", // 自己取名
target: "https://api.baidu.com",
pathRewrite: { "^/api": "" },
changeOrigin: true,
secure: false
},
...
}
如果有更多业务域名可以继续在 proxy 添加.
只有开发的时候才会有跨域问题,打包后的文件网址会被替换成被代理的网址,因此发送请求一定要加上名称 DOUBANAPI
request({
url: DOUBANAPI + "/bookList"
});
调试
在 Hbuilder 中调试会有诸多问题,比如:
不能直接打印 数组 , 对象 ,需要转成字符串.
即使使用 webview调试 ,仍然不能打印出数组,在 mac 上使用也非常不方便.
使用 VConsole ,调试的问题基本就脱离 Hbuilder 了,使用 VConsole 主要优点如下
可以打印数组,对象
可以查看请求,cookie,Localstorage
在System栏目中可以看到页面加载速度
可以查看元素
基本上就是一个简化的 开发者工具栏 ,对于调试来说非常简便了.
打包
npm run build运行命令后会有一个 dist 目录,里面的经过压缩的静态文件.
Hbuilder 发行打包
在使用 Hbuilder 制作安装包前,请将 入口文件 修改成 dist/index.html . 然后可以安心的打包了.
兼容 mui.js
对于兼容 mui 部分函数的问题,已经在移植部分函数到Utils中,在未来的更新中会慢慢移植.
