使用mpvue开发微信小程序

作者: 雷银 | 来源:发表于2019-08-15 18:20 被阅读216次

小程序开发上路
微信小程序调研
mpvue 微信小程序富文本解析
使用mpvue开发微信小程序
使用mpvue开发微信小程序
mpvue-entry引入原生swiper组件不显示问题
uniapp开发微信小程序
关于MPVue中导航栏的Icon路径异常的问题
微信小程序(Mini Program)技术栈与框架简介
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 <yin.lei@hand-china.com>
? 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部分代码

  <div class="radio2">
      <h1>旋转动画</h1>
      <div v-for="(item,index) in dateInfo" :key="index" @click="clickHandle(index)">
        <input type="radio" name="ys" :id="item.value" />
        <label :for="item.value" :class="{'checked':item.checked}"></label>
        <p>{{item.meaning}}</p>
      </div>
   </div>

指定 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.单选框效果