mpvue构建小程序的方法_vue.js_脚本之家10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:173 发布时间:2020-04-07
摘要:时间: 2019-10-17阅读: 224标签: 小程序 mpvue 是一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心, mpvue 修改了 Vue.js 的runtime 和 compiler实现,使其可以运行在小程序环境中,从而为

时间: 2019-10-17阅读: 224标签: 小程序

mpvue是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心,mpvue修改了Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。

你也许并不需要小程序框架。

mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊。个人感觉mpvue比wepy更加简单,上手更加方便,mpuve五分钟教程快速构建。

市面上不停的会有大的公司推出自己的小程序的研发库 / 框架,功能十分强大,也为小程序的开发带来了便利。但在一些积极的反馈中,我们也看到不一样的声音:

项目git地址:mpvue-demo(代码注释很全,使用mpvue很简单构建一个小程序,拓展)

@白小虫:又一个轮子。。@jsweber:小程序不用任何框架,开发体验也不错啊,本身就借鉴了 vue 和 react 的思想。@月月木子:现在中上流公司的前端都很热衷于造自己的轮子或者给别人的轮子换皮然后说是自己的轮子,疯狂垒高自身的技术壁垒,即有了给领导吹牛的资本,让新来的人肯定属于不熟练工,又可以给自身带来安全感,不知道到底是好是坏。@redbuck:轮子越造越多,我寻思下一个小程序要不转回原生算了。@fantasy525:感觉一次编码全端支持没多大必要,支持的越多就可能会出越多的bug,我们开发时会很难受,本来只解决一端的bug,多端我们又要解决其他端,还不如各司其职好。@肉很多:学不动了呀。。。。上列评论从掘金用户评论中挑选。

step1: 查看文档快速构建simple mpvue project

这几天公司校招,面了一些在校生,其中有两位同学让人印象深刻:

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project# 安装依赖$ cd my-project$ npm install# 启动构建$ npm run dev

一、同学 A 面试接近尾声突然问起,你们被美团收购后,是不是都要必须使用 mpvue(美团早年推出的小程序框架)?当我回答不是后,同学 A 长舒一口气:那就好。他解释道:更偏向用原生去写小程序,因为微信团队更新节奏比较快,框架经常跟不上微信的节奏,导致新特性无法在项目中使用。

这里我取消了vuex,因为个人不喜欢检测空格和;的规范,你可以根据你的需求配置。

二、同学 B 在简历中写道精通 jQuery,我在想这年头了,jQ 在简历中出现的越来越少了,故意抓着这个问了下,果然比较了解。他说道:经常用 jQ 做一些网页 demo,因为上手比较容易,直接引入一个cdn js就行,都不用装 node 包。

step2:修改代码,微信开发者工具打开dist目录,查看是否发生改变。

em... 好像说的都挺在理。

step3:封装api和http请求(这里使用的是flyio,除了请求取消,其他功能基本相似axios,大小只有4kb,是axios的三分之一)

在摩拜单车内部,我们封装了基于微信小程序原生语法进行扩展、对原生微信 API 支持友好的小程序基础库 - Mozzy。注意:其定位是基础库,而不是框架。只要在原生语法的小程序项目里引入一个 js 文件就可以使用,即便是开发到一半的小程序也可以快速引入。

package.json加入依赖或者npm install flyio

记得刚做完这个项目在公司内部分享时,说到未来的愿景时最后一句是:

var Fly=require //wx.js为您下载的源码文件// var Fly=require //npm引入方式var fly=new Fly(); //创建fly实例//添加拦截器fly.interceptors.request.use=>{ //给所有请求添加自定义header config.headers["X-Tag"]="flyio"; return config;})//配置请求基地址fly.config.baseURL="https://wendux.github.io/"...Page({ //事件处理函数 bindViewTap: function() { //调用 fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then=>{ //输出请求数据 console.log //输出响应头 console.log.catch(err=>{ console.log(err.status,err.message) }) ... })})

也许有一天,当使用了 Mozzy 开发的小程序,删除 mozzy.js 后,发现功能竟然一切正常。

step4: 将flyio封装的请求和项目api作为组件库挂载在原型对象上,这样不用每个vue单页面都import 封装的js,直接使用this.$http调用方法。

相信早些年用 jQ 做项目的时候很多同学都脑洞过,要是浏览器原生支持 jQ 的 api 多好,或者干脆浏览器直接集成 jQ,就不用在每个项目的 html 里都引入一段 jQ 代码了,毕竟 jQ 在当年几乎是网页开发必备基础库。

httpUtil.js

随着微信官方 api 的更新,Mozzy 的很多实现都有了官方支持。也许当时分享的未来愿景已经来了,最近要开启删(改造) Mozzy 行动,换种方式存在于千万行代码中。

var Fly=require //wx.js为您下载的源码文件// var Fly=require //npm引入方式var fly=new Fly(); //创建fly实例//添加拦截器fly.interceptors.request.use=>{ //给所有请求添加自定义header config.headers["X-Tag"]="flyio"; return config;})//配置请求基地址fly.config.baseURL="https://wendux.github.io/"...Page({ //事件处理函数 bindViewTap: function() { //调用 fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then=>{ //输出请求数据 console.log //输出响应头 console.log.catch(err=>{ console.log(err.status,err.message) }) ... })})

/** * Created by yuchen on 2018/4/2. *///封装httpApiimport request from './httpUtil'const host = "https://XXX.cn"const api = { // test地址 authorList:() => request.get(`${host}/index/list_author_recommend.html`)}// export default apiexport default { //作为组件库 install: function {//自定义名字 Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上 }}

拥抱变化。

step5:vue组件(mpvue官方项目中就创建了card组件,这里注意class需要写在组件内部里面,不然渲染不出来)

本文由10bet发布于Web前端,转载请注明出处:mpvue构建小程序的方法_vue.js_脚本之家10bet

关键词:

最火资讯