[图片] 原生小程序开发如何使用 tailwindcss 原生小程序开发如何使用 tailwindcss 前言 什么是 [代码]weapp-tailwindcss[代码] ? 0. 准备环境以及小程序项目 1. 安装与配置 [代码]tailwindcss[代码] 0. 使用包管理器安装 [代码]tailwindcss[代码] 1. 在项目目录下创建 [代码]postcss.config.js[代码] 并注册 [代码]tailwindcss[代码] 2. 配置 [代码]tailwind.config.js[代码] 3. 引入 [代码]tailwindcss[代码] 2. 安装这个插件并运行 安装插件 执行初始化命令 开始运行 想要了解更多 前言 很荣幸从 [代码]weapp-tailwindcss[代码] 的 [代码]3.2.0[代码] 版本开始 已经可以支持 [代码]微信开发者工具[代码]，直接创建的 小程序项目了 (包括 [代码]skyline[代码] 引擎) 什么是 [代码]weapp-tailwindcss[代码] ? 在我们日常的小程序开发中，由于小程序本身有自己的一套 独特的 技术规范标准。这导致你无法使用 [代码]web[代码] 中很多的特性。 你也无法 直接 使用像 [代码]tailwindcss[代码] 这种原子化 [代码]css[代码] 生成工具，来大幅加快你的开发速度。 而 [代码]weapp-tailwindcss[代码] 就能让你，在小程序开发中使用 [代码]tailwindcss[代码] 里的大部分 特性，加快开发小程序整体的效率。 从本质上来看，它是一个转义器。它负责把 [代码]tailwindcss[代码] 中，所采集到的类名，以及生成的结果，转化成小程序中可以接受的方式。 现在，就让我们开始使用吧！ 0. 准备环境以及小程序项目 首先，你需要准备 [代码]nodejs[代码] 环境，nodejs 官方下载地址 请确保你安装的 [代码]nodejs[代码] 版本 [代码]>=16.6.0[代码]。目前低于 [代码]16[代码] 的长期维护版本(偶数版本) 都已经结束了生命周期，建议安装 [代码]nodejs[代码] 的 [代码]LTS[代码](目前是 20) 版本， 然后，你可以使用 [代码]微信开发者工具[代码] 创建一个小程序项目, 原生 [代码]js[代码]/[代码]ts[代码] 或者 [代码]skyline[代码] 的 [代码]js[代码]/[代码]ts[代码] 项目皆可。 这样我们的前置准备工作就完成了！ 1. 安装与配置 [代码]tailwindcss[代码] 这里我们以最基础的 小程序 [代码]js[代码] 项目为例，进行操作 0. 使用包管理器安装 [代码]tailwindcss[代码] 首先，假如你项目目录下，没有 [代码]package.json[代码] 文件, 你需要执行命令，或者手动创建一下: 运行 [代码]npm init -y[代码] 命令，快速创建一个 [代码]package.json[代码] 文件在你的项目下 然后执行: [代码]# 使用你喜欢的任意 npm / yarn / pnpm npm install -D tailwindcss postcss # 初始化 tailwind.config.js 文件 npx tailwindcss init [代码] 这样 [代码]tailwindcss[代码] 就被安装到你项目本地了 1. 在项目目录下创建 [代码]postcss.config.js[代码] 并注册 [代码]tailwindcss[代码] 内容如下: [代码]module.exports = { plugins: { tailwindcss: {}, }, }; [代码] 这个文件和 [代码]tailwind.config.js[代码] 平级 2. 配置 [代码]tailwind.config.js[代码] [代码]tailwind.config.js[代码] 是 [代码]tailwindcss[代码] 的配置文件，我们可以在里面配置 [代码]tailwindcss[代码] 的各种行为。 这里给出了一份 微信小程序 通用示例，具体要根据你自己项目的目录结构进行配置 [代码]/** @type {import('tailwindcss').Config} */ module.exports = { // 假如你使用 ts 开发，则需要在下方的 glob 表达式中，把 ts 后缀配置进去 content: ["**/*.{js,wxml}", "!node_modules/**", "!dist/**"], corePlugins: { // 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发小程序和 h5 端，你应该使用环境变量来控制它 preflight: false, }, }; [代码] 3. 引入 [代码]tailwindcss[代码] 在你的小程序项目入口 [代码]app.wxss[代码] 文件中，引入 [代码]tailwindcss[代码] 使它在小程序全局生效 [代码]@tailwind base; @tailwind components; @tailwind utilities; [代码] 接下来，赶紧进入下一步，安装 [代码]weapp-tailwindcss[代码] 并运行吧！ 2. 安装这个插件并运行 安装插件 在项目目录下，执行: [代码]# npm / yarn /pnpm npm i -D weapp-tailwindcss @weapp-tailwindcss/cli [代码] 这样 [代码]weapp-tailwindcss[代码] 和 [代码]cli[代码] 工具就被安装在你的本地了 执行初始化命令 在命令行中运行 [代码]npx weapp-tw init [代码] 对现有的原生小程序项目，进行 [代码]weapp-tailwindcss[代码] 的初始化 执行后，会发现主要有三个文件改动，[代码]CLI[代码] 主要做了 [代码]3[代码] 件事情: 创建 [代码]weapp-tw.config.js[代码] 文件，这个是 [代码]@weapp-tailwindcss/cli[代码] 的配置文件 修改 [代码]package.json[代码], 添加 [代码]dev[代码] 和 [代码]build[代码] 开发和构建脚本, 和 [代码]postinstall[代码] 脚本 修改 [代码]project.config.json[代码] 内容，来适配构建产物 开始运行 使用 [代码]npm run dev[代码] 进入开发模式, 此时是有热更新的，主要用于开发 使用 [代码]npm run build[代码] 进行构建 构建产物默认都在 [代码]dist[代码] 目录 然后打开微信开发者工具，直接导入这个目录，即可预览效果! 想要了解更多 当然这个解决方案，其实不止限于微信开发者工具这个平台，也可以通过配置，适配更多的平台。 假如你想了解更多，欢迎访问 weapp-tw.icebreaker.top 或在 weapp-tailwindcss/discussions 中，与我们进行讨论，发表你的建议和意见。 PR is also Welcome!

