精华内容
下载资源
问答
  • 微信小程序引入Vant Weapp Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 安装: 它有两种安装方式: 方法一: 在GitHub上下载...

    微信小程序引入Vant Weapp

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

    安装:

    它有两种安装方式:

    方法一:
    在GitHub上下载vant-weapp源代码 ( https://github.com/youzan/vant-weapp ),解压,把文件中的dist目录拷贝到自己的项目中。

    方法二:
    1、在小程序项目的根目录中通过 npm init 生成 package.json;
    2、npm install vant-weapp -S --production 生成 node_modules 目录;
    在这里插入图片描述
    3、打开微信开发者工具,导入项目,工具—构建npm,生成miniprogram_npm目录;
    在这里插入图片描述
    4、详情—本地设置—(勾选)使用npm模板;

    使用

    在页面的 .json文件中引入组件;
    在 .wxml文件中使用;

    展开全文
  • 微信小程序引入vant

    2021-01-05 11:48:18
    开发小程序过程中由于不想写样式便想着是否可以像vue一样引入vant呢,话不多说直接上代码。 首先需要做一些准备工作,开启小程序的npm功能。 1.npm包构建 (1)打开小程序开发工具点击详情,选择使用npm模式 (2)...

    开发小程序过程中由于不想写样式便想着是否可以像vue一样引入vant呢,话不多说直接上代码。
    首先需要做一些准备工作,开启小程序的npm功能。

    1.npm包构建

    (1)打开小程序开发工具点击详情,选择使用npm模式
    在这里插入图片描述

    (2)点击微信开发者工具菜单栏的工具,选择构建npm
    在这里插入图片描述
    当显示以下表示npm构建成功,构建完成就可以使用npm包了
    在这里插入图片描述
    如果你的主目录中锁了个node_modules,说明npm包构建成功了。接下来我们引入vantUI

    2.引入Vant-UI

    # 通过 npm 安装
    npm i @vant/weapp -S --production
    
    # 通过 yarn 安装
    yarn add @vant/weapp --production
    
    # 安装 0.x 版本
    npm i vant-weapp -S --production
    

    3. 修改 app.json

    将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
    

    4.修改 project.config.json

    开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。

    需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

    {
      ...
      "setting": {
        ...
        "packNpmManually": true,
        "packNpmRelationList": [
          {
            "packageJsonPath": "./package.json",
            "miniprogramNpmDistDir": "./miniprogram/"
          }
        ]
      }
    }
    

    5.使用

    引入组件
    以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。

    // 通过 npm 安装
    // app.json
    "usingComponents": {
      "van-button": "@vant/weapp/button/index"
    }
    

    6.使用组件

    引入组件后,可以在 wxml 中直接使用组件

    <van-button type="primary">按钮</van-button>
    

    这样就可以很爽的像vue一样使用vantui了是不是很简单呢。
    注意小程序使用vant与H5使用vant不太一样。
    详细可以观看vant小程序使用官网vant小程序ui地址

    展开全文
  • 如何在微信小程序引入第三方组件库前言一、新建一个项目二、引入组件库(一)执行nmp init命令创建package.json文件(二)引入组件库三、构建npm四、使用组件(一)在.json文件引入组件(二)修改wxml文件 ...


    前言

    微信小程序的开发过程越来越简便,上手十分快,如果是学过vue的同学做起来就更觉得十分亲切了。微信小程序更多是引入第三方组件库进行开发,顾名思义就是借用别人的模板进行创作,那么这里给大家完整介绍如何把第三方组件库引入到项目中。


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、新建一个项目

    在这里插入图片描述

    二、引入组件库

    (一)执行nmp init命令创建package.json文件

    执行nmp init命令创建package.json文件

    init npm
    

    - 这里注意要在根目录右键在内建终端中打开

    在这里插入图片描述
    之后一路回车就可以了,也可以输入你自己想设置的信息
    在这里插入图片描述
    接着大家可以发现在目录下面会多了一个新的文件:package.json
    在这里插入图片描述

    (二)引入组件库

    这里我们用vant Weapp作为用来引入的库

    这里有两种方法可以引入:
    1、在终端进行引入

    npm i vant-weapp -S --production
    

    在这里插入图片描述
    2、在官网下载zip包,解压后将文件添加至项目
    这里贴出vant Weapp 给出的官方示例
    在这里插入图片描述

    三、构建npm

    在引入组件之后我们会发现添加了一个新的文件夹 node_modules
    在这里插入图片描述
    接着在右上角的详情处勾选使用npm模块
    在这里插入图片描述
    接着在工具栏找到工具,选择构建npm
    在这里插入图片描述

    构建成功!
    在这里插入图片描述
    到这里就完成了库的引入,接下来就是组建的使用啦~

    四、使用组件

    (一)在.json文件引入组件

    首先在你想要使用的页面的json文件里添加组件,这里我用index页面作为例子,往里面添加button按钮。

    {
      "usingComponents": { 
        "i-button": "../../miniprogram_npm/vant-weapp/button"
      }
    }
    

    在这里插入图片描述

    (二)修改wxml文件

    <!--index.wxml-->
    <view class="container">
      <i-button type="default">默认按钮</i-button>
    <i-button type="primary">主要按钮</i-button>
    <i-button type="warning">警告按钮</i-button>
    <i-button type="danger">危险按钮</i-button>
    </view>
    

    在这里插入图片描述
    这就是最终的效果图啦!!
    在这里插入图片描述

    希望可以对你有帮助哦
    学习愉快。

    展开全文
  • 第一步:找到自己需要得图标复制此链接 第二步:把该链接在浏览器中打开,复制内容到static文件新建css文件夹里 第三步:加https: 第四步:在APP.vue全局中引入 第五步:在结构里引入 效果图: ...

    第一步:找到自己需要得小图标复制此链接
    在这里插入图片描述
    第二步:把该链接在浏览器中打开,复制内容到static文件新建css文件夹里
    在这里插入图片描述
    第三步:加https:
    在这里插入图片描述
    第四步:在APP.vue全局中引入
    在这里插入图片描述
    第五步:在结构里引入
    在这里插入图片描述

    效果图:

    在这里插入图片描述

    展开全文
  • 微信小程序JavaScript SDK 3. 添加sdk到工程 把下载下来的sdk放到mpvue工程的static目录下,保证不被webpack编译到。要是放在pages目录中会报错的。 4. 引入js文件 在你需要获取位置服务的.vue文件中引入这个js文件...
  • 微信公众平台申请腾讯插件 第二步 复制腾讯视频插件的id(在详情里面) 第三步 在uniapp的配置文件引入 在这里插入代码片 “plugins” : { “tencentvideo” : { “version” : “1.3.17”, “provider” : “w...
  • 本文只引入iconfont图标 在iconfont内获取到图标后 下载到本地 后将 iconfont.ttf... 将转码后的一长串引入到iconfont.css文件中的src内,原有的src内的内容删除掉.在将新的iconfont.css在app.vue文件中引入 则可...
  • uni-app 使用iconfont 阿里图标库添加到购物车添加至项目 下载至本地 app.vue中全局引入 生成代码替换 前面添加https:
  • Vue/微信小程序 -- 引入腾讯视频

    千次阅读 2020-03-19 11:33:14
    2. 微信小程序引入腾讯视频 2.1 登录小程序后台:https://mp.weixin.qq.com/,添加“腾讯视频”插件,步骤如下: 设置->第三方设置->添加插件 搜索“腾讯视频”,选择插件,点击添加即可。 添加成功后...
  • vue技术交流群(864583465) 微信小程序引入WeUI(npm方式) 1、使用命令行或微信开发者工具的终端执行以下代码 npm init -y // 在init时,生成默认的package.json文件 否则会构建失败 npm install weui-miniprogram ...
  • mpvue 是一个使用 Vue.js开发小程序的前端框架(美团的开源项目)。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 ...开发环境准备node.js微信小程序开发工具vue cli# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9...
  • wxComputed在微信小程序开发中加入了computed自动计算属性的支持,此项目主要参考了Vue.js的依赖收集逻辑,数据变化后的视图更新操作则是通过小程序内部的Page.prototype.setData原型函数来完成。 构建打包 使用...
  • mpvue介绍 目前微信小程序的主流框架mpvue,是一个使用 Vue.js 开发小程序的前端框架。这个框架是基于 Vue.js 核心, 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发...
  • vue 开发微信小程序

    2019-02-26 00:12:00
    框架基于Vue.js核心,mpvue修改了Vue.js的runtime和compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。 官方网址:http://mpvue.com/ 转载于:https://www.cnblogs.co...
  • vue微信小程序开发(二)---页面以及导航

    千次阅读 多人点赞 2020-11-12 16:26:39
    vue微信小程序开发(二)—菜单以及页面 这里写目录标题vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航 上篇我们讲了开发环境的搭建 现在开始开发 components :组件 一般不用管 pages: 页面...
  • 目录导航登录微信小程序管理后台添加腾讯视频播放插件: 在uni-app中引入插件代码:指定整个小程序可使用:指定到对应的分包中使用:在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码: 在vue...
  • 场景Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等步骤一 配置安全域名:在微信公众平台对应的公众号设置里面配上相应的JS接口安全域名(开发者需要有...
  • 目录导航登录微信小程序管理后台添加腾讯视频播放插件:在uni-app中引入插件代码:指定整个小程序可使用:指定到对应的分包中使用:在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码: 在vue页面...
  • 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2. 引入JS文件 在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https) 如需进一步...
  • 在工作中需要视频播放功能,因为前端用的vue全家桶,经过技术筛选之后决定用vue-video-player插件实现。 一.视频插件引入 1.在项目目录下安装插件 npm i vue-video-player -D 安装依赖 2.引入插件有两种方式 (1)在...
  • 看一下官方对Vant Weapp的介绍:Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 Vant框架已经设计好了大量的UI组件,在开发...
  • 目录导航登录微信小程序管理后台添加腾讯视频播放插件: 在uni-app中引入插件代码:指定整个小程序可使用:指定到对应的分包中使用:在pages.json全局配置文件中对要使用插件的页面配置如下条件编译代码: 在vue...
  • H5网页跳转微信小程序 通过使用微信开放标签,可便捷的跳转到微信小程序。 文章目录H5网页跳转微信小程序效果图一、小程序跳转按钮二、开放标签使用步骤1. 绑定域名2. 引入js文件3. config权限配置及ready处理4. ...
  • Mpvue,即使用vue的开发模式结合微信小程序api来开发微信小程序,好处是免去了学习原生小程序语法的时间,提高开发效率和保持框架一致性可复用。但mpvue自身也存在一些缺陷和vue对比的些许差异,所以从以下几个方面...
  • 需求:要做一个微信小程序,由于小程序里面图表实现有困难,需要h5实现(vue框架搭建的)嵌套到小程序里面,所以就涉及到相互通信的问题。 一.web-view内嵌的h5页面添加代码 1.安装js-sdk npm install weixin-js-...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 219
精华内容 87
关键字:

微信小程序引入vue

vue 订阅
微信小程序 订阅