个人案例
青蛙家电维修
一缕风沙渡(关于天气的小程序案例)
一缕风沙渡(关于天气的小程序案例)扫码体验
- redirect_uri域名与后台配置不一致?错误码:10003
在使用微信做网页授权登录,你说服务号没权限?OK,测试号不会也没权限吧?都配置一样了,还是redirect_uri域名与后台配置不一致?错误码:10003。 [图片][图片] [图片]
2024-12-19 - 分账比例最高只有30%?是否还能更高?如何申请高比例分账?
关于高分账比例申请的渠道,可通过以下的流程进行咨询: 1、微信关注"腾讯客服"公众号,在公众号内进行提问或输入'人工'转人工解答 2、拨打微信支付服务热线(95017转2)
2024-09-13 - 小程序免开发接入企业微信客服如何配置?
我看企业微信后台有小程序免开发接入微信客服的方式,小程序进入客服页面,就会回复一个客服名片,但是没看到客服名片的配置地方?[图片]
2023-05-23 - 手机号授权?
手机号授权一直提示这个 是什么问题,手机也是一样的,是不是需要什么授权 [图片]
2023-05-22 - scroll-view内,首列和首行固定的一个元素,ios下滚动会出现明显抖动
如题:编译后预览,在iphone-x的15.2版本,微信的8.0.37版本下,上述元素抖动很厉害,体验较差 为了方便调试,我把代码片段贴出来了 https://developers.weixin.qq.com/s/zv7pHpmI7eI2
2023-05-22 - 怎么能做到在小程序的任意页面都能转发?
设置小程序转发,只能是单页面模式吗?怎么能做到在任意页面都能转发?只能是到每个页面的js里添加onShareAppMessage() 吗?好像在app.js里也不能设置onShareAppMessage()
2023-05-19 - 我想做一个这样的小程序,有程序员人员可以开发做?
[图片] 我想做一个这样一摸一样的小程序,有程序员人员可以开发做?
2023-05-07 - 请问个如何注册视频号商店?
请问个如何注册视频号商店?
2023-05-06 - PC端微信聊天记录丢失
微信升级过后聊天记录丢失,无法看到联系人以及聊天记录,但是系统文件下面可以查看到相关聊天记录文件; 通过以下方式修改文件名后,聊天记录页面联系人列表恢复,但是无相关聊天记录;请问如何解决? [图片] 目前界面如下图,无法显示具体的聊天记录; [图片]
2023-05-05 - redirect_uri 参数错误
https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html redirect_uri 参数错误和配置的一样也不行
2023-04-04 - 一个小程序可以有多个收款账户吗
在小程序里根据不同的商品将支付的金额支付到不同的收款账户里
2023-03-24 - 微信没有人工客服吗?为什么没人解决实际问题?
小程序APPID: wx6d36909d58c7e938 手机号: 15623964010 提示小程序不支持chatGPT服务并下架了我的小程序。但是目前同类型小程序有几百上千个都在正常运行,请问我的小程序具体是哪一点违规了,我这边整改 [图片][图片]
2023-03-24 - 小程序使用threejs,没有getElementById怎么解决?
小程序要引入threejs,没有getElementById,用uni.createSelectorQuery().select('#container')的时候,报错container.appendChild is not a function。也就是没有appendChild功能,有什么办法解决?用web-view加H5的话,下拉回卡顿,回调也麻烦,有没有好的解决办法。
2023-03-15 - 活禽要怎么卖,需要什么资质?
活禽要怎么卖,需要什么资质
2023-03-14 - 小程序怎么实时获取麦克风声音频率?
做个古琴调音器,需要实时获取声音频率,请教一下有现成的API没呀,有什么办法可以做到呢?类似的小程序有个子博调音器 [图片]
2023-03-13 - 车载特斯拉微信小程序如何开发?
特斯拉正式上线了微信小程序功能,并新增了新浪微博、微信听书等小程序。 目前希望开发的小程序可以发布到特斯拉微信小程序中。 请问是否开放了可以对接特斯拉微信小程序的入口?
2023-01-31 - webView页面可以通过weixin://dl/business/?t 协议跳转到另外的小程序?
webView页面,是否可以 通过获取 URL Scheme 链接跳转 小程序小程序页面 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
2023-01-29 - wx.uploadFile上传文件到云函数,如何解释body?
https://docs.cloudbase.net/service/access-cloud-function 参考文档如上。 1、小程序端,用wx.uploadFile上传文件,访问云函数的http接入服务; 2、云函数端event中获取到event.body的文件内容,看上去象是base64的字符串; 3、现在想获取并解析该文件内容,并保存文件到云存储。 有谁做过这样的事吗?event.body的格式转换试了很久没成功,文件保存到云存储后,都是坏文件。
2023-01-03 - 这个小程序卡片进度的功能很新,有大佬知道是什么能力吗?
[图片]
2023-01-03 - JavaScript小技巧【建议收藏】
在JavaScript世界里,有些操作会让你无法理解,但是却无比优雅! 有时候读取变量属性时,他可能不是Ojbect。这个这个你就要判断这个变量是否为对象,如果是在如引用 [代码]var obj; if(obj instanceof Object){ console.log(obj.a); }else{ console.log('对象不存在'); } [代码] ES6中有简便写法,可以帮我们简短代码,从而更加明确 [代码]var obj; console.log(obj?.a || '对象不存在'); [代码] 1,2,3,4,5,6…10,11,12 小于10的前面补0 其实我们用slice函数可以巧妙解决这个问题 slice(start,end); start:必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 end :可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 [代码]var list=[1,2,3,4,5,6,7,8,9,10,11,12,13]; list=list.map(ele=>('0' + ele).slice(-2)); console.log(list); [代码] [图片] 打印可视化console.table() [代码]var obj = { name: 'Jack' }; console.table(obj); obj.name= 'Rose'; console.table(obj); [代码] [图片] 获取数组中的最后的元素 数组方法slice()可以接受负整数,如果提供它,它将从数组的末尾开始截取数值,而不是开头。 [代码]let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(array.slice(-1)); // Result: [9] console.log(array.slice(-2)); // Result: [8, 9] console.log(array.slice(-3)); // Result: [7, 8, 9] [代码] es6模板字符串 [代码]let name = "Charlse" let place = "India"; let isPrime = bit =>{ return (bit === 'P'? 'Prime' : 'Nom-Prime') } let messageConcat = `Mr.name' is form ${place} .He is a ${isPrime('P')} member`; [代码] H5语音合成 在网页端实现将指定的文字进行语音合成并进行播报。 使用HTML5的Speech Synthesis API就能实现简单的语音合成效果。 [代码]<input id="btn1" type="button" value="点我" onclick="test();" /> <script> function test() { const sos = `阿尤!不错哦`; const synth = window.speechSynthesis; let msg = new SpeechSynthesisUtterance(sos); synth.speak(msg) } </script> [代码] 然后点击按钮,就会触发test方法的执行实现语音合成 这里推荐使用Chrome浏览器,因为HTML5的支持度不同 数字取整 [代码]let floatNum = 100.5; let intNum = ~~floatNum; console.log(intNum); // 100 [代码] [图片] 字符串转数字 [代码]let str="10000"; let num = +str; console.log(num); // 10000 [代码] 交换对象键值 [代码]let obj = { key1: "value1", key2: "value2" }; let revert = {}; Object.entries(obj).forEach(([key, value]) => revert[value] = key); console.log(revert); [代码] [图片] 数组去重 [代码]let arrNum = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0 ]; let arrString = [ "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0" ]; let arrMixed = [ 1, "1", "2", true, false, false, 1, 2, "2" ]; arrNum = Array.from(new Set(arrNum)); arrString = [...new Set(arrString)]; arrMixed = [...new Set(arrMixed)]; console.log(arrNum); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 0] console.log(arrString); // ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"] console.log(arrMixed); // [1, "1", "2", true, false, 2] [代码] 数组转化为对象 [代码]const arr = [1,2,3] const obj = {...arr} console.log(obj) [代码] 合并对象 [代码]const obj1 = { a: 1 } const obj2 = { b: 2 } const combinObj = { ...obj1, ...obj2 } console.log(combinObj) [代码] 也就是通过展开操作符(spread operator)来实现。 获取数组中的最后一项 [代码]let arr = [0, 1, 2, 3, 4, 5]; const last = arr.slice(-1)[0]; console.log(last); [代码] 一次性函数,适用于初始化的一些操作 [代码]var sca = function() { console.log('msg')//永远只会执行一次 sca = function() { console.log('foo') } } sca() // msg sca() // foo sca() [代码] 提高工作效率,减少代码量,降低键盘磨损程度 我希望你喜欢它并学到了一些新东西 感谢你的阅读,编程快乐!
2022-10-25 - H5网页跳转小程序
现在小程序越来越普遍了,从H5网页(要在微信浏览器下打开的)跳转到相应小程序的场景也越来越多。至此微信提供了相应的微信开放标签让网页开发者可安全便捷地使用微信或系统的能力,为微信用户提供更优质的网页体验。 需要注意的是,微信开放标签有最低的微信版本和最低的系统版本要求。 微信版本要求为:7.0.12及以上系统版本要求为:iOS 10.3及以上、Android 5.0及以上 对于符合微信或系统最低版本要求但仍无法使用微信开放标签的场景,将会在下方使用步骤中的[代码]wx.config[代码]权限验证成功后触发[代码]WeixinOpenTagsError[代码]事件告知开发者。仅无法使用微信开发标签,JS-SDK其他功能不受影响。可通过如下方法监听并进行回退兼容: document.addEventListener('WeixinOpenTagsError', function (e) { console.error(e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响 }); 根据目前已知的错误场景,回退兼容建议如下: iOS15底层 WebKit 接口发生变更,微信版本8.0.8以下(不包括8.0.8)无法使用开放标签,可引导用户升级最新版本微信;开放标签依赖Web Components方案,极少部分 Android 系统可能由于版本太低而不支持,可引导用户升级系统固件。H5网页跳转小程序有如下步骤: 1.在微信公众号(已认证的服务号)绑定“JS接口安全域名” 如果是公众号身份的网页,需要绑定安全域名。登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 如果是使用小程序云开发静态网站托管的小程序网页,则不需绑定安全域名即可直接使用(即跳过该"步骤一:绑定JS接口安全域名")。 2.引入JS文件 在需要调用 JS 接口的页面引入如下 JS 文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https) 如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https) 备注:支持使用 AMD/CMD 标准模块加载方法加载。 注意:js文件必须使用1.6.0版本以上 3.通过config接口注入权限验证配置并申请所需开放标签 与使用 JS-SDK 配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过[代码]openTagList[代码]字段申请所需要的开放标签,否则将无法使用(同一个 url 仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用。目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。开放标签的申请和 JS 接口的申请相互独立,因此是可以同时申请的。 wx.config({ debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来,若要查看传入的参数,可以在 pc 端打开,参数信息会通过 log 打出,仅在 pc 端时才会打印 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [], // 必填,需要使用的 JS 接口列表 openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] }); 注意:如果使用的是小程序云开发静态网站托管的域名的网页,可以免鉴权直接跳任意合法合规小程序,调用 wx.config 时 appId 需填入非个人主体的已认证小程序,不需计算签名,timestamp、nonceStr、signature 填入非空任意值即可。 4.通过ready接口处理成功验证 wx.ready(function () { // config信息验证后会执行 ready 方法,所有接口调用都必须在 config 接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中 }); 5.通过error接口处理失败验证 wx.error(function (res) { // config信息验证失败会执行 error 函数,如签名过期导致验证失败,具体错误信息可以打开 config 的debug模式查看,也可以在返回的 res 参数中查看,对于 SPA 可以在这里更新签名 }); 接口调用说明所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数: success:接口调用成功时执行的回调函数。fail:接口调用失败时执行的回调函数。complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。 以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下: 调用成功时:"xxx:ok" ,其中xxx为调用的接口名 用户取消时:"xxx:cancel",其中xxx为调用的接口名 调用失败时:其值为具体错误信息 使用说明 所使用的标签允许提供插槽,由于插槽中模版的样式是和页面隔离的,因此需要注意在插槽中定义模版的样式。插槽模版及样式均需要通过[代码]<script type="text/wxtag-template"></script>或<template></template>[代码]进行包裹。另外,对于具名插槽还需要通过[代码]slot[代码]属性声明插槽名称,下文标签插槽中的 default 插槽为默认插槽,可不声明插槽名称。 对于标签事件,均可通过[代码]event.detail[代码]获得详细信息。如果无特殊说明,下文标签事件说明中的返回值均指代[代码]event.detail[代码]中的内容。 另外,需要注意以下几点: 页面中与布局和定位相关的样式,如[代码]position: fixed; top -100;[代码]等,尽量不要写在插槽模版的节点中,请声明在标签或其父节点上;对于有 CSP 要求的页面,需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码],才能在页面中正常使用开放标签。(CSP相关内容可查看以下几篇文章:https://zhuanlan.zhihu.com/p/142987601、https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)开放对象已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。代码 参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>H5跳转小程序</title> <!-- weui 样式 --> <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css"> <!-- 页面样式 start --> <style> /* --------START reset.css------- */ * { margin: 0; padding: 0; } html, body { background-color: #fff; } a { text-decoration: none; } a, button, input, span, div { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } li { list-style-type: none; } /* --------END reset.css------- */ .hidden { display: none; } .full { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .public-web-container, .wechat-web-container, .wechat-web-container wx-open-launch-weapp, .desktop-web-container { display: flex; flex-direction: column; align-items: center; } .public-web-container p, .wechat-web-container p, .desktop-web-container p { position: absolute; top: 40%; } .public-web-container a { position: absolute; bottom: 40%; } .wechat-web-container wx-open-launch-weapp { position: absolute; bottom: 40%; left: 0; right: 0; } .wechat-web-container .open-btn { display: block; margin: 0 auto; padding: 8px 24px; width: 200px; height: 45px; border: none; border-radius: 4px; background-color: #07c160; color: #fff; font-size: 18px; text-align: center; } </style> <!-- 页面样式 end --> </head> <body> <!-- 页面容器 start --> <div id="h5OpenMiniprogram"> <!-- <template> --> <!-- 页面内容 start --> <div class="page full"> <!-- 移动端微信外部浏览器 --> <div id="public-web-container" class="hidden"> <p>正在打开“小程序名字”</p> <a href="javascript:" id="public-web-jump-button" class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()"> <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"> <i class="weui-primary-loading__dot"></i> </span> 打开小程序 </a> </div> <!-- 微信内部浏览器 --> <div id="wechat-web-container" class="hidden"> <p>点击以下按钮打开“小程序名字”</p> <!-- username:必填,所需跳转的小程序原始id,即小程序对应的以gh_开头的id; path:非必填,所需跳转的小程序内页面路径及参数(默认小程序的初始页面【即首页】) --> <wx-open-launch-weapp id="launch-btn" username="gh_XXX" path="/pages/XXX"> <!-- 第一种: 不适用于Vue.js开发的项目,template标签会冲突 --> <template> <style> .open-btn { display: block; margin: 0 auto; padding: 8px 24px; width: 200px; height: 45px; border: none; border-radius: 4px; background-color: #07c160; color: #fff; font-size: 18px; text-align: center; } </style> <button class="open-btn">打开小程序</button> </template> <!-- 第二种:几乎适用于所有前端框架开发的项目 --> <!-- <script type="text/wxtag-template"> <style> .open-btn { display: block; margin: 0 auto; padding: 8px 24px; width: 200px; height: 45px; border: none; border-radius: 4px; background-color: #07c160; color: #fff; font-size: 18px; text-align: center; } </style> <button class="open-btn">打开小程序</button> </script> --> </wx-open-launch-weapp> </div> <!-- 桌面端 --> <div id="desktop-web-container" class="hidden"> <p>请在手机打开网页链接</p> </div> </div> <!-- 页面内容 end --> <!-- </template> --> </div> <!-- 页面容器 end --> <!-- 引入jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> <!-- 调试用的移动端 console --> <script src="https://cdn.jsdelivr.net/npm/eruda"></script> <script> eruda.init(); </script> <!-- 公众号 JSSDK --> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 云开发 Web SDK --> <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script> <script> function docReady(fn) { document.addEventListener('WeixinOpenTagsError', function (e) { console.error(e.detail.errMsg); // 无法使用开放标签的错误原因,需回退兼容。仅无法使用开放标签,JS-SDK其他功能不受影响 }); if (document.readyState === "complete" || document.readyState === "interactive") { fn(); } else { document.addEventListener("DOMContentLoaded", fn); } } docReady(async function () { var ua = navigator.userAgent.toLowerCase(); var isWXWork = ua.match(/wxwork/i) == "wxwork"; var isWeixin = !isWXWork && ua.match(/micromessenger/i) == "micromessenger"; console.log("isWeixin", isWeixin, isWXWork); var isMobile = false; var isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } if (isWeixin) { var containerEl = document.getElementById("wechat-web-container"); containerEl.classList.remove("hidden"); containerEl.classList.add("full", "wechat-web-container"); // 公众号网页需要绑定安全域名 // 获取签名,timestamp、nonceStr、signature $.ajax({ url: "请求地址", dataType: "json", success: function (res) { console.log("WeChatConfig", res); if (res.id === 1) { var data = res.items; // 根据实际情况返还的数据进行赋值 wx.config({ // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印 appId: data.appId, // 必填,公众号的唯一标识 timestamp: data.timestamp, // 必填,生成签名的时间戳 nonceStr: data.nonceStr, // 必填,生成签名的随机串 signature: data.signature, // 必填,签名 jsApiList: ["chooseImage"], // 必填,需要使用的JS接口列表(此处随意一个接口即可) openTagList: ["wx-open-launch-weapp"], // 可选,需要使用的开放标签列表,例如['wx-open-launch-app'] }); /** * config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后。 * config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。 * 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中 * */ wx.ready(function (res2) { console.log("ready", res2); var launchBtn = document.getElementById("launch-btn"); launchBtn.addEventListener("ready", function (e) { console.log("开放标签 ready"); }); launchBtn.addEventListener("launch", function (e) { console.log("开放标签 success"); }); launchBtn.addEventListener("error", function (e) { console.log("开放标签 fail", e.detail); }); }); // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名 wx.error(function (err) { console.log("error", err); }); } } }) // 小程序云开发静态网站托管的网页 // var launchBtn = document.getElementById("launch-btn"); // launchBtn.addEventListener("ready", function (e) { // console.log("开放标签 ready"); // }); // launchBtn.addEventListener("launch", function (e) { // console.log("开放标签 success"); // }); // launchBtn.addEventListener("error", function (e) { // console.log("开放标签 fail", e.detail); // }); // wx.config({ // // debug: true, // 调试时可开启 // appId: "", // 非个人主体的已认证的小程序APPID // timestamp: 0, // 必填,填任意数字即可 // nonceStr: "nonceStr", // 必填,填任意非空字符串即可 // signature: "signature", // 必填,填任意非空字符串即可 // jsApiList: ["chooseImage"], // 必填,随意一个接口即可 // openTagList: ["wx-open-launch-weapp"], // 填入打开小程序的开放标签名 // }); } else if (isDesktop) { // 在 pc 上则给提示引导到手机端打开 var containerEl = document.getElementById("desktop-web-container"); containerEl.classList.remove("hidden"); containerEl.classList.add("full", "desktop-web-container"); } else { var containerEl = document.getElementById("public-web-container"); containerEl.classList.remove("hidden"); containerEl.classList.add("full", "public-web-container"); // 云函数 // 因未开通云开发环境,此处不做处理 // var c = new cloud.Cloud({ // identityless: true, // 必填,表示是未登录模式 // resourceAppid: "小程序 AppID", // 资源方 AppID // resourceEnv: '云开发环境 ID', // 资源方环境 ID // }); // await c.init(); // window.c = c; // var buttonEl = document.getElementById("public-web-jump-button"); // var buttonLoadingEl = document.getElementById("public-web-jump-button-loading"); // try { // await openWeapp(() => { // buttonEl.classList.remove("weui-btn_loadin"); // buttonLoadingEl.classList.add("hidden"); // }) // } catch (error) { // buttonEl.classList.remove("weui-btn_loadin"); // buttonLoadingEl.classList.add("hidden"); // throw error; // } } }); async function openWeapp(onBeforeJump) { console.log("未开通云开发环境", onBeforeJump); // 因未开通云开发环境,此处不做处理 // var c = window.c; // const res = await c.callFunction({ // name: "public", // data: { // action: "getUrlScheme", // }, // }); // console.warn(res); // if (onBeforeJump) { // onBeforeJump(); // } // location.href = res.result.openlink; } </script> </body> </html> 错误提示 (1)没有在“JS接口安全域名”设置 [图片] 成功提示 (1)微信开发者工具 [图片] (2)真机:会有要打开小程序的名字 [图片]
2024-03-06 - css 多行文字两端对齐
[图片] 需要的地方补充这个样式,文字就可以实现两端对齐了. .text-justify{ text-align: justify; text-justify:distribute-all-lines; /*这行必加,兼容ie浏览器*/ text-align-last: left!important; } [图片]
2022-12-20 - 微信小程序如何处理发版本之前的本地缓存
微信小程序如何处理发版本之前的本地缓存,实际开发中,回遇到比如用户搜索的关键字存本地的操作,但是如果接口调整了,返回的字段发生了变更.那么需要在发布新版本后,处理一下用户之前的本地缓存. 解决方案一: 在版本更新的时候,处理清除缓存操作. (实操失败,也算一种思路,可以试试) onLaunch: function() { // #ifdef MP this.mpUpdate() // #endif } methods: { mpUpdate() { const updateManager = uni.getUpdateManager() // 小程序版本更新管理器 updateManager.onCheckForUpdate(res => { // 检测新版本后的回调 if(res.hasUpdate) { // 如果有新版本提醒并进行强制升级 uni.showModal({ content: '更新到最新版本', showCancel: false, confirmText: '确定', success: res => { if (res.confirm) { updateManager.onUpdateReady(res => { // 新版本下载完成的回调 uni.removeStorageSync('search-history')// 处理清除缓存操作; updateManager.applyUpdate() // 强制当前小程序应用上新版本并重启 }) updateManager.onUpdateFailed(res => { // 新版本下载失败的回调 // 新版本下载失败,提示用户删除后通过冷启动重新打开 uni.showModal({ content: '下载失败,请删除当前小程序后重新打开', showCancel: false, confirmText: '知道了' }) }) } } }) } }) } } 解决方案二: 本地存储版本号, 然后更新后得到最新的版本号,两个版本号不等,然后处理逻辑 文档地址: https://developers.weixin.qq.com/miniprogram/dev/api/open-api/account-info/wx.getAccountInfoSync.html [图片] onShow(){ let versionNum = uni.getStorageSync('version') || ''; if(!versionNum){ uni.removeStorageSync('search-history') } let accountInfo = wx.getAccountInfoSync(); let version = accountInfo.miniProgram.version; uni.setStorageSync("version", version); this.initHistory(); // 初始化搜索历史记录 }, 小程序内的缓存,首页调用wx.clearStorage 可以清掉。 旧的版本可以用UpdateManager对象来管理更新 https://developers.weixin.qq.com/minigame/dev/api/base/update/UpdateManager.html [图片] [图片]
2022-12-05 - 社区每周 | 用户头像昵称获取规则的兼容性调整通知及上周问题反馈(10.31-11.04)
各位微信开发者: 以下是用户头像昵称获取规则的兼容性调整通知及上周我们在社区收到的问题反馈的处理进度,希望与大家一同打造更好的小程序生态! 用户头像昵称获取规则的兼容性调整通知 由于 头像昵称填写能力 在 PC / macOS 平台存在兼容性问题,因此对于来自低于 2.27.1 基础库版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头像昵称,插件通过 wx.getUserInfo 接口将正常返回用户头像昵称。 更多关于本次调整的 Q&A,可查看原公告《小程序用户头像昵称获取规则调整公告》。 上周问题反馈和处理进度(10.31-11.04) 已修复的问题安卓用户无法应用 Canvas 能力的问题 查看详情 修复中的问题video 组件在其他小程序返回后不能播放视频的问题 查看详情 已达到小程序流量主的要求但无法开通的问题 查看详情 微信团队 2022年11月11日
2022-11-11 - 我这里想要测试短信唤醒小程序,小程序必须先提交上线吗?
我这里在生成URL Scheme的时候,提醒我,如下错误,开发者文档提示是小程序未发布,那如果我要测试发短信唤醒小程序的功能,应该怎么测试? [图片]
2022-11-08 - 禁止遮罩层下的页面滚动 终极解决办法
[图片] 方案一: methods: { moveHandle() {} 方案二: (推荐) 如果要显示遮罩层,那么用css控制底部的不允许滚动。 [图片] data() { return { mask: false, } } // 如果要显示遮罩层,那么用css控制底部的不允许滚动。 .tl-show{ overflow: hidden; position:fixed; height: 100%; width: 100%; }
2022-11-04 - chooseAvatar 还是不能从相册上传大于1M的图片?
小程序使用chooseAvatar设置头像昵称,目前测试下来使用相册里大于1M的图片还是有报错。之前看官方有回复说图片压缩和裁剪功能在开发中,但是公告上要求11.8前完成切换,现在组件还没更新吗? [图片]
2022-11-03 - 怎么把云服务器上图片变成http图片呢?
cloud://pqtz2-9gzchr9694281166.7071-pqtz2-9gzchr9694281166-1309635073/sxfriend_list_photo/oskUN5hwrBJ7EqZSIwUEI6EkWNlA881664419082570.jpg
2022-10-26 - 获取当前系统时间戳
获取当前的时间:然后处理一系列逻辑 getHours(){ let time = (new Date()).getTime(); // 获取当前时间戳 console.log('time=='+time); let timeDate = this.orderInfo.pay_time; //let Time = new Date(timeDate); let Time = new Date(timeDate.replace(/-/g, '/')) let timestemp = Time.getTime(); //得到时间戳 console.log('timestemp====',timestemp) let timeDiff = time - timestemp console.log('timeDiff==',time - timestemp); const hours = parseInt(timeDiff/3600000 ) // 当前时间和服务器时间的差值,计算出小时数 console.log('hours==',hours); this.hours = hours },
2022-07-20 - 小程序返回上一页终极处理办法
注意:注意针对自定义顶部导航,或者是使用了uni.navigateBack这个方法的界面。 //如果当前界面存在上一个界面,就返回上一个界面 //如果当前界面是分享进入的,没有上一个界面,这样的情况直接返回到指定的界面上去。 back() { /*uni.navigateBack({ delta: 1 })*/ //@zxyuns 处理兼容,如果没有上一级界面则返回首页 const pages = getCurrentPages(); if (pages.length === 2) { uni.navigateBack({ delta: 1 }); } else if (pages.length === 1) { //判定没有上一页得情况下,才进行跳转到指定界面 uni.switchTab({ url: '/pages/home/home', }) } else { //这里应该是不会用到得 uni.navigateBack({ delta: 1 }); } },
2022-08-05 - 强烈建议可以允许项目人员自己退出某一个小程序项目?!
加了一些项目,已经满50上限了,现在找管理员找不到了,没法退出旧项目、加入新项目。强烈建议可以允许项目人员自己退出某一个小程序项目!
2022-10-14 - wx.getlocation到底怎么才能申请通过?
申请了四次了,也不说明原因,就说不通过。 1、附近商家功能,根据用户的位置和店铺的位置,匹配距离较近的商家给客户服务。 [图片] [图片]
2022-10-09 - 解析二维码失败,非小程序码,手机可以扫,用开发者工具的二维码编译就不行?
[图片] 先描述应用场景: 一种有效得推广手段,就是配置跳转小程序链接二维码,从而引流到微信小程序. 操作流程如下图: [图片] [图片] 然后用 这个测试地址生成一个二维码,举个栗子比如下面这个生成一个二维码,手机切换到体验版,扫码进入首页就可以了 https://api.XXXXX.com/share?uid=324 这里补充一个知识点: 这个链接地址 小程序里面得到的是一个q的参数标识. 参考这篇文章: https://www.jianshu.com/p/6c62a161e609 贴一下核心的业务代码: onLoad: function (options) { console.log("index 生命周期 onload" + JSON.stringify(options)) //在此函数中获取扫描普通链接二维码参数 if(options.q){ let q = decodeURIComponent(options.q); console.log("index 生命周期 onload url=" + q) console.log("index 生命周期 onload 参数 is_water=" + utils.getQueryString(q, 'is_water')) var is_water = utils.getQueryString(q, 'is_water'); console.log(is_water); console.log("index 生命周期 onload 参数 access_token=" + utils.getQueryString(q, 'access_token')) var access_token = utils.getQueryString(q, 'access_token'); console.log(access_token); } } utils.js截取方法如下: let getQueryString = function (url, name) { var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$)', 'i') var r = url.substr(1).match(reg) if (r != null) { return r[2] } return null; } module.exports = { getQueryString: getQueryString } 通过上面方法即可获取普通二维码所携带的参数进行判断了 当然还有一种极端操作,如果我想在onLaunch生命周期里面获取,应该怎么操作呢? 当然还有一种极端操作,如果我想在onLaunch生命周期里面获取,应该怎么操作呢? 获取的参数会发生变动 :options?.query?.q onLaunch: function(options) { if(options?.query?.q){ let q = decodeURIComponent(options.query.q); let uid = getQueryString(q, 'uid'); if(uid){ this.inviteUserId = uid; uni.setStorageSync('inviteUserId',uid) } console.log('uid======onLaunch=======',uid) } [图片] [图片]
2022-09-28 - 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景: 在小程序中大家应该都有这样的场景,在onLaunch里用wx.login静默登录拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在业务页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案,公司内部已接入两年很稳定: 1.可完美解决异步问题 2.不污染原生生命周期,与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现,接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景,以下有部分是伪代码,请勿直接粘贴使用,具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }) //关键点来了 //Page.js,业务页面使用 Page({ onLoadLogin() { //拿到token啦,可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息,可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息,我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github:https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快,记得star哦
2023-04-23 - 请问怎样注销?
注销微信一直卡到这个步骤,请问怎么注销???[图片]
2022-09-23 - 微信小程序全局使用websocket
这里说点题外话: 服务器必须要wss,不然推送不了. [图片] 我们通过[代码]vuex[代码]来实现全局状态管理,[代码]uniapp[代码]中内置了[代码]vuex[代码],可以直接引入使用。 在根目录下新建[代码]store[代码]文件夹,在底下建一个[代码]index.js[代码],代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { socketTask: null }, mutations: { WEBSOCKET_INIT (state, url) { state.socketTask = uni.connectSocket({ url, // url是websocket连接ip success () { console.log('websocket连接成功') } }) state.socketTask.onOpen((res) => { console.log('WebSocket连接正常打开中...!') // 注:只有连接正常打开中 ,才能正常收到消息 state.socketTask.onMessage(res => { console.log('收到服务器内容:' + res.data) }); }) }, WEBSOCKET_SEND (state, data) { state.socketTask.send({ data, async success() { console.log('消息发送成功') }, }) }, CLOSE_SOCKET (state) { if (!state.socketTask) return state.socketTask.close({ success (res) { console.log('关闭成功', res) }, fail (err) { console.log('关闭失败', err) } }) } }, actions: { WEBSOCKET_INIT({ commit }, url) { commit('WEBSOCKET_INIT', url) }, WEBSOCKET_SEND({ commit }, data) { commit('WEBSOCKET_SEND', data) }, CLOSE_SOCKET({ commit }) { commit('CLOSE_SOCKET') } } }) export default store 更多内容参考这两篇文章: https://zhuanlan.zhihu.com/p/554350423 https://zhuanlan.zhihu.com/p/554353769 2022-09-19 补充 [图片]
2022-09-19 - type=nickname 如何获取值的问题总结
之前写了如何最佳处理获取的头像参考地址: https://developers.weixin.qq.com/community/develop/article/doc/000666b2094e38f60c7ea4e4156813 这里看到很多朋友在问如何获取弹出来的昵称,之前用过,特来总结一下,方便大家及时解决这个小问题. 一:unipp写法如下: 参考这个: changeName(e){ this.nick_name = e.detail.value; console.log('this.nick_name.length',this.nick_name.length); let str = this.nick_name.trim(); if(str.length==0){ this.$toast('请输入合法的昵称') return } if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){ this.$toast('请输入中英文和数字') return } this.updateUserInfo() }, 二:微信原生参考: getname(e) { console.log(e) this.setData({ nickname: e.detail.value }) }, 运行代码片段后,用真机调试: https://developers.weixin.qq.com/s/XuSKVomH7fAK 地址来源这位朋友. [图片]
2022-09-26 - 【重要提议】button组件的chooseAvatar能力的几个问题?
经过测试我们发现chooseAvatar能力有如下问题,望微信团队予以评估,尽早优化: 1、无法通过配置实现“使用微信头像”、“从相册选择”、“拍照”三个选择的显隐; 2、无法通过配置控制“从相册选择”、“拍照”所取得图片是否压缩(默认都是可选择“原图”的,无法屏蔽); 3、最严重的问题:在用户选择非微信头像后,不知基于什么考虑,组件会自动向“http://finder-assistant.mp.video.tencent-cloud.com/snsuploadsimple”这个地址上传用户选择的图片(如下图所示),若用户选择的图片较大,这个过程会非常长,甚至有时还会超时崩溃。更麻烦的是:只有在这个上传过程完成后,组件才会触发bindchooseavatar事件,在此之前,组件没有暴露任何有帮助的事件供开发者进行体验优化。 [图片]。[图片] 个人认为这个chooseAvatar能力上线略显草率,在比较注重体验的小程序中,尚不可用。我们理解微信保护用户隐私的考量,但考虑到10月份即将收回getUserProfile能力,辛苦予以及时优化。
2022-06-19 - button组件chooseAvatar获取微信头像时,从相册选取图片后报错?
button组件open-type="chooseAvatar",微信版本8.0.27,基础库版本:2.26.0 底部下拉框中国呢选择从相册选取照片,照片过大,会直接报错,chooseavatar有失败回调吗?如何捕捉到这个错误? [图片]
2022-09-16 - 关于商品详情使用rich-text组件的总结
rich-text组件还是非常强大的。 文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html 目前用这个组件容易遇到的问题如下: 1.连续的一张商品详情图片分割后,拼接在一起会出现空白的问题。之所以不用一张整图,是考虑到用户在非wifi模式下加载资源会很卡,图片大了都这样。所以会把大图裁剪成小于120kb左右的小图 2.会出现图片大小不自适应的问题,比如图片太大,只展示了一半。因为这两个情况都是经常遇到的,我这里就不找效果图展示了。 3.关于加载富文本里面的图片或者a标签是否能够触发事件,并执行对应的函数,答案是支持的,不过需要用三方的插件,这个参考我的另外一篇文章。 文章地址同步如下: https://zhuanlan.zhihu.com/p/554786156 下面直接上我珍藏版的代码: js,这里我把整个函数都放出来,但是关注点其实就两点: 1.p标签添加:font-size: 0 2.img标签,添加 style="max-width:100%;height:auto;display:block;" getData(){ uni.showLoading(); let self = this; this.$http.get("getBagDetail", {id: this.pId}) .then(res => { uni.hideLoading() if (res.data.code == 1) { //this.productList = res.data.data || []; let obj = res.data.data; this.swiperImgs = [obj.img_url] this.productObj = {...obj}; if(obj?.max_bag_order){ let bag_type = obj?.max_bag_order?.bag_type; // 1 基础套餐 2 全额套餐 this.isFlag = bag_type == 1 ? true : false this.isBuy = false; this.bag_type = bag_type; }else { this.isBuy = true; } let richObj1 = obj["detail_info"].replace( /\ 以上是目前能够想到的解决方案,如果大家有其他比较好的方案,欢迎留言补充。互勉! [代码]tip[代码]: nodes 不推荐使用 String 类型,性能会有所下降。[代码]tip[代码]: [代码]rich-text[代码] 组件内屏蔽所有节点的事件。[代码]tip[代码]: attrs 属性不支持 id ,支持 class 。[代码]tip[代码]: name 属性大小写不敏感。[代码]tip[代码]: 如果使用了不受信任的 HTML 节点,该节点及其所有子节点将会被移除。[代码]tip[代码]: img 标签仅支持网络图片。[代码]tip[代码]: 如果在自定义组件中使用 [代码]rich-text[代码] 组件,那么仅自定义组件的 wxss 样式对 [代码]rich-text[代码] 中的 class 生效。[图片]
2022-09-19 - 小程序新手引导实现思路整理
从个人开发和使用角度来说,新手引导属于一个比较鸡肋的功能。 [图片] [图片] 反正就是有几个提示,就弹几个框。这里采用的方式是,用三倍图片,然后用2倍的尺寸,然后加上一个黑科技属性,可以做到弹框图片高清不模糊的效果。 话不多说直接上代码:使用点击 +1,的逻辑动态显示对应的图片 <Mask v-if="showGuide"> <view class="maskGuide"> <view v-if="guideNumber == 1" @tap="clickToNext"> <image src="XXX.png" class="tl-img-1"/> </view> <view v-if="guideNumber == 2" @tap="clickToNext"> <image src="XXX.png" class="tl-img-2"/> </view> <view v-if="guideNumber == 3" @tap="clickToNext"> <image src="XXX.png" class="tl-img-3"/> </view> <view v-if="guideNumber == 4" @tap="clickToNext"> <image src="XXX.png" class="tl-img-4"/> </view> <view v-if="guideNumber == 5" @tap="clickToNext"> <image v-if="gender==1" src="XXX.png" class="tl-img-5"/> <image v-else src="XXX.png" class="tl-img-5"/> </view> </view> </Mask> js 逻辑: uni.setStorageSync('isGuide', true) //存储本地,只弹出一次的逻辑 // 新手引导初步下一步逻辑 clickToNext(){ this.guideNumber +=1 if(this.guideNumber == 6){ uni.setStorageSync('isGuide', true) this.showGuide = false; } }, less .maskGuide{ position: relative; width: 100vw; height: 100vh; .tl-img-1{ position: absolute; top: 48rpx; left: 20rpx; width: 584rpx; height: 230rpx; image-rendering: -webkit-optimize-contrast; } .tl-img-2{ position: absolute; top: 174rpx; left: 20rpx; width: 646rpx; height: 230rpx; image-rendering: -webkit-optimize-contrast; } .tl-img-3{ position: absolute; top: 40rpx; right: 0; width: 630rpx; height: 308rpx; image-rendering: -webkit-optimize-contrast; } .tl-img-4{ position: absolute; top: 240rpx; right: 10rpx; width: 604rpx; height: 112rpx; image-rendering: -webkit-optimize-contrast; } .tl-img-5{ position: absolute; top: 164rpx; right: 35rpx; width: 684rpx; height: 1048rpx; image-rendering: -webkit-optimize-contrast; } } 以上是目前想到的一个实现方案,如果有其他实现方案,欢迎大家补充。共勉! [图片]
2022-09-02 - 小程序 跳转传参 技能升级
方案一: //A页面 实现跳转 jump: function () { let a = 1; let b = 2; wx.navigateTo({ url: '/page/b/b?data1=' + a + '&data2=' + b }) } //B页面 接收参数 onLoad: function (options) { //此时A页面传递的参数由options接收,A页面传递参数时的参数名分别叫data1和data2,所以B页面想拿到A页面传递的参数拿对应的参数名即可 let data1 = options.data1; let data2 = options.data2; console.log(data1);//输出的结果是 1 console.log(data2);//输出的结果是 2 } 方案二: a页面 godeposit(e) { // console.log(e.currentTarget.dataset) let aa =JSON.stringify(e.currentTarget.dataset); app.navigateTo("pages/my/deposit/deposit?data1="+ aa) } b页面 onLoad: function (options) { let a =JSON.parse(options.data1); console.log(a) } 方案三:最新方案,解决大数据传输问题: 参考文档: EventChannel | 微信开放文档 传参模式: let obj = { disease_ids: strIds, disease_name: strNames, } uni.navigateTo({ // url:`/packageA/pages/estimateQuestion/estimateQuestion?disease_ids=${strIds}&disease_name=${strNames}`, url:`/packageA/pages/estimateQuestion/estimateQuestion`, success: function (res) { res.eventChannel.emit('getData', obj) //触发事件 } }) 接收模式: onLoad: function(options) { //接收页面 const eventChannel = this.getOpenerEventChannel(); eventChannel.on("getData",data => { console.log(data) }); } [图片] [图片] [图片] [图片]
2022-08-26 - 开发者如何进行有效的提问
在你的问题被解决前,你需要做的最最重要的一件事,就是让回答者知道你在问什么,否则别人很难给你答复。 你遇到了什么问题? 你的预期是什么? 你的环境是什么(运行的软件版本、操作系统)? 你尝试了哪些解决方案,对解决当前问题是否有帮助? 出现问题的代码直接贴出来 ,或者提供代码文件. 按照上面的规则,描述你的问题,让回答者能更加清晰的知道你遇到的是什么问题,除此之外,你可能还需要按照提供一些额外信息,来帮助回答者更快的帮你解决问题,毕竟帮回答者节约时间,也是给你自己节约时间。 另外就是需要自己挖的坑自己填: 1、及时回应/补充你的问题,有些人可能是第一次提问,遗漏了一些东西,有时候就会有人提醒你,需要补充哪些信息,请及时处理。 2、与回答者沟通,如果你的问题描述的不是那么完美无瑕,或者回答者理解偏差导致给出了错误的回答,你应该及时的跟回答者进行沟通,而不是无视别人。 自己提出的问题,如果有了解决方案,一定要去把这个坑填上,共勉! [图片] [图片]
2022-07-25 - 微信小程序头像昵称实战篇
2022-08-25 api文档地址: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html 目前的api变更后,得到的地址为 临时地址, 这个是文档没有说明的, 最佳实践,是需要把得到的地址上传到自己的服务器,然后用服务器返回的地址作为 真实头像的永久地址. 核心点说明: //获取到api返回的新地址路径 onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大,请重新选择!' }); } }, fail: e => { this.$toast('上传失败') } }); }, 这里需要注意, wx.uploadFile 返回的是字符串类型,需要前端自己处理一下数据结构: [图片] 完整代码如下: import config from "@/common/config.js"; import {debounce} from '@/utils/debounce.js' export default { data() { return { defaultAvatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', avatarUrl: '', nick_name: '', userImg: '', } }, onLoad() { let userInfo = uni.getStorageSync('userInfo') || {}; let { nick_name,img_url } = {...userInfo}; this.userImg = img_url; this.nick_name = nick_name; }, methods: { onChooseAvatar(e) { this.avatarUrl = e.detail.avatarUrl console.log('e.detail', e.detail) // this.updateUserInfo(); this.uploadFile(); }, inputWord: debounce(function(e){ this.nick_name = e.detail.value console.log('this.nick_name.length',this.nick_name.length) let str = this.nick_name.trim(); if(str.length==0){ this.$toast('请输入合法的昵称') return } if((/[^/a-zA-Z0-9\u4E00-\u9FA5]/g).test(str)){ this.$toast('请输入中英文和数字') return } this.updateUserInfo() }, 1500), /* 上传 头像 转 话格式*/ uploadFile(){ uni.uploadFile({ url: config.webUrl + '/upload/uploadImages',//后台接口 filePath: this.avatarUrl,// 上传图片 url name:'image', // formData: this.formData, header: { 'content-type': 'multipart/form-data', 'token': uni.getStorageSync('token') }, // header 值 success: res => { let obj = JSON.parse(res.data) console.log('obj', obj) if (obj.code == 1) { let imgUrl = obj.data.full_path; this.userImg = imgUrl; this.updateUserInfo(); } else { uni.showToast({ icon: 'none', title: '图片太大,请重新选择!' }); } }, fail: e => { this.$toast('上传失败') } }); }, updateUserInfo(){ let self = this; uni.showLoading({}); let params = { img_url: this.userImg, nick_name: this.nick_name.trim(), } self.$http.post('updateUserInfo', params).then(res => { uni.hideLoading() if (res.data.code == 1) { self.$toast('修改成功!') }else { self.$toast(res.data.msg) } }) }, } } 请一键三连,争取升个级,谢谢各位道友! 补充一下,如果api不生效注意切换一下版本库: 我本地用的2.26.1 [图片] 实际效果图: [图片] [图片]
2022-11-24 - 什么小程序需要医疗相关类目?
什么内容或服务的小程序需要补充医疗相关类目? [图片] 1、 公立医疗机构:小程序涉及提供公立医疗机构提供的就医、健康咨询/问诊、医疗保健信息等服务。需补充医疗-公立医疗机构类目。 所需资质:《医疗机构执业许可证》和《事业单位法人证书》 案例:如图可看到,该小程序公立医疗机构是提供门诊挂号门诊缴费等就医服务,需补充医疗-公立医疗机构类目。 [图片] 2、私立医疗机构:小程序内涉及提供私立医疗机构提供的就医、健康咨询/问诊、医疗保健信息等服务。需补充医疗-私立医疗机构类目。 所需资质:《医疗机构执业许可证》 案例:如图可看到,该小程序是私立医疗机构,涉及提供医疗美容服务,需补充医疗-私立医疗机构类目。 [图片] 3、就医服务:小程序内涉及提供查询报告单、预约挂号、在线缴费等医疗服务,或提供医疗机构推荐服务。需补充医疗-就医服务类目。 所需资质(3选1): (1)卫健委(卫生健康委员会)批文或医管局批文; (2)签订协议的合作医院列表、与其中一家医院签订的协议样本、该协议医院的《医疗机构执业许可证》、小程序申请者的承诺书; (3)平台类型服务:《小程序开发者承诺函》、及其他平台良好经营情况的证明材料(如app store 评分超过50万人及app内提供该类目的服务内容截图) 案例:如图可看到,该小程序涉及提供多家门店预约康复,并且有档案绑定,精选医师涉及多家医院优秀医生的介绍,需补充医疗-就医服务类目。 [图片] 4、医疗-健康咨询服务:小程序内涉及提供医疗信息科普等服务内容包括医疗手册、养生类文章医疗资讯科普、小儿推拿等需补充医疗-健康咨询服务类目。 所需资质:《非经营性互联网信息服务备案核准》 案例:如图可看到,该小程序涉及提供养生类文章资讯信息服务,需补充医疗-健康咨询服务类目。 [图片] 5、其他医学健康服务:小程序内涉及提供非医疗级别检测服务:如运动检测、营养检测医疗级别基因检测,需补充医疗-其他医学健康服务类目。 所需资质(4选1): (1)《医疗机构执业许可证》 (2)《医疗器械生产许可证》 (3)合作医疗机构协议 (4)供应商医疗器械备案凭证及供货合同/凭证 案例:如图可看到,该小程序涉及非医疗级别基因检测服务推广等服务,需补充医疗-其他医学健康服务类目。 [图片] 6、药品非处方销售:小程序内涉及提供非处方药的在线交易、展示服务,需补充医疗-药品非处方销售类目。 所需资质(3选1): (1)《互联网药品信息服务资格证》与《药品生产许可证》(药品生产企业) (2)《互联网药品信息服务资格证》与《药品经营许可证》(药品批发企业) (3)《互联网药品信息服务资格证》与《药品经营许可证》(药品零售企业) 案例:如图可看到,该小程序涉及在线展示并销售非处方药品,需补充医疗-药品非处方销售类目。 [图片] 7、医疗器械信息展示:小程序内涉及医疗器械信息的展示,需补充医疗医疗器械信息展示类目。 (医疗器械范畴参考国家药监监督管理局官网:http://app1.sfda.gov.cn/datasearchcnda/face3/dir.html 所需资质:《互联网药品信息服务资格证》 案例:如图可看到,该小程序涉及在线展示医疗器械产品,需补充医疗医疗器械信息展示类目。 [图片] 8、药品信息展示:小程序内涉及药品信息的展示,需补充医疗-药品信息展示类目。 所需资质:互联网药品信息服务资格证》 案例:如图可看到,该小程序涉及药品信息展示,需补充医疗-药品信息展示类目。 [图片] 9、医疗器械生产企业:小程序内涉及医疗器械生产业务及展示,需补充医疗-医疗器械生产企业类目。 所需资质:《医疗器械生产许可证》 案例:如图可看到,该小程序涉及在线展示医疗器械生产厂家业务信息,需补充医疗-医疗器械生产企业类目。 [图片] 10、医疗器械自营:小程序内涉及医疗器械的在线经营和销售业务及展示。需补充医疗医疗器械自营类目。 所需资质(同时满足): (1)《互联网药品信息服务资格证书》; (2)《医疗器械生产许可证》或《医疗器械经营许可证》; 案例:如图可看到,该小程序涉及在线销售膏药类医疗器械产品,需补充医疗医疗医疗器械自营类目。 [图片] 11、医疗器械经营销售平台:小程序涉及为医疗器械用品类商家,提供平台入驻服务,补充医疗-医疗器械经营销售平台。 所需资质:《互联网药品信息服务资格证书》和 医疗器械网络交易服务第三方平台备案凭证(食药监局颁发) 案例:如图可看到,该小程序中多个不同医疗器械商家,在线销售医疗器械补充医疗-医疗器械经营销售平台。 [图片] 12、互联网医院:小程序提供网上看病、挂号、在线开药买药等全方位服务,补充医疗-互联网医院类目。 所需资质(2选1): (1)卫生健康部门的《设置医疗机构批准书》 (2)合作医院的《医疗机构执业许可证》与执业登记机关的审核合格文件 案例:如图可看到,该小程序涉及网上看病、挂号等全方位就医服务补充医疗-互联网医院类目。 [图片] 13、血液、干细胞服务:小程序涉及提供采集、存储血液和干细胞存储等服务。需补充医疗-血液、干细胞服务类目。 所需资质(3选1): (1)《血站执业许可证》及《承诺函》; (2)《单采血浆许可证》及《承诺函》; (3)政府有关部门批文及《承诺函》; 案例:如图可看到,该小程序涉及提供细胞储存服务,需补充医疗-血液、干细胞服务类目。 [图片] 14、临床试验:小程序内涉及提供临床试验信息及试验患者招募服务,需补充医疗-临床试验类目。 所需资质(4选1): 1、需提供2家或以上的具有临床试验资质的医疗机构的合作协议(2选1): (1.1)与具有临床试验资质的医疗机构之间的合作协议证明; (1.2)与医药公司之间的合作协议证明,以及医药公司与具有临床试验资质的医疗机构之间的合作协议 2、有临床试验资质医疗机构主体提供(2选1) : (1.1)公立医疗主体提供 :《事业单位法人证书》及《医疗机构执业许可证》及《药物临床试验机构资格认定证书》/《药物临床试验机构备案》 (1.2)私立医疗主体提供:《医疗机构执业许可证》及《药物临床试验机构资格认定证书》/《药物临床试验机构备案》 案例:如图可看到,该小程序涉及提供全国不同地区的药品受试者,需补充医疗-临床试验类目。 [图片] 15、非处方药销售平台:小程序涉及为入驻商家提供平台型的非处方药在线交易、展示等服务,需补充医疗-非处方药销售平台类目(该类目暂不支持在线销售处方药)。 所需资质:同时提供:《互联网药品信息服务资格证》与《增值电信业务经营许可证》(核准服务项目包含“在线数据处理与交易处理业务“或“互联网信息服务业务”) 案例:如图可看到,该小程序涉及为多家入驻药商提供非处方药销售的平台型服务,需补充医疗-非处方药销售平台类目。 [图片]
2021-08-04 - 请问,如何在h5移动端凋起微信分享?
需求:点击按钮凋起微信(对话/朋友圈)分享
2022-07-08 - 小程序性能优化实践
小程序性能优化课程基于实际开发场景,由资深开发者分享小程序性能优化的各项能力及应用实践,提升小程序性能表现,满足用户体验。
2024-10-09 - 小程序性能优化指南
开发者可通过开发者工具中的性能扫描工具提前发现代码中的可优化项: 1. 代码包不包含插件大小超过 1.5 M 【建议】小程序代码包单个包大小限制为2M。因此我们建议开发者在开发时,如果遇到单包体积大于1.5M的情况,可以采取分包的方式,把部分代码拆分到分包去,降低单个包的体积,提升小程序的加载速度。具体可以查看文档《使用分包》。 2. 引用插件大小超过 200 K 【知会】小程序插件的大小是会算进小程序代码包2M体积限制中的。因此当我们发现开发者引用的插件体积大于200K时,会对开发者予以提示,避免出现上传阶段提示代码包体积超限,但是不知道为何超限的问题。 3. 图片和音频资源大小超过 200 K 【建议】小程序代码包里可以存放一些必要的静态资源(如tabbar的icon等);但其他非必要的静态资源体积过大会影响小程序代码包加载速度。因此我们建议图片、音频等静态资源体积大小超过200K时,将它们上传到CDN,用URL引入会是个更好的选择。 4. 主包存在仅被其他分包依赖的JS 【建议】当主包里存在一些JS文件只会被分包使用(而主包自己不使用)时,我们建议把这些JS文件从主包中拆分出去,放到对应的分包里,从而优化主包的加载速度。 5. 主包存在仅被其他分包依赖的组件 【建议】当主包里存在一些组件只会被分包使用(而主包自己不使用)时,我们建议把这些组件从主包拆分出去,并且可以使用 分包异步化 这个特性加载这些组件,从而优化主包的加载速度。 6. 存在无使用的插件 【必须】如果有无使用的插件,请将其从 app.json 中去除。不然它会占用代码包体积,也会延迟代码包加载的时间。 7. 存在无使用的组件 【必须】如果在对应页面JSON的 `usingComponents` 里声明的组件但是没有使用,请将其从 `usingComponents` 里去除。 8. 未开启JS压缩 【必须】在工具「详情」-「本地设置」中开启「上传代码时自动压缩脚本文件」的设置 [图片] 9. 未开启WXML压缩 【必须】在工具「详情」-「本地设置」中开启「上传代码时自动压缩wxml文件」的设置 [图片] 10. 未开启WXSS压缩 【必须】在工具「详情」-「本地设置」中开启「上传代码时自动压缩样式文件」的设置 [图片] 11. 存在无依赖文件 【必须】在「代码质量」面板,点击「建议去除」后,可以打开代码依赖分析面板的「无依赖文件」页面,这里可以看到代码包里没有被用到的文件。请在代码包中去除这部分文件,减小体积并优化加载速度。 在本地开发的过程中,会自动过滤无依赖的文件,如果出现误过滤的情况,可以在 project.config.json 的 setting 字段中添加 ignoreDevUnusedFiles 为 false,也可以在 packOptions 的 include 字段中手动将被忽略的文件引入,同时欢迎发帖反馈误报的情况提交代码片段帮助我们完善此功能 注意:页面若为配置在 app.json 中,将被识别为无依赖文件 [图片] 12. 未开启组件懒注入(按需注入) 【必须】在 app.json 中加入 `"lazyCodeLoading": "requiredComponents"` 可以开启小程序组件按需注入特性。 其他优化内容,请点击学习《小程序性能优化实践》课程 [图片]
2023-02-17 - 小程序支持跳转到应用宝或者第三方网页吗?
目前没有这个功能。小程序web-view只支持跳转到开发者自己的页面。
2020-01-14