在日常应用中，半屏可拖拽交互已经成为了用户体验的重要组成部分。页面内的分段式拖拽、半屏拖拽放大等等，这些常见的场景使用半屏拖拽交互可以很好的提升用户的体验感。 目前，实现半屏拖拽交互可以使用手势协商系统来实现，不过需要理解手势协商系统并编写相关代码。 考虑到半屏拖拽交互比较常见，为了让小程序开发者更加轻松地实现半屏拖拽交互，小程序 Skyline 渲染引擎推出了 draggable-sheet 组件。这个组件自带半屏拖拽交互，可以帮助开发者省去手势协商相关的代码，只需要简单配置容器大小、吸附阈值等参数即可实现半屏拖拽交互。无论是半屏弹窗、分段式半屏还是其他场景，draggable-sheet 组件都能帮助你实现更加出色的用户体验。 快速接入 使用 draggable-sheet 组件的流程如下： Step 1. 配置 draggable-sheet 组件 在页面中引入 draggable-sheet 组件，并且配置 draggable-sheet 组件的参数，包括容器大小、吸附阈值等。 在 draggable-sheet 组件内嵌套 scroll-view 组件，且声明 associative-container="draggable-sheet" 将 scroll-view 组件与 draggable-sheet 组件进行关联即可。 <!-- page.wxml --> <draggable-sheet   class="sheet"   initial-child-size="0.5"   min-child-size="0.2"   max-child-size="0.8"   snap="{{true}}"   snap-sizes="{{[0.4, 0.6]}}" >   <scroll-view     scroll-y="{{true}}"     type="list"     associative-container="draggable-sheet"     bounces="{{true}}"   >   <!-- 这里放置半屏内容 -->   </scroll-view> </draggable-sheet> Step 2. 使用 DraggableSheetContext 接口控制滚动 使用 createSelectorQuery 方法获取 draggable-sheet 组件的节点，然后通过 node 方法获取 DraggableSheetContext 实例。调用 DraggableSheetContext.scrollTo 即可将 draggable-sheet 组件 滚动到指定位置。 // page.js Page({   onReady() {     this.createSelectorQuery().select('.sheet').node().exec(res => {       // 使用 sheetContext 控制 draggable-sheet 组件的滚动       const sheetContext = res[0].node       sheetContext.scrollTo({         size: 0.7,         animated: true,         duration: 300,         easingFunction: 'ease'       })     });   }, }); 使用 draggable-sheet 组件，你可以轻松实现半屏拖拽交互，让用户体验更加自由。同时，使用 DraggableSheetContext 接口，你可以动态控制 draggable-sheet 组件的行为，实现更加灵活的交互效果。  例如，我们这里演示了使用 draggable-sheet 实现的 分享弹窗效果 和 分段式拖拽查看旅游景点列表～ [图片][图片] 与其他组件联动  除了简单的半屏弹窗之外，我们还可以通过 worklet:onsizeupdate 回调，在 draggable-sheet 组件尺寸发生变化时，将 draggable-sheet 组件与其他组件进行动画交互。 例如，我们这里在 draggable-sheet 接近搜索框时，与搜索框衔接为一体，隐藏后面的页面，以此实现更流畅的展示效果。 首先，给 draggable-sheet 配置监听函数 worklet:onsizeupdate="onSizeUpdate" <!-- page.wxml --> <view class="search-wrp"> ... </view> <draggable-sheet  class="sheet"  ...  worklet:onsizeupdate="onSizeUpdate" > 然后，我们在 onSizeUpdate 发生变化时，通过 worklet 函数改变共享变量的值即可 Page({   // 监听 draggable-sheet 尺寸变化去改变 progress onSizeUpdate(e) { 'worklet' const distance = sheetHeight - e.pixels this.progress.value = distance >= 20 ? 1 : distance / 20 }, onLoad(options) { const progress = wx.worklet.shared(1) // 绑定 worklet 动画，progress 变化时改变搜索的背景来显示/隐藏 map this.applyAnimatedStyle('.search-wrp', () => { 'worklet' const t = progress.value return { backgroundColor: `rgb(245, 242, 241, ${1 - t})`  } }) ... this.progress = progress }, }) [图片] 如果想要快速了解和实践本文中的案例，可在 PC 端点击 代码片段 进行调试。 注意：draggable-sheet 组件支持页面内的拖拽放大功能，如果需要实现页面返回的功能，可以使用 预设路由 来实现。 总结 draggable-sheet 组件通过拖拽的方式来展开或关闭一个面板，提供更加直观、自然的用户交互体验。不仅能够节省屏幕空间，让用户更加高效地利用界面，适用于展示评论列表、商品列表、展开筛选条件、展示更多信息等场景。对于需要提供更加灵活、自由的用户交互体验的小程序来说，draggable-sheet 组件是一个非常有用的功能。 因此，我们邀请大家尝试将这个能力应用到自己的小程序上，通过这个组件来提升用户体验和交互效果。结合其他组件和功能，打造出更加丰富、多样的小程序～

