mpvue-Vant Weapp踩坑记
微信开发者工具:开发、调试和模拟运行微信小程序的最核心的工具了,所以必须安装
# 全局安装 vue-cli
$ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project # 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
需要被转换成小程序的代码才可以在小程序环境运行,所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist
目录下
打开微信开发者工具 => 选择新增项目 => 项目目录:dist下的wx目录
参考链接:https://www.jianshu.com/p/6f8d74be3ff8
引入第三方ui库——vant-weapp // 将vant-weapp下载下来
git clone https://github.com/youzan/vant-weapp.git 下载后将其项目下的dist文件全部都copy到我们需要用到项目中, 为了方便管理,可以在根目录下的static下新建一个vant用于存放UI组件文件;目录结构即:/static/vant
最后只需要在我们需要使用组件的页面的配置json文件中引入我们需要的组件 {
// 页面配置,即 page.json 的内容
navigationBarTitleText: '首页',
'usingComponents': {'van-icon': '/static/vant/icon/index','van-dialog': '/static/vant/dialog/index'
}
}
在vant-weapp的官方文档中的具体用法是使用wxml的语法,所以我们不能直接照搬使用, 需要稍做修改: // 数据的绑定方式 value="{{value}}" 改成
v-bind:value="value"
//或者
:value="value" // 事件的绑定方式 bind:click="onClick" 改成
@click="onClick" // 获取 event 事件对象中值, mpvue中获取event值与原生小程序有所不同
onChange(event){ // 获取表单组件filed的值
console.log(event.mp.detail) // 注意加入mp
} // vant中像notify这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json中引入;二是在vue文件中import引入,这里的引入不能使用绝对路径,使用相对路径。
import Notify from '@/../static/vant/notify/notify' //@是mpvue的一个别名,指向src目录
mpvue-Vant Weapp踩坑记的更多相关文章
- mpvue + Vant weapp + 微信云服务 打造小程序应用
写在前面的话: 从事小程序开发已经大半年的时间了,但是一直都是再用原生写项目.一直想着用框架自己写一个小程序,但苦于一直没有时间.正好最近项目搁置,有了空闲时间,就研究了下mpvue + Vant w ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
- 【踩坑记】从HybridApp到ReactNative
前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...
- Spark踩坑记——共享变量
[TOC] 前言 Spark踩坑记--初试 Spark踩坑记--数据库(Hbase+Mysql) Spark踩坑记--Spark Streaming+kafka应用及调优 在前面总结的几篇spark踩 ...
- Spark踩坑记——从RDD看集群调度
[TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...
- djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记
情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...
- HttpWebRequest 改为 HttpClient 踩坑记-请求头设置
HttpWebRequest 改为 HttpClient 踩坑记-请求头设置 Intro 这两天改了一个项目,原来的项目是.net framework 项目,里面处理 HTTP 请求使用的是 WebR ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
随机推荐
- QT 自定义模态对话框
新建一个MsgBox类 msgbox.h 代码 #ifndef MSGBOX_H #define MSGBOX_H #include <QDialog> #include <QPus ...
- css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
- iOS----------取数据的两种取法
NSMutableArray * dataArray =[responseDictionary valueForKeyPath:@"data.list_dic.list"]; NS ...
- JHipster技术栈定制 - JHipster Registry消息总线配置
本文说明了如何定制化JHipster-Registry,增加消息总线功能. 实现的效果就是修改配置中心的文件后,通过消息队列主动推送给微服务而无需重启微服务,实现配置内容热加载. 1 整体规划 1.1 ...
- 微信小程序下拉刷新和上拉加载的实现
一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 "enablePullDownRefresh": true, //开启下拉刷新 & ...
- kylin简单优化cube
优化Cube 层次结构 理论上,对于N维,你最终会得到2 ^ N维组合.但是对于某些维度组,不需要创建这么多组合.例如,如果您有三个维度:洲,国家,城市(在层次结构中,“更大”维度首先出现).在深入分 ...
- Linux内存描述之高端内存--Linux内存管理(五)
1. 内核空间和用户空间 过去,CPU的地址总线只有32位, 32的地址总线无论是从逻辑上还是从物理上都只能描述4G的地址空间(232=4Gbit),在物理上理论上最多拥有4G内存(除了IO地址空间, ...
- 0109 ubuntu nginx ssl
1. sudo apt-get install openssl libssl-dev # ./configure --with-http_stub_status_module --with-http_ ...
- 解决connect() failed (111: Connection refused) while connecting to upstream
使用nginx时, 有可能遇到connect() failed (111: Connection refused) while connecting to upstream的问题. 如果upstrea ...
- ElasticSearch(七):Java操作elasticsearch基于smartcn中文分词查询
package com.gxy.ESChap01; import java.net.InetAddress; import org.elasticsearch.action.search.Search ...