微信小程序使用第三方插件

这篇具有很好参考价值的文章主要介绍了微信小程序使用第三方插件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里是使用npm方式安装第三方插件:

1,首先新建一个微信小程序项目并找到该项目的文件地址, 如下图:

微信小程序使用第三方插件

该项目中我以安装 weui插件为例进行演示。在上图中的目录中打开PowerShell窗口,先要进行npm 初始化,输入npm help init  ,默认回车下一步下一步就ok;

微信小程序使用第三方插件

2,输入命令:npm install weui-miniprogram --save 安装插件;

微信小程序使用第三方插件

安装完成,在项目文件中多出一个 node_modules 文件;

3,在编辑器中设置使用 npm 模块:

微信小程序使用第三方插件

4,在编辑器中构建npm安装的插件包,再次安装其他插件后都要构建一次;

微信小程序使用第三方插件

 构建完成后 在项目根地址 会多出一个文件夹  miniprogram_npm, (项目名字不同,该文件夹名字有区别)。

5,修改 app.json

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

6,引入组件:在想要引入组件的页面模块的 index.json 文件中 usingComponents 下引入组件;

微信小程序使用第三方插件

 微信小程序使用第三方插件

 效果:微信小程序使用第三方插件

使用 useExtendedLib扩展库的方式 引入并使用WeUI ,这种方式引入的组件将不会计入代码包大小。

①、在app.ison 中加入 useExtendedLib 字段

"useExtendedLib": {
    	    "weui": true
  	}
 ②、在所需要的页面的 json 文件中 加入 usingComponents 字段
"usingComponents": {
    	     "mp-uploader": "weui-miniprogram/uploader/uploader",
    	     "mp-cells": "weui-miniprogram/cells/cells",
    	     "mp-cell": "weui-miniprogram/cell/cell"
  	}

3: 调用文章来源地址https://www.toymoban.com/news/detail-483063.html

到了这里,关于微信小程序使用第三方插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 - 实现地图标点及导航功能,在地图上标记位置及第三方软件进行导航(无需授权,点击地址后直接打开地图并在地图上高亮标记位置、展示位置名称、详细地址,“去这里“ 可拉起外部第三方地图导航软件)

    网上的代码都太乱了,各种乱七八糟的授权验证等,很多朋友不知道如何下手。 实现了微信小程序开发中,用户无需弹框授权就能打开地图高亮显示某个位置,并且支持导航和计算路程距离等, 例如,每个商家都有店铺位置,当点击地址时在地图中显示该位置并可一键导航

    2024年02月16日
    浏览(33)
  • 微信小程序使用第三方ui组件库

    第三方的ui组件有很多,本篇文章主要介绍Vant Weapp。 https://vant-contrib.gitee.io/vant-weapp/#/quickstart 先在微信开发者工具终端通过命令安装vant weapp: 通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production 安装 0.x 版本 npm i vant-weapp -S --production 安装vant weap

    2024年02月12日
    浏览(37)
  • 微信小程序使用 npm 安装第三方包

    微信小程序支持使用 npm 安装第三方包。 在小程序根目录下执行 npm install 第三方包名 安装 npm 包。 点击开发者工具中的菜单栏: 工具 -- 构建 npm 完成构建。 就可以使用 npm 包了。

    2024年02月11日
    浏览(40)
  • 微信小程序使用webview打开第三方地址

    1、在page下创建一个webview目录文件包含index.js index.wxml,配置好路由 2、index.js 3、index.wxml 4、跳转 (地址后拼接参数需要转码) 注意:webview页面的title 取得是第三方地址的title标签的内容,且webview页面不支持自定义标题

    2024年02月10日
    浏览(38)
  • 微信小程序使用nginx跳转第三方url

    先在微信公众平台配置号域名   服务器域名和业务域名都配置好 然后微信小程序使用 web-view标签进行跳转 nginx配置:域名必须有ssl证书,不然还是访问不了 sub_filter如果nginx没装的话需要装一下 首先需要git安装 ngx_http_substitutions_filter_module git没安装:yum -y install git 安装了:

    2024年02月10日
    浏览(33)
  • 微信小程序使用第三方组件wxParse加载富文本html

    微信小程序 微信小程序加载富文本html 微信小程序富文本第三方组件wxParse wxParse 富文本html wxParse 是一个微信小程序富文本解析组件,支持支持Html及markdown转wxml。 wxParse gitHub地址:https://github.com/icindy/wxParse 目前项目已停止维护了,原因未知。 按照gitHub上的指,下载demo之后,

    2024年02月12日
    浏览(30)
  • 微信小程序第三方登录

    目录 小程序第三方登录操作流程如下: 1.第一步 2.第二步 2.第三步 4.第四步 5.第五步 注意:如果第一步没打印出来,看看微信模拟器上的Id有没有更改,或则去源码试图,weixinId更改 进入uniapp官网=Api=第三方服务=登录=微信小程序登录 创建一个触发事件,获取头像和名称 调用

    2024年02月13日
    浏览(46)
  • 微信小程序--引用第三方组件

    引用方式分为两种 1、使用npm安装 【方便更新 推荐】 2、直接引用dist文件 按需加载组件库中的组件可以使用 3、lin-ui 组件库中的配置 1、安装nodejs环境 2、使用命令行初始化package json文件 打开小程序根目录 使用npm init初始化 3、安装第三方组件 init之后打开小程序会发现多了

    2024年02月08日
    浏览(47)
  • 微信小程序跳转第三方页面

    使用web-view,官方说明web-view 承载网页的容器。会自动铺满整个小程序页面, 个人类型的小程序暂不支持使用 具体实现思路: 1、首先需要配置小程序的公众平台当中的开发管理选项的业务域名,具体看官方指引 2、在小程序当中新建一个页面文件来单独存放web-view组件,sr

    2024年02月11日
    浏览(38)
  • app第三方支付,微信小程序支付

    最近公司开发一个app,需要从app跳转到小程序去微信支付,当时在网上看了好长时间没有看到适合自己的,在这里记录一下,也方便自己以后可以再复习一下,毕竟本人脑子不太好使,只能记下来。 app跳转页面携带参数到小程序 小程序接收参数,拉起微信支付

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包