b. 开发链接的书写。
domain.js 是域名的配置, 只要统一配置一项即可,方便。
urls.js 是请求的链接
比如: 添加收藏 https://baidu.com:8443/emm/favorite/save
因为引入了 domain.js 了
所以我们只需要在urls.js里面写: save(即别名): 'emm/favorite/save' 即可
c. 引入mock.js ,用来模拟请求接口数据,当后端接口还没开发出来时,就大有用场了。
用法如下:
只要打开 总开关,再打开你要用mock数据的 具体接口的开关,接口就不会请求后台的接口了,只用mock返回的数据。
d. css样式书写
用法:
比如上图的,全省的宽 280px ,高 58px , 正常开发下,程序的css上需要写
{ width: 280px; height: 58px; }但是我们只需要:
{ width: 280 / 100 rem; height: 58 / 100 rem; }也即是:
{ width: 2.8rem; height: 0.58rem; }换算公式就是具体: 像素/100 = rem, 还能指定7.5rem 宽就是屏幕的总宽
而且无论手机大小是多少,因为设计了 config_width = 750 ,所以满宽都是 7.5rem。
字体大小等也同理。
注意: 因为 phone的分辨率高,所以 0.01rem 在 iphone真机上会不显示,在 border设置的时候犹为明显,至少要0.02rem 才行。
是因为引入了下面这个文件,要了解具体的内容,请看 rem_config.js。
还有一个方法就是非常简单的,在 js 里面加入这句代码即可,写css时,也可像上面一样写,效果和上面介绍的一样。
// 屏幕适配(windowWidth/设计稿宽*100) ——*100为了方便计算。即font-size值是手机deviceWidth与设计稿比值的100倍 document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/7.5+'px'; // 如上:通过查询屏幕宽度,动态的设置html的font-size值,设计稿大多以750*1334 设置的,通过上述换算后,在设计图上一张150*150的图,在css中对应的rem值则为:1.5*1.5reme. 其他
libs里的文件内容都是 内有乾坤的,开发人员都有必要了解一下,这里就不多介绍了。
5. 推荐开发方式vue和react一样,可以组件化,所以推荐组件化开发的方式。
组件系统是 Vue 的一个重要概念,允许我们使用小型、独立和通常可复用的组件构建大型应用。
参考vue官网,组件化 :https://cn.vuejs.org/v2/guide/components.html
项目举例:比如一个h5的首页,可以分为标题组件,业务实时组件,关键指标组件,tab切换组件。这几个组件的几乎没有联系,可以相互独立。
当然你也可以再划分成小组件,相同的模块抽成公共的小组件,这样子达到代码重用的目的更好。比如首页里面大模块的 title 。