mpvue 从入门到上手

phodal 发布于2019-08-30 15:54 / 2894人阅读

摘要：官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先，打包打开微信开发者工具，在项目目录中选择项目的文件，可以暂时不写，项目名称自定义。点击编译看效果，点击预览在手机上用微信扫码看效果。

官网：http://mpvue.com/mpvue/quicks...
一、新建一个mpvue项目

</>复制代码 
$ vue init mpvue/mpvue-quickstart my-project //新建项目
$ cd my-project //切换到项目
$ npm install //安装依赖
$ npm run dev //运行

二、预览

1、首先，打包

</>复制代码 
$ npm run build

2、打开“微信开发者工具”，在‘项目目录’中选择项目的dist文件，APPID可以暂时不写，‘项目名称’自定义。
3、点击‘编译’看效果，点击‘预览’在手机上用微信扫码看效果。

三、页面跳转

</>复制代码 
立即报名

在最外层app.json中加入路径且重新运行该项目，如下图：

四、分享

</>复制代码

如果需要自定义分享，则重写以下方法（注意，此方法不应放在methods中，应该与methods同级）

</>复制代码 
onShareAppMessage: function (res) {
    // 分享程序
    var title = ""
    var path = "pages/index/main"
    var imageUrl = ""
    return {
      title,
      path,
      imageUrl,
      success: (res) => {
        console.log("res", res)
      },
      fail: (res) => {
        console.log("res", res)
      }
    }
  }

五、图片预览

</>复制代码 
    
    previewImg () {
      // 预览图片
      wx.previewImage({
        // current: "/static/images/second_3.jpg", // 当前显示图片的http链接，只有一张时，可以不写
        urls: ["http://bak-img.oss-cn-shenzhen.aliyuncs.com/20181204111744.jpg"], // 需要预览的图片http链接列表
        success (res) {
          console.log(res)
        },
        fail () {
          wx.showToast({
            title: "预览失败！",
            icon: "none",
            duration: 1000
          })
        }
      })
    }

六、请求接口

</>复制代码 
  wx.request({
    url: myUrl,
    data: {
      type: "k"
    },
    success: function (res) {
      console.log(res.data)
    }
  })

七、图片上传到阿里云（OSS）
请参考这位大佬的博客：https://blog.csdn.net/qq_2337...
点击调皮效果（加入addscale即可）：

</>复制代码 
  .addscale {
    -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
    -webkit-animation: addscale;
      animation: addscale 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
      transition-timing-function: cubic-bezier(0.6, 4, 0.3, 0.8);
  }
@-webkit-keyframes addscale {
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  }
  @keyframes addscale {
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  from,
    to {
      -webkit-transform: scale(1, 1);
              transform: scale(1, 1);
  }
  25% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
  50% {
      -webkit-transform: scale(1.05, 0.95);
              transform: scale(1.05, 0.95);
  }
  75% {
      -webkit-transform: scale(0.95, 1.05);
              transform: scale(0.95, 1.05);
  }
}

八、普通选择器
效果图：

</>复制代码 
  
    当前选择：{{sexVal}} 
   
  data () {
    return {
      sexArray: ["女", "男"],
      sexVal: "选择"
    }
  },
  methods: {
    bindPickerChange(e) {
      let index = Number(e.mp.detail.value)
      this.sexVal = this.sexArray[index] 
    }
  }

九、单页面的配置
请参考此大佬：https://blog.csdn.net/qq_3543...

十、页面跳转

</>复制代码 
1、行内跳转
    a、navigator、vue-router都可以
2、js跳转（标签为）
    *普通跳转 navigateTo
        const url = "../result/main"
        wx.navigateTo({url})
    *底部导航跳转 switchTab
        const url = "../result/main"
        wx.switchTab({url})

GPU云服务器云服务器 spark从入门到前端从入门到精通云计算从入门到精通 html从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117059.html

mpvue 从入门到上手

摘要：官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先，打包打开微信开发者工具，在项目目录中选择项目的文件，可以暂时不写，项目名称自定义。点击编译看效果，点击预览在手机上用微信扫码看效果。官网：http://mpvue.com/mpvue/quicks...一、新建一个mpvue项目 $ vue init mpvue/mpvue-quickstart my-project //新...

_DangJin 2019-08-23 14:00 评论0 收藏0
mpvue 从入门到上手

摘要：官网一新建一个项目新建项目切换到项目安装依赖运行二预览首先，打包打开微信开发者工具，在项目目录中选择项目的文件，可以暂时不写，项目名称自定义。点击编译看效果，点击预览在手机上用微信扫码看效果。官网：http://mpvue.com/mpvue/quicks...一、新建一个mpvue项目 $ vue init mpvue/mpvue-quickstart my-project //新...

刘永祥 2019-08-02 12:14 评论0 收藏0
珠峰前端架构师培养计划

摘要：公司的招聘要求都提到了至少熟悉其中一种前端框架，有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。技术的优势互联网前端大潮后，前端出现了大框架，分别是与。 1、技术选型的背景前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员...

ccj659 2021-11-22 15:24 评论0 收藏0
美团小程序框架mpvue入门教程

摘要：美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾，今天趁周末空闲，来写个没朋友的简单入门教程，本教程只针对新手，老鸟勿喷。美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南,一发不可收拾，今天趁周末空闲，来写个mpvue(没朋友)的简单入门教程，本教程只针对新手，老鸟勿喷。另外，我还专门为本文做了一个简单的项目，如果懒得从头开始搭项目的童鞋...

YorkChen 2019-08-22 16:14 评论0 收藏0
详解 mpvue 小程序框架及和原生的差异

摘要：在这一步，实例已完成以下的配置数据观测，属性和方法的运算，事件回调。可以直接写等标签的写法之前会的工程师上手框架的成本较低简介 1.美团工程师推出的基于Vue.js封装的用于开发小程序的框架2.融合了原生小程序和Vue.js的特点3.可完全组件化开发特点 1.组件化开发2.完成的Vue.js开发体验(前提是熟悉Vue)3.可使用Vuex管理状态4.Webpack构建项目5.最终H5...

IamDLY 2019-08-26 13:52 评论0 收藏0