mpvue微信小程序动画_mpvue快速搭建微信小程序

mpvue 是一个使用 Vue.js开发小程序的前端框架(美团的开源项目)。

框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

开发环境准备

node.js

微信小程序开发工具

vue cli

# 1. 先检查下 Node.js 是否安装成功

$ node -v

v8.9.0

$ npm -v

5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源

$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli

# 一般是要 sudo 权限的

$ npm install --global vue-cli@2.9

快速创建mpvue项目

# 4. 创建一个基于 mpvue-quickstart 模板的新项目

# 新手一路回车选择默认就可以了

$ vue init mpvue/mpvue-quickstart my-project

? Project name my-project

? wxmp appid touristappid

? Project description A Mpvue project

? Author 雷银-20669

? Vue build runtime

? Use Vuex? Yes

? Use ESLint to lint your code? Yes

? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能

vue-cli · Generated "my-project".

To get started:

cd my-project

npm install

npm run dev

Documentation can be found at http://mpvue.com

# 5. 安装依赖

$ cd my-project

$ npm install

$ npm run dev

微信开发者工具打开项目

项目可用vscode去编辑，微信开发工具仅用于调试。

image.png

开发单选框动画特效

在src目录中进行开发，默认会生成三个子目录components、pages和utils，还有2个文件：App.vue和main.js。其中pages用于存放小程序的页面，一个页面需要建立单独的文件夹。

2.本次demo在src/pages/index/index.vue中进行开发。

image.png

3.HTML部分代码

旋转动画

{{item.meaning}}

指定 input 标签的 type 值为 radio，将所有的 radio 的 name 值设为一样，实现单选效果。其中label 中的 for 属性，当点击label 元素的时候，浏览器会自动把焦点转移到 radio 上去。

css部分

.radio2 label{

width: 30px;

height: 30px;

background-color: coral;

display: inline-block;

border-radius: 50%;

border: 1px solid #D2B48C;

margin-right: 5px;

position: relative;

cursor: pointer;

overflow: hidden;

}

.radio2 label:after{

content: "";

width: 20px;

height: 20px;

background-color: #90EE90;

position: absolute;

top: 5px;

left: 5px;

border-radius: 50%;

transform: rotate(-180deg);

transform-origin: -3px 50%;

transition: transform .7s ease-out;

}

.radio2 .checked{

background-color: #4169E1;

transition: background-color .7s ease-out;

}

.radio2 .checked+p{

color: #90EE90

}

.radio2 .checked:after{

transform: rotate(0deg);

transition: transform .7s ease-out;

}

.radio2 input{

display: none;

}

5.js部分(在写css部分时发现属性选择器 .radio [type="radio"]不生效，当时用到了js对部分样式进行控制)

clickHandle (index) {

this.dateInfo.forEach(element => {

element.checked = false

})

this.dateInfo[index].checked = true

}

6.单选框效果

单选框动画

demo的git地址：https://github.com/leiyinha/mpvue_demo.git

以上就是基于mpvue开发了简单的小项目，希望能帮助一些小伙伴对mpvue有个简单的认识！

有兴趣的小伙伴可以去看看官方文档http://mpvue.com/