基于 Vue+Mint-ui 的 Mobile-h5 的项目说明 (2)

image

b. 开发链接的书写。

domain.js 是域名的配置, 只要统一配置一项即可,方便。

image.png

urls.js 是请求的链接 

比如: 添加收藏  https://baidu.com:8443/emm/favorite/save

因为引入了 domain.js 了

所以我们只需要在urls.js里面写:  save(即别名):  'emm/favorite/save' 即可

image

c. 引入mock.js ,用来模拟请求接口数据,当后端接口还没开发出来时,就大有用场了。

image

用法如下:

只要打开 总开关,再打开你要用mock数据的 具体接口的开关,接口就不会请求后台的接口了,只用mock返回的数据。

image

d. css样式书写

用法:

image

比如上图的,全省的宽 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。

image

还有一个方法就是非常简单的,在 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.5rem

e. 其他

libs里的文件内容都是 内有乾坤的,开发人员都有必要了解一下,这里就不多介绍了。

image

5. 推荐开发方式

vue和react一样,可以组件化,所以推荐组件化开发的方式。

组件系统是 Vue 的一个重要概念,允许我们使用小型、独立和通常可复用的组件构建大型应用。

参考vue官网,组件化 :https://cn.vuejs.org/v2/guide/components.html

项目举例:比如一个h5的首页,可以分为标题组件,业务实时组件,关键指标组件,tab切换组件。这几个组件的几乎没有联系,可以相互独立。

image

image

当然你也可以再划分成小组件,相同的模块抽成公共的小组件,这样子达到代码重用的目的更好。比如首页里面大模块的 title 。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpzfxs.html