微信开发者工具:开发、调试和模拟运行微信小程序的最核心的工具了,所以必须安装
# 全局安装 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踩坑记的更多相关文章

  1. mpvue + Vant weapp + 微信云服务 打造小程序应用

    写在前面的话: 从事小程序开发已经大半年的时间了,但是一直都是再用原生写项目.一直想着用框架自己写一个小程序,但苦于一直没有时间.正好最近项目搁置,有了空闲时间,就研究了下mpvue + Vant w ...

  2. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  3. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

  4. 【踩坑记】从HybridApp到ReactNative

    前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...

  5. Spark踩坑记——共享变量

    [TOC] 前言 Spark踩坑记--初试 Spark踩坑记--数据库(Hbase+Mysql) Spark踩坑记--Spark Streaming+kafka应用及调优 在前面总结的几篇spark踩 ...

  6. Spark踩坑记——从RDD看集群调度

    [TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...

  7. djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记

    情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...

  8. HttpWebRequest 改为 HttpClient 踩坑记-请求头设置

    HttpWebRequest 改为 HttpClient 踩坑记-请求头设置 Intro 这两天改了一个项目,原来的项目是.net framework 项目,里面处理 HTTP 请求使用的是 WebR ...

  9. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

随机推荐

  1. QT 自定义模态对话框

    新建一个MsgBox类 msgbox.h 代码 #ifndef MSGBOX_H #define MSGBOX_H #include <QDialog> #include <QPus ...

  2. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  3. iOS----------取数据的两种取法

    NSMutableArray * dataArray =[responseDictionary valueForKeyPath:@"data.list_dic.list"]; NS ...

  4. JHipster技术栈定制 - JHipster Registry消息总线配置

    本文说明了如何定制化JHipster-Registry,增加消息总线功能. 实现的效果就是修改配置中心的文件后,通过消息队列主动推送给微服务而无需重启微服务,实现配置内容热加载. 1 整体规划 1.1 ...

  5. 微信小程序下拉刷新和上拉加载的实现

    一: 下拉刷新 下拉刷新两个步骤就能实现. 1.在要实现下拉刷新的页面的json配置文件里面加上 "enablePullDownRefresh": true, //开启下拉刷新 & ...

  6. kylin简单优化cube

    优化Cube 层次结构 理论上,对于N维,你最终会得到2 ^ N维组合.但是对于某些维度组,不需要创建这么多组合.例如,如果您有三个维度:洲,国家,城市(在层次结构中,“更大”维度首先出现).在深入分 ...

  7. Linux内存描述之高端内存--Linux内存管理(五)

    1. 内核空间和用户空间 过去,CPU的地址总线只有32位, 32的地址总线无论是从逻辑上还是从物理上都只能描述4G的地址空间(232=4Gbit),在物理上理论上最多拥有4G内存(除了IO地址空间, ...

  8. 0109 ubuntu nginx ssl

    1. sudo apt-get install openssl libssl-dev # ./configure --with-http_stub_status_module --with-http_ ...

  9. 解决connect() failed (111: Connection refused) while connecting to upstream

    使用nginx时, 有可能遇到connect() failed (111: Connection refused) while connecting to upstream的问题. 如果upstrea ...

  10. ElasticSearch(七):Java操作elasticsearch基于smartcn中文分词查询

    package com.gxy.ESChap01; import java.net.InetAddress; import org.elasticsearch.action.search.Search ...