精华内容
下载资源
问答
  • 使用mpvue+VantUI+flyio进行小程序开发基础介绍1. 安装mpvue创建一个基于mpvue-quickstart模板的新项目全部流程这里是模板的具体配置信息(如果你还不太明白这些内容的含义,可以先直接全部按回车)2. 安装Vant ...
  • mpvue 使用vant ui

    2020-08-12 10:45:44
    mpvue 使用vant ui库 https://www.jianshu.com/p/58c33e8389fe

    mpvue 使用vant ui库
    https://www.jianshu.com/p/58c33e8389fe

    展开全文
  • 介绍一下vantUI 因为比较懒,就选了一个UI框架来节省时间,其实有几个不错的UI框架,对比了一下vant weapp比较符合当前需求,所以最后选用了这个有赞的UI框架,不过iview和weui也不错,虽然我没用过 起步 首先先安装...
  • 主要介绍了Mpvue使用Vant Weapp组件库的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 基础介绍mpvue:是一个使用 Vue.js 开发小程序的前端框架。Vant Weapp:是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。Fly.js:一个支持...

    基础介绍

    mpvue:是一个使用 Vue.js 开发小程序的前端框架。

    Vant Weapp: 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。

    Fly.js: 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。

    1. 安装mpvue

    创建一个基于mpvue-quickstart模板的新项目全部流程

    # 1. 先检查下 Node.js 是否安装成功$ node -v# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源$ npm set registry https://registry.npm.taobao.org/# 3. 全局安装 vue-cli$ npm install --global vue-cli# 4. 创建一个基于 mpvue-quickstart 模板的新项目# 新手一路回车选择默认就可以了$ vue init mpvue/mpvue-quickstart my-project# 5. 安装依赖,走你$ cd my-project$ npm install$ npm run dev

    这里是模板的具体配置信息(如果你还不太明白这些内容的含义,可以先直接全部按回车)

    $ vue init mpvue/mpvue-quickstart mpvuedemo    // mpvuedemo 是项目文件名称,运行后会在目录下生成一个这样名称的文件夹? Project name (mpvuedemo)  // 项目名称? Project name mpvuedemo? wxmp appid (touristappid) wx***********    // 项目的appid? wxmp appid wx**********? Project description (A Mpvue project)   // 项目说明 ? Project description A Mpvue project? Author () XXXXXX    // 项目作者? Author XXXXXX? Vue build (Use arrow keys)? Vue build runtime? Use Vuex? (Y/n) y  // 是否使用Vuex? Use Vuex? Yes? Use ESLint to lint your code? (Y/n) n  // 是否使用ESLint? Use ESLint to lint your code? No? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能

    2. 安装Vant Weapp组件库

    Vant Weapp的地址:https://youzan.github.io/vant-weapp/#/intro

    ① 克隆仓库

    在本地新建一个文件夹执行 命令

    git clone https://github.com/youzan/vant-weapp.git

    ② 复制dist文件夹到你项目的 /static/vant/ 目录下。

    克隆到本地后,在你的项目的static文件夹下创建一个vant文件夹 ,将 克隆下来的文件中的dist 目录下的所有文件复制到你项目的 /static/vant/ 目录下。(下图就是dist文件夹的内容)

    10718a15441dbbc8033862c85ab37912.png

    ③ 引入组件

    在需要使用组件的页面目录下的 main.json 文件中,引入对应组件。

    如图在index.vue文件中要使用button,tab,image等组件时只要在index文件夹下的main.json文件中添加如下代码即可

    3d5866c631eed98ef1b8efcb79b94cc0.png

     ④ 在页面使用

    只要在 .vue文件中直接用就行

    <van-button>按钮van-button><van-tabs active="{{ active }}" bind:change="onChange">  <van-tab title="标签 1">内容 1van-tab>  <van-tab title="标签 2">内容 2van-tab>  <van-tab title="标签 3">内容 3van-tab>  <van-tab title="标签 4">内容 4van-tab>van-tabs>

    3. 安装fiyio

    [这里是fiyio官网地址](https://wendux.github.io/dist/#/doc/flyio/readme)

    ①  使用NPM

    npm install flyio

    ② 使用CDN

    <script src="https://unpkg.com/flyio/dist/fly.min.js">script>

    ③ 在utils文件夹下添加 flyio.js文件 

    (我们要在该文件内进行数据请求封装)

    import Fly from 'flyio/dist/npm/wx'const fly = new Fly()const host = "https://rmall.ukelink.net"  // 数据请求url//添加请求拦截器fly.interceptors.request.use((request) => {    wx.showLoading({        title: "加载中",        mask:true    });    console.log('request___________________',request);    request.headers = {        "X-Tag": "flyio",        // 'content-type': 'application/json'        'content-type': 'application/x-www-form-urlencoded'    };    let authParams = {        //公共参数        // "categoryType": "SaleGoodsType@sim",        // "streamNo": "wx18542dc630fea2a4",        // "reqSource": "MALL_H5",        // "appid": "wx18542dc630fea2a4",        // "timestamp": new Date().getTime(),        // "sign": "string"    };    request.body && Object.keys(request.body).forEach((val) => {        if(request.body[val] === ""){            delete request.body[val]        };    });    request.body = {        ...request.body,        ...authParams    }    return request;});//添加响应拦截器fly.interceptors.response.use(    (response) => {        wx.hideLoading();        return response.data;//请求成功之后将返回值返回    },    (err) => {        //请求出错,根据返回状态码判断出错原因        console.log(err);        wx.hideLoading();        if(err){            return "请求失败";        };    });fly.config.baseURL = host;export default fly;

    ④ 引入

    在main.js文件中引入

    import Vue from 'vue'import App from './App'// 添加下面两行代码即可import fly from './utils/flyio.js'Vue.prototype.$fly = fly;Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue(App)app.$mount()

    ⑤ 在页面内使用方法

    export default {  onShow() {    console.log('onShow,onShow,onShow_________')         this.$fly.request({        method:"post", //post/get 请求方式        url:"/mms/country/queryValidZoneListForMallHome",        body:{          // name:'qianbuduo', // 传递的参数        }      }).then(res =>{        console.log(res)      }).catch(err=>{        console.log(err)      })            },}

    这就大功告成,然后我们可以愉快地去开发我们的项目了~~

    最后是个人在mpvue开发中碰到的一点小问题给大家提个醒

    ①  当我们用npm下载一些插件后在运行项目时如果报错可以把node包删掉重新npm install 一下就好了

    ② 在使用  Vant 的 Notify (消息提示)时,要引用两次。页面内还要再引一次.并且在 并在页面内添加van-notify标签 。  否则会报错(未找到 van-notify 节点,请确认 selector 及 context 是否正确)

    <template>   <div class="homePage">      <van-notify id="van-notify">van-notify>   div>   template><script>import Notify from '@/../static/vant/notify/notify.js'......script>
    展开全文
  • mpvue项目使用第三方UI框架vant weapp

    千次阅读 2019-01-02 20:40:42
    我们搜到的教程都是说从vant-weapp的git仓库中下载源码,拷贝dist目录到我们创建的mpvue项目文件的static或者dist或者…文件夹中,我觉得都可以吧,只是涉及你引用组件时的路径怎么写。 这里把vant-we...

    简直醉了。。。折腾了好几个小时,各种百度,vant-weapp的dist目录各种放各种试都不行,都试得要睡着了,没想到。。。居然只是差微信开发者工具里面一个勾。吐血。。。。

    我们搜到的教程都是说从vant-weapp的git仓库中下载源码,拷贝dist目录到我们创建的mpvue项目文件的static或者dist或者…文件夹中,我觉得都可以吧,只是涉及你引用组件时的路径怎么写。

    这里把vant-weapp的dist目录重命名为vant-weapp放在项目根目录的static文件夹下:
    在这里插入图片描述

    在src文件夹下,即我们写vue代码的位置,正在编写的页面中添加main.json文件(vue代码编译成小程序代码时会直接使用这个文件):

    {
      "usingComponents": {
        "van-button": "/static/vant-weapp/button/index"        
        //这个路径是指根目录下static文件中...
      }
    }
    

    然后就可以运行了:cmd->

    npm run dev
    

    在这里插入图片描述

    接着打开微信开发者工具,会发现报错:
    在这里插入图片描述

    打开微信开发者工具的“详情”右侧栏,有一个ES6转ES5:
    在这里插入图片描述

    把这个“ES6转ES5”的选项勾上就不会报错了…出现vant-weapp的样式。
    在这里插入图片描述

    展开全文
  • 小程序中使用MpVue框架+VantUI,编译正常但是小程序开发工具中展示时报错 解决办法:小程序开发工具中ES6转Es5 app created and cache logs by setStorageSync VM2607:1 thirdScriptError sdk uncaught third ...

    小程序中使用MpVue框架+VantUI,编译正常但是小程序开发工具中展示时报错

    解决办法:小程序开发工具中ES6转Es5

    app created and cache logs by setStorageSync
    VM2607:1 thirdScriptError
     sdk uncaught third Error
     module "static/vant/checkbox/index.js" is not defined
     Error: module "static/vant/checkbox/index.js" is not defined
        at require (http://127.0.0.1:57228/appservice/__dev__/WAService.js:23:13423)
        at <anonymous>:19:7
        at HTMLScriptElement.scriptLoaded (http://127.0.0.1:57228/appservice/appservice?t=1539393805781:6239:23)
    console.error @ VM2607:1
    (anonymous) @ WAService.js:15
    (anonymous) @ WAService.js:6
    e @ appservice?t=1539393805781:5622
    window.onerror @ VM2607:1
    scriptLoaded @ appservice?t=1539393805781:6239
    VM2607:1 jsEnginScriptError
    Component is not found in path "static/iview/button/index" (using by "pages/index/main")
    Error: Component is not found in path "static/iview/button/index" (using by "pages/index/main")
        at e (http://127.0.0.1:57228/appservice/__dev__/WAService.js:17:21420)
        at e (http://127.0.0.1:57228/appservice/__dev__/WAService.js:17:21606)
        at le (http://127.0.0.1:57228/appservice/__dev__/WAService.js:18:20)
        at Object.i.addView (http://127.0.0.1:57228/appservice/__dev__/WAService.js:18:1388)
        at Function.value (http://127.0.0.1:57228/appservice/__dev__/WAService.js:20:311)
        at Xt (http://127.0.0.1:57228/appservice/__dev__/WAService.js:20:14678)
        at sn (http://127.0.0.1:57228/appservice/__dev__/WAService.js:20:17267)
        at un (http://127.0.0.1:57228/appservice/__dev__/WAService.js:20:17605)
        at Function.<anonymous> (http://127.0.0.1:57228/appservice/__dev__/WAService.js:20:20038)
        at L.<anonymous> (http://127.0.0.1:57228/appservice/__dev__/WAService.js:19:18211)

     

     

    展开全文
  • 我这里使用的外部样式 <van-button custom-class="my-buttom" type="primary">主要按钮</van-button> .my-buttom{ background-color: #fff !important; } 刚开始不生效,找了很久发现是代码的...
  • 小程序采坑记 mpvue + Vant Weapp

    千次阅读 2018-10-18 17:43:25
    最新在做一个小程序项目,框架使用的是:mpvue + Vant Weapp;其余还用的技术栈:vue.js、微信小程序、网络库flyio等。 mpvue是美团开源的微信小程序框架,由于无限接近vue开发而受到大量关注; Vant Weapp UI库是...
  • mpvue 引入Vant Weapp组件库

    千次阅读 2019-02-25 16:22:27
    mpvue 引入Vant Weapp组件库 1、从git仓库克隆vant weapp组件库: https://github.com/youzan/vant-weapp.git; 2、将下载文件中的dist文件拷贝到...在需要使用ui组件的页面引入需要的某个ui组件,mpvue只需要在main...
  • 首先看vant-ui发现以上几个组件都可以使用,于是愉快的撸了起来。。。。 引入了所有需要用的组件,发现自己简直棒棒哒 { "usingComponents": { "van-button": "/static/vant/button/index", "van-cell": "/...
  • 微信小程序mpvue+vantUI+flyio+vuex入坑(1) 上篇简单写了一下mpvue+router+ui库的配置,这篇接着写接口请求flyio 简单介绍一下flyio Fly.js一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大...
  • 最近在用mpvue写小程序,用到了vantui库中的uploader文件上传的组件,官方实例中要自己写后台接口。七牛云提供了两种分别是客户端和服务器请求云端图片路径的方法,以下采用的是客户端发起请求的方法,但是token...
  • 1、mpvue使用vant-weapp的方式 2、mpvue引入vant-weapp后,mpvue自动将px转换为rpx单位的问题 参考 https://www.jianshu.com/p/5fb497ec2e5d 如果不想自己写的单位被mpvue转换,就将px单位写为PX, 大写的就不会...
  • 最近在使用mpvue开发微信小程序,在开发过程中使用有赞的小程序ui框架—— vant Weapp ,至于如何使用在我个人博客中有一篇关于如何使用vant Weapp ,需要的同学请点进这里自行查看。  使用mpvue框架开发过小...
  • #微信小程序mpvue入坑(2)之初始化及引入vantUI 初始化项目 首先先构建一个项目 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-...
  • 1.引入 "usingComponents": { "van-popup": "/path/vant-weapp/popup/index", "van-datetime-picker": "/path/vant-weapp/datetime-picker/index" } ...2.使用 van-popup默认从中间弹出,po...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 338
精华内容 135
关键字:

mpvue使用vantui

vue 订阅