当前位置:首页 > 小程序 > 正文内容

微信小程序,「添加到我的小程序」提示,带有详细引导步骤,支持自定义导航栏。

nrta1101年前 (2022-03-01)小程序677

微信小程序中,提示用户点击右上角按钮,添加到我的小程序。

  • 长条状无干扰方式展示

  • 卡片状带详细引导步骤展示

  • 支持自定义导航栏

  • 支持横竖屏

  • 支持自动提示

screenshots.jpg

安装

方式一:npm

npm i --save wx-pin-prompt

然后,在微信开发者工具中执行 「构建 npm 」

方式二:直接下载源码

直接下载源码,添加到你的项目中

使用

在页面 json 文件 usingComponents 中添加组件

"pin-prompt": "/miniprogram_npm/wx-pin-prompt/pin-prompt"

在 wxml 文件中

<!-- 自动在第一次进入时,展示添加提示框,之后不再显示 -->
<pin-prompt auto name="我的小程序" logo="../pathtoyourlogo.png"></pin-prompt>
<!-- 展示带有详细引导步骤的提示框 -->
<pin-prompt show type="card" name="我的小程序" logo="../pathtoyourlogo.png"></pin-prompt>
<!-- 如果页面使用了自定义的导航栏 -->
<pin-prompt show customNavbar name="我的小程序" logo="../pathtoyourlogo.png"></pin-prompt>

warning注意:通过 npm 安装,可能会遇到在开发者工具报错 “渲染层网络层错误” 。可忽略。在真机上可以正常运行。

cs.png

源码下载:

点击下载(提取码:88q1)

qrcode_for_gh_95ec6d40e739_258.jpg

扫描二维码关注公众号

如在微信端,长按二维码即可关注

版权声明:本文由蚂蚁开源_H5游戏,微信小程序,蚂蚁大喇叭发布,如需转载请注明出处。

本文链接:http://www.zzfriend.com/post/31.html

分享给朋友:

相关文章

2048小游戏

2048小游戏

效果图:算法:该程序主要难度在用户滑动屏幕时值相同的cell合并 将空格标为0(我代码中是用的""表示空格),假设棋盘如下:0 2 0 20 0 0 00 0 0 20 0 0 0步骤:通过touch相关的事件函数确定用...

微信小程序,一个滑块拼图游戏

微信小程序,一个滑块拼图游戏

滑块拼图小游戏简介一个微信小程序游戏,基于 pixi.js 和 JetLua/fish 微信小游戏适配库实现。滑动进行方块拼接如何使用使用 npm i 安装依赖包使用 npm run build 进行项目构建使用 npm run dev 进...

微信小程序练手 - 小商城demo,源码弄明白了,你也就出师啦

微信小程序练手 - 小商城demo,源码弄明白了,你也就出师啦

背景无意中在网上看到一个小程序商城的视频教程,居然要收388元,真是太贵了。看到上面已经贴了个小程序二维码demo,既然有了,那就来照着做一个练练手吧。功能首页搜索分类购物车个人中心商品列表商品详情订单地址管理实现效果运行需要安装有微信开发...

微信招聘小程序

微信招聘小程序

微信小程序——微招聘简介只有前端,功能基本如图所示,部分功能可能有BUG,仅限学习交流使用。源码下载:点击下载...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。