vue 项目快速输出微信、支付宝、百度小程序

2018-11-13 admin

上周,Megalo@0.2.0 正式发布,优化了数据更新性能的同时,支持了百度智能小程序,着实激动了一把,这“可能”是目前社区里第一个同时支持三端小程序的 vue 小程序框架。下面我们就来试试他的效果。

跟着文档走

官方文档的第一部分就是快速入门,顺藤摸瓜,构建一个 megalo 项目。

安装

$ npm install -g @megalo/cli

<img src="https://user-images.githubuse…; width=500/>

构建

$ megalo megalo-yanxuan-demo

<img src="https://user-images.githubuse…; width=500/>

打包

以微信小程序为入口

$ npm run dev:wechat

至此一个完整的 megalo 项目就构建好了,接下来我们开始转移源码

转移 weex 项目

我从以前 weex 的 demo 项目,yanxuan-weex-demo,为基础进行转移,转移过程中涉及到很多 weex 特有的 api 的移除和转换。

网络请求

以网络请求为例,weex 是使用的 stream

let stream = weex.requireModule('stream');
export default {
    methods: {
        GET (api, callback) {
            return stream.fetch({
                method: 'GET',
                type: 'json',
                url: api
            }, callback)
        }
    }
}

因为小程序都有提供网络请求的 API,所以此处对此进行改造,如下

export default {
    methods: {
        GET (api, callback) {
            let { platform } = this.$mp || {},
                request = ()=>{}
            switch(platform) {
                case 'wechat':
                    request = wx && wx.request
                break;
                case 'alipay':
                    request = my && my.httpRequest
                break;
                case 'swan':
                    request = swan && swan.request
                break;
                default:
                break;
            }
            request && request({
                url: api,
                success: callback
            })
        }
    }
}

类似的还有 toast、message 等组件的改造。

组件

由于 weex 中的 <recycle-list><loading><refresh><scroller>等组件在小程序组件内是不存在的,所以有三种解决方案

  1. 自定义一个同名 vue 组件
  2. 找小程序可用的组件替换
  3. 实在不行就砍掉需求吧

比如 weex 的 <slider> 组件,可以用小程序的 <swiper> 替换,好在微信、支付宝和百度小程序都有支持。

css

Weex 容器默认的宽度 (viewport) 是 750px,小程序以 750rpx 为基。所以直接将需要的 px 转换成 rpx。

另外自己实现了 1 像素的 wpx,替换成 px 即可。

执行三端效果

最后看下改造效果。同时执行三端

gif

效果比预想的要好,没有过多的适配出错

demo 源码抛给大家供大家把玩。

哪些可以转

只要现有工程没有做以下几件事,理论上,都是可以转移的,只需要稍微更新一下格式

  • 使用 megalo 暂不支持的 vue 特性
  • 涉及浏览器特有的 dom 操作,window、userAgent、location、getElementById 等
  • 使用第三方组件库且该组件库使用了 dom 操作
  • 使用了 vue-router,暂不支持
  • 全局使用 vuex

不过,方案都是可以调整的,以上功能在社区均可以找到替代方案。

换之即可。

参考

《Megalo 官方文档》 《megalo – 网易考拉小程序解决方案》 《Megalo github》


首发:zwwill/blog#29 作者:木羽 转载请标明出处

原文链接:https://segmentfault.com/a/1190000016995859

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45326.html

文章标题:vue 项目快速输出微信、支付宝、百度小程序

相关文章
ASP.NET 2.0 AJAX应用程序设计
ASP.NET Aiax技术是一种实现异步(Asynchronous)网络应用的技术,它被整合在ASP.NET 2.0之中,是As P.NET的一种扩展技术。通过ASENETAjax技术,开发人员或程序员可以将Web服务器控件和客户端脚本结...
2015-11-14
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
回到顶部