概述：本着学习的目的，做了这个分享。自己切切实实的做完了整个流程，发现其中的坑也是蛮多的，当然自己的收获对应也是蛮多的。写下这个流程一方面为了加深自己的印象、可以在将来回顾一下，另一方面也是为了给有需要的人提供帮助～ 一、服务器准备 [代码]为了演示方便，我购买了一台腾讯云服务器 [代码] [图片] 安装的操作系统是centos 二、域名准备 1、域名注册 可以从万网上进行注册：https://wanwang.aliyun.com/ 2、域名备案 备案流程略复杂，这里只列了一个步骤简介 入口：https://beian.aliyun.com/ [图片] 域名的备案时间较长，建议大家提前准备起来。 3、域名解析 域名备案通过之后，为我们的网站准备一个子域名，入口：https://dns.console.aliyun.com/?spm=a2c1d.8251892.aliyun_sidebar.daliyun_sidebar_dns.37575b76kNuXEO#/dns/domainList [图片] 点击上图的解析设置 [图片] 将记录值填写我们刚刚买的服务器的公网ip 三、申请ssl证书 我是从腾讯提供的证书服务里申请的，腾讯申请入口 https://console.cloud.tencent.com/ssl 点击“申请免费证书” [图片] 这里选择了手动Dns验证 [图片] 申请完成后会有个表格，是说明如何Dns校验的，要求域名下添加一条解析记录 [图片] Dns校验 首先，在域名下添加一条txt记录 [图片] 然后，单机自助诊断旁边的“查询” [图片] 下载证书 [图片] 点击图中的下载即可 四、服务器安装软件 我用ssh连接服务器 登录服务器：ssh root@212.129.*.* ， 然后输入密码(从腾讯云管理后台进行密码的设置和获取)进入服务器，然后安装软件，如下～ 1、git：用于代码管理 2、nvm：用于管理node版本 3、node：用于启动web服务 4、pm2：用于守护node进程 安装git [代码]yum install git -y [代码] 下载nvm [代码]git clone git://github.com/creationix/nvm.git ~/nvm [代码] 设置nvm 自动运行; [代码]echo "source ~/nvm/nvm.sh" >> ~/.bashrc source ~/.bashrc [代码] 查询node版本 [代码]nvm list-remote [代码] 安装node.js [代码]nvm install v10.16.3 [代码] 使用nodejs [代码]nvm use v10.16.3 [代码] 使用npm安装pm2 [代码]npm install -g pm2 [代码] 五、下载一个web项目 & 使用 pm2 启动 这里我使用了自己的一个github上的项目：https://github.com/myronliu/ssr-koa-react-redux.git 1、git clone https://github.com/myronliu/ssr-koa-react-redux.git 2、cd ssr-koa-react-redux 3、npm install 4、pm2 start server.js 服务启动之后如下图： [图片] 现在我们可以用IP(服务器的公网ip) + 端口号来进行访问了 [图片] 六、安装nginx 步骤 1: 添加 yum 源 Nginx 不在默认的 yum 源中，可以使用 epel 或者官网的 yum 源，本例使用官网的 yum 源。 sudo rpm -ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm 安装完 yum 源之后，可以查看一下。 sudo yum repolist 步骤 2: 安装 yum 安装 Nginx，非常简单，一条命令： sudo yum install nginx 常用nginx命令介绍 设置开机启动 $ sudo systemctl enable nginx 启动服务 $ sudo systemctl start nginx 停止服务 $ sudo systemctl restart nginx 重新加载，因为一般重新配置之后，不希望重启服务，这时可以使用重新加载。 $ sudo systemctl reload nginx 步骤3: 打开防火墙端口 sudo firewall-cmd --permanent --zone=public --add-service=http sudo firewall-cmd --permanent --zone=public --add-service=https sudo firewall-cmd --reload [图片] 步骤4: 配置nginx 找到并查看配置文件/etc/nginx/nginx.conf [图片] 步骤5: 配置我们自己的conf [图片] 编写为 [图片] 步骤6: 现在可以使用域名访问我们的网站了，目前是http协议的 [图片] 七、安装证书 将第三步下载的证书里选择Nginx下的两个文件上传到服务器的/etc/nginx/conf.d文件夹下 [图片] Mac上利用scp上传 scp /Users/xxx/Downloads/todo.xxx.com/Nginx/1_todo.xx.com_bundle.crt root@212.129.*.*:/etc/nginx/conf.d [图片] 八、创建https的conf文件 进入到/etc/nginx/conf.d下，执行命令：touch https.conf && vi https.conf [图片] 测试nginx配置 & 重启 [图片] 九、访问https协议的站点 [图片] 备注： 如有问题，欢迎指出！ 如有侵权，联系删除～

