预览模式: 普通 | 列表

开始学写微信小程序

早就有朋友跟我建议:“你应该开始写小程序,很简单,跟VUE的路子很象”。九月份,有一段时间手头没有新单子,于是开始学习。机会不错,从我一个业务关系那里买到了一个慕课的视频,《纯正商业级应用-微信小程序开发实战》。课程不错,我想听的都讲了。我不想听的,基本都没有。
 
花二天时间听完课程,自己写代码实战了一下---果然跟VUE类似。第一感觉就是文件体系拆得太散了。虽然大家都是HTML/CSS/JS/JOSN这几样,但是小程序4个文件分开写,几个页面一起弄的话,感觉我的sublime的标签都不够用了。VUE的单页面组件多么的紧凑。
 
另外,组件的写法跟页面文件,两者有点不一样。比如小程序组件调用的开关还要在josn中定义、小程序的响应函数居然要放在methods:{}中,而页面又不需要。感觉小程序好粗糙。
 
第三方库,我找了有赞出品的vant-weapp,跟vant for vue一脉相承。
js工具库,小程序
 
SCSS写习惯了。可是小程序没有提供支持。在网上找到个由gulp驱动的workflow,还真好用。
 
编辑器这块儿,在Sublime中直接找了个小程序语法插件,配合原来使用的emmet,还挺好用。
 
总体来说,确实难度不大。熟悉VUE体系的不妨多学这一项技能。
分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 228

目前利用<script>方式,不使用webpack的开发人员还很多,我之前一直不知道,可以绕过webpack,直接尝鲜.vue的单文件组件方式,直到发现了这个组件。目前我已经在多个项目中使用。

这个插件的用法在百度上基本搜不到。具体使用方式可以看这个中文文档:

https://kuro.tw/posts/2017/07/11/%E4%B8%8D%E9%9C%80%E7%B7%A8%E8%AD%AF%E4%B9%9F%E8%83%BD%E8%BC%89%E5%85%A5-vue-%E5%85%83%E4%BB%B6%E6%AA%94-%E4%BD%BF%E7%94%A8-http-vue-loader/

也可以直接看github官网文档:

https://github.com/FranckFreiburger/http-vue-loader

 

查看更多...

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2323

2017年总结--写于2018年初

经历:

今年主要做的都是移动端项目,仅有的三个PC端项目中,也都包含了移动端部分。
有两个项目做得苦,一个是项目不由自主,自己的事做完了,但是同伴没有时间推动,我做为主导人又不能辜负客户,这种情绪很折磨人。还有一个IRH项目,是一团乱麻,前后端沟通成本太高,虽努力推动,但始终无法着力,最终不得不放弃。放弃之后,如释重负。
也碰到了几个解决起来很吃力的技术问题,当然最终还是解决了。越过大山之后再回望,刚经历的也不过就是个小山包。真正的难题,是那些未知的迷雾,不声不响的让自己绕圈。
 
技术:
2017年所有移动端项目都使用了vue2.0,到下半年组件化程度更深。年底的最后一个项目中,甚至在非SPA架构中,直接使用了.vue的单文件组件。组件化的积累已经很多,明年肯定会过渡到webpack方式进行开发。
 
另外扫平了协作体系中一系列问题。比如mock测试、与后端的合作。这不光体现有技术上,很大程度也体现在与真正的后端人员、后端团队的协作与沟通。今年的IRH项目中,我思考不足,接下这种需要升级,需要兼容老接口的项目,又没有对后端提出明确的限制条件,结果导致前后端磨合出现大问题。开始的几天,光是跨域、列表格式、出错形式,都花了几个整工作日磨合。接下来,要去猜解他的技术文档,要一层层的去剥离页面逻辑。事实证明,这种类似行业ERP的项目,逻辑复杂,时间紧迫,因此最好是在一起工作,而不宜采用外包形式。
当然,IRH项目,催生了我对于组件化的认识,尽可能的组件化。感谢老白,提供了ajax过程中的promise思路。在我后几个项目中,利用axios主导的ajax体系,利用单例定义、拦截器、promise,对ajax请求进行了较完整的封装,彻底解决了请求方向的问题。在原型阶段引入easy mock,可以在后端未就位的情况下,模拟较复杂的接口情况,让前端提前进入角色。
 
