使用微信提供的开放标签，注入wx-open-launch-weapp 标签，先使用vue写了，加了template标签。发现按钮直接不显示。外部加了个标签包裹起来并设置了宽高，开放标签内容还是不展示。后改为图1：可算是展示出来了。然鹅 点击没有任何反应。在wx-open-launch-weapp标签上加了@ready 或者 加@launch绑定的方法 也没有任何返回值。JS安全域名都已配置成当前的测试环境域名了 [图片] 因为Vue发布测试环境 需要等待时间较长。所以用原生写法重新写了个：还是不执行。有没有大佬测试跳转成功了的。 [图片] [图片] [图片] http://test-m.qtshe.com/test.html

由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有小程序码的图片，然后引导用户下载图片到本地后再分享到朋友圈。相信大家在绘制分享图中应该踩到 Canvas 的各种（坑）彩dan了吧～ 这里首先推荐一个开源的组件：painter（通过该组件目前我们已经成功在支付宝小程序上也应用上了分享图功能） 咱们不多说，直接上手就是干。 [图片] 首先我们新增一个自定义组件，在该组件的json中引入painter [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 然后组件的WXML (代码片段在最后) [代码]// 将该组件定位在屏幕之外，用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 重点来了 JS (代码片段在最后) [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败，请刷新页面重试' }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成，重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 那么我们该如何引用呢？ 首先json里引用我们封装好的组件share-box [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 以下示例为获取用户头像昵称后再生成图。 [代码]<button class="intro" bindtap="getUserInfo">点我生成分享图</button> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 调用的地方： [代码]const app = getApp() Page({ data: { isCanDraw: false }, // 组件内部关掉或者绘制完成需重置状态 handleClose() { this.setData({ isCanDraw: !this.data.isCanDraw }) }, getUserInfo(e) { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: res => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 开始绘制海报图 }) }, fail: err => { console.log(err) } }) } }) [代码] 最后绘制分享图的自定义组件就完成啦~效果图如下： [图片] tips： 文字居中实现可以看下代码片段 文字换行实现（maxLines）只需要设置宽度，maxLines如果设置为1，那么超出一行将会展示为省略号 代码片段：https://developers.weixin.qq.com/s/J38pKsmK7Qw5 附上painter可视化编辑代码工具：点我直达，因为涉及网络图片，代码片段设置不了downloadFile合法域名，建议真机开启调试模式，开发者工具 详情里开启不校验合法域名进行代码片段的运行查看。 最后看下面大家评论问的较多的问题：downLoadFile合法域名在小程序后台 开发>开发设置里配置，域名为你图片的域名前缀 比如我文章里的图https://qiniu-image.qtshe.com/20190605index.jpg。配置域名时填写https://qiniu-image.qtshe.com即可。如果你图片cdn地址为https://aaa.com/xxx.png, 那你就配置https://aaa.com即可。

1.不能从第一个视频播放 解决思路：在获取到数据后拿到第一条数据使用unshift放到数组的第一条（笨办法） 2.播放不到最后一个视频 解决思路：这个问题会在视频长度为3、6、9、12、下会出现，以此类推，相信大家看到这个长度就会有解决办法了吧 3.在播放到最后会重复播放倒数第二条 解决思路：这个问题会在视频长度为4、7、10、13、下会出现，以此类推，一开始还给数组复制了那个是不算在这个长度里的，这个长度最好是从后端拿，下面就贴代码 由于时间原因，解释的不太详细，直接贴图了，研究过源码里的算法一看就懂了，希望能帮助到大家，觉得还行给个赞以示鼓励 [图片] animationfinish: function animationfinish(e) {           var _data = this.data,               _last = _data._last,               _change = _data._change,               curQueue = _data.curQueue,               prevQueue = _data.prevQueue,               nextQueue = _data.nextQueue,               total = _data.total;           var current = e.detail.current;           var diff = current - _last;           if (diff === 0) return;           this.data._last = current;           this.playCurrent(current);           this.triggerEvent('change', { activeId: curQueue[current].id});           var direction = diff === 1 || diff === -2 ? 'up' : 'down';           if (direction === 'up') {             //判断下面是否有视频             if (this.data._invalidDown === 0) {                 //当前索引                 var change = (_change + 1) % 3;                 //加入下一个视频                 var add = nextQueue.shift();                 //移除上一个视频                 var remove = curQueue[change];                 if (add) {                     prevQueue.push(remove);                     curQueue[change] = add;                     this.data._change = change;                     if((total%3) === 0 && nextQueue.length === 0) {                       curQueue[3] = add                     } else if((total%3) === 1 && nextQueue.length === 0){                       this.setData({                         _pop : curQueue.pop()                       })                     }                 } else {                   this.data._invalidUp += 1;                 }             } else {                 this.data._invalidDown -= 1;             }           }           if (direction === 'down') {             if (this.data._invalidUp === 0) {                 var _change2 = _change;                 var _remove = curQueue[_change2];                 var _add = prevQueue.pop();                 if (_add) {                     curQueue[_change2] = _add;                     nextQueue.unshift(_remove);                     this.data._change = (_change2 - 1 + 3) % 3;                 } else {                     this.data._invalidDown += 1;                 }             } else {               if((total%3) === 0 && curQueue.length === 4) {                 curQueue.pop()               } else if((total%3) === 1 && nextQueue.length === 0){                 curQueue.push(this.data._pop);               }               this.data._invalidUp -= 1;             }           }           var circular = true;           if (nextQueue.length === 0 && current !== 0) {               circular = false;           }           if (prevQueue.length === 0 && current !== 2) {               circular = false;           }           this.setData({               curQueue: curQueue,               circular: circular           });         // console.log(1, curQueue)         // console.log(2, prevQueue)         // console.log(3, nextQueue)         // console.log('--------------', _change)       },

各位微信开发者： “小程序直播” 功能正在公测中，目前已支持服务商接入。 服务商申请权限之后，可帮助商户快速实现小程序直播功能。 功能简介 “小程序直播” 是微信官方提供的商家经营工具。符合接入要求的商家，通过直播组件，可以在小程序中实现直播互动与商品销售的闭环。 商户准入要求 满足以下条件的电商平台、自营商家，即有机会被邀请到小程序直播公测中来： （同时满足以下1、2、3条件，加上4、5、6条件的其中之一即可。） 1. 属于小程序直播开放类目，具体见《微信小程序直播功能准入要求》 2. 主体下小程序近半年没有严重违规 3. 小程序近90天存在支付行为 4. 主体下公众号累计粉丝数大于100 5. 主体下小程序近7日dau大于100 6. 主体在微信生态内近一年广告投放实际消耗金额大于1w 服务商接入指引 具体接入指引请参考《【小程序直播】服务商接入指引》，以下为服务商接入步骤。 1. 权限申请 1） 在问卷《服务商“小程序直播”接入申请》填写相关信息并等待权限开通，发送申请后7个工作日内，可登陆微信开放平台查看第三方平台权限集并勾选 “小程序直播” 能力； 2） 开通后，即可登陆 “微信开放平台” （open.weixin.qq.com）勾选 “小程序直播” 第三方权限集并全网发布； 2.功能开发 小程序直播需要实现【直播组件】与【后台API】两个部分，其中组件部分需要在小程序中进行配置开发。 具体开发文档，请参考《小程序直播组件接入指引》。

更新：2020年7月28日08:51:11 基础库2.12.0起，可以调用wx.enableAlertBeforeUnload监听原生右上角返回、物理返回以及wx.navigateBack时弹框提示 AIP详情请看： https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.enableAlertBeforeUnload.html //======================================== 怎么监听小程序的返回键？ 应该有很多人想要监听用户的这个动作吧，但是很遗憾，小程序不会给你这个API的，那是不是就没辙了？ 幸好我们还可以自定义导航栏，这样一来我们就可以监听用户的这一动作了。 什么？这你已经知道啦？ 那好咱们就不说自定义导航栏的返回监听了，说一下物理返回和左滑？右滑？(不管了，反正是滑)返回上一页怎么监听。 监听物理返回 首先说一下这个监听方法的缺点，虽说是监听，但是还是无法真正意义上的监听并拦截来阻止页面跳转，页面还是会返回上一页，而后重新载入刚刚的页面，如果这不是你想要的，那可以不用往下看了 其次说一下用到什么东西: wx.onAppRoute、wx.showModal 最后是一些主要代码: 重写wx.showModal，主要是加个confirmStay参数和使wx.showModal Promise化 [代码]const { showModal } = wx; Object.defineProperty(wx, 'showModal', { configurable: false, // 是否可以配置 enumerable: false, // 是否可迭代 writable: false, // 是否可重写 value(...param) { return new Promise(function (rs, rj) { let { success, fail, complete, confirmStay } = param[0] param[0].success = (res) => { res.navBack = (res.confirm && !confirmStay) || (res.cancel && confirmStay) wx.setStorageSync('showBackModal', !res.navBack) success && success(res) rs(res) } param[0].fail = (res) => { fail && fail(res) rj(res) } param[0].complete = (res) => { complete && complete(res) (res.confirm || res.cancel) ? rs(res) : rj(res) } return showModal.apply(this, param); // 原样移交函数参数和this }.bind(this)) } }); [代码] 使用wx.onAppRoute实现返回原来的页面 [代码]wx.onAppRoute(function (res) { var a = getApp(), ps = getCurrentPages(), t = ps[ps.length - 1], b = a && a.globalData && a.globalData.pageBeforeBacks || {}, c = a && a.globalData && a.globalData.lastPage || {} if (res.openType == 'navigateBack') { var showBackModal = wx.getStorageSync('showBackModal') if (c.route && showBackModal && typeof b[c.route] == 'function') { wx.navigateTo({ url: '/' + c.route + '?useCache=1', }) b[c.route]().then(res => { if (res.navBack){ a.globalData.pageBeforeBacks = {} wx.navigateBack({ delta: 1 }) } }) } } else if (res.openType == 'navigateTo' || res.openType == 'redirectTo') { if (!a.hasOwnProperty('globalData')) a.globalData = {} if (!a.globalData.hasOwnProperty('lastPage')) a.globalData.lastPage = {} if (!a.globalData.hasOwnProperty('pageBeforeBacks')) a.globalData.pageBeforeBacks = {} if (ps.length >= 2 && t.onBeforeBack && typeof t.onBeforeBack == 'function') { let { onUnload } = t wx.setStorageSync('showBackModal', !0) t.onUnload = function () { a.globalData.lastPage = { route: t.route, data: t.data } onUnload() } } t.onBeforeBack && typeof t.onBeforeBack == 'function' && (a.globalData.pageBeforeBacks[t.route] = t.onBeforeBack) } }) [代码] 改造Page [代码]const myPage = Page Page = function(e){ let { onLoad, onShow, onUnload } = e e.onLoad = (() => { return function (res) { this.app = getApp() this.app.globalData = this.app.globalData || {} let reinit = () => { if (this.app.globalData.lastPage && this.app.globalData.lastPage.route == this.route) { this.app.globalData.lastPage.data && this.setData(this.app.globalData.lastPage.data) Object.assign(this, this.app.globalData.lastPage.syncProps || {}) } } this.useCache = res.useCache res.useCache ? reinit() : (onLoad && onLoad.call(this, res)) } })() e.onShow = (() => { return function (res) { !this.useCache && onShow && onShow.call(this, res) } })() e.onUnload = (() => { return function (res) { this.app.globalData = Object.assign(this.app.globalData || {}, { lastPage: this }) onUnload && onUnload.call(this, res) } })() return myPage.call(this, e) } [代码] 在需要监听的页面加个onBeforeBack方法，方法返回Promise化的wx.showModal [代码]onBeforeBack: function () { return wx.showModal({ title: '提示', content: '信息尚未保存，确定要返回吗？', confirmStay: !1 //结合content意思，点击确定按钮，是否留在原来页面，confirmStay默认false }) } [代码] 运行测试，Oj8K 是不是很简单，马上去试试水吧，效果图就不放了，静态图也看不出效果，动态图懒得弄，想看效果的自己运行代码片段吧 代码片段 https://developers.weixin.qq.com/s/hc2tyrmw79hg