- 当前 Bug 的表现（可附上截图） 小米6播放（video组件）阿里云CDN视频卡住 [图片] - 预期表现 正常播放 - 复现路径 小米6手机，打开二更视频，点一个超过5分钟的视频，播放。加载一段播放完就会卡住。 从nginx请求日志来看，小米6和其它手机播放的数据请求不太一样 华为机子播放视频nginx请求日志 [图片] 第一次是httpcode = 200，应该是tcp连接超时了断连了，后面的视频会以range，一段一段请求。 小米6播放视频nginx请求日志 [图片] 小米6上就一条请求记录，和播放器上播放完播放器也就卡住了吻合。 求助阿里云CDN工程师，小米6视频播放抓了个包 [图片] TCP知识不太懂现查的。我的理解是服务端断开连接了，客户端没有正常处理连接断开，还在发送本地window有空余可以继续写入数据。后面也没有继续发起range请求视频数据。然后播放器就卡住了。 这个断开连接的时间感觉有点短，而且好像数据还有在读写突然就断开了。 和阿里云CDN工程师沟通了两天，最后 [图片] 写客户端超时时间改成300秒后，我们的视频基本是6分钟内的，测试播放正常了。因为300秒超时远大于一块数据缓冲后的可播放时长，播放器会继续请求后面的数据。 虽然CDN调整了这个写客户端超时时间，但是觉得播放器数据请求处理上有点问题。同样30秒超时机制下，其它机型上播放是没问题的。 又了解到只是针对我们视频域名做了超时时间调整，遇到相同问题的同学临时解决方案可以去阿里云提工单。

9月27号以后就有很多童鞋提出过如下问题(也就这两类) 小程序发布上线后，可以扫码进入，可以分享进入，但是为什么就是搜索不到呢？ 我小程序的名字叫ABCDE，之前搜索的时候搜索ABC或者搜索CDE就能搜索到我的小程序，为什么现在只能靠ABCDE才能搜索到？ 微信于2019年9月27日对搜索功能进行升级维护，下面是官方发布的消息[图片] **关于第一个问题：**这个是因为搜过功能的升级和维护出现的不应该出现的情况，之前上线新的小程序，一般过十几分钟或者个把小时，就能在搜索中搜索到自己的小程序了，现在有的超过24小时还是搜索不到，对于这种情况，需要发帖子询问官方了，为了官方能尽快帮你解决问题，建议开发者在发帖提问的时候，贴出自己小程序的APPID，方便官方快速帮你查询并修复问题。 **关于第二个问题：**个人的看法是因为搜索功能的异常，本人也搜锁过之前搜索的关键词，搜索出来的结果和之前也是不一样的，包括排名的前后（我是不太相信排名突然间大变样）。只能说微信在搜索功能进行真实环境的测试，而且赶上这个关键的时期，你懂得(别说你不懂，其实我也不懂)。所以大家还是期望微信能尽快成功升级搜索功能，相信升级成功后官方会发公告和文档（感觉这次是大更新）。 对于有些朋友因为搜索的问题，没办法给客户一个合理的解释，大家不要自己强背锅啊，把上面的图发给客户，毕竟这些事情，我们也没办法左右的呀，您说是不？ 10月9号更新： 现在好多人发帖说全拼都搜索不到自己的小程序了，首先登录自己的账号，看看有没有站内信，是否有违规被暂时隐藏了，如果没有的话，基本上都是因为小程序优化升级搞得鬼！建议发帖提问，找官方回答，先提供小程序全称和appid，方便官方帮你排查 10月11号更新： 今天看到有同学发帖子说搜索好像恢复了，我自己测试了一下，能搜索出部分小程序，然后过了一会，网络不可用…感觉还没有升级成功 大家都着急，技术小哥更着急，大家还是沉住气等好消息吧！

