使用wexplus从0到1写一个app（一）-环境搭建与首页编写

说明基于wexplus开发的app是来新公司才接触的。之前只用weex体验过写demo，那时候在用vue技术，用stack开发app的开发体验很赞。这个开发体验比reactnative好多了，对我这个纯web前端来说简直不要太好！Weexplus基于weex官方二次开发版，旨在解决weex官方配置麻烦、性能差、开发体验差等问题。weexplus框架是这里同事根据实际项目提炼出来的开源框架。它已经帮助我们克服了许多陷阱。具体组件的使用这里不再赘述。链接发布文件。本文只是记录一个以我的视角开发的吉他学习APP的踩坑之路，以免以后踩坑。文章思路文章可能会很长，这里分几篇写，先走个坑：用weexplus写一个app从0到1（一）——环境搭建和首页编写用weexplus写一个app从0到1（2）-参数跳转，文章列表和文章详情，搜索页写使用weexplus写一个app从0到1（3）-视频列表和视频详情先写看uiapp的界面是共享h5和小程序Set的，所以界面基本一致，感谢杨大爷提供的以下设计稿。环境搭建node环境安装（windows、mac略有不同，具体安装可以自行百度）；weex环境安装（前提是要有node环境）；$npminstallweex-toolkit-g//-g表示全局安装，下载和weexplus环境的安装一样，weexplus工具为我们提供了很多常用的开发功能。详情请参考weexplus文档；$npminstallweexplus-g创建项目。根据官方文档，使用weexpluscreate遇到网速慢的问题，我这里下载官方样板并重命名；$浏览器访问https://github.com/weexplus/boilerplate，下载压缩包得到文件boilerplate-master.zip；$解压boilerplate-master.zip得到文件夹boilerplate-master；$cd到与boilerplate-master相同的目录；$weexplus重命名loveguitarcom.loveguitar.23jtloveguitar；$cdloveguitar$npminstall//安装依赖包$npmrundev$weexplusstart//运行命令需要额外打开一个终端，谷歌浏览器运行成功后会弹出一个新页面，必须安装谷歌浏览器$下载安卓apk调试包（真机扫码调试）地址https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q至此weexplus开发环境基本搭建完成。如果需要打包Android和ios，就像原生开发一样，可以自行百度解决。项目目录结构如图所示为weexplus脚手架项目的目录结构图。我们一般在src目录下编写代码进行正常开发。可以看到这个目录的目录结构和vue项目基本类似。开始写代码在写代码之前，可以删除脚手架中无用的代码，留下component文件夹。首先首先要做的是根据原型或设计稿的业务逻辑在src/busi文件夹中根据业务模块建一个文件夹（以爱尚吉他为例）：map：琴店地图功能模块，分为钢琴图首页、钢琴详情、钢琴新闻导航：文章模块，分为文章列表、文章详情、标签列表搜索：文章搜索模块视频：视频教程模块，分为视频模块首页、视频列表、视频详情看首页说：“工欲善其事，必先利其器”。在首页写代码之前，这里有一个切割标记工具——蓝湖，大大提高了设计人员和开发人员的工作效率。具体使用请参考官网http://sos.lanhuapp.com/#/的介绍。以上是首页的设计图。首先我们分析一下页面结构，看看哪些是可以复制打包成公共组件的。如图，可以分为以下几个模块：1（banner模块），在componet文件夹下新建my-banner.vue文件2（模块title），在里面新建my-title.vue文件componet文件夹3（menu模块），在componet文件夹下新建my-nav.vue文件4（两类文章列表模块）在componet文件夹下新建news-item.vue文件，新建my-nav.vue文件在componet文件夹下按照Vue规范Banner.vue、my-title.vue·my-nav.vue、news-item.vue四个文件。轮播图组件my-banner.vue包//src/component/my-banner.vue这里使用了weex官方的slider和indicator组件。具体属性用法见weex文档slider用法。考虑到轮播图的大小不固定，组件中暴露了height（图片高度）和width（图片宽度）两个属性传入父组件。这里要注意几个问题：1.注意图片标签的写法和web中使用vue的写法略有不同。在web中使用img，在weex中使用image；2.weex不支持padding、margin、border属性值的缩写。例如，不支持padding:10px和border:1pxsolid#dcdcdc。标题组件封装my-title.vue//component/my-title.vue样式没啥好说的，考虑到有些标题不跳更多是的，你需要做一些事情来判断这种情况是空的。这里有几个需要注意的地方：1.注意weex中的文本需要使用text标签。考虑到以后可能移植到web或者小程序中，最好用class来控制文本标签的样式；2.Weex默认支持flex布局。考虑以后可能移植到web或者小程序中，需要flex布局的地方写display:flex属性。菜单组件my-nav.vue//componet/my-nav.vue样式没什么好说的，考虑到会跳转不同的页面，注意在跳转方法中做判断。列表组件news-item.vue的封装//componet/news-item.vue可以看到有两个地方我标注了4，只是在组件中添加一个类型作为判断，列表点击事件通过this.$emit传递给父组件调用。至此，首页的四个公共组件已经打包完毕，下面开始编写首页的代码。首页编写//busi/home.vue的样式就不用解释了。这里先说说数据请求的封装。在busi/util文件夹下新建文件request.js和api.js（非必须），其中request.js是基于fly库封装的（考虑到weex官方资料request库有点坑，所以此处弃用），建议在api.js文件中管理后台接口，方便管理。下面是fly.js库的封装。具体使用可以参考fly.js官方文档。如果需要添加登录拦截，可以在fly.interceptors.request.use中添加。//request.jsvarFly=require("flyio/dist/npm/weex");varfly=newFly;//bmob云数据库配置，不需要constbmobConfig={applicationId:'applicationId',restApiKey:'restApiKey',secretKey:'secretKey',masterKey:'masterKey'}varprogress=weex.requireModule("progress")varmodal=weex.requireModule("modal")//添加请求拦截器fly.interceptors.request.use((request)=>{progress.show();//给所有请求添加一个自定义的headerrequest.headers["X-Tag"]="flyio";request.headers['X-Bmob-Application-Id']=bmobConfig.applicationId;request.headers['X-Bmob-REST-API-Key']=bmobConfig.restApiKey;request.headers['Content-Type']='application/json';//Request可以显式返回，你也可以不返回，如果没有返回值，拦截器返回请求，默认returnrequest;})//添加响应拦截器，响应拦截器会在then/catch之前执行fly.interceptors.response.use((response)processing=>{//只返回请求结果的data字段给progress.dismiss();returnresponse.data},(err)=>{//发生网络错误后会来到这里progress.dismiss();//返回承诺。解决（“ssss”）}）模块。出口=fly;下面是后台接口的统一管理文件api.js/***@description请求地址*/constbaseUrl='http://baidu.com/';consturls={videoList:'videoList',videoContent:'videoContent',amapGetaddress:'amapGetaddress',//黄金地图经纬度传输地址home:baseUrl+'home',//首页categoryIndex:baseUrl+'categoryIndex',//menuclassificationtype=listdisplaycategoryList:baseUrl+'categoryList',//参数cid通过categoryIndex获取页面作为分页tagList:baseUrl+'tagList',//Taglist&id=7656&page=1articleDetails:baseUrl+'articleDetails',//Articledetailsabout:'about',//Aboutsearch:baseUrl+'search',//&q=周杰伦&page=1};导出默认urls数据请求实例，用过axios库的应该都熟悉这种方式写getData(){constthat=this;fly.get(apis.home,{}).then(res=>{letbannerList=[];JSON.parse(res).article_hot.data.map((item,index)=>{item.pic=item.pic.src;bannerList.push(item)})that.bannerList=bannerList;that.newsItems=JSON.parse(res).article_list;}).catch(error=>{});}参考文档我们ex官方文档https://weex.incubator.apache...weexplus文档https://weexplus.github.io/doc/weexplusgithub仓库https://github.com/weexplus/b...weexplusAndroid扫码调试包下载https://pan.baidu.com/s/16kJf...基于同一套ui的一点私货爱尚吉他微信小程序版已经上线。喜欢弹吉他的朋友可以关注一下