mpvue + iview 实现跨平台开发(App,Wap,微信小程序)
2023-09-11 14:15:30 时间
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)效果图
相关文章
- [转] 关于微信小程序、H5、公众号、APP跳转问题
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
- Google Earth Engine(GEE)APP——一个监测影像各波段的DN值的app
- 【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
- 【微信小程序】-- uni-app 项目创建 & 目录结构讲解(四十九)
- 【微信小程序】-- 配置uni-app的开发环境(四十八)
- uni-app - 禁用 APP 横屏旋转(用户操作行为)
- uni-app - 文本展开 / 收起折叠功能,支持自定义样式(当文本内容超出规定行数后,展开收起折叠的功能)兼容 H5 / App / 小程序且易用更容易修改的插件组件源码,超详细的示例代码及注释
- 微信小程序中的app.js-清除缓存
- 《移动App测试的22条军规》——第23章,第4节测试微信App的手势操作
- 《移动App测试的22条军规》——第23章,第16节测试微信App中非标准控件的使用情况
- 二、微信扩展app支付
- uni-app如何判断是否安装腾讯QQ微信微博支付宝淘宝等客户端,解决IOS应用审核被拒:用户应该能够使用微信登录并访问自己的帐户,而无需安装任何其他应用程序。
- uni-app知识点:条件编译#ifdef MP、HBuilder基座和自定义基座差别、去除顶部导航栏、手机桌面应用消息角标实现、APP应用图标配置及云端打包时的注意事项、如何使app文字内容长按可以选择复制
- 微信小程序项目入门实战(App)基础篇-Array老师-专题视频课程
- uni-app 微信小程序中关于 map 地图使用案例分享