之前做过很多公众号的项目，项目写完后给客户看项目，客户一而再再而三的修改元素向左挪1px，向右挪2px。改好之后让客户看，客户说我特泽发克，你啥都没有修改，你竟然骗我！！！ 这其实就是微信内置浏览器的缓存在作祟啦，那么如何清理微信内置浏览器的缓存呢？ 你们是否知道 ios版微信 和 android版微信 的内置浏览器的内核是不一样的呢？ android版微信内置浏览器（X5内核）         在安卓版微信内打开链接   http://debugx5.qq.com 拉到调试页面的最底端，勾选上所有的缓存项目，点击清除。 [图片] 点击确定之后即可完成清除微信浏览器缓存的操作。 ios版微信内置浏览器（WKWebView）         ios版微信内置浏览器内核并不是 X5内核，而是使用的ios的浏览器内核WKWebView，所以安卓手机的那种方案对ios手机用户不生效，因为那个链接压根打不开 只要微信用户退出登录，然后重新登录，ios版微信内置浏览器内核即可清除，不行的话，你们回来打我 有人说了：“IOS中  设置—通用----存储空间  就会看到“正在计算空间”计算完了会清理一点清理即可”，这种办法当然也可以，但是这种办法不光是清理微信内置浏览器的缓存，同时也清理其他的一些数据，比如朋友圈的视频图片和聊天记录等等缓存，而且容易误删某些想留下的数据，对于开发而言，我认为退出重新登录是最好的解决办法。

项目备注是什么？ 在使用 微信开发者工具 上传体验版的时候，会有一个项目备注的条目，如图： [图片] 现在就来简单说说【项目备注】的一些基础用法吧（采取QA形式） Q：我的小程序/小游戏需要账号登录才能使用，但是小程序提审没有输入测试账号和密码的地方，怎么办？ A：可以在醒目备注里面把测试账号和密码写上去，这样审核人员就能看到啦 Q：我的小程序被驳回，说不能完整体验所有功能，我小程序是内部使用的，需要登录才行，不登录当然不能体验啦。 A：可以给审核人员一个测试账号进行测试，同上。 Q：我小程序是内部使用的，必须授权才能使用，但是一直被驳回说登录流程不规范。 A：可以在项目备注里面写明该小程序的应用场景，供审核人员进行判断。 Q：小程序被驳回，说需要XX资质，但是我们这里XX部门说不需要这个资质，也没用这个资质了，该怎么办？ A：可以在项目备注里面写明该资质无需提供，最好再带上你所联系的XX部门相关人员的单位、姓名以及联系方式，以便审核人员核实。 tips: 可以把本次的更新内容写到项目备注，也许能加快审核也说不定呢～ 目前暂时就想到这些，以后有想到啥就回来补充，也欢迎各位大佬在评论区留言，然后我编辑到文章中来～

小程序开发小技巧 --webview 记录下webview 开发调试相关问题，包括常见的小tip，社区相关问题以及本地调试等基本操作。前一段打算写总结，写着发现没有什么干货，今天看见社区朋友提问 webview调试 难道搞个测试还需要去办理后台配置业务不成吗？是的一开始我就是配业务域名，不停的往服务器传包。。。历历在目所以还是梳理记录一下，希望能对社区小伙伴开发有帮助。 常见的 Bug & Tip 常见的小问题 tip：个人类型的小程序暂不支持使用。 tip: navigationStyle: custom 对 web-view 组件无效,也就是自定义导航栏。 tip: src 指向，可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。 tip: 不希望webview缓存，配置NG或者src后面加随机数。 tip：保持登陆状态传递cookie、token等，简单的可以拼接URL完成。 tip：webview无法进行分享或者支付，常规操作是触发状态后，传递相关信息跳转回小程序进行下一步分享或者支付。 tip：动态改变web-view的标题，直接[代码]document.title[代码]。 tip：需要刷新webview，简单暴力点[代码]windows.onload[代码]。复杂点操作history。 tip：监听web-view返回。一般场景：分享给朋友后，朋友打开进入webview活动页，如果是直接进入的wenview需要点击返回调转至首页。 tip：先调用[代码]wx.miniProgram.navigateBack[代码]在调用[代码]wx.miniProgram.postMessage[代码]。 tip：src中带有中文字符或者特殊字符的，在 iOS 中会有打开白屏的问题，需要转码，建议加一下 encodeURIComponent。 tip: 玄学问题，引入了[代码]weixin-js-sdk[代码],但是怎么也找不到，我后面用npm安装后就ok了。 tip：网页内 iframe 的域名也需要配置到域名白名单。 tip：开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开 web-view 组件的调试。 tip：每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。 tip：web-view 网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。 tip：在 iOS 中，若存在JSSDK接口调用无响应的情况，可在 web-view 的 src 后面加个#wechat_redirect解决。 tip: web-view 官方文档 webview 本地调试 难道搞个测试还需要去办理后台配置业务不成吗？配业务确实特别麻烦，为什么我最初一直自己往服务器传，，，纯属装X。。。其实本地起个web服务器美滋滋。 快速的起个本地web服务。 下面是常用的几种方法、具体用法操作可以百度。 http-server 编辑器或者浏览器中的插件、例如vscode 中的 [代码]live Server[代码]。等等 动手写一个。。 我自己用的是http-server和live Server，用了很久了，能满足需求，就没有关注其它的方法了。 vue开发单页面。 本地开发完成后在打包、进入dist文件、启动http-server、浏览器打开ok、把链接写死在webview的src，像这样 [代码] let url = 'http://127.0.0.1:8080'; // let url = options.url ? options.url : wx.getStorageSync('bargainURL') [代码] 正常的话我们可以先在chrome中调试，基本完成后在进行真机调试。在chrome中可能会涉及到跨域问题，可以开启一个chrome跨域浏览器进行调试，像这样 我是mac上这样，先创建/Users/jinxm/Documents/ChromeData 目录，然后命令行跑一下下面这个命令就OK了。window自行百度就好了。 [代码]open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/jinxm/Documents/ChromeData[代码] 这个跨域用的的还蛮多的，于是我配了个输入法快捷输入，像这样👇，方便了很多。 [图片] 真机测试 上面基本ok后，webview 路径写死，手机上看效果。这个时候会不停的改动，然后就会发现不停的npm run build 、 cd dist 、http-server 也变得很繁琐了，那就简单的配置下cli，像这样👇，修改完点一下server就ok了。 [图片] 具体cil配置也就一段话搞定，像这样 ，修改package.json. 配置有点简单，这个cli主要是做单页面使用，可以忽略。使用vue-cli的自己添加个配置文件就好了 [图片] 完结 简单的问题可以私信下。有关webview相关问题欢迎大家一起讨论👏👏👏

