微信小程序 mpVue + vant

相关链接：

微信小程序： https://developers.weixin.qq.com/miniprogram/dev/component/input.html

vant： https://youzan.github.io/vant-weapp/#/button

mpVue: https://github.com/Rychou/mpvue-vant/tree/master/demo

mpVue-vant: https://github.com/Rychou/mpvue-vant/tree/master/demo

前言：去年的时候自己搞了个关于烘焙的个人小程序，但是并没有在实际工作中用到，刚好这次迭代急着要做小程序，就花一天时间把项目搭起来，把系统模块流程做了一遍。因为想要快速开发，又因为公司技术栈用的vue，所以采用了mpVue+vant UI库进行开发

一、安装

1. 安装微信开发者工具，详细见小程序官网

2. 将github上面mpVue-vant项目下载到自己本地，将项目跑起来，在微信开发者工具导入项目，就可以看到了

     npm install --->  cd fileName ---> npm run dev(一定要跑起来再去微信开发者工具看，不然会报错的)

二、项目用到的组件或知识点

1. 图片引入

   放在/static/image里面，直接在页面引入：/static/image/xx.png

2. 轮播组件——微信小程序 swiper

    <swiper
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      class="swiper-guide"
    >
      <block v-for="item in imgUrls" :key="item">
        <swiper-item>
          <image :src="item" class="slide-image-guide" width="355" />
        </swiper-item>
      </block>
    </swiper>

 

3. 拍照 —— 微信小程序 camera

https://developers.weixin.qq.com/miniprogram/dev/component/camera.html

4. 路由跳转  wx.redirectTo(Object object)

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

5. 其他都是vant组件 就不详细写了