- 小程序开发之 web-view 的进阶玩法
背景 半年前写过一个项目,在京东手机的小程序里内嵌老罗的锤子发布会的活动页。前几天老罗又发布了他的加湿器,而这份关于锤子项目的迟到的总结,经过这几天在全网搜索的相关问题来看,依然有必要写一下。 本文主要从 web-view 与 JSSDK 的实现来展开,顺带过一下 web-view 的基础,最后在文末发放一些实用的小糖豆。 ok,废话不多说,开始吧。 web-view 中可用的 JSSDK 接口 1. web-view 的本质 与 JSSDK 我们已知,web-view 是闭环的小程序对外开启的一扇窗户,是小程序承载网页链接的容器。web-view 就像小程序里内置的浏览器内核,可以运行网页,其实 web-view 本质即是微信的 WKWebview 的实现。 区别:小程序框架系统包括两部分,视图层和逻辑层,两者对应的技术实现分别是 webview 和 JSCore;web-view本质上就是一个浏览器,承载网页,包括视图和逻辑实现。 [图片] 微信Webview 不仅应用于小程序的 web-view,也应用于公众号等所有微信里可以打开网页的位置。 微信Webview 不仅集成了普通 webkit 引擎的基础功能,还注入了微信JSBridge(JS-SDK)相关的脚本,提供给开发者更多高效的能力,如:拍照、语音、位置基于手机系统的能力;扫一扫、微信分享、卡券、支付等微信个性化能力。 而基于微信Webview 的 web-view 组件,除开放承载页面的功能外,也被赋予了一些 JS-SDK 的使用能力,尽管有一定的限制,但整理来看也使 web-view 的能力变得强大了。 2. web-view 中可用的 JSSDK 接口 本文从两个维度介绍 JSSDK 的接口。只简单列举几个,更多可支持的接口还请查看web-view的文档。 [图片] 1) 可用的通用JSSDK接口 接口模块 接口说明 接口名称 判断客户端是否支持js checkJSApi 图像接口 拍照或上传 chooseImage 图像接口 预览图片 previewImage 图像接口 上传/下载图片 uploadImage/downloadImage 图像接口 获取本地图片 getLocalImgData 音频接口 开始/停止录音 startRecord/stopRecord 音频接口 播放/暂停/停止语音 playVoice/pauseVoice/stopVoice 地理位置 使用内置地图/获取地理位置 getLocation/openLocation 蓝牙接口 开启/关闭/监听 start/stopSearchBeacons/onSearchBeacons 扫码 微信扫一扫 scanQRCode 卡券 列表/添加/打开 chooseCard/addCard/openCard 长按 小程序圆形码 智能接口 识别音频 translateVoice 2)与小程序相关的接口 除通用的JSSDK接口外,web-view 还支持和小程序跳转相关的接口,比如:navigateTo、redirectTo、switchTab、navigateBack,类似这种。具体写法都是加上 wx.miniProgram. 这样。 此外,关于小程序和web-view 的通信需要请求:wx.miniProgram.postMessage 方法,小程序侧进行侦听即可,具体方法可参看公众号的另一篇文章。 3)这些接口的可用性? 能够运行这些接口的最前提的条件就是,需要在小程序的环境里进行。那如何判断是否在小程序的环境里? 有两种方法: wx.miniProgram.getEnv [代码]wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) // true }) [代码] window.__wxjs_environment [代码]console.log(window.__wxjs_environment === 'miniprogram') [代码] web-view 如何使用 JSSDK 接口? 了解 web-view 可用的API 后,我们知道,在嵌入的H5 页面里,可以从相机里选择图片,或使用扫一扫的功能,那具体我们该如何实现呢? [图片] 微信公众平台给出了详尽的 JS-SDK 的实现方法,我们这里将几个当年踩过的要点给出。 1)绑定域名。 首先需要登录相关联的公众号,嗯!你没有看错,确实是公众号,(有很多人吐槽此事,但这确实是目前的事实。)登录后进入“公众号设置”-“功能设置”,填写“JS接口安全域名”。 [图片] 这一行为,建立了网页域名和 appId 之间的绑定关系,即,该appId 下可以打开这几个域名白名单里的网页。 同web-view 的业务域名配置一样,也需要将生成的校验文件拷贝到域名指向的 web 服务器的目录下。 2)签名的实现。 [图片] 签名是进入下一步的必要条件,这部分交由后端实现,了解它会提升你们的联调能力。 第一步,获取微信网页授权,拿到access_token值。 接口: https请求方式: [代码]GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET [代码] 参数 是否必须 说明 grant_type 是 获取access_token填写client_credential appid 是 第三方用户唯一凭证 secret 是 第三方用户唯一凭证密钥,即appsecret 公众号和小程序均可以使用 AppID 和 AppSecret 调用本接口来获取access_token。 AppID和AppSecret可在“微信公众平台-开发-基本配置”页中获得(需要已经成为开发者,且帐号没有异常状态)。 需要设置IP白名单:登录“微信公众平台-开发-基本配置”提前将服务器IP地址添加到IP白名单中,点击查看设置方法,否则将无法调用成功。小程序无需配置IP白名单。 入口: [图片] 具体设置: [图片] 第二步,获得jsapi_ticket。 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket(有效期7200秒,开发者必须在自己的服务全局缓存jsapi_ticket): [代码]https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi [代码] [代码]{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 } [代码] 第三步,生成签名。 初始字段:noncestr(随机字符串), 有效的jsapi_ticket, timestamp(时间戳), url(当前网页的URL,不包含#及其后面部分)。 [代码]noncestr=Wm3WZYTPz0wzccnW jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg timestamp=1414587457 url=http://mp.weixin.qq.com?params=value [代码] 中间过程:对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序)后,使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串。 [代码]jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value [代码] 生成签名:对生成的字符串作sha1加密,字段名和字段值都采用原始值,不进行URL 转义。 [代码]0f9de62fce790f9a083d5c99e95740ceb90c27ed [代码] 3)当前页面注入权限验证配置。 所有需要使用 JSSDK 的页面必须首先注入配置信息,否则无法调用 JSSDK 的 API。在2)中我们有生成的签名和生成签名依赖的时间戳和随机串,这些都是我们进行配置的必要入参。具体如下: [代码]wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: '', // 必填,公众号的唯一标识 timestamp: , // 必填,生成签名的时间戳 nonceStr: '', // 必填,生成签名的随机串 signature: '',// 必填,签名 jsApiList: [] // 必填,需要使用的JS接口列表 }); [代码] 其中 apilist 是本页面里支持使用的 JSSDK 的 API,如果不声明,是不可以被调用使用的。 在下一步4)中会有一个实例。 4)万事俱备之后 config 接口是异步请求的,所以增加 ready 的接口来判定config 是否已经具备;同时,也提供了error 接口来实现 config 失败后的处理。 哈哈,以上基本就是 JSSDK 在小程序 web-view 里的打通实现,因为中间牵扯前后端的实现,看起来篇幅长且凌乱,不知道你还能不能看到这里呢? 如果你是前端童鞋,先跟你报个喜,绑定域名和实现签名这些都不是你需要做的事情,把这些丢给你的后端童鞋,让他们来实现吧。但我还是提个醒,这些我们有必要知道,因为你在打通 web-view 和 JSSDK 时,可能无从下手。 5)一个例子帮你搞定 以下我们用一个例子,把前端方案的实现串起来,给大家一个直观的展示。 引入微信 JSSDK 库: [图片] 请求后端生成签名的接口,获取相关config依赖的字段: [图片] 在ready后,使用 wx.chooseImage() 选择本地相册的图片。 [图片] ok,到此为止,我们基本把 JSSDK 在 web-view 里的应用实现介绍完了。 总的来说,这是一个看起来比较简单,但实现起来可能有很多不可知问题的事情,我们当年苦于不了解需要在公众号下申请各种资源,不知道使用哪个 JSSDK 走了许多弯路,后来还踩过设置IP白名单的问题。这些都还是比较好解决的,本文也基本把这些很详尽的做了描述。在签名的实现中,还会有很多问题,还好我们当时也根据文档附录中的指点一一解除。 长征路漫漫,还好有分享~ 糖豆:web-view 在实际场景中的应用问题 [图片] 在这些和 web-view 相伴相生的日子里,也逐渐总结了一些问题,大致分为了几类,列举如下: 1. 开放能力的问题: 是否开放支付,是否支持直播,是否支持h5里添加分享按钮? 答案否! 插件禁用 webview 组件 个人账号可以测试,无法上线 小程序无法读取 web-view 的 cookie。 小程序不可以触发模板消息 类似以上问题,都可以归结为小程序的 web-view 对 JSSDK 的开放能力,须严格按微信的JSSDK提供的能力检查是否可行。 能否嵌套了其他的第三方网站的页面?答案:一切h5里引入的链接都需要加业务域名。 喜报:支持打开相关联公众号的文章!! web-view 对外部网页的开放能力都是基于业务域名的白名单设置! 感谢开放关联公众号的打开权限,运营小伙伴可以玩起来。 2. 白屏问题? 紧接上文,强化一下业务域名配置问题。很多业务域名配置失败的直接症状就是白屏,然后给一句话,引用非业务域名。问题直接明了!那如何解决? 1)优先查看业务配置是否ok,是否是https等。2)不能解决问题继续查看其他证书,如TSL版本。具体可查阅小程序HTTPS证书的约定。 3. 跳转问题。 首页是web-view 时没有回退按钮?层级过深时,回退过多? 这个是经常被问到的问题,首页web-view 没有回退,官方没有给出很明确的说法;而非首页的 web-view 一旦路由跳转建立起来,web-view 里的路由就默认加入了路由栈中。有什么好办法解决? 这个已跟小程序没关系了,唤醒你在浏览器里的处理吧。 4. 缓存、网页不刷新问题? 这个也可以归结为浏览器里如何处理缓存的问题,类似浏览器网页中的缓存,可以通过时间戳。另外看看是不是你的CDN 缓存了内容? 5. 分享问题? 分享接口拿到的 webViewUrl 只是第一个 url,如果你的页面已经进入到它的子页面中,再次分享时,这时候你分享得到的 url 没有变化。这时候 你需要在子页面中使用 postMessage,捕获到当前页面的路径,传递给小程序。当用户触发分享时,只要读取消息队列最近的一条数据即可。 记得拼接参数时需要encodeURIComponent。 6 web-view 改宽高? 不可以。默认铺满整屏。web-view 和 其他UI组件的关系是互斥的,并且小程序会优先选择展示 web-view。如果你想放多个web-view,很抱歉,它默认只展示第一个web-view 的内容,还会在控制台给个大大的报错。 7 web-view 提示“未绑定网页开发者”? 没有开发该网页的权限!需要在公众号的开发者工具里绑定开发者微信号。 8 web-view 的校验文件是什么格式? 官方回答:是一个含有普通字符串的txt文件,只是一个随机的字符串,与appid无关。放心使用~ 好啦~以上是对 web-view 常见问题的总结,总结不敢保证全对,另外一定是会过时的,所以,这只是你遇到问题的一个思考方向,具体方案还要请参看小程序官方文档。 如果你有更好的方案,欢迎回复我们,超级无敌感谢! 最后,感谢你能够读到这里,也愿你不枉此行。 扩展阅读 [1] 微信JS-SDK说明文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 [2] 微信小程序开放能力-web-view https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 文章原载于公众号:全栈探索。
2019-02-21 - 微信小程序码获取-从频繁失败到成功率100%
早期实现方案 1. 方案实现 通过微信的appSecret获取小程序accessToken并缓存 微信小程序上很多操作都需要使用accessToken,比如用户授权手机号,当然也包括获取小程序码 通过微信提供的api获取到对应的小程序码,由于http接口直接返回的是图片本身,所以考虑将图片上传七牛服务器并获取图片链接,最后使用图片的链接来展示或保存小程序码 2. 方案优点 由于上传了小程序码,对于一些跳转固定页面和参数的码可以将图片链接存到数据库,以供用户下次分享使用,无需重复获取 3. 存在的问题 稳定性很差,获取小程序码的失败率比较高,甚至会出现一个时间段内完全获取不到码的情况 接口效率不好,由于每次都会存在图片上传,而且上传本身又比较耗时,导致服务器压力巨大且频繁出现慢接口,可能会影响到项目中的其他服务 改造后方案 1. 方案实现 获取小程序码后不再上传七牛,直接通过图片流的方式返回给前端 2. 方案优点 取消了图片的上传操作,接口效率大幅提升,提高了小程序码的获取成功率,也减轻了服务的压力 3. 存在的问题 依旧存在小程序码获取失败的情况 4. 问题排查 经排查日志发现是accessToken失效导致,缓存的accessToken失效时间远比微信规定的失效时间短,那究竟又是什么情况会导致accessToken失效呢?经讨论和实验发现以下三点: 我们微信的appSecret授权给第三方网站使用(比如阿拉丁),他们也有获取小程序码的服务,运营可以通过阿拉丁获取小程序码,这就会导致阿拉丁使用我们的appSecret获取accessToken,以至于我们缓存中的accessToken失效。 后端缓存中的accessToken存入和获取的逻辑存在缺陷,每当从缓存读取accessToken时,若缓存不命中,则通过微信api获取新的accessToken然后再存入缓存,这个逻辑容易导致缓存穿透,即当多个请求都没有命中缓存时,只有一个线程能通过微信api拿到新的accessToken,其他线程都拿不到。 当一个accessToken存在时间比较长时,手动调用微信api获取小程序码,会看到微信的api也会存在概率获取不到码的情况,但是一个全新生成的accessToken则不会有这种情况,至少在10分钟之内非常稳定。 最终的方案 1. 方案实现 通知运营不要再使用阿拉丁的生成小程序码的功能,若有这方面需求可以找技术帮忙获取。 缓存中的accessToken有效时间缩短至5分钟,保证每次使用的accessToken都能稳定获取小程序码。 修改accessToken的获取机制,由定时器来获取accessToken并更新缓存,定时器每4分钟执行一次,以确保每个请求都能命中缓存,若定时器出现异常,则回退之前的逻辑(请求没有命中缓存,通过微信api重新获取accessToken)。 最终效果 这一个方案上线后,线上再也没有出现小程序码没有获取成功的情况,观察日志也没再出现获取失败的情况,目前已经两周保持100%成功率了。 [图片]
2019-06-04 - 微信AccessToken返回40001,时好时坏的解决办法。
1、检查下开发环境、测试环境和生产环境是不是有一个进程把access_token给刷新掉了。最好只同时运行一个环境,或者切换其他公众号的参数测试。 2、是否有其他平台共用开发参数。 3、多进程刷新掉了
2019-10-20 - 【原创】小程序码前端调试
源文件地址:https://blog.csdn.net/weixin_41000111/article/details/105769336 理解 小程序码是只有微信小程序自己才能识别的一种码。微信的小程序码测试是测试不了的,只能是项目上线了才能看到效果。这个不是想搞事吗。(亲测啊) 后台的想法 小程序码参数长度是有限的。那么建议贵公司后台也能给通过设置一个参数,就是某个字段然后对应值。然后前端拿着这个值去查询数据库,里面就是存的相应数据(存路径等)。比如我公司就是使用id后面再跟着某个id值,后台只要生成小程序码直接拼好id值。下图是后台php代码 接招 根据上面的后台生成的,那么咱们就开始操作一番。下面进行详情讲解下怎么操作的。 第一步:将参数转义下 让后台给我id值,比如8505,然后使用参数进行生成模拟的参数。 姿势点:微信内好像只能使用 encodeURIComponent 与 decodeURIComponent,其他自己可以试一试 [代码]'scene=' + encodeURIComponent('id=8505') [代码] 如图 第二步:填写模拟参数 请安装下面的小步骤。注意:你操作的不是二维码,是小程序码。小程序码。小程序码 1. 先复制好第一步生成的值。 2. 点击开发工具内的 编译下拉框 [图片] 3. 点击添加编译模式 [图片] 4. 名称:选项,建议填写清楚(可选项) 5. 启动页面:必须是你在 app.json 里面首次进入的页面。 6. 启动参数:复制好的粘贴进去。 7. 进入场景:用于进入场景(可选)。 最后填写完成后,进行点击确定 第二点一步:整个流程截图 第三步:代码解析 那么开始我们代码块的地方了。哈哈哈哈 [代码]// 在入口的页面中进行写代码 let app = getApp(); // // 代码块省略 ... onLoad: function (options) { // 判断当前是有参数的并且进入的场景有这些: if (options.scene && (app.scene === 1047 || app.scene === 1048 || app.scene === 1049)) { // 注意:优化点,字符串截取,能使用 slice 使用,千万别使用什么replace、split等,原因是耗时啊 var id = decodeURIComponent(options.scene).slice(9) } } [代码]
2020-04-26 - 服务端如何生成体验版或开发版指定页面的小程序圆码?
服务端调用接口生成的是生产小程序圆码,希望可以通过服务端调用接口生成体验版或开发版指定页面的小程序圆码,而不是需要发布正式版。除了通过开发者工具处理还有别的方式嘛?有哪位小伙伴,有过处理经验,求解~!
2020-01-17 - 在小程序里如何获取用户唯一的openid呢?
在小程序里如何获取用户唯一的openid呢?
2020-08-10 - 修改微信用户信息后,getUserInfo信息什么时候更新?
更新时间:2小时
2020-09-04 - 小程序内用户帐号登录规范调整和优化建议
为更好地保护用户隐私信息,优化用户体验,平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能,包括但不限于进行的手机号登录,getuserinfo形式登录、邮箱登录等形式。具体规范要求如下: 1.服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户,且注册后即可提供线上服务的小程序,不得在用户清楚知悉、了解小程序的功能之前,要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录,都属于违反上述要求的情况; 以下反面示例,在用户打开小程序后立刻弹出授权登录页; [图片] 建议修改为如下正面示例形式:在体验小程序功能后,用户主动点击登录按钮后触发登录流程,且为用户提供暂不登录选项。 [图片] 2.服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册,需通过更多方式完成身份验证后才能提供服务的小程序,可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序; 下图案例为正面示例:校友管理系统,符合规范要求。 [图片] 3.仅提供注册功能小程序 对于线上仅提供注册功能,其他服务均需以其他方式提供的小程序,可在说明要求使用帐号登录功能的原因后,引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请; 如下反面示例,用户在进入时未获取任何信息,首页直接强制弹框要求登录注册ETC,这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式:允许在首页说明注册功能后,提供登录或注册按钮供用户主动选择点击登录。 [图片] 4.提供可取消或拒绝登录选项 任何小程序调用帐号登录功能,应当为用户清晰提供可取消或拒绝的选项按钮,不得以任何方式强制用户进行帐号登录。 如下图所示反面示例,到需要登录环节直接跳转登录页面,用户只能选择点击登录或退出小程序,这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式,在需帐号登录的环节,为用户主动点击登录,并提供可取消按钮,不强制登录。 [图片] 针对以上登录规范要求,平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求,从2019年9月1日开始,平台将会在后续的代码审核环节进行规则提示和修改要求反馈。
2019-07-20 - 小程序webview嵌套H5页面调用JSAPI完成支付的BUG
小程序webview嵌套H5页面调用JSAPI支付 小程序体验版可以调起JSAPI支付,小程序发布后无法调起JSAPI支付,请问这个是什么原因?
2020-09-03 - 小程序嵌入H5页面,安卓能支付,IOS不能支付能解决吗?
提示缺少参数,问一下怎么解决这个问题,能不能解决,是iOS只支持H5支付吗?不能嵌套使用? [图片]
2020-09-10 - official-account组件可以在(点击关注)之后隐藏吗?
official-account组件可以在点击 关注 之后隐藏掉吗? 或者有没有事件可以判断
2019-12-05 - 微信小程序线上official-account不显示,工具中调试有,真机调试也有
official-account 微信小程序线上official-account不显示,工具中调试有,真机调试也有,上线就不行,我是扫码进入小程序的
2020-03-09 - 想在小程序中引导用户下载app是否违规?
不知道这样的社交算不算违规[图片]
2020-06-28 - 小程序已经删除掉了引导下载,为什么申诉还是不成功?
[图片] 请@官方回应一下。
2020-08-03 - 小程序内引导下载app的几个方案
小程序内引导下载app的几个方案 该文系列: 1)小程序内引导下载app的几个方案? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/0004a49e34cda8f9fd4bb9ab751013 2)微信小程序如何引导下载app系列二? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000e6c48b04ad0eff94bb36a251413 3)微信小程序如何引导下载app系列二? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000e6c48b04ad0eff94bb36a251413 本文背景大家都知道在小程序内是无法直接跳到下载页,完成下载app的功能,当然除非像pdd这种有亲爹各位格外照顾的除外 本文内容那么有什么其他方案可以最大程度的完成这种功能呢,现在我简单罗列几种 1)在当前场景下通过下发短信,短信带下载链接,进而实现下载; 2)在小程序内提供复制按钮,复制下载链接,然后自行到浏览器或者微信完成下载; 3)在小程序内通过展示下载链接二维码,引导用户通过截图或者下载二维码两种方式,将图片保存到本地,然后通过微信打开,长按识别二维码,完成下载; 4)通过跳转到客服窗口,回复下载链接,进而可以实现下载 5)小程序内可以直接打开同一主体公众号的文章链接,可以在公众号文章内提供下载的入口,完成下载操作 备注 1)第四、第五两种方式我刚开始没有想到,感谢群里 晓易#API开发 (https://developers.weixin.qq.com/community/personal/oCJUsw5ky0EfSa4XCVxzdend2HDM) 提供思路 参考文档1)在小程序可以跳到app下载页吗?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0008c845fa862079f84bb1e6a51000 2)小程序支持跳转到应用宝或者第三方网页吗?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0002a2e2ba89b0d808a9707cb5b009 3)关于小程序内诱导下载APP违规行为公告? - 微信开放社区 https://developers.weixin.qq.com/community/operate/doc/000ea078938bb082bac9be3c45bc01 4)关于小程序内诱导下载APP违规行为公告? - 微信开放社区 https://developers.weixin.qq.com/community/operate/doc/000ea078938bb082bac9be3c45bc01 5)小程序web-view跳转应用宝app下载页面ios无法点击跳转,安卓可以?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0004029f08c42811d6b6a2bee50800 6)想在小程序中引导用户下载app是否违规?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000c86149a400030249a303e156800 本文背景 暂未总结 如有其他方式,欢迎补充,非常感谢
2021-02-02 - 小程序类目不符应如何整改?
若小程序收到类目不符相关站内信通知后,可按照以下指引完成调整: 方式一:补充对应类目并通过类目审核(部分类目需要补充相关类目资质材料)后,可发起申诉流程。申诉通过后即可恢复相关功能及服务。 方式二:若无法补充相关类目信息,可清除缺失类目相关的内容或服务,完成调整后可发起申诉流程。 方式一中的类目补充具体流程如下:[图片] 1、找到类目设置入口 ① 在微信公众平台页面登录小程序帐号后,访问左边导航栏的“设置”模块,找到其中的“基本设置”页面 [图片] ② 在“基本设置”页面中选择“服务类目”,点击“详情”。 [图片] ③ 在“详情”页面上点击“添加服务类目”。 [图片] 2、选择对应类目,上传相关资质材料 ① 进入“添加服务类目”页面,选择需要添加的类目。 [图片] ② 上传对应资质文件的清晰原件或无水印复印件,复印件务必加盖公司公章,文件格式为jpg、jpeg、bmp、gif或png,文件大小不超过5M。 [图片] ③ 提交成功后,等待审核结果。 [图片] 3、类目审核通过 ① 可在“通知中心”中查看类目审核结果的站内信通知。 [图片] ② 相关类目的状态显示为“已通过”,表示相关类目已补充成功。 [图片]
2020-03-18 - 小程序中的webview中如何才能加载http请求的链接呢?
我看有的小程序加载h5,我抓包,显示的是http链接和http请求,请官方给个解释呢?
2020-06-05 - 登录流程有点不清楚?
微信正常的登录流程,应该是点wx.login() 获得code,提交到我的服务器(http的不是https的)一个方法里,我根据自己的appid,密钥,cod 组装向微信发一个请求,返回来只是openid,sessionkey,还有个过期时间,没有拿到unnionid.不知道是不是因为我的服务请求是用的HTTP? 然后我就在调用wx.login的方法里把 code,加密数据,iv等一起提交上去。然后把加密数据解密就能得到unionid,但是我发现不是每次都能解密成功,也不知道是什么原因? 另外还有点逻辑上的不清晰,希望大神能帮忙理一下。我打算后台是建一个用户表,一个微信用户表,先检查微信用户表unnionid是否存在,如果不存在则新增一条,然后自动创建一个用户数据把微信用户表id作为用户表的关联。创建完用户数据后,生成一个guid 作为key,用户数据对象作为value暂时先存在静态字典里(这里暂时没有考虑过期的问题)。然后 把这个key返给前端,前端收到这个KEY后保存到storage e里,然后下面每次去取数据都带上这个key到后台拿数据,后台再根据KEY取用户,返回对应用户的数据给前端。 这个套路不知道有没有问题 吧? 希望大神们能解答一下。如果要有个过期时间问题,微信的返回的那个session_key这个字段不知道能起来什么作用? 我应该怎么做?
2019-08-28 - webview 接入一个可支付的h5,无法唤起支付?
我有一个可以支付的h5页面。现在用小程序的webview嵌入这个页面,体验版不能唤起支付,但是当打开调试面板后,又可以唤起支付。 各位大佬,可遇到过?
2020-02-13 - 现在小程序webview中能直接调起h5支付了吗?
现在小程序webview中能直接调起h5支付了吗?我试了两台手机在关闭调试模式下都能支付成功。是微信这边修复了这个功能了吗
2020-07-01 - webView中使用高德jssdk是否需要小程序也获取定位授权
- 当前 Bug 的表现(可附上截图) 无法正常调用webview使用html5获取地理位置的接口,报错超时,但是在chorme下出现询问是否允许获取地理位置弹窗,同意后可以获取地理位置,使用正常。没有调用wx提供的getLocation接口,检查小程序没有请求获取地理位置的权限。 是否需要让小程序获取地理位置权限才可以正常使用webView中浏览器的原生方法。 已在开发者工具中使用真机调试,允许获取地理位置后也不能解决此问题 - 预期表现 调用html5获取地理位置接口不超时,正常请求 - 复现路径 未发布到公网 - 提供一个最简复现 Demo
2019-05-27 - web-view 套h5页面,就算是外部的静态资源都要加白名单
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo web-view 套h5页面,就算是外部的静态资源都要加白名单,如:http://www.xxx.com/jquery.js https://res.wx.qq.com/open/js/jweixin-1.3.2.js 这怎不算呢,算的话,我要怎么验证res.wx.qq.com 是我的服务器 引用百度地图的,千牛存储的这些如何处理呢
2019-03-22 - 小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付
小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。 老规矩先看效果。 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来。 https://v.qq.com/x/page/t0913iprnay.html 原理 先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调。我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。 一,定义webview显示h5页面 关于webview的使用,我就不做讲解了,官方文档里写的很清楚,用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html [图片] webview很简单,就是用一个webview组件,显示我们的网页。 二,定义h5页面 我这里启动一个本地服务器,用来展示一个简单的h5页面。 [图片] 上图是我在浏览器里显示的效果。 接下来我们在小程序的webview里显示这个页面,也很简单,只需要把我们的src定义为我们的本地网页链接就可以了。 [图片] 这里有一点需要注意 因为我们是本地链接,我们需要到开发者工具里把这一项给勾选。 [图片] 三,来看下h5页面代码 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小程序内嵌webview</title> <style> .btn { font-size: 70px; color: red; } </style> </head> <body> <h1>我是webview里的h5页面</h1> <a id="desc" class="btn" onclick="jumpPay()">点击支付</a> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> console.log(location.href); let payOk = getQueryVariable("payOk"); console.log("payOk", payOk) if(payOk){//支付成功 document.getElementById('desc').innerText="支持成功" document.getElementById('desc').style.color="green" }else{ document.getElementById('desc').innerText="点击支付" } //获取url里携带的参数 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } function jumpPay() { let orderId = Date.now();//这里用当前时间戳做订单号(后面使用你自己真实的订单号) let money = 1;//订单总金额(单位分) let payData = {orderId: orderId, money: money}; let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序,所以这里需要转为字符串 const url = `../wePay/wePay?payDataStr=${payDataStr}`; wx.miniProgram.navigateTo({ url: url }); // console.log("点击了去支付", url) console.log("点击了去支付") } </script> </body> </html> [代码] h5代码这里不做具体讲解,只简单说下。我们就是在点击支付按钮时,用当前时间戳做为订单号(因为订单号要保证唯一),然后传一个订单金额(单位分),这里节约起见,就传1分钱吧,花的是自己的钱,心疼。。。。 关键点说一下 1, 必须引入jweixin,才可以实现h5跳转小程序。 <script type=“text/javascript” src=“https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script> 2,跳转到小程序页面的方法 [代码]const url = `../wePay/wePay?payDataStr=${payDataStr}`; wx.miniProgram.navigateTo({ url: url }); [代码] 这里要和你小程序的页面保持一致。payDataStr是我们携带的参数 [图片] 四,小程序支付页 来看下我们的小程序支付页 [图片] 小程序支付页功能很简单,就是来接收我们h5传过订单号和订单金额。然后去调起微信支付,实现支付。支付成功和支付失败都有对应的回调。 [图片] 支付我们这里实用的小程序云开发来实现的支付,核心代码只有10行。由于支付不是本节的重点,所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频 小程序支付文章:https://www.jianshu.com/p/2b391df055a9 小程序支付视频:https://edu.csdn.net/course/play/25701/310742 下面把小程序接收参数和支付的完整代码贴出来给大家 [代码]Page({ //h5传过来的参数 onLoad: function(options) { console.log("webview传过来的参数", options) //字符串转对象 let payData = JSON.parse(options.payDataStr) console.log("orderId", payData.orderId) let that = this; wx.cloud.callFunction({ name: "pay", data: { orderId: payData.orderId, money: payData.money }, success(res) { console.log("获取成功", res) that.goPay(res.result); }, fail(err) { console.log("获取失败", err) } }) }, //微信支付 goPay(payData) { wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success(res) { console.log("支付成功", res) //你可以在这里支付成功以后,再跳会webview页,并把支付成功状态传回去 wx.navigateTo({ url: '../webview/webview?payOk=true', }) }, fail(res) { console.log("支付失败", res) } }) } }) [代码] 代码里注释很清楚,这里有一点,就是我们支付成功后,需要告诉h5我们支付成功了,通知h5去刷新订单或者支付状态。 到这里我们就完整的实现了小程序webview展示h5页面,并且做到了h5和小程序的交互,实现了小程序webview的支付功能。 是不是很简单呢。 源码地址 1,关注“编程小石头”公号,回复“webview”即可获取源码 2,也可以到我github下载源码 https://github.com/qiushi123/xiaochengxu_demos [图片]
2019-08-15 - 业务域名和第三方文件引用的问题?
现有小程序采用webview模式开发,webview嵌套的是我们的手机网站,里面有引用各种第三方埋点工具的js文件,类似(https://www.google-analytics.com/analytics.js)。这些第三方的js资源文件的域名是否一定要添加到业务域名白名单里。按目前运行看,似乎不添加也能照常工作。 在这个基础上,我进一步问,需要添加业务域名的除了第三方的网页url,像引用的第三方的资源文件js,css,图片,视频,它们的域名是否要设置业务域名。
2020-06-15 - 小程序webview提示非业务域名?
想通过webview访问有赞商城店铺 首先通过反向代理将自己的域名到有赞商城, 然后把自己的域名配置到业务域名, 但是还是提示(小程序不是个人的,域名是https) [图片] [图片]
2020-02-19 - web-view业务域名是否支持反向代理?
使用场景,在小程序添加一个按钮实现打开公司官网,如https://www.A.com 发现需要使用web-view+业务域名实现,在添加业务域名时遇到需要认证。但是我们公司官网域名解析到第三方建站服务器上,经过沟通对方不提供添加*.txt文件达到验证域名功能。 现使用方案,在注册个域名如 https//:www.B.com 解析到自己公司服务器, 添加验证文件,实现业务域名添加成功,在自己服务器nginx 反向代理 https://www.B.com 至 https://www.A.com 。在本地浏览器测试通过, 但是小程序发布到体验版,打开页面提示。不支持打开非业务域名,请重新配置,请问如上情况应该怎么解决。
2019-08-27 - 【接口相关】接着聊数据接口的登录态校验,必须用cookie怎么办
上一次(【接口相关】聊一聊数据接口的登录态校验以及JWT)说到app、小程序的数据接口一般采用token来做登录信息校验,因为用不了cookie。但是实际应用的时候如果因为某些原因必须要用cookie该怎么办了? 案例 说一下我的实际案例吧,我做过的一个小程序,背景是这个项目已经有web端,希望能有个小程序把web功能复制一遍,但是后端这边已经交付,没有人再继续维护,所以需求是在不修改后端的基础上把小程序做出来。我看了一下现有的web端,有好有坏,好的就是web端数据操作都是通过ajax调用接口来完成的,接口都是现成的;但是坏的就是数据接口和web页面在同一个域名下,由于没有跨域问题,所以用户登录状态的校验用的是cookie。 这就麻烦了,我前面说过了,小程序里面是用不了cookie的。当时就这个问题和客户也做了沟通,得到的答复就是后端已经没人再搞了,数据库也不开放给你,你自己想办法。 解决方案 不过还好,我可是会PHP的小程序开发者。我这边最终给出的方案是用PHP搭一个中间环境,模拟cookie从原来的后端接口操作数据后再转换成token形式传给小程序使用。 PHP中模拟cookie读取接口需要通过curl的相关配置来实现,基本原理是在PHP服务器端设置一个静态文件存储cookie信息,直接看代码吧 [代码]$ch=curl_init(); // 一些基本的配置 curl_setopt($ch, CURLOPT_POST, TRUE); ... // 模拟cookie的相关配置 $cookie_file='cookie.txt'; // 服务器上存储cookie的文件 if(file_exists($cookie_file))curl_setopt($ch, CURLOPT_COOKIEFILE, $cookie_file); curl_setopt($ch, CURLOPT_COOKIEJAR, $cookie_file); // 读取接口 $response=curl_exec($ch); curl_close($ch); [代码]
2019-12-16 - wx.request如何在header传多个cookie?
开始获取的Set-Cookie 的数据直接存储起来加到header的cookie了,可是如果有多个cookie的时候后端只获取到了第一个,怎么上传多个cookie并且后端可以都获取到
2019-11-01 - web-view调用了百度API,在IOS中提示不支持打开非业务域名,求解?
[图片]
2020-04-15 - web-view中bindmessage数据多时不触发怎么解决?
业务需要在小程序中加载一个本地文件(如PDF文件、DOC文件、bin文件等),小程序API并没有提供相关接口,查了文档说可以通过web-view加载,实现了下,选择文件后通过wx.miniProgram.postMessage回传信息到小程序,然后在小程序的web-view中加入bindmessage="deal_with_msg" 处理函数,发现deal_with_msg函数不会被触发,但是当wx.miniProgram.postMessage传递的数据为一个短短的字符串时就可以触发deal_with_msg函数,请问怎么做才能把选择的文件数据传入小程序中进入处理(文件大概1M的样子)?
2019-09-26 - 在小程序管理后台配置了业务域名的条件下,怎么使用web-view正确跳转外部h5链接?
在小程序管理后台配置了业务域名的条件下,使用web-view跳转外部h5链接的时候,提示“不支持打开非法域名https://api.xxx.com(ps: h5链接的域名并不是以api开头的),请重新配置”。但是当我点击手机上的返回键之后,却又能正确进入h5链接了,请问造成这种情况的可能原因有哪些?
2020-03-11 - 小程序不配置业务域名无法打开外部网址吗?
小程序内的链接是外部网址,例如: http://www.i2p.com.cn/news/show-359515.html, 无法打开,有什么好的解决办法吗,业务急需
2019-12-06 - 小程序如何访问外链?
小程序中如何访问第三方的页面啊 通过nginx 代理可以么 自己尝试还是会有业务域名校验 有成功的例子么
2019-08-10 - 利用云函数绕过域名校验和HTTPS配置,实现内网加端口访问
闲来无事,无意中发现云函数中的request网络请求可以不用配置校验域名和https,也就是说可以通过云函数封装一个请求通用函数来处理没有域名和https的网络请求(甚至包括内网穿透,可以用非80端口进行实验)。 适用场景: A、没有域名或使用局域网(直接使用IP访问); B、使用花生壳动态域名解析(内网穿透); C、有域名但不想申请配置HTTPS(懒人); D、连自己的服务器都没有,接口直接使用开源或者第三方接口且不能添加域名校验的情况(空壳); E、不愿意直接在小程序中直接暴露自己逻辑API实际请求地址的(安全); ······ 具体步骤如下: 1、给项目添加云函数支持(https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/getting-started.html) 2、新建名为“proxy”的云函数,配置支持request-promise [代码]// package.json[代码][代码]{[代码][代码] [代码][代码]"name"[代码][代码]: [代码][代码]"proxy"[代码][代码],[代码][代码] [代码][代码]"version"[代码][代码]: [代码][代码]"1.0.0"[代码][代码],[代码][代码] [代码][代码]"description"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码] [代码][代码]"main"[代码][代码]: [代码][代码]"index.js"[代码][代码],[代码][代码] [代码][代码]"scripts"[代码][代码]: {[代码][代码] [代码][代码]"test"[代码][代码]: [代码][代码]"echo \"Error: no test specified\" && exit 1"[代码][代码] [代码][代码]},[代码][代码] [代码][代码]"author"[代码][代码]: [代码][代码]""[代码][代码],[代码][代码] [代码][代码]"license"[代码][代码]: [代码][代码]"ISC"[代码][代码],[代码][代码] [代码][代码]"dependencies"[代码][代码]: {[代码][代码] [代码][代码]"wx-server-sdk"[代码][代码]: [代码][代码]"latest"[代码][代码],[代码][代码] [代码][代码]"request"[代码][代码]: [代码][代码]"latest"[代码][代码],[代码][代码] [代码][代码]"request-promise"[代码][代码]: [代码][代码]"latest"[代码][代码] [代码][代码]}[代码][代码]}[代码][代码]// 云函数入口文件index.js[代码] [代码]const cloud = require([代码][代码]'wx-server-sdk'[代码][代码])[代码][代码]const rq = require([代码][代码]'request-promise'[代码][代码])[代码][代码]cloud.init()[代码][代码]// 云函数入口函数[代码][代码]// event为小程序调用的时候传递参数,包含请求参数uri、headers、body[代码][代码]exports.main = async (event, context) => {[代码][代码] [代码][代码]return[代码] [代码]await rq({[代码][代码] [代码][代码]method: [代码][代码]'POST'[代码][代码],[代码][代码] [代码][代码]uri: event.uri,[代码][代码] [代码][代码]headers: event.headers ? event.headers : {},[代码][代码] [代码][代码]body: event.body[代码][代码] [代码][代码]}).then(body => {[代码][代码] [代码][代码]return[代码] [代码]body[代码][代码] [代码][代码]}).[代码][代码]catch[代码][代码](err => {[代码][代码] [代码][代码]return[代码] [代码]err[代码][代码] [代码][代码]})[代码][代码]}[代码]3、在小程序中调用云函数请求数据请求 [代码]onLoad: [代码][代码]function[代码][代码](){[代码][代码] [代码][代码]// 初始化[代码][代码] [代码][代码]wx.cloud.init()[代码][代码]},[代码][代码]onGetItemList: [代码][代码]function[代码][代码](){[代码][代码] [代码][代码]wx.cloud.callFunction({[代码][代码] [代码][代码]name: [代码][代码]'proxy'[代码][代码],[代码][代码] [代码][代码]data: {[代码][代码] [代码][代码]// http域名 https域名 第三方域名 非验证域名 IP[:prot] 内网IP或花生壳域名[代码][代码] [代码][代码]uri: [代码][代码]'http://192.168.1.100:8081'[代码][代码],[代码][代码] [代码][代码]headers: {[代码][代码] [代码][代码]'Content-Type'[代码][代码]: [代码][代码]'application/json'[代码][代码] [代码][代码]},[代码][代码] [代码][代码]body: {[代码][代码] [代码][代码]uid: 1[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}).then(res => {[代码][代码] [代码][代码]console.log(res)[代码][代码] [代码][代码]const data = res.result[代码][代码] [代码][代码]console.log(data)[代码][代码] [代码][代码]// do something[代码][代码] [代码][代码]})[代码][代码]}[代码]然后你会发现你已经无所不能了。 个人见解,如有不妥之处,望各位大神指正!~
2018-12-03 - web-view跳转业务域名不对?
[图片][图片]当我跳转业务域名的时候web-view会先跳转到正确的地址然后跳转到了webchat里面
2020-02-28