小程序
文章平均质量分 62
小程序
苦夏木禾
声明:如效果实现不符,请自己研究,不要随意甩锅
展开
-
小程序配置自定义tabBar及异形tabBar配置操作
自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。在自定义 tabBar 模式下为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。此时需要开发者提供一个自定义组件来渲染 tabBar,所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式,以保证 tabBar 层级相对较高。原创 2024-05-31 09:39:48 · 1261 阅读 · 1 评论 -
微信小程序如何自定义导航栏,怎么确定导航栏及状态栏的高度?导航栏被刘海、信号图标给覆盖了怎么办?
微信小程序如何自定义导航栏,怎么确定导航栏及状态栏的高度?导航栏被刘海、信号图标给覆盖了怎么办?原创 2024-01-09 09:30:59 · 2919 阅读 · 0 评论 -
小程序进入页面图片渲染会拉伸闪下变形,加载后显示正常的解决方案
从接口传递过来的图片,本身图片大小不是固定一个比例,全部渲染显示在页面上,会有唰得拉伸从大到小快速闪下变形的bug原创 2023-12-28 09:24:00 · 1186 阅读 · 0 评论 -
小程序安装Vant Weapp详细步骤,下载和npm安装版
注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为’./'即可。开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。原创 2023-06-01 15:24:45 · 1477 阅读 · 0 评论 -
微信小程序 构建npm报错: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,
微信小程序 构建npm报错: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内,原创 2023-06-01 14:55:26 · 1199 阅读 · 0 评论 -
微信小程序构建npm(js和ts)
微信小程序构建npm(js和ts)原创 2023-06-01 11:31:47 · 2986 阅读 · 0 评论 -
微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本
微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本原创 2022-07-22 14:02:16 · 2073 阅读 · 0 评论 -
记录几个微信小程序的组件库(原生开发使用)
Lin-UI地址:http://doc.mini.talelin.com/预览码:WuxUI地址:https://www.wuxui.com/#/最新维护2021年4月(截止至2022年4月)预览码:Vant Weapp地址:https://vant-contrib.gitee.io/vant-weapp/#/home预览码:MP-CU原colorUI3.0地址:https://mp.color-ui.com/预览码:ThorUI地址:https://thorui.cn原创 2022-04-07 09:43:45 · 657 阅读 · 0 评论 -
微信小程序canvas画布不清晰解决方法
绘制的图片,文字等十分模糊添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr)完整代码:<!-- canvas.wxml --><canvas type="2d" id="myCanvas"></canvas&原创 2021-12-12 14:56:55 · 3798 阅读 · 2 评论 -
最新 Canvas 2D 接口----小程序的Canvas 实例使用说明
之前一直用的CanvasContext,但是微信又双叒改规则了,在新版的基础库中不再支持,提供了一个Canvas实例代替。 这个Canvas实例需要用SelectorQuery来获取,SelectorQuery又需要wx.createSelectorQuery()来获取。官网文档这一点写的是真垃圾,一层套一层一点也不清晰(╬◣д◢)代码原创 2021-08-06 17:00:28 · 3985 阅读 · 3 评论 -
uniapp 微信小程序 全局点亮所有页面的 ‘发送给朋友‘ 和 ‘分享朋友圈‘,mixin
uniapp 微信小程序 全局点亮所有页面的 '发送给朋友' 和 '分享朋友圈'局部配置全局配置原生微信小程序写法uniapp写法小程序离不了分享,但默认是没有办法进行分享发送的,需要在页面进行配置局部配置在页面下,和data同级onShareAppMessage(){//点亮发送给朋友 return { title: '自定义转发标题',//标题 path: '/page/user?id=123'//路径 }},onShareTimeline() {}//点亮原创 2021-04-19 16:53:23 · 1935 阅读 · 1 评论 -
微信小程序授权登陆 getUserProfile
小程序发了篇公告小程序登录、用户信息相关接口调整说明将授权登陆获取用户信息的接口调整了,新增了一个wx.getUserProfile。特说明一下授权登陆的注意事项:原授权登陆流程不变,依旧是#mermaid-svg-EbfzcCs9QlTDyUbv .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-Ebf原创 2021-03-24 13:56:29 · 8263 阅读 · 0 评论 -
微信小程序支付前端及后台分析
小程序支付前端小程序后端 PHP统一下单支付回调前端小程序请求后端获取数据,将价格名称等有关信息(看项目具体需求)传递过去,获取以下参数:参数名数据类型说明timeStampstring时间戳,从 1970 年 1 月 1 日 00:00:00 至今的秒数,即当前的时间nonceStrstring随机字符串,长度为32个字符以下packagestring统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=***payS原创 2021-03-14 17:56:54 · 597 阅读 · 0 评论 -
小程序canvas画base64图片预览不显示解决方法
在小程序上canvas画base64图片时,在开发工具上显示,真机调试也显示,就是预览时不显示,数据也请求到了,解决方法:假设code是你请求的base64图片、画布的canvas-id为firstCanvas。将base64图片缓存至本地:const fs = wx.getFileSystemManager();//声明文件系统//随机定义路径名称var times = new Date().getTime();//当前时间,防止与其他文件重复var codeimg = wx.env.US原创 2021-01-10 15:11:02 · 2381 阅读 · 1 评论 -
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js、vue中拦截ajax的方法,介绍是必看的,也是一些基础mockjs介绍总结mockjs拦截ajax在vue项目中使用mock拦截axios请求这一篇讲讲在小程序中的应用微信小程序为了让开发者更方便地开发小程序,开发者工具提供了 API Mock 的能力,可以模拟部分 API 的调用结果。以下内容是按照官方文档中整理的使用打开小程序项目在工具调试面板顶部的 Tab中打开mock,点+新建规则...原创 2020-12-14 15:04:43 · 3776 阅读 · 0 评论 -
小程序引入vant weapp的方法
官方文档https://youzan.github.io/vant-weapp/#/quickstart安装时不要按照官方的走流程:npm下载npm i @vant/weapp -S --production下载完的目录把里面的dist文件夹复制出来,放到项目的根目录,重命名为vantweapp现在的结构目录如下使用组件,以button为例,这是官方的引入,将红框中的复制,写在app.js中将路径改成这样"van-button": "vantweapp/but原创 2020-12-04 14:46:52 · 483 阅读 · 1 评论 -
小程序map的一些问题
来说一说小程序的map组件和API:createMapContext(mapId, this)先说map组件这次在项目中用到了在地图上做标记点并点击导航的效果用到map组件的makers点,一些常用值:发现几个不好的点,动态的修改中心点经纬度和缩放等级不管用。。。。。。然后就只能使用createMapContext(mapId, this)先声明方法之后是控制所有标记点显示还有一些其他的事件...原创 2020-08-20 11:22:33 · 379 阅读 · 0 评论 -
小程序的响应式图片
<image src="{{item.cover}}" class='' mode="widthFix" />通过将图片的mode属性设置成widthFix;只需要设置图片的宽度,其高度会自适应的变化,会保持原有比例原创 2020-08-17 17:06:13 · 304 阅读 · 0 评论 -
微信小程序iOS端问题记录
开一篇文章记录一下微信小程序在iOS端的问题1. wx.onBeaconUpdate执行多次问题描述:wx.onBeaconUpdate在iOS端被stopBeaconDiscovery停止了还是会执行两次,安卓端无问题,只执行一次wx.onBeaconUpdate(res => { console.log('设备扫描!'); //监听 iBeacon 设备的更新事件 that.devices = res.beacons; console.log(res.beacons);原创 2020-07-01 11:22:14 · 565 阅读 · 2 评论 -
微信小程序的两种背景播放(InnerAudioContext,BackgroundAudioManager)写法及区别
在小程序中,有两个音频播放,一个是InnerAudioContext(音频),一个是BackgroundAudioManager(背景音频)先说说这两个的区别:InnerAudioContextBackgroundAudioManager没有标题必须填写标题没有封面,专辑名,歌手等信息可填封面,专辑名,歌手等信息在小程序进入后台的时候会被暂停在小程序进入后台时依旧会播放手机状态栏不会有信息,微信内没有悬浮标志手机状态栏会有类似于QQ音乐的音乐框,微信内部有悬原创 2020-06-19 15:17:46 · 2469 阅读 · 0 评论 -
rich-text的换行
<rich-text :nodes="rich" style="word-break:break-all;"></rich-text>给rich-text添加styleword-break:break-all;即可原创 2020-06-19 10:35:34 · 4900 阅读 · 5 评论 -
用uniapp写小程序的可移动侧边栏
代码:<!-- 高度是当前屏幕可用高度-移动区域的高度,防止内容被滑出去 --><movable-area :style="'height:' + (res.windowHeight - 40) + 'px;position:fixed;top: 0px;right: 0px;bottom: 0;z-index: 100;'"> <movable-view direction="all"> <image src="../../static/logo.png原创 2020-06-07 16:25:13 · 816 阅读 · 0 评论 -
记录微信小程序联系客服
代码:<button open-type="contact">联系客服</button>将button的open-type属性,将其设置为contact,更多open-type属性在小程序后台添加客服,绑定后的客服帐号,可以登录网页端客服 或 移动端小程序客服,使用说明...原创 2020-06-07 11:23:58 · 508 阅读 · 0 评论 -
小程序展示附近的景点,酒店等信息
有时候会用到像下图这样的在某个页面中用map组件展示附近的一些景点,酒店等关键代码1.map组件官网介绍<map longitude="{{ longitude}}" latitude="{{ latitude}}" scale="8" markers="{{markers}}" style="width: 100%; height: 500px;"></map>这里主要用到这几个属性longitude中心经度latitude中心维度s原创 2020-06-03 14:27:12 · 813 阅读 · 0 评论 -
两个小程序之间的页面跳转及传参
打开另一个小程序wx.navigateToMiniProgram(Object object)代码示例及注释 wx.navigateToMiniProgram({ appId: 'APPID', //需要跳转的小程序的appid,必须是在app.json中配置的 path: 'pages/index/index?id='+e.target.dataset.a, //需要跳转的页面,不必填,默认首页,path 中 ? 后面的部分会成为 query,在小程序的 App.on原创 2020-06-03 11:17:46 · 1406 阅读 · 0 评论 -
小程序微信支付记录
前期准备1.小程序或公众号开通微信支付300/年认证费(到期前记得续费)同一主体(公司/营业执照)直接使用不同主体可以借用支付,被借用者在商户号平台授权借用者APPID,这样借用者就可以使用了2.商户号包含支付密钥.操作密钥(转账,提现时输入验证)支付域名需在后台注册在小程序上需添加APPID,IP白名单(服务器IP),密钥(secret)步骤code换取openid调用统一下单API接口回调发起支付(wx.requestPayment)需要条件APPIDsecr原创 2020-06-01 16:24:52 · 1195 阅读 · 0 评论 -
小程序的“v-model“
在vue中,使用v-model可以实现input的双向绑定,但是在小程序中没有"v-model"这种直接的方法,可以用事件实现类似功能://wxml<input placeholder="输入关键字" bindinput="bindKeyInput"></input><text>{{ sugData }}</text>//jsPage({ data: { sugData:'' }, bindKeyInput: functi原创 2020-05-11 14:16:06 · 6770 阅读 · 0 评论 -
canvas画布,小程序端画base64、网络图片
常用于保存海报,二维码等;除了画base64格式的图片,其他的在HTML、vue等一样;就拿一个例子来说吧:这是一个常见的邀请效果图,可以看成这几部分:1. 背景图2. 中间的白色背景图3. 中间的二维码4. 文字步骤1. 创建画布<canvas style="width: 380px; height: 600px;" canvas-id="firstCanvas" @c...原创 2020-04-08 19:49:18 · 2031 阅读 · 3 评论 -
小程序获取报错
有些后台请求的图片因替换删除等原因失效,报以下错误:通过监听将其替换原创 2020-03-25 16:53:00 · 259 阅读 · 0 评论