另外一个项目,远在甘肃的嘉优购电商项目,则与之有不同的走向。这个项目,从原型开始,就由我在主导需求与接口。后端程序员按照我的要求在写接口。当然,此项目总体逻辑比IRH要简单。通过这个项目,我把一些知识点,提升到了实战程度。比如APIcloud打包、高德地图的各种应用、postman的测试技巧。apicloud将嘉优购商家端打包成APP这个过程中,让我接触到一个新的知识领域。实战中理解了从JS到APP,到底发生了哪些事情。对apicloud stodio工具和打包过程、原生API、驱动硬件,有了一定理解。也让自己成长为一个“产品开发者”,而不仅是一个前端程序员。毕竟,只有能够完全打通“需求-原型-设计-前端-后端-打包”的全过程,才算走完一个完整的产品历程。这一天,对我来说,来得太迟。在大分工的前提下,个人英雄出现的机率更低了。在后端这一块,我仍然是外行,只是通过前后端分离的模式,我可以对后端提出要求,也算是“打通了后端”。
 
对于地图应用这一块。从年初的云端湖项目的行车路线,到嘉优购项目的高德地图定位、云图、地图控件,把要用到的知识点,都经历了一下。
 
API接口规范方面,在年终的金圣达项目中,仍由我来设计接口。这时我终于可以收拾起前两个项目的血汗经验,进行比较规范的接口定义,与后端的合作也比较友好。
 
对于很多人关心的VUE第三方UI框架这块儿。今年我还是以使用YDUI和element-ui为主,年后打算在电商项目中引入一个“有赞vant”组件库。VUE的生态已经足够丰富,该有的都有了。---在组件方面,我已经脱离了心理依赖。
 
学习方面,入手了两个VUE相关的慕课网课程,争取早日看完。
 
2018愿景:
VUE提升到webpack开发方式。
继续实战APP开发。可尝试小程序。
做1-2个自己的小产品。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 976

跨域时遇到的一个顽症总结

在进行post跨域数据请求时(所有请求均header中带token),碰到一个奇怪的现象,postman测试可以通过,但是用页面进行调用时,总是报错。前后端忙活了大半天时间,最后找出问题。以下是程序员 “灰色头像”写的总结:

总结下今天出现的问题,主要是在跨域CORS的时候出现这个问题
 
首先需要知道一些容易忽略的知识点,浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。
具体看
 
http://www.ruanyifeng.com/blog/2016/04/cors.html
 
还有一点需要注意,头部字段只支持
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type
对于自定义的,比如我们头部传的token这个自定义头部会出现下面2种情况
 
1、axios对于跨域CORS正常会发送2次请求,第一次“预检”,我们这边有token自定义头部字段,虽然我们服务器设置了<add name="Access-Control-Allow-Headers" value="*" />但这个*虽然指所有,但只限制于上面所说的支持的,自定义的不会支持,所以就导致预检就失败,不会发送第二次请求
 
2、普通的ajax却可以支持,应该是没有做预检处理(这个还没详细了解)
 
所以主要还是服务器设置<add name="Access-Control-Allow-Headers" value="*" />要改为<add name="Access-Control-Allow-Headers" value="Content-Type,X-Requested-With,token" />,增加自定义的token,不能使用*这样的配置。这样对于做预检的,有什么自定义头部字段,这里就要额外增加。
 

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1042

常用前后端协作说明

1、对于要带权限访问的页面,首先调用全局接口/login获取返回的token和过期时间expire(单位:秒),token请自行保存客户端,过期时间expire默认30天过期,请提前比如10分钟进行过期,以免过期导致业务异常。
2、步骤1获取的token,每次请求调用鉴权页面时,都需要把token附带在头部Header中(由于token会存在特殊字符,不在url中传递)如:token:"步骤1获取的token串"
3、post格式前后端约定:前端请求头部参数格式需要设置Content-Type:application/json,后端post:$json_info = $HTTP_RAW_DATA
4、一般的查询request格式: /aaa?type=1&age=16  分页请求:/bbb?page=3
5、response总原则:1)body 直接就是数据,不要做多余的层次包装。2)错误/正确是两种不同的结构,出错时的返回数据式统一为
{
 "code":401,
 "msg":"相应的出错信息,方便前端提示"
}
 
code具体对应说明详见全局返回码说明。
 
