分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

不是让 sticky 生效，而是它让“滚动事件这条水管”通了。sticky 一直在等水，你没开阀门。你看到的现象真正原因不写 onPageScroll 不生效系统不派发滚动写了就生效开启了滚动广播不传 scrollTop 也能用sticky 自己监听到了你这个不是偶然，是非常标准的微信机制 + vant 实现细节叠加导致的结果。如果你想，我可以帮你看你现在的页面结构是不是用了page-metaoverflow之类的，哪些会进一步影响滚动机制 😄。

小程序对分包的规划最好一开始就进行，否则后面重构会很麻烦

自定义tabbar

小程序自定义头部封装

小程序：swiper自定义点的样式

小程序使用分包异步化解决一个分包引入另一个分包的组件/函数的问题

一般情况下，onLoad 先执行有异步的情况下，谁执行的快谁先执行所以最好不要在 onLoad 和 onShow 里写一些有相关依赖的代码。

小程序页面滑动到顶部或者底部的时候会有橡皮筋的效果，有时候我们想去掉这个效果，可以用。加上这个橡皮筋效果就消失啦，而且这个属性不会影响 scroll-view 的滑动。，但是用这个属性问题很多，比如有和。今天教一种方式可以完美解决这个问题。

勾选上将 JS 编译成 ES5，即可解决。小程序开发插件时报错。

最近小程序发这种消息提示用户云开发付费调整，虽然我也没用，之前不知道怎么开通的，好像是开发者工具选择了云开发就不小心开通了，今天我们来看看怎么样关闭。第二步：点击设置 -> cloud1 -> 管理我的环境。

我们设置了container的样式为。

Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏览器中的开源深度学习框架。Paddle.js 可以加载提前训练好的 paddle 模型，或者将 paddle hub 中的模型通过 Paddle.js 的模型转换工具 paddlejs-converter 变成浏览器友好的模型进行在线推理预测使用。目前，Paddle.js 可以在支持 WebGL/WebGPU/WebAssembly 的浏览器中运行，也可以在百度小程序和微信小程序环境下运行。以上是：官方介绍近几年百度

我们知道，小程序插件中是无法使用 相关 API 的，官方文档 也有详细说明但是如果我们想做一个登录相关的插件，就是要获取用户手机号，改怎么做呢，可以用 引用小程序的自定义组件功能插件中的某一部分（不管是组件还是页面）都可以通过小程序传入一个组件来进行渲染。引入插件在小程序中按照这个路径 ，新建一个组件index.jsindex.wxmlindex.json插件端比如插件端有个页面，叫 auth-login-default，可以在 plugin.json 中查看。plugin.json.

通过 函数我们可以获取到当前页面路由信息，但是获取到的是一个路由栈，包含你跳转的所有路由。如下：比如我从A页面跳到B页面，就会有两条路由数据，0就是A页面，1就是B页面。如果我们只想看当前路由怎么办呢，可以简单封装一下。这里我封装了两个函数miniTools.js效果直接在开发者工具运行就能看到效果...

我们一般会有滚动到页面顶部、底部，或者滚动到某个元素的位置这种需求，在web中我们一般用 scroll 相关方法，具体可以看 js：可能是最全的scroll相关的方法，那么在小程序中，我们一般使用 wx.pageScrollTo滚动到顶部...

小程序插件中如何调用wx.login等API

