摘要:考虑到轮播图的尺寸不固定,在组件中暴露图片高度和图片宽度两个属性提供给父组件传入。分别在文件夹新建文件和非必须,其中基于库封装考虑到官方的数据请求库有点坑,在此弃用,便于管理后端接口建议在文件中统一管理。
说明基于wexplus开发app是来新公司才接触的,之前只是用过weex体验过写demo,当时就被用vue技术栈来开发app的开发体验惊艳到了,这个开发体验比react native要好很多,对于我这个纯web前端来说简直不要太好!
weexplus是基于weex官方的二次开发版本,旨在解决weex官方配置麻烦、性能不好、开发体验不好等问题。weexplus框架是这边同事根据实际的项目抽离出来的开源框架,已经帮我们趟过很多坑了,具体组件用法在此不再赘述,link-放出文档。本文仅为本人视角开发一个吉他学习app的踩坑之路记录,记下以免后面再踩坑。
文章思路
文章可能会很长,在此分几篇文章来写,先占个坑:
app的ui界面与h5、小程序公用一套,所以做出来的界面也是基本一样,这里感谢以下杨伯伯提供的设计稿。
环境搭建$ npm install weex-toolkit -g // -g表示全局安装,下同
$ npm install weexplus -g
$ 浏览器访问 https://github.com/weexplus/boilerplate,下载压缩包得到文件boilerplate-master.zip; $ 解压boilerplate-master.zip得到文件夹boilerplate-master; $ cd到跟boilerplate-master平级的目录; $ weexplus rename loveguitar com.loveguitar.23jt loveguitar; $ cd loveguitar $ npm install //安装依赖包 $ npm run dev $ weexplus start //运行改命令需要另外开一个终端,运行成功后谷歌浏览器会跳出一个新页面,必须安装谷歌浏览器 $ 下载安卓apk调试包(真机扫码调试)地址 https://pan.baidu.com/s/16kJfMuyXX-Y_yhm5fHt79Q
至此,weexplus开发环境基本搭建完毕,如果需要打包安卓、ios的话,与原生开发一样,自行百度即可解决。
项目目录结构如图为weexplus脚手架项目目录结构图,我们平常开发主要在src
目录里写代码,可以看到该目录与vue项目目录结构基本差不多。
在写代码前可以把脚手架里无用的代码删除掉,留下component
文件夹即可。先做的第一件事个人建议是依照原型或者设计稿的业务逻辑在src/busi
文件夹中按照业务模块建好文件夹(以爱尚吉他为例):
map:琴行地图功能模块,里面分为琴行地图首页、琴行详情、琴行导航 news:文章模块,里面分为文章列表、文章详情、标签列表 search:文章搜索模块 video:视频教程模块,里面分为视频模块首页,视频列表、视频详情写一个首页看看
子曰:“工欲善其事,必先利其器。”在写首页的代码前在此安利一款切图标注工具--蓝湖, 大大提高设计师和开发的工作效率,具体使用参见官网介绍即可http://sos.lanhuapp.com/#/。
以上为首页的设计图,先来分析一下页面结构,看看哪些可以复并且可以封装为公共组件。如图所示可以分为如下几个模块:
1(banner模块),在componet文件夹下新建my-banner.vue文件 2(模块标题),在componet文件夹下新建my-title.vue文件 3(菜单模块),在componet文件夹下新建my-nav.vue文件 4(文章列表模块两个类型)在componet文件夹下新建news-item.vue文件
按照vue的规范分别在componet文件夹下新建my-banner.vue
、my-title.vue
·my-nav.vue
、news-item.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:1px solid #dcdcdc这样的写法。标题组件my-title.vue的封装
//component/my-title.vue{{title}} 更多
样式方面没什么好说的,考虑到有些标题是没有跳转更多的,需要做一下判断为空的情况。
在此注意几个问题: 1.注意在weex中文字需要使用text标签,考虑到后续可能会移植为web或者小程序, text标签最好用class来控制样式; 2.weex默认支持flex布局,考虑到后续可能会移植为web或者小程序,在需要 用到flex布局的地方写上display:flex属性。菜单组件my-nav.vue的封装
//componet/my-nav.vue
样式方面没什么说的,考虑到会跳转不同的页面,注意在跳转方法里做判断即可。
列表组件news-item.vue的封装//componet/news-item.vue{{item.title}} {{item.pubdate}} {{item.title}}
可以看到我标记4的地方有两处,在组件里加一个type
作为判断即可,列表点击事件通过this.$emit
传递到父组件调用。至此首页四个公共组件封装完毕,下面开始编写首页代码。
//busi/home.vue
样式方面无需说明,这里说一下数据请求的封装。分别在busi/util文件夹新建文件request.js
和api.js
(非必须),其中request.js基于fly库封装(考虑到weex官方的数据请求库有点坑,在此弃用),便于管理后端接口建议在api.js
文件中统一管理。
以下为fly.js
库的封装,具体使用参照fly.js
官方文档,如果需要增加登录拦截什么的,可以在fly.interceptors.request.use
中增加即可。
//request.js var Fly = require("flyio/dist/npm/weex"); var fly = new Fly; //bmob云数据库的配置,非必须 const bmobConfig = { applicationId:"applicationId", restApiKey:"restApiKey", secretKey:"secretKey", masterKey:"masterKey" } var progress = weex.requireModule("progress") var modal = weex.requireModule("modal") //添加请求拦截器 fly.interceptors.request.use((request)=>{ progress.show(); //给所有请求添加自定义header request.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, 也可以不返回,没有返回值时拦截器中默认返回request return request; }) //添加响应拦截器,响应拦截器会在then/catch处理之前执行 fly.interceptors.response.use( (response) => { //只将请求结果的data字段返回 progress.dismiss(); return response.data }, (err) => { //发生网络错误后会走到这里 progress.dismiss(); //return Promise.resolve("ssss") } ) module.exports = fly;
以下为后端接口统一管理文件api.js
/** * @description 请求地址 */ const baseUrl = "http://baidu.com/"; const urls = { videoList:"videoList", videoContent:"videoContent", amapGetaddress:"amapGetaddress",//高德地图经纬度转地址 home: baseUrl + "home",//首页 categoryIndex:baseUrl+"categoryIndex",//菜单分类 type=list显示 categoryList:baseUrl+"categoryList",//参数cid通过categoryIndex获得 page为分页 tagList:baseUrl+"tagList",//标签列表&id=7656&page=1 articleDetails:baseUrl+"articleDetails",//文章详情 about:"about",//关于 search:baseUrl+"search",//&q=周杰伦&page=1 }; export default urls
数据请求实例,用过axios库的应该很熟悉这种写法
getData() { const that = this; fly.get(apis.home, {}) .then(res => { let bannerList = []; 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 => {}); }参考文档
基于同一套ui开发出来的爱尚吉他微信小程序版已经上线喜欢弹吉他的小伙伴可以关注一波
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/2450.html
摘要:从到完美,用和写一个在年开源了后,紧接着在年就又开源了,就此打开了用和前端技术写原生之路。对应来看,程序只有两个部分,和,而部分则分为组件和。所以,在端的纯库无在中同样适用,如等。应用实例便是使用开发的一个日记。 从 1 到完美,用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后,紧接着在 2015 年就又开源了 react...
摘要:当前前端最火热的框架当属,在学习之前先来看下的内部是如何工作的。我们从最基本的页面操作开始做起。书籍数量加减清零把占位符替换成数据事件相关的交给操作,有两个重要的属性初始化时需要传入两参数和,后面操作的都是在的都是在身上,而不是直接操作。 当前前端最火热的框架当属 VUE,在学习 VUE 之前先来看下 VUE 的内部是如何工作的。 我们从最基本的页面操作开始做起。 用 jQuery 操...
摘要:会在目标程序启动时,会根据指定的规则检查指定目录是否存在第三方库,如果有,则会通过修改二进制的,来把自己注入进所有的当中,然后加载第三方库。 本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e0acc896e9ebb6865f321 如果您有耐心看完这篇文章,您将懂得如何着手进行app的分析、追踪、注入等实用的...
摘要:从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后,需要一个版本控制系统来管理源代码。 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架。 ...
摘要:从到再到搭建编写构建一个前端项目选择现成的项目模板还是自己搭建项目骨架搭建一个前端项目的方式有两种选择现成的项目模板自己搭建项目骨架。使用版本控制系统管理源代码项目搭建好后,需要一个版本控制系统来管理源代码。 从 0 到 1 再到 100, 搭建、编写、构建一个前端项目 1. 选择现成的项目模板还是自己搭建项目骨架 搭建一个前端项目的方式有两种:选择现成的项目模板、自己搭建项目骨架。 ...
阅读 2209·2021-11-22 14:56
阅读 1007·2019-08-30 15:55
阅读 3096·2019-08-29 13:29
阅读 1205·2019-08-26 13:56
阅读 3300·2019-08-26 13:37
阅读 450·2019-08-26 13:33
阅读 3224·2019-08-26 13:33
阅读 2126·2019-08-26 13:33