6、正确时的“列表”返回结构:
{
   "total": 9,    //总条数
   "page":***,    //当前页码,第1页序号为1,不为0
   "pagesize":5,    //每页条数
   "items": [
      {  "pid": 82, "tit": "医学知识", "dDate": "2016-09-02 23:04:34"},
      {  "pid": 83, "tit": "医学知识", "dDate": "2016-09-02 23:04:34"},
        .............
    ]
}
7、“详情页”返回结构:
{
   "tit": "标题",
   "sub_tit":"副标题",
   "article":"正文正文正文正文正文正文",
        .............
    ]
}
8、时间格式:凡与时间(控件)相关的值,请使用以下三种之一,能保证控件直接兼容。
date--(yyyy-MM-dd)
time-(HH:mm)
datetime-(yyyy-MM-dd HH:mm)
 
------------------------------------
9、附返回码取值,仅供参考:
 
200 OK - [GET]:服务器成功返回用户请求的数据,该操作是幂等的(Idempotent)。
201 CreateD - [POST/PUT/PATCH]:用户新建或修改数据成功。
202 Accepted - []:表示一个请求已经进入后台排队(异步任务)
204 NO CONTENT - [Delete]:用户删除数据成功。
400 INVALID REQUEST - [POST/PUT/PATCH]:用户发出的请求有错误,服务器没有进行新建或修改数据的操作,该操作是幂等的。
401 Unauthorized - []:表示用户没有权限(令牌、用户名、密码错误)。
403 Forbidden - [] 表示用户得到授权(与401错误相对),但是访问是被禁止的。
404 NOT FOUND - []:用户发出的请求针对的是不存在的记录,服务器没有进行操作,该操作是幂等的。
406 Not Acceptable - [GET]:用户请求的格式不可得(比如用户请求JSON格式,但是只有XML格式)。
410 Gone -[GET]:用户请求的资源被永久删除,且不会再得到的。
422 Unprocesable entity - [POST/PUT/PATCH] 当创建一个对象时,发生一个验证错误。
500 INTERNAL SERVER ERROR - [*]:服务器发生错误,用户将无法判断发出的请求是否成功。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 988

问题标题:addEventListener捕获物理键,本地真机调试成功,云编译后无效

问题描述:apicloud中,本地wifi真机调试,按这两个物理键,都能成功弹窗,但是云编译后就不行了,似乎根本就没捕获到按键一样。
 
答案:
因为我在整个调用体系中,调用了两次apiready,后者(在index.html中)定义自然覆盖了前者(其它页面中)。因此就出现,在单页中测试没问题,跟index.html一起打包,就失效的问题。-------怪自己对于打包的架构不熟悉,使用了apicloud新建时推荐的index.html+Frame页结构,其实没有任何必要使用frame。
 
其实下面的答主告诉我要注意frame结构,我也轻率的回答了没有使用frame,可是没想到,我最顶层的结构就是一个Frame---这真是太讽刺了。我还以为那是apicloud钦定的顶层结构,根本就没敢去怀疑它!其实根本就不需要用Frame!
 
收获:
找问题的过程中,也逼着自己学会了调试技巧。比如真机测试、代码上传、云编译,昨天还系统的读了一下所有的API事件、属性、方法等。试着发了下短信,调用了一下电话薄、相册、相机。感觉对手机硬件和各种顶层资源的操作,都有了一个新的认识。另外对于发布中的版本号、云修复等概念,也都有了实战经验。----我可以写出更强功能的手机APP。
分类:开发心得 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1046

vue“作用域插槽”来制作通用列表组件

 “作用域插槽”的官方定义是:作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。这VUE2.5提供的新功能,经我亲自测试,在2.2版本中并不好用。建议直接升到2.5。

官网文档地址:https://cn.vuejs.org/v2/guide/components.html#作用域插槽

典型运用就是列表。比如,在项目中有几种列表,他们除了item的格式不同,其它逻辑都类似,比如有类似的数据读取方式,有相同的页码逻辑,是否能写一个通用的组件,来加载这些列表,而不是写成多个列表组件?用作用域插槽实现如下。
 
父页面:
<infi data="/daily_work" class="infi1">
        <li slot="item" slot-scope="props">
               <span>{{ props.cont.pid }}</span>
               <span>{{ props.cont.tit }}</span>
        </li>
</infi>
props仅为一个变量,用来接收子组件传递过来的参数。
 