微信小程序 – 基于 movable-view 实现拖拽排序 项目基于[代码]colorui[代码]样式组件 ColorUI组件库 (color-ui.com) 1.实现效果 [图片] 2. 设计思路 movable-view 绑定块移动事件的 块[代码]ID[代码] ,块移动的坐标 移动结束后触发[代码]moveEnd[代码]事件，根据[代码]Y[代码]坐标对对象数组进行排序 根据排序结果重置块位置 3.实现代码 代码已经进行了最简化处理 图中效果实现需引入[代码]colorui[代码]的[代码]main.wxss[代码]样式部分。 wxml [代码]<movable-area class="padding text-center bg-grey" style="width:100%;height:500px;" > <movable-view class="radius shadow bg-white" style="width:80%;height:80px;z-index:{{index==moveId?2:1}}" wx:for="{{tabList}}" wx:key="index" x="{{item.x}}" y="{{item.y}}" direction="all" bindchange="moveStatus" bindtouchend='moveEnd' data-moveid="{{index}}"> {{item.name}}</movable-view> </movable-area> [代码] js [代码]var compare = function (obj1, obj2) { var val1 = obj1.y; var val2 = obj2.y; if (val1 < val2) { return -1; } else if (val1 >= val2) { return 1; } else { return 0; } } Page({ /** * 页面的初始数据 */ data: { branchid:'', appdocid:'', tabList:[ { name:'十步杀一人' }, { name:'千里不留行' }, { name:'事了拂衣去' }, { name:'深藏身与名' } ], //移动的是哪个元素块 moveId:null, //最终停止的位置 endX:0, endY:0 }, initMove(){ let tabList = this.data.tabList; var tarr = [] tabList.forEach(function(ele,index){ let obj = ele obj.id = index obj.x = 30 obj.y = 100*index +20 tarr.push(obj) }) console.log(tarr) this.setData({ tabList:tarr }) }, moveEnd(e){ console.log(e) var that = this; that.setData({ ["tabList["+that.data.moveId+"].x"]:that.data.endX, ["tabList["+that.data.moveId+"].y"]:that.data.endY },()=>{ let tabList = this.data.tabList; tabList = tabList.sort(compare); that.setData({ tabList },()=>{ setTimeout(function(){ that.initMove(); },500) }) }) //计算位置 }, moveStatus(e){ // console.log(e) //移动的块ID var moveid = e.currentTarget.dataset.moveid; //最终坐标 let x = e.detail.x let y = e.detail.y this.setData({ moveId:moveid, endX:x, endY:y }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { this.initMove(); } }) [代码] 4.参考文档 movable-view | 微信开放文档 (qq.com)

大家好！ 请教大家一个关于海外地图的问题： 我们的客户主要需要在国外使用小程序，比如日本。我们测试中发现。打开地图时默认是腾讯地图。定位的地址是日本，但是除了一个红点坐标没有任何细节信息。放大到一定程度后会自动变成bing地图，这时该有的地图细节才出现。平移到中国后自动变成腾讯地图，该有的地图细节都直接出现。再移动出国又变成bing地图。是否可以理解，微信自己内部做了处理，根据查看地址在腾讯地图和bing地图间自动切换。只不过因为默认地图是腾讯地图，所以第一次进入地图时是腾讯地图的界面。可以如上理解吗？ 另，虽然是两张地图，但是因为api一样，对开发者来说用法都一样不用关心api之后的东西。可以这样理解吗？ 请大家指教，谢谢！

更新时间：2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题，对于来自低于2.27.1版本的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称。 更新时间：2022年9月28日考虑到近期开发者对小程序用户头像昵称获取规则调整的相关反馈，平台将接口回收的截止时间由2022年10月25日延期至2022年11月8日24时。 调整背景在小程序内，开发者可以通过 wx.login 接口直接获取用户的 openId 与 unionId 信息，实现微信身份登录，支持开发者在多个小程序或其它应用间匿名关联同一用户。 同时，为了满足部分小程序业务中需要创建用户的昵称与头像的诉求，平台提供了 wx.getUserProfile 接口，支持在用户授权的前提下，快速使用自己的微信昵称头像。 但实践中发现有部分小程序，在用户刚打开小程序时就要求收集用户的微信昵称头像，或者在支付前等不合理路径上要求授权。如果用户拒绝授权，则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下，用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况，作出如下调整。 调整说明自 2022 年 10 月 25 日 24 时后（以下统称 “生效期” ），用户头像昵称获取规则将进行如下调整： 自生效期起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。自生效期起，插件通过 wx.getUserInfo 接口获取用户昵称头像将被收回：生效期后发布的插件新版本，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。生效期前发布的插件版本不受影响，但如果要进行版本更新则需要进行适配。通过 wx.login 与 wx.getUserInfo 接口获取 openId、unionId 能力不受影响。「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本），具体实践可见下方《最佳实践》。小程序 wx.getUserProfile 与插件 wx.getUserInfo 接口兼容基础库 2.27.1 以下版本的头像昵称获取需求：对于来自低版本的基础库与微信客户端的访问，小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称，插件通过 wx.getUserInfo 接口将正常返回用户头像昵称，开发者可继续使用以上能力做向下兼容。对于上述 3，wx.getUserProfile 接口、wx.getUserInfo 接口、头像昵称填写能力的基础库版本支持能力详细对比见下表： [图片] *针对低版本基础库，兼容处理可参考 兼容文档 请已使用 wx.getUserProfile 接口的小程序开发者和已使用 wx.getUserInfo 接口的插件开发者尽快适配。小游戏不受本次调整影响。 最佳实践小程序可在个人中心或设置等页面使用头像昵称填写能力让用户完善个人资料： [图片] 微信团队 2022年5月9日

[图片]

[图片][图片]

为了帮助开发者更好地为用户提供服务，降低开发者使用 URL Scheme 和 URL Link 的成本，自 2023 年 12 月 19 日起，微信团队将对 URL Scheme 和 URL Link 进行如下优化： 1、新增明文 URL Scheme，开发者无需调用接口可自行拼接并且生成明文 Scheme； 2、取消 URL Scheme 和 URL Link 打开端一人一链的限制，支持同一条链接被多名用户访问； 3、新增打开端限制：每个小程序每天 URL Scheme 和 URL Link 总打开次数上限为 300 万次。 一、新增明文 URL Scheme开发者无需调用平台接口，可自行根据如下格式拼接 appid 和 path 等参数，作为 URL Scheme 链接。 weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION* 其中各参数含义如下： [图片] 注意： 1、为保护开发者，通过明文 URL Scheme 拉起的小程序（页面）必须要提前在「小程序管理后台 -> 设置 -> 隐私与安全 -> 明文 scheme 拉起此小程序」中进行声明； 小程序：配置能够通过明文 scheme 进入的小程序页面[图片] 小游戏：打开开关即可通过明文 scheme 拉起小游戏[图片] 2、通过明文 URL Scheme 打开小程序的场景值为 1286； 3、明文 URL Scheme 不受每天 50 万次的生成量限制； 4、明文 URL Scheme 没有有效期的概念，可长期有效； 5、明文 URL Scheme 没有一人一链的打开限制，支持一条链接同时被多名用户访问。 二、原 URL Scheme 升级为加密 URL Scheme，并支持自行拼接参数目前已对外提供的 URL Scheme 能力平滑升级为加密 URL Scheme，取消一人一链的限制，支持开发者自行在链接后拼接参数*CUSTOM PARAMETER*。 注意：之前通过平台接口生成的 URL Scheme 可继续使用，链接自动可支持多人打开。 URL Scheme格式 weixin://dl/business/?t=*TICKET*&cq=*CUSTOM PARAMETER* 其中参数含义如下： [图片] 注意：加密 URL Scheme 打开小程序的场景值保持不变，仍为 1065。 三、原 URL Link 升级为加密 URL Link，并支持自行拼接参数目前已对外提供的 URL Link 能力平滑升级为加密 URL Link，取消一人一链的限制，支持开发者自行在链接后拼接参数*CUSTOM PARAMETER*。 注意：之前通过平台接口生成的 URL Link 可继续使用，链接自动可支持多人打开。 URL Link格式： https://wxaurl.cn/*TICKET*?cq=*CUSTOM PARAMETER* 其中参数含义如下： [图片] 注意：加密 URL Link 打开小程序的场景值保持不变，微信外打开的场景值为 1194；微信内打开会调整为开放标签打开小程序，场景值为 1167。 四、调用规则调整1、加密 URL Scheme 和 URL Link 取消一人一链，支持一条链接同时被多名用户访问，生效后之前生成的链接被多名用户访问时，不会再报错； 2、每个小程序每天能够生成加密 URL Scheme 和 URL Link 共计 50 万条的限制不变，额外增加每个小程序每天在微信外，能够通过链接打开小程序共计 300 万次的打开量限制，其中链接包括加密 URL Scheme、加密 URL Link 和明文 URL Scheme ；若链接打开小程序的次数超过 300 万次/天，则无法通过链接在微信外拉起小程序； 3、URL Scheme （加密和明文）和 URL Link （加密）仅支持非个人主体小程序使用； 4、注意事项：平台有安全策略防止开发者的链接被黑灰产大量打开，可能导致达到访问上限无法正常通过链接打开小程序的问题； 5、查询方式：开发者可复用现有的查询方式对 URL Scheme 和 URL Link 进行打开额度查询和链接状态查询。 [图片]

方式一：官方组件->official-account 方式二：官方组件->webview打开公众号文章引导用户关注 方式三：官方组件->button open-type='contact' 打开客服窗口给用户推送关注公众号引导 方式四、小程序内嵌公众号名称或者图片 方式一：官方组件->official-account https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html 前提：当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。 Tips 使用组件前，需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:当小程序从扫小程序码场景（场景值1047，场景值1124）打开时当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态为便于开发者调试，基础库 2.7.3 版本起开发版小程序增加以下场景展示公众号组件：开发版小程序从扫二维码（场景值 1011）打开 — 体验版小程序打开组件限定最小宽度为300px，高度为定值84px。每个页面只能配置一个该组件。 方式二：官方组件->webview打开公众号文章引导用户关注 小程序中使用webview组件打开一篇要关注公众号的文章，引导用户点击公众号名称关注； 需设置：在公众号中关联小程序，否则不能打开公众号文章 [图片] 方式三：官方组件->button open-type='contact' 打开客服窗口给用户推送关注公众号引导 [图片] 技能get: 1.如果获取公众号历史连接：PC微信客户端获取 [图片] 2.快捷获取公众号二维码：https://open.weixin.qq.com/qr/code?username=dyh_mirsh 方式四、小程序内嵌公众号名称或者图片 图片：引导用户保存图片在微信扫一扫识别 名字：提供复制能力，引导用户复制到搜索框搜索； [图片]

一、小程序打开另一个小程序 navigator组件 和 wx.navigateToMiniProgram API 这个文档写的挺详细的就不多说了。 https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html 二、扫描普通二维码打开小程序 1、二维码链接配置 首先配置普通二维码地址：小程序管理后台--开发管理--开发设置--扫普通链接二维码打开小程序，配置好二维码规则之后，使用符合规则的链接生成普通二维码，扫码就可进入对应页面。测试的时候需要把完整二维码地址添加到测试链接处保存配置，如果二维码链接符合规则但是没有配置到管理后台，扫码之后就会进入正式版对应页面。 2、二维码内容获取 在小程序后台配置二维码跳转小程序规则之后即可使用微信（6.5.6及其以上客户端版本）扫码打开小程序。二维码链接内容会以参数 q 的形式带给页面，在onLoad事件中提取 q 参数并自行 decodeURIComponent 一次，即可获取原二维码的完整内容。 Page({ onLoad(query) { const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容 const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳 } }) 参考文档https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html 三、服务号绑定“JS接口安全域名”下的网页跳转小程序 微信开放标签 wx-open-launch-weapp 注意：微信版本要求为：7.0.12及以上，系统版本要求为：iOS 10.3及以上、Android 5.0及以上 接收参数：在页面onLoad周期函数获取 a = options.a, b=options.b 参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21 四、短信、邮件、外部网页、微信内等拉起小程序 1）无参数或者参数固定 打开小程序管理后台--右上角处工具--生成URL Scheme，按要求选择填写即可，复制生成的URL Scheme，如下示例： location.href = 'weixin://dl/business/?t= *TICKET*' 该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。 [图片] 也可通过调用服务端接口生成，感觉完全没必要那么麻烦，不推荐！ 2）动态参数 通过调用服务端接口生成，文档https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html根据文档调用就行，比较详细了。 请求示例： { "jump_wxa": { "path": "/pages/publishHomework/publishHomework", "query": "a=123&b=321" }, "is_expire":true, "expire_time":1606737600 } 这里主要说一下，接收参数，文档没看到，亲测：在页面onLoad周期函数获取 a = options.a, b=options.b URL scheme和URL Link（https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-link/generateUrlLink.html）使用基本差不多，就不单独记录了。 五、微信内拉起小程序（电商类目） 这个由于本人没有电商的账号没有亲自使用过，所以看文档吧.......先记录有这么个途径。 文档地址：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/short-link/generateShortLink.html