- We分析中的上报事件中如何导出具体数据?
项目的需求是,用户想要导出使用小程序的用户openid、unionid及进入的场景等信息,现用事件上报功能将openid、unionid上报,但在行为分析中选取这两个自定义字段并分组的话,就看不到进入场景的信息了。 所以想请问一下如何获取并导出相关的所有数据呢?
06-25 - 小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
在小程序中使用 vant 组件库主要有以下两种方式: 下载源代码包放入项目中,可以自己删掉没用到的组件,不过后期只能自己手动更新,会不太好维护 通过 npm 的方式安装管理依赖,后期更新可以直接交给 npm 来管理,方便维护 正常项目中我们可能都会选择 npm 的方式,但是这种方式 vant 和小程序并不支持像我们一般的前端项目中的按需引入,小程序开发工具构建 npm 时会把整个 vant 的组件编译到 miniprogram_npm 目录中,即使我们在项目中没有通过 usingComponents 申明引用的组件也会被打包进代码包中。 [图片] 减少代码包大小 因为小程序主包有 2M 的限制,如果我们本身只用到了几个组件,最终却打包进了整个组件库,这样不仅不合理也额外占用了咱小程序的包大小。想要按需引入的办法只能自己手动去把 miniprogram_npm 目录中没用到的组件删掉,然后再打包上传。不过每次我们提交版本都要这样去操作的话,不光容易出错也很费时间,这里我们就可以借助 node 和 npm 的 script 脚本来自动处理。 大体思路就是,先直接用 node 去自动扫描读取项目中所有 json 文件 中的 usingComponents,找出项目中实际有用到的 vant 组件,然后再去 miniprogram_npm/@vant/weapp 目录下将没有用到的多余组件删除掉就行了,最后直接把相关代码放到项目中的 script 脚本中操作,这样通过类似 npm run vant 这样一条命令 1 秒钟就可以删除掉未使用到的多余组件,实现了按需引入了。 未使用到的 vant 组件也会触发隐私协议 除了减少代码包大小这一项外,其实还有一个更大的痛点,vant 的部分组件会自动触发小程序的隐私协议,比如上传组件 uploader 中用到的:收集你选中的照片或视频信息(wx.chooseImage、wx.chooseMedia、wx.chooseVideo)、收集你选中的文件(wx.chooseMessageFile),这类 api 会自动触发隐私协议授权。 即使你的项目中压根没使用这类组件,上传版本提审的时候小程序还是会自动扫描你 miniprogram_npm 目录下的所有文件,只要代码中有相关的 api 代码就会认为你用到了,然后霸道地强制要求你填写和更新相关隐私说明,随便瞎填一个 99% 会被拒,也不能填写项目中未使用,这样那你自己说未使用就会让你先去把项目中相关的代码删掉再来提审。 vant-tree-shaking 为了方便使用,脚本代码已经封装成了一个 npm 包 vant-tree-shaking(https://www.npmjs.com/package/vant-tree-shaking )上传到了 npm 公共仓库中,大家可以直接通过 npm 来下载使用: 全局安装 [代码]npm install -g vant-tree-shaking [代码] 在小程序开发者工具中上传小程序代码前,直接在项目根目录终端中运行命令:vant-tree-shaking,成功后会在控制台打印出:vant-tree-shaking success。 本地安装 [代码]npm install -D vant-tree-shaking [代码] 需要自己在 package.json 配置文件中配置 script 脚本命令,如直接配置自定义命令 vant: [代码]{ "name": "miniapp", "version": "1.0.0", "main": "app.js", "scripts": { "vant": "vant-tree-shaking", }, "dependencies": { "@vant/weapp": "^1.11.5" }, "devDependencies": { "vant-tree-shaking": "^1.0.0" } } [代码] 在小程序开发者工具中上传小程序代码前,直接在项目根目录终端中运行命令:npm run vant,成功后会在控制台打印出:vant-tree-shaking success。 核心代码 主要用到了 node 的 fs、path 这两个模块,来处理文件、目录读取删除和路径的处理,其实也很简单,完整的源码可以参考 github 仓库(https://github.com/cafehaus/vant-tree-shaking ),有什么使用问题或建议也欢迎大家积极反馈。 [代码]// 1、扫描项目中的所有 json 文件,找出项目中使用到的所有 vant 组件 function readFile(filePath) { if (!filePath || !fs.existsSync(filePath)) return if (fs.statSync(filePath).isDirectory()) { let files = fs.readdirSync(filePath) || [] files.map(m => { if (!IGNORE_DIRS.includes(m)) { let curPath = path.join(filePath, m) readFile(curPath) } }) } else { getUsingComponents(filePath, vantSet) } } // 2、项目中使用到的 vant 组件依赖的其他 vant 组件 function readVantDir() { const files = fs.readdirSync(VANT_PATH) || [] files.map(m => { if (!COMMON_DIRS.includes(m) && vantSet.has(`van-${m}`)) { const curPath = path.join(VANT_PATH, m, 'index.json') getUsingComponents(curPath, dependentSet) } }) // 3、删除未使用到 vant 组件目录 const usedVant = new Set([...vantSet, ...dependentSet]) for (let i = files.length - 1; i >= 0; i--) { const cur = files[i] if (!COMMON_DIRS.includes(cur) && !usedVant.has(`van-${cur}`)) { const curPath = path.join(VANT_PATH, cur) deleteDir(curPath) } } console.log('vant-tree-shaking success') } /** * 读取 json 文件中的 usingComponents 属性值 * @param {*} filePath 路径 * @param {*} setList 存符合条件的 vant 组件名的列表 */ function getUsingComponents(filePath, setList) { if (!filePath || !fs.existsSync(filePath) || !isJsonFile(filePath)) return try { const data = fs.readFileSync(filePath, 'utf8') const json = JSON.parse(data) const usingComponents = json.usingComponents || {} for (const key in usingComponents) { if (key.startsWith('van-')) { setList.add(key) } } } catch (err) { console.error(err) } } [代码] 实际测试的一个项目,其中只使用到了 vant 的自定义导航栏 van-nav-bar 组件,没有按需引入时整个代码包大小 544KB,按需引入之后只有 156KB。除了代码包减少了以外,也不用再担心其他未使用到的组件默认触发隐私协议而被拒审了。
05-25 - 在小程序中愉快的使用 Tailwind CSS 吧!
[图片] 在小程序中愉快的使用 Tailwind CSS 吧! 把 [代码]tailwindcss JIT[代码] 思想带入小程序开发吧! 在小程序中愉快的使用 Tailwind CSS 吧! Usage uni-app (vue2/3) uni-app for vite (vue3) Taro v3 (React/vue2/3) remax (react) rax (react) 原生小程序(webpack5 mina) Options 配置项 使用 arbitrary values Q&A 1. 我在 [代码]js[代码] 里写了 [代码]tailwindcss[代码] 的任意值,为什么没有生效? 2. 一些像 [代码]disabled:opacity-50[代码] 这类的 [代码]tailwindcss[代码] 前缀不生效? 3. 和原生组件一起使用注意事项 4. 编译到 h5 注意事项 Related projects 模板 template 预设 tailwindcss preset Bugs & Issues 笔者之前写了一个 tailwindcss-miniprogram-preset,可是那个方案不能兼容最广泛的 [代码]Just in time[代码] 引擎,在写法上也有些变体。 于是笔者又写了一个 [代码]weapp-tailwindcss-webpack-plugin[代码],这是一个 [代码]plugin[代码] 合集,包含 [代码]webpack/vite plugin[代码],它会同时处理类 [代码]wxml[代码] 和 [代码]wxss[代码] 文件,从而我们开发者,不需要更改任何代码,就能让 [代码]jit[代码] 引擎兼容微信小程序。 此方案可兼容 [代码]tailwindcss v2/v3[代码],[代码]webpack v4/v5[代码],[代码]postcss v7/v8[代码]。 随着 [代码]@vue/cli-service[代码] v5 版本的发布,uni-app 到时候也会转为 [代码]webpack5[代码] + [代码]postcss8[代码] 的组合,到时候,我会升级一下 [代码]uni-app[代码] 的示例,让它从 [代码]tailwindcss v2 jit[代码] 升级到 [代码]tailwindcss v3 jit[代码] Usage uni-app (vue2/3) 使用方式 | Demo 项目 uni-app for vite (vue3) 使用方式 | Demo 项目 Taro v3 (React/vue2/3) 使用方式 | React Demo 项目 | vue2 Demo 项目 | vue3 Demo 项目 remax (react) 使用方式 | Demo 项目 rax (react) 使用方式 | Demo 项目 原生小程序(webpack5 mina) 使用方式 | Demo 项目 Options 配置项 配置项 类型 描述 [代码]htmlMatcher[代码] [代码](assetPath:string)=>boolean[代码] 匹配 [代码]wxml[代码]等等模板进行处理的方法 [代码]cssMatcher[代码] [代码](assetPath:string)=>boolean[代码] 匹配 [代码]wxss[代码]等等样式文件的方法 [代码]jsMatcher[代码] [代码](assetPath:string)=>boolean[代码] 匹配 [代码]js[代码]文件进行处理的方法,用于 [代码]react[代码] [代码]mainCssChunkMatcher[代码] [代码](assetPath:string)=>boolean[代码] 匹配 [代码]tailwindcss jit[代码] 生成的 [代码]css chunk[代码] 的方法 [代码]framework[代码] ([代码]Taro[代码] 特有) [代码]react[代码]|[代码]vue2[代码]|[代码]vue3[代码] 由于 [代码]Taro[代码] 不同框架的编译结果有所不同,需要显式声明框架类型 默认[代码]react[代码] [代码]customRuleCallback[代码] [代码](node: Postcss.Rule, options: Readonly<RequiredStyleHandlerOptions>) => void[代码] 可根据 Postcss walk 自由定制处理方案的 callback 方法 [代码]cssPreflight[代码] [代码]Record<string,string>[代码]| [代码]false[代码] 在所有 [代码]view[代码]节点添加的 [代码]css[代码] 预设,可根据情况自由的禁用原先的规则,或者添加新的规则。 详细用法如下: [代码]// default 默认: cssPreflight: { 'box-sizing': 'border-box', 'border-width': '0', 'border-style': 'solid', 'border-color': 'currentColor' } // result // box-sizing: border-box; // border-width: 0; // border-style: solid; // border-color: currentColor // case 禁用所有 cssPreflight: false // result // none // case 禁用单个属性 cssPreflight: { 'box-sizing': false } // border-width: 0; // border-style: solid; // border-color: currentColor // case 更改和添加单个属性 cssPreflight: { 'box-sizing': 'content-box', 'background': 'black' } // result // box-sizing: content-box; // border-width: 0; // border-style: solid; // border-color: currentColor; // background: black [代码] 使用 arbitrary values 详见 tailwindcss/using-arbitrary-values 章节 | Sample Q&A 1. 我在 [代码]js[代码] 里写了 [代码]tailwindcss[代码] 的任意值,为什么没有生效? 详见 issue#28 A: 因为这个插件,主要是针对, [代码]wxss[代码],[代码]wxml[代码] 和 [代码]jsx[代码] 进行转义的,[代码]js[代码] 里编写的 [代码]string[代码] 是不转义的。如果你有这样的需求可以这么写: [代码]import { replaceJs } from 'weapp-tailwindcss-webpack-plugin/replace' const cardsColor = reactive([ replaceJs('bg-[#4268EA] shadow-indigo-100'), replaceJs('bg-[#123456] shadow-blue-100') ]) [代码] 你不用担心把代码都打进来导致体积过大,我在 ‘weapp-tailwindcss-webpack-plugin/replace’ 中,只暴露了2个方法,代码体积 1k左右,esm格式。 2. 一些像 [代码]disabled:opacity-50[代码] 这类的 [代码]tailwindcss[代码] 前缀不生效? 详见 issue#33,小程序选择器的限制。 3. 和原生组件一起使用注意事项 假如出现原生组件引入报错的情况,可以参考 issue#35 ,忽略指定目录下的文件,跳过插件处理,比如 [代码]uni-app[代码] 中的 [代码]wxcomponents[代码]。 如何更改?在传入的配置项 [代码]cssMatcher[代码],[代码]htmlMatcher[代码] 这类中过滤指定目录或文件。 4. 编译到 h5 注意事项 有些用户通过 [代码]uni-app[代码] 等跨端框架,不止开发成各种小程序,也开发为 [代码]H5[代码],然而 [代码]tailwindcss[代码] 本身就兼容 [代码]H5[代码] 了。此时你需要更改配置,我们以 [代码]uni-app[代码] 为例: [代码]const isH5 = process.env.UNI_PLATFORM === 'h5'; // 然后在 h5 环境下把 webpack plugin 和 postcss for weapp 给禁用掉 // 我们以 uni-app-vue3-vite 这个 demo为例 // vite.config.ts import { defineConfig } from 'vite'; import uni from '@dcloudio/vite-plugin-uni'; import { ViteWeappTailwindcssPlugin as vwt } from 'weapp-tailwindcss-webpack-plugin'; // vite 插件配置 const vitePlugins = [uni()]; !isH5 && vitePlugins.push(vwt()); export default defineConfig({ plugins: vitePlugins }); // postcss 配置 // 假如不起作用,请使用内联postcss const isH5 = process.env.UNI_PLATFORM === 'h5'; const plugins = [require('autoprefixer')(), require('tailwindcss')()]; if (!isH5) { plugins.push( require('postcss-rem-to-responsive-pixel')({ rootValue: 32, propList: ['*'], transformUnit: 'rpx' }) ); plugins.push(require('weapp-tailwindcss-webpack-plugin/postcss')()); } module.exports = { plugins }; [代码] Related projects 模板 template uni-app-vite-vue3-tailwind-vscode-template uni-app-vue3-tailwind-vscode-template uni-app-vue2-tailwind-vscode-template weapp-native-mina-tailwindcss-template 预设 tailwindcss preset tailwindcss-miniprogram-preset Bugs & Issues 目前这个插件正在快速的开发中,如果遇到 [代码]Bug[代码] 或者想提出 [代码]Issue[代码] 欢迎提交到此处 <!-- ## 关于其他小程序 处理了其他小程序的: [代码]/.+\.(?:wx|ac|jx|tt|q|c)ss$/[代码] 样式文件和 [代码]/.+\.(?:(?:(?:wx|ax|jx|ks|tt|q)ml)|swan)$/[代码] 各种 [代码]xxml[代码] 和特殊的 [代码]swan[代码] -->
2022-05-16 - 可以在小程序内判断用户是否关注公众号吗?
可以在用户使用小程序时判断用户有没有关注公众号,并进行提醒呢?
2017-12-26 - 小程序如何判断用户是否关注公众号?
[图片] 这个接口可以获取是否关注标识,但是openid怎么获取,能不能通过unionid获取? 求助!!!
2021-05-28 - 如何让微信小程序的全部页面重新加载一遍
比如我点击一个按钮,那么小程序中的全部页面,全部重新加载,就类似重新打开一次小程序
2019-02-26 - 修改小程序swiper组件面板指示点样式
修改当前显示眯的宽度及圆角值,记得加!important;如下所示: .wx-swiper-dot-active{ width:25px !important; border-radius: 5px !important; }
2021-07-16 - 小程序页面之间跳转的时候,怎么传递参数?
小程序页面之间跳转的时候,怎么传递参数?哪位大神知道?
2017-03-31 - 动态预加载 swiper-item 中的图片(延迟加载)
在使用 swiper 时,有些场景需要一次载入的图片太多,消耗资源的同时也会影响用户体验。 [图片] 自己的解决方法是这样的: 创建图片【地址数组】根据需要展示图片的总数创建一个空的数组,即用来页面绑定的【页面数组】初始化【页面数组】,为第 1、2 项赋值当向右滑动时,接着为【页面数组】的第 3 项赋值直到全部展示完毕[图片] 如果用户提前离开,就能避免未展示项图片的加载。 代码如下: <view class="s-page"> <swiper class="s-swiper" snap-to-edge="false" indicator-dots="true" bindchange="swiperChange"> <block wx:for="{{pageList}}" wx:key="*this"> <swiper-item class="s-swiper_item"> <view>{{item}}</view> </swiper-item> </block> </swiper> </view> Page({ /** * 页面的初始数据 */ data: { imageUrlList: ['url 1', 'url 2', 'url 3', 'url 4', 'url 5', 'url 6', 'url 7'], pageList: [], currentPageIndex: 0 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 根据图片总数,创建需要渲染的空数组 let pageList = new Array(this.data.imageUrlList.length).fill(''); // 初始化渲染数组,载入第1张,并且预载入下一张 pageList[this.data.currentPageIndex] = this.data.imageUrlList[this.data.currentPageIndex]; pageList[this.data.currentPageIndex + 1] = this.data.imageUrlList[this.data.currentPageIndex + 1]; // 渲染页面 this.setData({ pageList: pageList }) console.log(this.data.pageList); }, swiperChange: function (e) { let oldPageIndex = this.data.currentPageIndex, // 之前展示的页面索引 newPageIndex = e.detail.current; // 滑动后新展示的页面索引 // 判断是否由用户触摸引起的 if (e.detail.source == 'touch') { console.log(newPageIndex); // 判断滑动方向 if (oldPageIndex < newPageIndex) { console.log('向右滑动'); // 判断是否到最后一张,并且地址信息是否为空 if (newPageIndex < this.data.imageUrlList.length - 1 && !this.data.pageList[newPageIndex + 1]) { this.data.pageList[newPageIndex + 1] = this.data.imageUrlList[newPageIndex + 1] console.log('预加载成功'); } // 渲染页面 this.setData({ currentPageIndex: newPageIndex, pageList: this.data.pageList }) } else if (oldPageIndex > newPageIndex) { console.log('向左滑动'); this.data.currentPageIndex = newPageIndex; } } console.log(this.data.pageList); } }) 如果不显示“面板指示点”,那么【页面数组】直接创建一个空数组即可。 自己的笨办法,如果有更好的方法,请不吝赐教!
2021-07-07