组件模板这样写:
<ul class="list">
        <slot v-for="(item,index) in list"
        name="item"
        :cont="item">
        </slot>
    </ul>
这样,把父组件中的一个<li>做为slot插槽放入子组件中,子组件的结构实际是由插槽提供的。
而子组件则负责列表的公有行为,比如<ul>“外壳”,用ajax获取数据,组织循环,甚至还要组织上滑滚动功能。
这样的组件,才称之为“灵活”!
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1827

vue+tweenmax实现手风琴导航效果

vue不擅长处理dom变化,因此常用的手风琴伸缩效果,不太好实现。顺手挂了个tweenmax实现了。107K的插件库。

其实用jquery也可以,jq的体积更小。

demo:

http://contactu.cn/2017/demo_vue_accordion.html

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2235

在任何一个购物页面,只要购买了商品,就可以将购买量存储到缓存,实现跨页面共享数据。这个原理也可以用来管理其它较复杂的跨页面结构。

demo地址:

 
几个技术要点:
  • 使用js-storage这个js库来实现对localstorage的读写及判断,比自己写原生要简单。因为localstorage默认存储是字符形式,如果要存储对象、数据这些,还要自己写转换,用库就简单得多了。另外还用isEmpty对“空结构”做判断。
  • 基于VUE做了一个单独的mixin_cart,要引入购物车的页面都可以使用这个mixin
  • 用一个数据结构(cart)来完整的映射“购物车”,针对它写了一些API:
    • init_cart----从local读数据来形成cart
    • get_cart_item_count----得到某件商品的购买量
    • write_cart------新建/改写商品数据
    • sum_cart-------汇总购买量
    • clear_cart------待加
  • 使用watch监听页面中的数据变化,一旦发生变化,就扫描数据结构,把购买量的变化使用write_cart映射到cart-->并存储到localstorage。注意watch监听数组或是对象这样的复杂结构,要使用handler+deep: true写法。
  • 一些算法使用了lodash.js,比如:
    • 查找符合条件的商品-- _.find
    • 从数组中删除商品---_.pull
    • 汇总商品购买量------_.sumBy
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3278

VUE中用refs实现父子通讯的新方法

例子:http://258754.cn/2017/read2/test_component.html 

用refs父子通讯的新方法,比用emit要方便。主要思路是用refs去读取子组件的内部值,调用内部函数。之前真不知道可以这样用,直到我读到这篇文章--Vue.js 组件样式指南(英文):
https://github.com/pablohpsilva/vuejs-component-style-guide
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1500

近期VUE及周边笔记--YDUI框架

 YDUI是基于vue2.0的一个功能齐全的UI框架,就我个人的应用范围来说,比element ui更适合我的需要。可能他的组件配置并没有ele那么强大而齐全,但是简练的风格反而更适合于中小移动端项目。

我主要使用这些组件:

  • flexible组件,用于rem-px单位转换,默认单位是10,好转脑子。
  • 弹窗,只有几个参数,适用于不复杂的情况。
  • 日期选择器,weui风格的,从底部向上弹出。
  • 滚动加载(yd-infinitescroll)
  • 数字动画 (CountUp)

其它的一些组件,别的库中也有,或是可以自己手写出来,并不是完全依赖。

要注意的事及BUG:

1、这个库的版本更新很快,如果发现参数无效等奇怪的情况,请先检查版本。比如yd-infinitescroll的不同版本写法就不一样。

2、flexible组件,对于窗口宽度的变化是有范围的。

Javascript代码
  1. //ydui.flexible.js,以下的11.2会在宽420像素以上停止变化,改为21.2后,会在768像素以上才停  
  2. return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 21.2), 8.55) + "px", e  

查看更多...

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 6036

近期VUE及周边笔记--easy mock

