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,微信小程序)的更多相关文章

  1. 如何开发一款堪比APP的微信小程序(腾讯内部团队分享)

    一夜之间,微信小程序刷爆了行业网站和朋友圈,小程序真的能如张小龙所说让用户"即用即走"吗? 其功能能和动辄几十兆安装文件的APP相比吗? 开发小程序,是不是意味着移动应用开发的一次 ...

  2. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  3. 微信小程序的开发:通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...

  4. 零基础开发一款微信小程序商城

    零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...

  5. 自家APP打开微信小程序,可行吗?

    小程序的通用解决方案,今天为大家介绍一下FinClip.它的最大特点,就是能够让任何 App 运行小程序. 只需要在你的 App 里面,引入它的 SDK,就能加载运行外部小程序了.除了 SDK,它还提 ...

  6. 支付宝小程序开发之与微信小程序不同的地方

    前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段 ...

  7. 开发 | 如何在微信小程序的页面间传递数据?

    我们在之前发布过小程序页面传值方法的简单介绍,说明了在小程序开发中,两种常见的页面之间传值方法. 本期,知晓程序(微信号 zxcx0101)为你带来的是「倒数记日」小程序开发者带来的,小程序开发中,有 ...

  8. 手机APP和微信小程序能否取代域名?

    有人说现在App是主流,手机上装几个App就可以了,以后域名的重要性会越来越低,直至App完全取代域名的域名无用论.真的是这样吗? 关于这个话题已经有很多先人前辈探讨过,这次誉名网从另外一个角度给各位 ...

  9. App唤起微信小程序和回调

    在同一开放平台账号下的移动应用及小程序无需关联即可完成跳转,非同一开放平台账号下的小程序需与移动应用(APP)成功关联后才支持跳转. 可在“管理中心-移动应用-应用详情-关联小程序信息”,为通过审核的 ...

  10. 用Python快速实现一个垃圾分类APP|附带微信小程序

    最近北京开始实行垃圾分类,导致大家对垃圾的研究热度突然涨高,垃圾们也纷纷表示从来没有获得过这么高的关注度.其实,上海市去年已经开始实行,网上已经有不少成熟的教程了,像什么<垃圾分类从入门到精通& ...

随机推荐

  1. selenium 多表单切换处理(iframe/frame)

    在web应用中,前台网页的设计一般会用到iframe/frame表单嵌套页面的应用.简单的就是一个页面签嵌套多个HEML/JSP文件.selenium webdriver  只能在同一页面识别定位元素 ...

  2. gcc 学习

    gcc -lrt 参数说明:  说明在连接生成可执行文件的时候,将连接库librt.so or librt.a -l 参数说明 连接库 编译 使用 clock_gettime函数的,gcc需要添加上 ...

  3. 阿里云linux下修改mysql默认密码(xampp环境)- 原创

    1.修改MySQL的登录设置: # vi /etc/my.cnf 在[mysqld]的段中加上一句:skip-grant-tables 例如: [mysqld] datadir=/var/lib/my ...

  4. JDBC连接池(数据源)

    自定义连接池:用装饰设计模式将原连接的close方法改造成将连接还回数据源:装饰设计模式:http://www.cnblogs.com/tongxuping/p/6832518.html: 开源数据库 ...

  5. 创建展开行明细编辑表单的 CRUD 应用

    http://www.runoob.com/jeasyui/jeasyui-app-crud3.html jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用 当切换数据网格 ...

  6. python模块之XlsxWriter

    官网Tutorial:http://xlsxwriter.readthedocs.io/tutorial Xlsx是python用来构造xlsx文件的模块,可以向excel2007+中写text,nu ...

  7. HDU 1236 排名(结构体+排序)

    今天的上机考试虽然有实时的Ranklist,但上面的排名只是根据完成的题数排序,没有考虑 每题的分值,所以并不是最后的排名.给定录取分数线,请你写程序找出最后通过分数线的 考生,并将他们的成绩按降序打 ...

  8. 线段树【p4879】ycz的妹子

    Description 机房神犇yczycz有n个青梅竹马,她们分别住在1~n号城市中.小时候的她们美丽可爱,但是由于女大十八变,有些妹子的颜值发生了变化,但是十分重感情的\(ycz\)神犇不忍心抛弃 ...

  9. Javascript 行为委托

    JavaScript 与C++,Java的面相对象编程的语言不同.就像不懂Linux人,会创造一个蹩脚的linux一样.一些JavaScript的编程总在尝试利用JavaScript 去模拟传统的面向 ...

  10. POJ 3688 Cheat in the Game(博弈论)

    [题目链接] http://poj.org/problem?id=3688 [题目大意] 有俩人玩一个取石子的游戏,你是裁判. 游戏中有W块石头和N张卡片,卡片上分别写着数字Ai. 玩家随机抽走一张卡 ...