以下代码不一定都是本人原创，很多都是借鉴参考的（模仿是第一生产力嘛），有些已忘记出处了。以下分享给大家，供学习参考！欢迎收藏补充，说不定哪天你就用上了！ 一、第一种效果 [图片] [代码]//index.wxml <view class="zr"> <view class='user_box'> <view class='userInfo'> <open-data type="userAvatarUrl"></open-data> </view> <view class='userInfo_name'> <open-data type="userNickName"></open-data> , 欢迎您 </view> </view> <view class="water"> <view class="water-c"> <view class="water-1"> </view> <view class="water-2"> </view> </view> </view> </view> //index.wxss .zr { color: white; background: #4cb4e7; /*#0396FF*/ width: 100%; height: 100px; position: relative; } .water { position: absolute; left: 0; bottom: -10px; height: 30px; width: 100%; z-index: 1; } .water-c { position: relative; } .water-1 { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s infinite linear; animation: wave-animation-1 3.5s infinite linear; } .water-2 { top: 5px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s infinite linear; animation: wave-animation-2 6s infinite linear; } .water-1, .water-2 { position: absolute; width: 100%; height: 60px; } .back-white { background: #fff; } @keyframes wave-animation-1 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } @keyframes wave-animation-2 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } .user_box { display: flex; z-index: 10000 !important; opacity: 0; /* 透明度*/ animation: love 1.5s ease-in-out; animation-fill-mode: forwards; } .userInfo_name { flex: 1; vertical-align: middle; width: 100%; margin-left: 5%; margin-top: 5%; font-size: 42rpx; } .userInfo { flex: 1; width: 100%; border-radius: 50%; overflow: hidden; max-height: 50px; max-width: 50px; margin-left: 5%; margin-top: 5%; border: 2px solid #fff; } [代码] 二、第二种效果 [图片] [代码]//index.wxml <view class="waveWrapper waveAnimation"> <view class="waveWrapperInner bgTop"> <view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view> </view> <view class="waveWrapperInner bgMiddle"> <view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view> </view> <view class="waveWrapperInner bgBottom"> <view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view> </view> </view> //index.wxss .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; height: 300px; top: 0; margin: auto; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 500%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 10s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } [代码] 三、第三种效果 [图片] [代码]//index.wxml <view class="container"> <image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image> <view class="content"> <view class="hd" style="transform:rotateZ({{angle}}deg);"> <image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image> <image class="wave" src="wave.png" mode="aspectFill"></image> <image class="wave wave-bg" src="wave.png" mode="aspectFill"></image> </view> <view class="bd" style="height: 100rpx;"> </view> </view> </view> //index.wxss image{ max-width:none; } .container { background: #7acfa6; align-items: stretch; padding: 0; height: 100%; overflow: hidden; } .content{ flex: 1; display: flex; position: relative; z-index: 10; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding-bottom: 450rpx; background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); opacity: 0; transform: translate3d(0,100%,0); animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards; } @keyframes rise{ 0% {opacity: 0;transform: translate3d(0,100%,0);} 50% {opacity: 1;} 100% {opacity: 1;transform: translate3d(0,450rpx,0);} } .title{ position: absolute; top: 30rpx; left: 50%; width: 600rpx; height: 200rpx; margin-left: -300rpx; opacity: 0; animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards; } @keyframes show{ 0% {opacity: 0;} 100% {opacity: .95;} } .hd { position: absolute; top: 0; left: 50%; width: 1000rpx; margin-left: -500rpx; height: 200rpx; transition: all .35s ease; } .logo { position: absolute; z-index: 2; left: 50%; bottom: 200rpx; width: 160rpx; height: 160rpx; margin-left: -80rpx; border-radius: 160rpx; animation: sway 10s ease-in-out infinite; opacity: .95; } @keyframes sway{ 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 17% {transform: translate3d(0,0rpx,0) rotate(25deg); } 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); } 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); } 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); } 84% {transform: translate3d(0,15rpx,0) rotate(15deg); } 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); } } .wave { position: absolute; z-index: 3; right: 0; bottom: 0; opacity: 0.725; height: 260rpx; width: 2250rpx; animation: wave 10s linear infinite; } .wave-bg { z-index: 1; animation: wave-bg 10.25s linear infinite; } @keyframes wave{ from {transform: translate3d(125rpx,0,0);} to {transform: translate3d(1125rpx,0,0);} } @keyframes wave-bg{ from {transform: translate3d(375rpx,0,0);} to {transform: translate3d(1375rpx,0,0);} } .bd { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards; opacity: 0; } @keyframes bd-rise{ from {opacity: 0; transform: translate3d(0,60rpx,0); } to {opacity: 1; transform: translate3d(0,0,0); } } [代码] wave.png（可下载到本地） [图片] 在这个基础上，再加上js的代码，即可实现根据手机倾向，水波晃动的效果 wx.onAccelerometerChange(function callback) 监听加速度数据事件。 [图片] [代码]//index.js Page({ onReady: function () { var _this = this; wx.onAccelerometerChange(function (res) { var angle = -(res.x * 30).toFixed(1); if (angle > 14) { angle = 14; } else if (angle < -14) { angle = -14; } if (_this.data.angle !== angle) { _this.setData({ angle: angle }); } }); }, }); [代码] 四、第四种效果 [图片] [代码]//index.wxml <view class='page__bd'> <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;"> <view class="cu-bar"> <view class="content text-bold text-white"> 悦拍屋 </view> </view> </view> <view class="shadow-blur"> <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image> </view> </view> //index.wxss @import "colorui.wxss"; .gif-black { display: block; border: none; mix-blend-mode: screen; } [代码] 本效果需要引入ColorUI组件库