easy mock(https://easy-mock.com/)平台的主要作用,是用来模拟生成json文件,在后端未到位的情况下,为前端调试提供数据。我的使用方法:

1、是在开发时将ajax请求,直接指向https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api这样的远程接口,进行调试。

2、等前后端联调结束后,通过修改axios的axios.defaults.baseURL参数,将数据接口指向真实ajax地址,完成切换。

easy平台提供了丰富的mock.js语法,也可以接收并request参数,模拟真实ajax情况很逼真。比如下面这个范式,就模拟了对”/list?page=*“这样的多页请求的情况:

Javascript代码
  1. {  
  2.   res_body: function({  
  3.     _req,  
  4.     Mock  
  5.   }) {  
  6.     //page小于3,每页给出20个随机数据  
  7.     if (_req.query.page < 3) {  
  8.       return Mock.mock({  
  9.         "page_num": 4,  
  10.         "list|20": [{  
  11.           "id": _req.query.page,  
  12.           "tt_amount""@float(200, 2000, 2, 2)",  
  13.           "commission""@float(200, 2000, 2, 2)",  
  14.           "final_amount""@float(200, 2000, 2, 2)"  
  15.         }]  
  16.       })  
  17.   
  18.     }  
  19.   
  20.     //page==3,给出6个数据,模拟末页情况  
  21.     if (_req.query.page == 3) {  
  22.       return Mock.mock({  
  23.         "page_num": 4,  
  24.         "list|6": [{  
  25.           "id": _req.query.page,  
  26.           "tt_amount""@float(200, 2000, 2, 2)",  
  27.           "commission""@float(200, 2000, 2, 2)",  
  28.           "final_amount""@float(200, 2000, 2, 2)"  
  29.         }]  
  30.       })  
  31.     }  
  32.   }  
  33. }  

 模拟身份验证

Javascript代码
  1. {  
  2.   res_flag: function({  
  3.     _req  
  4.   }) {  
  5.     return (_req.header.token == "1234567890")?true:false;  
  6.   }  
  7. }  

 

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2836

近期VUE及周边笔记--axios

我将ajax工具栈从vue-resource改为了axios,基本用法类似,但调用格式略有不同。比如vue-resource的response是放在res.body中,而axios放在了res.data中。

值得一提的是,axios的全局设置很方便,包括参数和拦截器。列举:

Javascript代码
  1. // 全局基地址配置  
  2. axios.defaults.baseURL = 'https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api';  
  3.   
  4. // 全局token  
  5. axios.defaults.headers = {token: window.localStorage.getItem("jyg_token")};  
  6.   
  7. // 添加全局请求拦截器  
  8. axios.interceptors.request.use(function (config) {  
  9.   // 给每个发出的请求后面加上php后缀  
  10.   config.url = config.url + "php";  
  11.   return config;  
  12.   }, function (error) {  
  13.   // 对请求错误做些什么  
  14.   return Promise.reject(error);  
  15.   });  
  16.   
  17. // 添加响应拦截器,比如对所有错误代码进行全局统一的出错处理  
  18. axios.interceptors.response.use(function (response) {  
  19.   // 对响应数据做点什么  
  20.   return response;  
  21.   }, function (error) {  
  22.   // 对响应错误做点什么  
  23.   return Promise.reject(error);  
  24.   });  

 

分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1531

这种结构在电商中很常见,比如饿了吗的店铺页。我边写边参考饿站。

项目地址:
 
用到的主要的第三库:
1、bscroll(iscroll的一个改进版本),滑动框架。iscroll能实现的功能,比原生滚动控制要强得多。相应的API也更好用。
2、lodash用来实现各种快速数据运算。
 
技术要点:
1、对于iscroll的一些API的熟悉,比如如何获取滚动高度(onScroll),如何滚动到指定位置(scrollToElement)。
2、必须在dom渲染完成后,再进行iscroll定义,可使用Vue.nextTick。再比如当容器高度发生了变化 ,必须要refresh重建当前iscroll对象。当refresh时,必须要等容器动画完成后,方可进行。
3、最难点在于建立右侧位置模型,用于左导航与右列表的位置对照。也就是说,每次滚动行为,都会触发当前位置与位置表发生比对,以随时更新左侧导航状态。
4、在建立位置模型过程中,数次用到lodash,比如说:
 
// 从位置数组中,查找一个最接近当前坐标的值,然后得到“这个值对应的1、2级目录ID”
var zzz = _.findLast(this.arrPosition, function(n) {
     return n.posi<=posY;
});
this.sortA = zzz.sortA;
this.sortB = zzz.sortB;
 
如果不用工具函数,这种小算法写死人。
 
5、右侧列表是一次性载入的,可考虑做懒加载。如果列表特别长,也要考虑异步加载。
6、点击购物车的加号时,“小球落入购物车”这一效果,基本实现思路是,先算出起、终点的位置,然后用TweenMax实现动画。最后将其封装做成vue组件,以备重用。非本文重点,不做详述。
分类:VUE研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2685