微信小程序新出的 API，可以以半屏的形式，打开另一个小程序。这种方式和之前的跳转小程序方式相比，优势是：不用弹框了，减少用户操作有主次解构，适合打开一些工具型的小程序。那么如何使用呢？实践我这里简单封装了一个函数：export const openHalfMini = (detectId) => { const platform = wx.getSystemInfoSync().platform if (platform !== 'android') { wx.sh

优快云话题挑战赛第1期活动详情地址：https://marketing.youkuaiyun.com/p/bb5081d88a77db8d6ef45bb7b6ef3d7f参赛话题：前端学习记录话题描述：记录前端学习过程中的某个知识点、解决方案等等文章目录问题实践总结问题在我们开发小程序过程中，如果想像 vue 一样使用全局组件是不行的，必须将组件一个一个引入到响应的页面，这是因为小程序每个页面都是一个线程，没有像 vue 那种有顶级的 dom。那么如果我们想做一个全局组件又不想每个页面都分别引入该.

背景小程序中获取手机号的 API 官方文档使用该 API 有前提是：1、先调用 wx.login 接口2、非个人开发者，且完成了认证的小程序开放（不包含海外主体）实践<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>Page({ getPhoneNumber (e) { console.log(e.detail.errMsg) consol

小程序使用 miniprogram-ci 自动打包报错：解决：升级项目中的 postcss-less 到最新版本 npm i postcss-less@latest --save-dev改好发现可以上传了，但是报错 Function("r", "regeneratorRuntime = r") is not a function。原因：https://developers.weixin.qq.com/community/develop/doc/0002ce07a58000a57c5da5e6456

小程序的 Http Rquest 请求是不是用的浏览器 Fetch API?不是， http request是由逻辑层发起，通过native去触发的，且不支持promise。小程序渲染再同一个线程么？小程序是双线程设计，即视图渲染与业务逻辑分别在运行在不同的线程中。这个设计主要是解决web技术中的一个痛点：web页面开发渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应或者白屏，体验糟糕。小程序为了更好体验，将页面的渲染线程和脚本线程分开设计在不同线程中执行，具体实现：● 视图v

背景我们知道，现在小程序是非常流行的，流行的原因是他有非常多的优点。但是目前的小程序大多是封闭型的，比如微信小程序只能在微信中运行，没法在其他的app中运行，类似的还有支付宝小程序、百度智能小程序、今日头条小程序。那么与之相对的，就是开放型的小程序，也就是让任何一个app都能支持小程序。这种技术难度很高，目前我知道的平台有FinClip、Uni-App。FinClip：就是让任何一个app都能支持小程序。Uni-App：开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小

背景想要短信唤起微信并引导用户关注公众号，经过调研这样是做不了的，但是我们发现可以通过短信唤起小程序，那么我们只需要在小程序中内嵌一个h5，用 h5 来引导跳转公众号就好了。那么我们拆解一下要做的事情：短信唤起小程序小程序webview内嵌h5h5跳转公众号1、短信唤起小程序https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/sms.html2、小程序webview内嵌h5第一步我们唤起小程序后

核心还是用了这个库https://github.com/szimek/signature_padhtmlindex.wxml回显<view wx:if="{{signatureUrl}}"> <image src="{{signatureUrl}}" class="preview"></image></view>画板<view class="signature"> <canvas class="signature__pa

小程序跳转小程序没有限制，只要提供 appId 就行wx.navigateToMiniProgram({ appId: '', path: `pages/index/index?code=`, envVersion: __BASE_URL__ === '测试环境' ? 'trial' : 'release', success(res) { console.log('跳转小程序成功') }})效果参考资料官方文档...

封装下载函数：downloadAllPic (imgData) { wx.showLoading({ title: '图片下载中' }) let uploadNum = 0 let picNum = 0 imgData.forEach((item, index, arr) => { if (item.imgUrl) { picNum++ wx.downloadFile({ url: item.imgUrl,

坑爹的，别用 cover-view 了，一堆问题。可以直接用 view 了，啥事没有

官方文档前提：记得在小程序后台添加 downloadFile 域名白名单//打开pdf文件wx.showLoading({ title: '加载中...',})wx.downloadFile({ url: 'pdf_url', success: function (res) { const filePath = res.tempFilePath wx.openDocument({ filePath: filePath, success: fun

需求在后台编辑富文本，小程序端展示，需要在富文本里面加上一个链接可以下载文件，或者跳转到另一个小程序。步骤npm i mp-html --save以wepy的引入方式为例<mp-html content="{{content}}" :copy-link="false" @linktap="linktap"/>// 这里只做了跳转链接和跳转小程序，下载文档之类的也是可以的linktap(e) { if (e.$wx.detail['data-appid']) {

背景小程序的分享只能从小程序触发，webview中的h5页面没法直接触发小程序分享。由于要分享的页面是webview中的某个页面，而webview作为一个容器，它是一个整体（不管webview内部的页面层级）作为小程序的一个页面的，我们所看到的页面跳转都是在这个容器中进行的。所以为了实现webview中的页面分享，需要先从嵌套在webview里的h5页面传递分享参数，并在小程序的webview页面中进行数据获取，把h5页面传递的数据作为小程序分享的参数。步骤1、h5通过postMessage给小程

主要代码在三个文件中1、该文件重要配置主题色// config/theme.js// 睿肤识别（skin）主题// 慧捷肌肤（dermoscopy）主题const themeData = { skinStyle: ` --themeColor: #fff; --themeBgColor: blue; `, dermoscopyStyle: ` --themeColor: #fff; --themeBgColor: red; `,}export default

问题小程序的 webview 引的 h5 页面，但是更新 h5 的代码，小程序这边的webview并没有更新，链接后面拼时间戳也不行解决修改 nginx 配置：http { # 把 on 改为 off sendfile on;}

<style lang="less">.item-form { radio-group { display: flex; flex-wrap: wrap; } checkbox { display: none; } .form-checkbox { display: flex; flex-direction: column; width: 156rpx; height: 136rpx; color: #3333

资料小程序接入NPM包开发实践weuivant-weappwux-weapplin-ui最简实现其实就是自定义组件，我们只需要把 miniprogram 指向我们的组件就好了，这样在我们点击构建 npm 的时候，就会将 miniprogram 对应的路径文件复制到 miniprogram_npm 中，这样我们就可以引入组件了。{ "name": "wux-weapp", "miniprogram": "packages/lib"}1、新建一个小程序2、在 components

1、插件里可以写页面和组件，但是插件页面不能后退传值，因为在插件的页面里是拿不到开发者端的页面栈的2、跳转时，只有开发者端到插件端的页面才能通过 js 跳转<navigator url="plugin-private://wx6ca39ea05e680ff4/pages/camera/camera">插件组件跳转到插件页面</navigator><navigator url="plugin://assist-photo/camera">插件组件跳转到插件页面

父传子父组件<view> <banner step="{{ step }}"></banner></view>Component({ data: { step: 2 })},{ "usingComponents": { "banner": "./components/banner/banner" }}子组件<view> <text>{{ step }}</text&g

背景首先说明，基于wepy2 的 npm 包开发，官方是有 bug 的，具体解决方法可以看这里 #2554完整代码这里是一个最简的实现步骤1、创建一个文件夹 wepy-plug-demo，创建 index.wpy，并初始化 npmmkdir wepy-plug-democd wepy-plug-demonpm init -ytouch index.wpy2、修改 package.json 的 main{ "name": "wepy-plug-demo", "version

我也是在找了好久，蓦然回首，这货竟然在官方文档。。。然我们来试一下<template> <div> <van-button type="primary">主要按钮</van-button> <van-button type="danger">危险按钮</van-button> </div></template><config>{ navigationBar

（1） 图片尽量都放在cdn上, 避免小程序打包体积过大（2）wepy目前不支持自动把px转为rpx, 所以复制css时，需要先手动粘贴到这个网站做一次转化。方法一：http://allan5.com/px2rpx/方法二：下载 vscode 插件 px to rpx，并在你项目中的 .vscode/settings.json 中配置以下代码"px-to-rpx.baseWidth": 375,"px-to-rpx.fixedDigits": 1,"px-to-rpx.autoRemovePre

首先h5页面跳回小程序，代码是在 h5 里面写的，详情看小程序web-view文档，这里用 vue 来举例。注意！！！这里指的是小程序web-view里的h5网页跳回到小程序，而不是一个 h5 跳转到小程序，如果想要 h5 跳转小程序请看 这篇文章代码首先在 index.html 里引入这段 js<div id="app"></div><!-- h5跳转小程序所需要 --><script src="//res.wx.qq.com/open/js/jwe