概述 以下方案均需要有全景照片后方可实现（自己拍的 or 网上下载）。 一、方案一：自建网页 自建网页，自己有服务器，可以用全景图转换器（如pano2vr）直接生成html代码，然后通过 webview 嵌入到小程序访问。 建议：图片可以放在七牛云或其他地方，CDN 能有效优化网页中全景图的打开速度（一般全景图片体积都是较大的）。 体验效果： [图片] 二、方案二：720yun 使用 720云，这也是大部分全景摄影社或爱好者最习惯用的平台了。他们也提供了小程序打开全景图的方案。但核心还是使用 webview，并且需要开通会员，具体参考： 建议：经费足的可以考虑一下这个方案，毕竟720云的操作和体验是真的是十分优秀的！ 参考：小程序校验指南 | 720yun https://bbs2.720yun.com/article?id=687 [图片] 三、方案三：小程序插件 以上两种方案都是借助webview来实现，也就是说必须要企业或其他单位的主体才能使用。个人的小程序如果要实现全景，建议使用这位大佬写的小程序插件——wxPano。项目一直在不断更新中，而且还免费，很值得期待！ 建议：①该插件限制全景图片分辨率需在2048*1024及以下，因此无法打开画质很高清的全景图片。②插件代码包超过1MB，对小程序打开速度有微小的影响。 链接：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx386c038238531f87 [图片] 结语 以上来自我自己开发时的一些经验，欢迎前辈老师们补充。 也欢迎社区三连——点赞收藏关注！！

 小程序分包加载后进入子包会提示“正在加载模块”，能否去掉该提示或者修改成别的提示。