mpvue + iview 实现跨平台开发(App,Wap,微信小程序)
1.安装 vue-cli 脚手架
npm install --g vue-cli
2.创建项目

vue init mpvue/mpvue-quickstart test-wxapp
cd test-wxapp
npm i
npm run dev
项目就跑起来了,这个时候,我们打开微信开发者工具,选择小程序,然后新建一个,项目目录填 我们项目目录下的dist目录 test-wxapp/dist,就可以看到效果了
3.引入 iview
(1)下载 iView Weapp 的代码
https://github.com/TalkingData/iview-weapp
(2)下载完后将dist文件夹中的所有文件(也可以只选择需要的组件)导入到mpvue项目的static文件夹中

(3)在需要使用组件的页面中配置。
main.js
import Vue from 'vue'
import App from './index' const app = new Vue(App)
app.$mount() export default {
config: {
usingComponents: {
'i-card': '../../../static/iview/card/index'
}
}
}

(4)然后在页面中使用标签就可成功调用
<i-card full title="卡片标题" extra="额外内容" thumb="https://i.loli.net/2017/08/21/599a521472424.jpg">
<view slot="content">内容不错</view>
<view slot="footer">尾部内容</view>
</i-card>
(5)效果图
mpvue + iview 实现跨平台开发(App,Wap,微信小程序)的更多相关文章
- 如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
一夜之间,微信小程序刷爆了行业网站和朋友圈,小程序真的能如张小龙所说让用户"即用即走"吗? 其功能能和动辄几十兆安装文件的APP相比吗? 开发小程序,是不是意味着移动应用开发的一次 ...
- 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程
这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...
- 微信小程序的开发:通过微信小程序看前端
前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...
- 零基础开发一款微信小程序商城
零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...
- 自家APP打开微信小程序,可行吗?
小程序的通用解决方案,今天为大家介绍一下FinClip.它的最大特点,就是能够让任何 App 运行小程序. 只需要在你的 App 里面,引入它的 SDK,就能加载运行外部小程序了.除了 SDK,它还提 ...
- 支付宝小程序开发之与微信小程序不同的地方
前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...
- 开发 | 如何在微信小程序的页面间传递数据?
我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法. 本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有 ...
- 手机APP和微信小程序能否取代域名?
有人说现在App是主流,手机上装几个App就可以了,以后域名的重要性会越来越低,直至App完全取代域名的域名无用论.真的是这样吗? 关于这个话题已经有很多先人前辈探讨过,这次誉名网从另外一个角度给各位 ...
- App唤起微信小程序和回调
在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转. 可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的 ...
- 用Python快速实现一个垃圾分类APP|附带微信小程序
最近北京开始实行垃圾分类,导致大家对垃圾的研究热度突然涨高,垃圾们也纷纷表示从来没有获得过这么高的关注度.其实,上海市去年已经开始实行,网上已经有不少成熟的教程了,像什么<垃圾分类从入门到精通& ...
随机推荐
- Selenium2+python自动化53-unittest批量执行(discover)【转载】
前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了. 加载用例后,用unittest里面的Text ...
- hdu5829
多校训练8,有官方题解 主要之前没写过ntt,感觉不是很懂原根 先贴一份当模板吧 #include<iostream> #include<cstdio> #include< ...
- 山东省第六届省赛 BIGZHUGOD and His Friends II(赛瓦定理)
Description BIGZHUGOD and his three friends are playing a game in a triangle ground. The number of B ...
- 洛谷P1095 绝地武士的逃离
好吧原题是守望者的逃离,我强行改了一波题面,因为信仰=-=(? May the force be with us. 绝地跑步速度为17m/s,但无法逃离荒岛.绝地的原力恢复速度为4点/s,只有处在原地 ...
- 线程同步CriticalSection
孙鑫 第十五/十六课之四 线程同步CriticalSection 说明 在使用多线程时,一般很少有多个线程完全独立的工作.往往是多个线程同时操作一个全局变量来获取程序的运行结果.多个线程同时访问同一个 ...
- Java加密解密大全
ChinaSEI系列讲义(By 郭克华) Java加密解密方法大全 如果有文字等小错,请多包涵.在不盈利的情况下,欢迎免费传播. 版权所有.郭克华 本讲义经 ...
- Hnoi2013题解 bzoj3139~3144
话说好久没写题(解)了.. 先贴份题解:http://wjmzbmr.com/archives/hnoi-2013-%E9%A2%98%E8%A7%A3/(LJ神题解..Lazycal表示看不懂..) ...
- 【二分法】【尺取法】bzoj2348 [Baltic 2011]Plagiarism
一开始以为死于精度……调了半天发现死于long long…… 一.二分法: #include<cstdio> #include<cstring> #include<alg ...
- 数据结构之B-树,你每天都在用的,源码发布!
五一前就筹划着写下这篇文章,但是迫于自己从来没有实现过B-树(如果大家感兴趣,我可以考虑写一篇B+树的文章),手中没有源代码,另外自己以前对B-树也是一知半解状态中,担心误人子弟,在4月30日终于把代 ...
- freedom isn't free
财务自由(除去房和车) 第一阶段: 个人存款达到50万以上 第二阶段 个人存款100~200万 第三阶段 个人存款400万以上 第三阶段以上才能算实现了相对较好的财务自由!come on , boys ...