wx-open-launch-weapp 打开APP 1.部分安卓点击“打开APP”无反应，IOS用户无此现象 2 控制台显示出已获取跳转路径的地址

​WeUI 使用简单，风格微信原生风格，以绿色为主色 ，主要是两个大版本 ，1.x版本和2.x版本 ，相比1.x版本来说，2.x版本视觉上更好。

全文链接：https://mp.weixin.qq.com/s/tKoUve0WYokDNgBtNTqyxg

​

视频号小店：宇豪同学989

2023年4月11日的订单。人家申请退货退款了。然后又撤销了。到现在为止。一直处于是未结算中。

2023年3月18日的订单。人家申请退货退款，然后原因申请错了。我给他拒绝了。客服介入中，一直到现在为止还是介入中，不结算也不退款。订单。

现在我要退店。导致是显示订单未完结那里完成不了。怎么处理？

【‼️必看 重要调整】

《视频号小店【优惠券】功能调整公告》

https://support.weixin.qq.com/cgi-bin/mmsupportacctnodeweb-bin/pages/niXmJEzGQpz5nQGN

视频号小店官网，认准.qq结尾，避免上当受骗！

https://channels.weixin.qq.com/commerce/#/

【服饰内衣、母婴、鞋靴、箱包皮具】商家行业规范细则解读（商家版）

https://doc.weixin.qq.com/doc/w3_AS4A-gb4AEkGSB5hRMKQse1A3MXwm?scode=AJEAIQdfAAoc08yHAvAP0AVQa_ACc

欢迎大家发布短视频带上话题：#618视频号直播好物节  #视频号服饰上新季 #买新品上视频号【‼️必看 重要调整】

《视频号小店【优惠券】功能调整公告》

https://support.weixin.qq.com/cgi-bin/mmsupportacctnodeweb-bin/pages/niXmJEzGQpz5nQGN

视频号小店官网，认准.qq结尾，避免上当受骗！

https://channels.weixin.qq.com/commerce/#/

【服饰内衣、母婴、鞋靴、箱包皮具】商家行业规范细则解读（商家版）

https://doc.weixin.qq.com/doc/w3_AS4A-gb4AEkGSB5hRMKQse1A3MXwm?scode=AJEAIQdfAAoc08yHAvAP0AVQa_ACc

欢迎大家发布短视频带上话题：#618视频号直播好物节  #视频号服饰上新季 #买新品上视频号

为保护用户个人隐私，平台默认为用户提供虚拟号服务，买家支付成功后的订单，商家后台默认是看不到买家的真实手机号码。平台自动生成了11位虚拟号+4位转接号。

点击订单详情，商家每个月可以查看100个用户的真实手机号码，应该是为了纠纷率，方便商家联系用户使用

虚拟号的优点是保护了用户隐私，缺点是用户收不到取件码短信。

尊敬的微信团队成员：

你们好！

在微信搜一搜 搜索“喜来健温热理疗床多少钱”时，在下拉词中存在一些的不实信息，请求投诉解决，在此对微信团队工作人员花费的时间及精力表示衷心的感谢，祝你们工作顺利！

公司名称是：喜来健医疗器械(北京)有限公司

在微信搜一搜当中搜索“喜来健温热理疗床多少钱”，相关词中包含“喜来健骗局央视”、“央视曝光喜来健理疗床”等，更多请看下方截图。据本人亲身对喜来健料理床使用，此产品效果甚好，价格亲民，非常喜欢这个东西。该信息不实信息，望微信团队能够给予处理，感谢！

小程序开发记录，自定义tabbar+uni-popup

最近开发小程序首次使用了uni-app，由于要根据用户权限展示不同的底部tabbar，所以不能使用原生的tab栏，

在项目开发过程中有个从底部滑出的弹窗，使用了uni-app的uni-popup，大家都知道弹窗弹出的时候，会带有遮罩层，也就是除了弹窗以外整个界面是暗黑色的，除了弹窗本身。

但是底部的tabbar也是自定义的，就导致

如上图所示，除了弹窗所在的界面外其他都是遮罩层，但是底部tabbar其实是不应该被遮罩的，这时候就用了原生的组件来替换，具体是

~

https://developers.weixin.qq.com/community/business/course/000c2053618c189d0b2f2b8f95b40dhttps://developers.weixin.qq.com/community/business/course/000c2053618c189d0b2f2b8f95b40d

公众号原始ID：gh_b492020a3c9d

公众号名称：大语文作文课堂

问题描述：我的公众号从2022年11月1号，不知道什么原因被限流了，也没收到违规通知 ，公众号的任何一篇文章搜一搜都搜索不到。恳请技术人员出面帮忙解决一下 ，万分感谢！

搜不到的文章链接：https://mp.weixin.qq.com/s/sqNUYX-DRMGh2x7L4OoSvw   文章标题：瞌睡虫王国作文300字三年级下册

关于小程序内通过webview audio标签播放音频的现象总结

~

这几天在开发基于冥想的小程序，里面有些音频播放的场景，目前由于我们音频的稀有性，只能通过特别的逻辑，使用webview的audio标签来展示，而没有通过小程序原生的音频播放实现方式。

那么通过webview audio标签播放音频有什么问题呢？

大家也不妨体验下

刚开始进入的界面展示

播放过程展示，增加了快进的操作

结论

webview audio标签播放音频在手机息屏时，音频会暂停播放，安卓和苹果手机均亲测，结论是一样的，我使用的手机是

安卓：华为P60

苹果：苹果13

备注

手机息屏会导致小程序切到后台，其实更准确来讲，是小程序切到后台后，webview audio标签播放会暂停

最新更细：使用公众号绑定后，API回调接口是接不到消息的，小程序是可以的。

服务端想接收公众号的消息的话，只能使用高级技能，但是高级技能只能往服务端传在词典里有的固定值，

注意，这里说的是固定值，也就是说只能往后端传在词典里预设好的值，无法传一些例如某个手机号等。

目前高级技能不能满足我这边的需求，有大佬用对话平台实现了公众号的消息无损推送到api端吗？求教

============================================================================

说下接入时的几个误区，大家可以看下绕过几个坑。

首先就是配置了API是无效的，现在配置API无用，公众号接收到消息根本不会往API设置的回调地址发。

然后我注意到高级技能，在高级技能里面的回复类型有一个服务接口调用，但是这个调用需要触发高级技能设置的问法。。。

即使设置了问法也没触发成功过，调用服务端我只在接口调试里面触发成功过，接收到的值也跟文档里面完全不一致。

现在的需求是接收公众号的所有消息然后通过api回调接口处理后返回对应的回答，请问能做吗？

【公众号appid】wxe00330c01b1ae789

【公众号主体】江西恒源能源服务有限公司

【申请模板类目】工具—>设备管理

【使用场景】帮助用户管理设备，如果设备出现故障或者将巡检结果通知给客户

【模板字段】

巡检单号 {{character_string1.DATA}}

设备名称 {{thing2.DATA}}

工单状态 {{phrase4.DATA}}

完成时间 {{time4.DATA}}

【消息实例】

标题：《设备安全巡检验收通知》

巡检单号：xxxxxxxx

设备名称：xx变压器

巡检结果：暂无异常

巡检时间：2023年4月10日

你好，工商数据返回：“企业法定代表人身份证号码不一致”。法定代表人验证失败。请刷新重试

个体工商户名称：杭州余杭白九一梦信息技术服务部

统一社会信用代码：92330110MA8GELAG46

在国家企业信用信息公示系统已经可以查到企业信息，但是还是认证不通过？

返回600002的错误码



当且仅当 IP 与手机 IP 处在同一网段且不与本机 IP 相同（一般来说，就是同一局域网，如连接在同一个 wifi 下）时，请求/连接才会成功

备注：同一网段，指的是 IP 前三段相同且子网掩码也相同，比如 192.168.43.01 和 192.168.43.02， 主要的坑大部分会在这。

在开发小程序时，经常会使用到弹窗（遮罩层+弹窗内容），这时滑动弹窗页面，底层的页面会发生滚动。

个人处理方法（微信开发工具不报错）：

逻辑：

1、在遮罩层最外层元素标签中绑定touchmove事件：@touchmove=“xxxx”； 和 catchtouchmove 属性（catchtouchmove是捕获touchmove事件的）

2、在methods里定义该方法，方法返回true ：return true

代码：

<template>

<view catchtouchmove [@touchmove](/user/touchmove)="mask">

	遮罩层内容

</view>

</template>

<script>

data() {

}，

methods:{

mask（）{

		return true

}，

}

</script>

望回复？类目的选择太小了，没有合适的选择 发不 选择其他的类目又不合适？........................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................ ................................................................................................................................................................................................................................................................................................................................................................................................................................................................ ................................................................................................................................................................................................................................................................ ................................................................................................................................................................................................ ................................................................................................................................................................................................ ................................................................................................................................................................................................ ................................................................................................................................................................................................ ................................................................................................................................................................................................ ................................................................................................................................................................................................ ................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................................

很抱歉，你在2023-03-07 17:40:22申诉的网站blogmao.cn，由于仍然存在违反腾讯网址安全中心相关标准的行为（标准详情请参考 https://urlsec.qq.com/eviltype.html ），所以申诉的网站将继续保持封禁。请按照标准解决相关问题后再重新提交，我们将尽快为你审核。如有疑问，可以以“网址处理结果申诉”为主题，“网址：申诉的网址。原因：申诉的原因”为邮件内容，发送到urlsecappeal@qq.com。

审核不通过的原因：网站存在恶意链接。相关违规链接如下：

http://www.blogmao.cn/

blogmao.cn

温馨提示：腾讯网址安全中心提醒您，近期有人冒充网址安全中心客服以解封的名义骗取解封费用，我们在此申明腾讯网址安全中心不会以任何名义收取任何费用，任何收取费用的解封都是骗子，请认准官方申诉渠道。

以上域名是我自己新购买的 不存在任何违规内容。（已完成个人备案）

我国趣品牌之前已经提交审核品牌库时已达到当时要求并且已成功添加至店铺内，但是现在保证金缴纳完成后要发布商品时无法选中国趣品牌进行发布，希望帮忙看下是什么原因并帮忙处理一下！谢谢您！

如果说平台改变了规则的问题，那我觉得你即使变更了规则，也不应该把我们之前已经按照要求入驻了的平台进行清掉啊，我保证金交完才发现无法选中平台发布！

还请平台小二能够核实情况给予解决，谢谢！

leafletwx是基于leaflet，使用微信原生组件开发的一套开源地图组件，目的是替换小程序内的原生map组件，项目开源地址：leatletwx。

 本示例开源地址在leafletwx的bdmap页面。

本示例使用的其他组件：

1.tileLayer.baidu.js来自开源项目leaflet-tileLayer-baidugaode，将引入leaflet改为引入leafletwx。

2.proj4.js、proj4leaflet.js

以上组件都可以在dbmap页面中获取到

pages/bdmap/bdmap.js

// pages/bdmap/bdmap.js
var L = require('../../components/zhgeo/leafletwx')
require('./tileLayer.baidu')
import {createMap} from '../../components/zhgeo/base.map'
import {DefaultIcons} from '../../components/zhgeo/config.js';
const defaultIcons = new DefaultIcons();
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const container = this.selectComponent('#bd-leafletwx')
    createMap(container, {
        crs: L.CRS.Baidu,
        minZoom: 3,
        maxZoom: 18,
        zoom: 18
      }, function(map) {
      L.tileLayer.baidu({ layer: 'vec' }).addTo(map),
      map.setView([31.300635, 120.632314]);
      
      // 添加marker
      let m = L.marker([31.300635, 120.632314], {
        src: defaultIcons.locationNow,
        width: 32,
        height: 32,
        showInCenter: false,
      }).addTo(map);
      // 删除marer
      // map.removeLayer( m );
    });
  },
})

pages/bdmap/bdmap.json

{
  "usingComponents": {
    "v-leaflet": "/components/zhgeo/zhgeo-component"
  }
}

pages/bdmap/bdmap.wxml

<!--pages/bdmap/bdmap.wxml-->
<view class="container">
    <v-leaflet id="bd-leafletwx"></v-leaflet>
</view>

pages/bdmap/bdmap.wxss

/* pages/bdmap/bdmap.wxss */

地图展示：

环境

小程序
openaiwidget 1.2.23

参考

1 敏感内容检测
2 openaiwidget：小程序后台->设置->第三方设置->插件管理->添加插件->搜索“openaiwidget”

使用 openaiwidget 做敏感词过滤

引入插件

修改小程序根目录的 app.json，添加 chatbot：

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "chatbot": {
      "version": "1.2.23",
      "provider": "wx8c631f7e9f2465e1"
    }
  },
  "requiredBackgroundModes": [
    "audio"
  ],
  "sitemapLocation": "sitemap.json"
}

初始化

修改小程序根目录的 app.js：

  onLaunch() {
    this.initPlugin();
  },
  initPlugin() {
    plugin.init({
      appid: "P5Ot9PHJDechCYqDFAW1AiK6OtG3Ja", //小程序示例账户，仅供学习和参考
      openid: "oB6jg6ENstneouhXefbujwJl7v2n", //用户的openid，非必填，建议传递该参数
      success: () => {}, //非必填
      fail: (error) => {}, //非必填
    });
  },

调用敏感内容检测接口

判断是否敏感依据如何判断是否为敏感内容，我定 other 小于 0.9 即为敏感。

var plugin = requirePlugin("chatbot");

function check(inputWord) {
    let isSensitive = false;
    plugin.api.nlp('sensitive', {q: inputWord, mode: 'cnn'}).then(res => {
        isSensitive = this.checkIsSensitive(res);
        if (isSensitive) { 
            console.debug('输入的内容'+inputWord+'敏感');
            return;
        }
    });
}

function checkIsSensitive(res) {
    let isSensitive = false;
    for (let i = 0; i < res.result.length; i++) {
        if (res.result[i][0] === 'other' && res.result[i][1] < 0.9) {
            isSensitive = true;
            break;
        }
    }
    return isSensitive;
}

一、什么是先用后付？

支持小店用户0元下单后先体验商品，订单确认收货时再支付货款的一种支付方式。

二、开通后如何设置服务功能？

支持开启先用后付服务的商品，在「商品管理-新增商品-商品编辑-保障」板块进行设置。

注：当前仅支持“一级类目：服饰内衣”，陆续开放其余类目，以系统显示与平台公告为准。

三、对订单结算周期有什么样的影响？

不会有影响，结算周期仍按照《视频号小店结算规则说明》中 “2.1 视频号商品结算周期”部分。

四、该服务功能是否会额外向商家收取费用？

不会额外收取。先用后付的服务费，是技术服务费的一种，技术服务费收取标准按照《视频号商家技术服务费管理规则》。

五、用户发生了售后怎么处理？

先用后付商品的售后处理规则与常规商品一致，商家需要按照《视频号橱窗售后服务管理规则》的规则履行售后义务。

六、用户不支付货款怎么办？

先用后付订单适用常规订单的确认收货规则，支持自动确认收货，确认收货后货款会从用户账户中扣除; 若消费者不付款，平台会垫资支付给商家，无资损风险。

七、该服务功能如何关闭？

进入视频号小店后台在左侧导航栏「平台服务-先用后付」板块进行“关闭服务”操作。

八、为什么有的消费者看不到/无法使用先用后付服务?

先用后付服务正在陆续向小店用户开放中，用户开通该服务后，将根据用户在平台内的购物行为/习惯等。因此不同用户可能存在差异，具体以商品上带有「先用后付」标识为准。

https://mp.weixin.qq.com/s/BGH5YJbnHDFpZtLyED7yEA

距离奈飞神剧《黑暗荣耀2》开播虽已过去十余天，但多个与剧情相关的话题却仍还在微博热搜榜上占据一席之地。

图 | 截图自“微博”

为何《黑暗荣耀2》能在话题风向瞬息万变的互联网上受到网友的持续关注？除了电视剧本身制作精良的画面和逻辑缜密的剧情，还多亏了自媒体们的推波助澜。

《黑暗荣耀》两季电视剧从剧内到剧外可延展的话题度都极高，自媒体们有充足的创作空间，不少媒体、博主，甚至个人用户都自发地为该剧进行二改、解说、创作段子或表情包，大量的图文和视频让《黑暗荣耀》系列在互联网反复“出圈”。

自媒体们争先恐后地为该剧创作内容，形成“自来水”式的宣传是为了什么？原因之一大概是为了“蹭热点”。

1、为什么自媒体们

喜欢追影视剧热点？

自媒体追热点的方式有很多，例如节日热点、社会时事、明星八卦…像《黑暗荣耀》此类的热剧也是自媒体们“有效蹭热点”的方式之一，包括《狂飙》《去有风的地方》，大小博主都靠着追影视剧热点创作出爆款内容。

在小红书上，一些粉丝只有100+的素人博主也通过参与“黑暗荣耀”相关的话题图文创作出点赞量1w+的爆文，还登上了首页热门和推荐。点进部分博主主页后发现，他们平时的图文点赞量一般只有个位数或两位数。可见，利用影视剧热点创作产生爆款内容是大有可能的。

图 | 截图自“小红书”

热门电视剧受众群体广，所能给创作者带来的流量是十分可观的。一部热门电视剧创造的ip影响力不容小觑，在各大平台搜索热剧的相关话题所展示出的数据一般都很高。

随着互联网的内容发展，如今的影视剧观众们不仅局限在追剧，在看剧之余，影视剧的“内容周边”也成为观众为之津津乐道的。

他们乐忠于搜索影视剧相关解说和段子，对于优质的内容还会自发传播分享，由于用户群体足够广，所以对于自媒体内容的传播提供了有利的帮助。

除此之外，相比于其他热点，各行各类的自媒体创作者都能在一部热门影视剧中找到可结合的话题，进行“毫无痕迹”地蹭热点。

在抖音上搜索“黑暗荣耀”，可以发现平台上的热门内容包括剧情解说、同款穿搭、仿妆，甚至减脂健身赛道的博主也参与其中。

图 | 截图自“抖音”

不仅如此，前段时间随着《狂飙》、《去有风的地方》热播，旅游类内容也激起了不小的水花，在小红书上“狂飙打卡地”“去有风的地方同款拍照地”引起了热度，甚至带动了江门、大理等拍摄地的旅游业。

《狂飙》的热播也带动了公众号上知识号主深度解析《孙子兵法》的浪潮。据小编观察，相关文章中有不少阅读量达到10w+。

图 | 截图自“微信公众号”

有号主表示：在文章中提及《狂飙》后，阅读量相比之前同样解说《孙子兵法》的文章有很大的涨幅。

可见，自媒体们面对影视剧热点时，不要觉得八竿子打不着。毕竟，热剧这个流量蛋糕，只要你脑洞足够大就能分到一块。

2、影视剧热点该如何追？

热点一般都是突发、有时效性的，很考验创作者的反应力和即时创作能力。但相比于其他热点，影视剧的时效性相对较低，留给创作者充足的创作空间和时限。一些经典ip，包括《甄嬛传》、《武林外传》等剧在开播多年后仍能在互联网上引起广泛的关注度。

那么，该怎么追呢？可以从以下几点寻找创作灵感。

1）剧情解说

“高开高走”的神剧《黑暗荣耀》，两季总共只有短短的16集，那么如何在有限的集数内展现高质量剧情背后紧密的逻辑？导演在拍摄过程中大概率会抛弃无用冗长的情节，把镜头背后的深意留给观众去无尽地想象和解读，由此可见自媒体可以通过剧情解读吸引观众参与讨论。

对于影视剧的剧情解读可以从人物关系、角色分析、历史背景等方向进行发挥。

2）明星话题

对于参与出演的演员进行话题讨论是常见的方式，明星们自带粉丝流量，他们身上也有许多可以延展的话题。

从讨论剧内的表现到扒同款穿搭和妆容，明星本身能创造的话题是很广的。除此之外，近两年大爆的“cp营销”也是利用明星来制造话题度。

图 | 截图自“抖音”

3）抠细节

“抠细节”也是自媒体平台上传播较广的影视剧热门内容，一部剧有哪些细节可以抠呢？

首先是剧情部分，例如《黑暗荣耀》，不少网友就通过“放大镜”式看剧，发现了反派主角之一的李莎拉（剧内是瘾君子人设）手臂上的针孔。

其次是一些穿帮镜头截图，一部分网友执着于找到影视剧中的穿帮部分，早期的电视剧例如《甄嬛传》就曾被网友扒出好几处穿帮镜头，网友对于这些截图或片段更是津津热道。

图 | 截图自“小红书”

4）引起情感共鸣

一部热剧能受到广泛喜爱，除了优良制作，还需要能引起观众的情感共鸣。

如何引起情感共鸣？可以是从剧情延伸出的社会话题讨论，《黑暗荣耀》围绕的主题是“反对校园暴力”，不少博主通过分享校园暴力的经历在平台上引起不少关注，通过与用户共情呼吁停止校园暴力。

引起情感共鸣的创作方式还有分享和讨论影视剧中的金句。文字的力量是强大的，一些影视剧中的金句能够表达出一部分人的内心情感，当看到那些金句截图的时候，不少用户会忍不住进行点赞转发收藏的动作。

3、不同类型的自媒体

如何搭上影视剧的“快车”？

1）娱乐类账户

与影视剧热点最契合的账号类型首先是娱乐时尚类自媒体。这类账号蹭热点时不仅不尴尬，可创作的内容更是多种多样。

无论是从剧情人设的解读，还是明星八卦的延伸，都可以轻松蹭上热点。

2）情感类账号

情感类账号追影视热点离不开深扒剧情背后的情感体验。对电视剧本身不会有太多的解读，往往是由一个剧情引申出深刻的含义。

例如不少公众号文章利用《黑暗荣耀》深度解析校园暴力下引起青少年抑郁症的社会问题；以及当初爆火的《欢乐颂》中樊胜美在原生家庭中遭遇重男轻女的情况也吸引了不少情感类创作者对此类现象的热议。

3）美妆时尚类账号

对于美妆时尚类账号，内容离不开对明星从妆容到穿搭的深扒。

作为女性平台较多的小红书，美妆时尚类博主们热衷于模仿明星穿搭和妆容，借助影视剧的热度能够轻松获得流量。

还有不少博主会对影视剧中主演们的穿搭做详细分析，列出品牌、价格等信息，此类内容的热度也很高，同时还能带动品牌的销售。

图 | 截图自“小红书”

4）旅游类账号

打卡热剧同款旅游地是当代年轻人的乐趣之一。电视剧的拍摄选址一般都是有文化背景或风景优美的地方，通过影视剧背后专业的拍摄团队拍摄后，剧中优美的风景强烈刺激着观众的视觉感受。

不少旅游者会将热剧拍摄地安排进旅游清单，所以旅游博主们可以选择创作影视剧同款拍摄地的旅游攻略，此类内容比较容易做出热点。

5）其他类型账号

除了以上几类账号，还有哪些账号可以针对热剧蹭热点呢？

职场账号：针对职场剧做职场小白攻略；分享职场故事

摄影账号：模仿剧内场景仿拍，提供摄影技巧攻略

美食账号：复刻美食剧中的同款菜品

家居账号：分析剧内布景，提供装修思路和好物推荐

…

4、写在最后

有的自媒体博主担心自己的赛道与影视剧毫不相干，即使创作出爆文对于涨粉和变现的帮助也是微不足道的。

如上文所写，有这种担忧其实是没有从影视剧中挖掘到与自己账号相对应的话题内容。运营账号就如同品牌营销，先找准定位，再锁定目标群体，最后筛选出与账号调性相关的话题去自我营销。

总而言之，无论是什么类型的账号，影视热点不存在该不该追的问题，而是思考该怎么追。

科普帖子
看社区里很多人问分包小程序，如何让npm独立依赖以及独立分包使用npm
主要是需要在 project.config.json 添加如下配置：

"setting": {
  "packNpmManually": true,
  "packNpmRelationList": [
    {
      "packageJsonPath": "./src_node_modules_1/package.json",
      "miniprogramNpmDistDir": "./miniprogram/"
    },
    {
      "packageJsonPath": "./src_node_modules_2/package.json",
      "miniprogramNpmDistDir": "./miniprogram/sub_package"
    }
  ]
}

然后就这些了，最重要的一点是：修改了project.config.json配置后一定要重启开发工具的项目，然后在执行构建npm即可。

示例代码片段：https://developers.weixin.qq.com/s/w7U0xBmu7AGL

【小程序appid】wxf96ccd5466ba5484

【小程序主体】邯郸市未来计算机信息科技有限公司

【申请模板类目】工具 > 信息查询

【申请模板名称】消费/充值信息通知

【使用场景】当商户在“未来云会员管理系统”程序中对会员进行消费、充值操作时在本小程序中发送消息通知，用户收到消息后可点击进入小程序查看详细的消费、充值记录。收到消息的用户均为线下主动扫码并在商家办理会员的用户，不存在骚扰营销行为。且一次性订阅消息无法满足用户需求，用户很容易错失消费通知，导致用户体验感极差，望管理审核为盼！

【模板字段】

内容 {{thing01.DATA}}

时间 {{time01.DATA}}

备注 {{thing02.DATA}}

【消息示例】

内容 您在「演示美甲美发店」店内有消费/充值操作，请点击查看。

时间 2023年5月3日 11:50:30

备注 如非本人消费，请及时联系商家。

接口URL: https://api.weixin.qq.com/cgi-bin/component/api_component_token

接口入参:

{"component_appid":"*****","component_appsecret":"*****","component_verify_ticket":"ticket@@@LuQLL4lL-tY3B1ifAb9SqUY_az1uUGzQ_Hphx_Cbh969MNj41nQ9Q2dnQrBEfkaLFTCS10SIO_ZadY-LV3TURQ"}

接口相应结果：

{"errcode":48001,"errmsg":"api unauthorized rid: 6475fe10-3f57e3a1-6d6eec81"}

接口调用时间：2023/05/30 21:45:53

希望官方运营管理能够看到

我们小程序ID：wx85c0c1660b7d677e

运营盲盒小程序 实体企业注册，每次用户进行反馈都会进行满足需求与要求

微信小程序官方审核站内信通知警告进行要求我们整改我们也做出整改

发货与规则问题得需要代码方面整改还没有完成，今天直接来 封禁

在微信公众平台 监管客服 也说过 要求我们进行代码整改重新发布就可以

微信支付商户今天也不能用 商户号：1642059329 

我们不圈任何东西正常发货 都能赢得五星好评满意度

小程序方面我们积极配合微信小程序官方审核组进行整改

也采纳用户进行对于我们反馈要求进行采纳更新优化

希望能给机会

又一个首日10W+的答题活动，「本以为才开始，没想到是巅峰」

~

做答题活动小程序也有三年了，现在一个10万用户的答题活动，对我而言，好像内心也没波动了

基本除了活动过程中的流量肝的那个肉疼。

那么对于一个日活10W的答题小程序每天的开支是多少呢？

可以看下一个10W日活的云开发答题小程序的费用支出情况

1、

目前流量是调用1000万次了

2、

用户已接近10万，因为距离12点还有1个小时，我想破10万已经不需要怀疑了

3、

如果不升级套餐，按照基础套餐，那么这个流量要有多少支出呢？

我们只算其中一项，也就是费用中的大头，0.5元每万次调用，那么今晚1000万次 0.5*1000 = 500元，真的太贵了，这还只是其中一项费用，七七八八加起来大概要接近600块

4、

还好可以买一些相对划算的套餐，就可以解决整个活动过程的所有开支

5、例行说下，在活动开始的前一日需要做哪些准备工作

1）升级套餐，按照预估的人数购买合适的套餐；

2）数据库设置索引；

简单截图几张

1

2

3

4

5

6

7

五四答题活动

vaa.wxss 是一套样式语言，用于描述 WXML 的组件样式。它具有 CSS 大部分特性，同时也进行了扩充和修改，以适应微信小程序的开发需求。12 vaa.wxss 还将 fontAwesome 作为默认的字体图标库，让你可以轻松地使用各种美观的图标。2

vaa.wxss 的使用方法也非常简单，只需要在需要使用 vaa 样式库的页面下的 .wxss 文件中引入 vaa.wxss 文件即可。无论是布局、颜色、字体、边框、动画等等，vaa.wxss 都能帮助你快速实现。vaa.wxss 是一个值得你尝试的 Wxss 框架，它可以帮助你提升你的微信小程序开发水平和体验。快来下载 vaa.wxss 吧！

裁剪框的拖动与缩放

在裁剪框的元素部分，增加 touchstart 和 touchmove 等事件，用于在处理拖动和缩放等操作。

当我们实现裁剪框的拖动，只需要如下两个事件：

touchstartM (event) {
  const { clipX, clipY } = this.data
  const { pageX, pageY } = event.touches[0]
  // 获取鼠标点在裁剪框的内部位置信息
  clipBoxMoveInnerX = pageX - clipX
  clipBoxMoveInnerY = pageY - clipY
},
touchmoveM (event) {
  const { pageX, pageY } = event.touches[0]
  const { panelWidth, panelHeight, clipHeight, clipWidth } = this.data

  // 裁剪框不能脱离面板
  // X位置范围为 0 到 (面板宽度-裁剪框宽度)
  let clipX = pageX - clipBoxMoveInnerX
  clipX = Math.max(clipX, 0)
  const panelX = panelWidth - clipWidth
  clipX = Math.min(clipX, panelX)
  // Y位置范围为 0 到 (面板高度-裁剪框高度)
  let clipY = pageY - clipBoxMoveInnerY
  clipY = Math.max(clipY, 0)
  const panleY = panelHeight - clipHeight
  clipY = Math.min(clipY, panleY)

  // 裁剪框底图位置信息
  const clipImgX = 0 - clipX
  const clipImgY = 0 - clipY

  this.setData({
    clipX,
    clipY,
    clipImgX,
    clipImgY
  })
}

以上代码，通过计算图片移动时的相对位移，重新计算裁剪框的新的位置信息，需要注意的是，移动时不要脱离外层的面板——即不能脱离图片区域，否则无效。

缩放的操作则相对复杂一些，需要计算位移移动的距离以及当前位置下的裁剪宽高数据，并且要对每个不同的corner角进行特殊处理，这块的完整代码和注释如下所示：

// 处理缩放动作中不同corner时的尺寸位置信息

getClipX (clipWidth) {
  switch (activeCorner) {
    case 'leftTop':
    case 'leftBottom':
      return clipBoxBeforeScaleClipX + (clipBoxBeforeScaleWidth - clipWidth)
    case 'rightTop':
    case 'rightBottom':
      return clipBoxBeforeScaleClipX
    default:
      return 0
  }
},
getClipY (clipHeight) {
  switch (activeCorner) {
    case 'leftTop':
    case 'rightTop':
      return clipBoxBeforeScaleClipY + (clipBoxBeforeScaleHeight - clipHeight)
    case 'leftBottom':
    case 'rightBottom':
      return clipBoxBeforeScaleClipY
    default:
      return 0
  }
},
getScaleXWidthOffset (offsetW) {
  switch (activeCorner) {
    case 'leftTop':
    case 'leftBottom':
      return -offsetW
    case 'rightTop':
    case 'rightBottom':
      return offsetW
    default:
      return 0
  }
},
getScaleYHeightOffset (offsetH) {
  switch (activeCorner) {
    case 'rightBottom':
    case 'leftBottom':
      return offsetH
    case 'rightTop':
    case 'leftTop':
      return -offsetH
    default:
      return 0
  }
},
touchstart (event) {
  const dragId = event.currentTarget.dataset.id
  const { pageX, pageY } = event.touches[0]
  const { clipX, clipY, clipHeight, clipWidth } = this.data

  // 设置缩放时临时变量初始化值
  activeCorner = dragId
  clipBoxBeforeScalePageX = pageX
  clipBoxBeforeScalePageY = pageY
  clipBoxBeforeScaleClipX = clipX
  clipBoxBeforeScaleClipY = clipY
  clipBoxBeforeScaleWidth = clipWidth
  clipBoxBeforeScaleHeight = clipHeight
},
touchmove (event) {
  const { pageX, pageY } = event.touches[0]
  const { panelWidth, panelHeight } = this.data

  // 缩放在X上的偏移
  const xWidthOffset = this.getScaleXWidthOffset(pageX - clipBoxBeforeScalePageX)
  // 裁剪框最小宽度36
  let clipWidth = Math.max(clipBoxBeforeScaleWidth + xWidthOffset, 36)
  // 设置缩放最大宽度，放大时不能超过面板、缩小时不能超过初始裁剪框
  let tempPanelWidth = pageX > clipBoxBeforeScalePageX ? panelWidth - clipBoxBeforeScaleClipX : clipBoxBeforeScaleWidth + clipBoxBeforeScaleClipX
  // 设置裁剪框宽度
  clipWidth = Math.min(clipWidth, tempPanelWidth)

  // 缩放在Y上的偏移
  const yHeightOffset = this.getScaleYHeightOffset(pageY - clipBoxBeforeScalePageY)
  // 裁剪框最小高度36
  let clipHeight = Math.max(clipBoxBeforeScaleHeight + yHeightOffset, 36)
  // 设置缩放最大高度，放大时不能超过面板、缩小时不能超过初始裁剪框
  let tempPanelHeight = pageY > clipBoxBeforeScalePageY ? panelHeight - clipBoxBeforeScaleClipY : clipBoxBeforeScaleHeight + clipBoxBeforeScaleClipY
  // 设置裁剪框高度
  clipHeight = Math.min(clipHeight, tempPanelHeight)

  // 裁剪框位置信息
  let clipX = this.getClipX(clipWidth)
  let clipY = this.getClipY(clipHeight)
  // 裁剪框底图位置信息
  let clipImgX = 0 - clipX
  let clipImgY = 0 - clipY

  this.setData({
    clipWidth,
    clipHeight,
    clipX,
    clipY,
    clipImgX,
    clipImgY,
    croppingImageWidth: parseInt(clipWidth / xScale),
    croppingImageHeight: parseInt(clipHeight / yScale)
  })
}

至此，图片裁剪的功能基本完成了，能够加载图片、设置裁剪框、拖动和缩放裁剪框大小，计算裁剪图片的尺寸等等。

就剩下如何真正剪裁图片了。

增加canvas并裁剪图片

要剪裁图片，我们在小程序使用canvas画布组件来处理，在页面上增加一个canvas元素：

<canvas id=“main” canvasId=“main” class=“main-canvas” style=“width: {{croppingImageWidth + ‘px’}}; height: {{croppingImageHeight + ‘px’}}”></canvas>

1

由于这个canvas只是用来对图片进行裁剪操作，并不需要显示出来，我们可以把它定位到视觉窗口以外，不影响可操作的界面元素。

给画布设置图片裁剪所需要的宽高，通过在同等宽高下绘制图片，就能导出图片：

wx.showLoading({ title: '正在裁剪...' })
preCtx.clearRect(0, 0, imageWidth, imageHeight)
const width = croppingImageWidth
const height = croppingImageHeight
const xPos = Math.abs(clipImgX / xScale)
const yPos = Math.abs(clipImgY / yScale)
// 绘制裁剪区内的图片到画布上
preCtx.drawImage(imagePath, xPos, yPos, width, height, 0, 0, width, height)
preCtx.save()
preCtx.restore()
const that = this
preCtx.draw(false, function () {
  setTimeout(() => {
    // 将画布导出为临时图片文件
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width,
      height,
      destWidth: width,
      destHeight: height,
      canvasId: 'main',
      success: (canRes) => {
        wx.hideLoading()
        that.initImage(width, height, canRes.tempFilePath)
      },
      fail (err) {
        wx.hideLoading()
        console.log(err)
      }
    })
  }, 200)
})

如上代码所示，通过裁剪图片的真实宽高以及相对位置信息，通过canvas的 drawImage 方法，把图片的裁剪区域的内容绘制到画布上，此时，该画布就对应一张裁剪后的图片，我们只需要把画布导出成图片文件即可。

导出画布，使用 wx.canvasToTempFilePath 方法，用于将画布导出为图片临时图片文件，这个图片文件可以重新加载或者进行导出。

保存图片到相册

以上过程，生成裁剪图片的临时文件后，就可以使用小程序提供的API，将图片文件保存到相册中。

只需要使用 wx.saveImageToPhotosAlbum 方法，专门用于将图片文件保存到系统相册，接收临时文件作为参数：

wx.saveImageToPhotosAlbum({
  filePath: imgSrc,
  success: () => {
    wx.hideLoading()
    wx.vibrateShort()
    wx.showModal({
      content: '图片已保存到相册~',
      showCancel: false,
      confirmText: '好的',
      confirmColor: '#333'
    })
  }
})

该方法简单方便，其中使用 wx.vibrateShort() 方法，作用是使手机发生较短时间的振动（15 ms），在小城序也是常见的功能。

图片保存到系统相册功能完成后，我们就实现了在小程序中进行图片剪裁的完整功能，包含加载图片、图片适配和裁剪框绘制、裁剪框拖动与缩放事件、图片导出和保存的过程。

总结

本文详细讲述了在小程序中实现一个图片裁剪功能的过程，可以看出和在浏览器Web端的实现差别并不大。

在核心的图片适配、裁剪框绘制与缩放事件处理上，基本两边可以通用，在小程序中的实现逻辑可以完整在移到web浏览器上，反之亦然。

区别可能只只在于图片的加载和保存上，可以使用小程序提供的多种内置接口方法，能教方便的完成。

今天无缘无故的公众号原创被封禁，我找客服说下，你们腾讯客服就是这样回复的？连一点理论知识不懂？竟然能这么回复我们博主？足球比赛的时间和队伍名称，文章不能写，写了就不算原创，竟然还跟我说这比赛是你举办的吗 是在你这开赛的吗 ？你们腾讯就请这样的客服做服务的？来来 看下聊天记录！！

现在接口网站多之甚多，系统审核的毕竟多。在你输钱时候看不出来，只要你出款是却发现系统审核 账号异常等情况，只要发现及时 处理妥当是能够追回的。为什么总是被黑 因为接口平台根本不存在，所以就拿送彩金之类骗你上钩，要知道天下没有免费的午餐，羊毛长在羊身上，不黑你黑谁啊。现在说这些也为时已晚。说百分之百能够除黑的都是骗子，特别是要前期费用的 空间《86//94///555///04》日志 有关追回的办法，希望可以帮到你

微信小程序云开发实战-答题积分赛小程序

界面交互篇：答题页布局样式与逻辑交互开发

答题页原型稿

实现思路分析：

1）答题未选中状态；

2）答题已选中状态，点击确定提交选中结果；

3）显示答案以及题目解析，如回答正确，自动进入下一题；如回答错误，停留在当前答题页面；

4）每次答完10题，答对分数才会计入积分；

5）最后系统自动判分，然后出成绩单。

答题页效果图

答题页布局与样式实现

使用 flex 布局即可快速实现各区域模块的排版布局：

1）页面布局主要使用flex布局；

2）个人信息展示区域采用flex-wrap；

3）答题详情展示区域采用flex-sub；

4）操作按钮组区域采用flex-direction；

个人信息展示区域

在test.wxml中，编写布局代码：

<view class="page-con">
  <view class="page">
    <view class="flex flex-wrap solids-bottom padding-bottom">
      <view class='basis-xs'>
        <view class="cu-avatar round lg margin-left">
          <image class="avatar" src="/images/0.png" mode="widthFix"></image>
        </view>
      </view>
      <view class='basis-xl'>
        <view class="padding-top text-bold text-black">
          姑苏洛言
        </view>
      </view>
    </view>
  </view>
</view>

在test.wxss中，编写样式代码：

page {
  background-color: #fff;
}
.page-con {
  padding: 20rpx;
}
.page {
  padding: 20rpx;
  border: 2rpx solid #ddd;
  border-radius: 10rpx;
}

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

答题进度展示区域

在test.wxml中，编写布局代码：

<view class="text-center padding-top">
  当前第<text class="text-xl text-bold">1</text>题
  共<text class="text-xl text-bold">10</text>题
</view>

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

题目信息展示区域

在test.wxml中，编写布局代码：

<view class='page-hd'>
    <view class="page-title">
        <text class="text-bold">【单选题】</text>
        下列网络系统安全原则，错误的是：（）
    </view>
</view>
<view class="page-bd">
  <radio-group class="radio-group">
    <label class="radio my-choosebox">
      <radio value="A" checked="false" />
      <text class="margin-left-xs">A、静态性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="B" checked="false" />
      <text class="margin-left-xs">B、严密性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="C" checked="false" />
      <text class="margin-left-xs">C、整体性</text>
    </label>
    <label class="radio my-choosebox">
      <radio value="D" checked="false" />
      <text class="margin-left-xs">D、专业性</text>
    </label>
  </radio-group>
</view>

在test.wxss中，编写样式代码：

.page-hd {
  padding: 30rpx 0;
}
.page-bd {
  padding: 20rpx;
}
.page .radio-group, .page .checkbox-group {
  display: block;
}
.my-choosebox {
  display: block;
  margin-bottom: 20rpx;
  border: 2rpx solid #ddd;
  padding: 20rpx;
  border-radius: 50rpx;
}

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

操作按钮展示区域

在test.wxml中，编写布局代码：

<view class='page-ft flex flex-direction padding padding-bottom-xl'>
  <button class="cu-btn lg round bg-sky">确定</button>
</view>

保存后，可以在模拟器预览效果或者手机微信扫码后预览。

选中选项状态

选中选项状态时，只需要把radio的checked属性值设置为true即可。

点击确定后状态

点击确定按钮后的界面状态会有所变化：

①【确定】按钮隐藏，显示【下一题】按钮；

②显示【正确答案】栏目；

在test.wxml中，编写布局代码：

<button class="cu-btn lg round line-sky">下一题</button>

在test.wxml中，编写布局代码：

<view class='padding-bottom page-hd padding-top solids-top'>
    <view class="page-title">
      <text class="text-bold">【正确答案】</text>
      A
    </view>

</view>

应用场景

不少企事业单位常常会举办一些主题知识竞赛，但是目前缺乏一套可靠、美观、简便的答题小程序。比如适用于网络安全知识答题、交通安全答题、 消防安全知识宣传、 安全生产知识学习等答题活动或有奖竞答。

小结

因此我搭建了最新版的知识竞答小程序，提炼了典型的业务模型，它可以帮助你快速搭建各种形式的答题软件产品，帮助大家可以定期举办各类知识竞答活动。

微信商户涉嫌交易异常，提示关闭支付权限延迟结算应该怎么办。

遇到这类情况，不用担心的，都是可以处理解决的，只需要提供真实有效，有力的交易凭证就可以解除的。

很多都是自己做微商或者网络项目线上收款，无法提供真实有效的交易凭证。

材料程序图下



视频号小店评分什么时候可以显示出来，我已经卖好多单了，用户也不主动确认收货视频号小店评分什么时候出我已经卖好多单了，用户也不主动确认收货

感觉小店的审核人员有点。。。。申请的企业自己的商标还要授权？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？

通过input与textarea两个标签的交替使用完美解决这个问题

<input class="connect_contain"  bindinput="essay_price"/>

      <textarea class="connect_contain" bindinput="essay_jianjie"/>

      <input class="connect_contain"bindinput="essay_connect"/>

      <textarea class="connect_contain"  bindinput="essay_startlocation"/>

      <input class="connect_contain"  bindinput="essay_endlocation"/>

      <textarea   maxlength="-1" auto-height="true"   auto-focus="true" bindinput="essay_comment" /

小程序音频播放日常测试代码片段

描述

小程序背景音乐播放，可切后台播放能力持续

~

代码片段地址

https://developers.weixin.qq.com/s/ILZzlsmR7BIf

~

描述

监听左上角返回回调

https://developers.weixin.qq.com/s/335Jmsm37mIw

~

描述

webview音频播放

https://developers.weixin.qq.com/s/Y202htmv75IQ

webview对应的音频页面

https://thahuat.pension.taikang.com/mental-health/#/audio

~

音频文件

https://thaf.pension.taikang.com/resource/通勤冥想配乐版.mp3

~

这介入4个月了 怎么样子四个月也要介入完了把 第一次见这么大公司干出这么垃圾得事情 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

就算是有违规的地方，你也要给出时间让我们整改，就直接下架了，现在一堆的用户来咨询为啥用不了了，你们检查到说小程序有互推，但那些小程序都是我自己开发的，又不是第三方的，我也没有强制让它们跳转，用户喜欢点就点，有啥不符合规定的，真的有点搞不懂，麻烦官方看到了回复下，现在都已按照给到问题整改了，20多万用户的小程序说下架就下架了，严重影响到用户的使用了。

本文转发自

https://www.sohu.com/a/673852453_100093134

【万字长文】"网红"浪潮退去，WebAssembly原理剖析与生产应用

前言：因为工作需要对WebAssembly进行了一些研究，遗憾的是我发现整个中文社区居然没一篇博客能完整地讲清楚这项技术。工作空余时间也不多，大约花了我半年多时间才写完这2万字，你看到某一行字的背后我可能需要花几个小时去看很多的英文原文资料来论证。如果这篇文章对你有所启发，欢迎关注、点赞、收藏以及评论区交流~

WebAssembly，前身技术来自Mozilla和Google Native Client的asm.js，首次发布于2017年3月。并于2019年12月5日正式成为W3C recommendation，至此成为与HTML、CSS以及Java 并列的web领域第四类编程语言。

在web领域，已经有Java这样的利器，而WebAssembly则是打开新世界的大门。WebAssembly并不是要取代Java，而是要在图形图像处理、3D游戏、AR/VR这些应用领域开疆拓土。如今的现代浏览器已经越发朝着微型”第二操作系统“发展，人们希望在浏览器内能完成更多的事情，而WebAssembly作为web端高性能应用的基石，正在让更多的应用场景在浏览器内变为现实。

除了在浏览器内实现高性能应用，WebAssembly也可以脱离web端在搭载了不同硬件和操作系统的各个平台运行，进一步实现当年JAVA所期望的“一次编译，多处运行”。WebAssembly在服务端可用于微服务平台、无服务平台、第三方插件系统等场景。

本文共6个章节，全文逐字阅读约15分钟，具体章节介绍如下：

1. 第一章 WebAssembly的前世今生 : 介绍了asm.js在Mozilla的起源
2. 第二章 asm.js技术 : 底层原理介绍，探讨了asm.js比原生Java更快的原因
3. 第三章 WebAssembly技术 : 底层原理介绍，探讨了WebAssembly .js比asm.js更快的原因
4. 第四章 WebAssembly在Web端的应用 : 公司内外案例，在音视频处理、游戏、web端设计工具等领域中的生产应用
5. 第五章 WebAssembly在服务端的应用 : 如果实现跨平台runtime，在微服务、无服务、容器化等场景的应用。
6. 第六章 总结展望：web应用加速的瓶颈在哪？WebAssembly到底有没有成功？

WebAssembly技术体验可直接点击以下链接~

看看你的浏览器能跑多少FPS？浏览器直接玩2D/3D游戏：https://arcadespot.com/game/doom-3/

第一章 WebAssembly的前世今生：从Mozilla说起

Mozilla基金组织LOGO

1.1 一家伟大的互联网企业

说起WebAssembly，那就必须从一家没落而又伟大的互联网公司说起，它就是火狐浏览器的开发者Mozilla。Mozilla的前身是大名鼎鼎的网景公司(Netscape)，也就是Java的开发者。从做浏览器起家一路坎坷至今，Mozilla最近更是频频传出裁员风波，其根源依然是没有找到太好的盈利点。作为互联网开源社区的领跑者，Mozilla在技术上的成就远高于其在商业领域。除了Java和Filefox，Mozilla还留下了Rust、HTML5、MDN（Mozilla Developer Network）以及asm.js这些引领互联网行业发展的重要基石。

1.2 脑洞大开的想法：浏览器里跑C++

2012年Mozilla的工程师在研究LLVM时，突然脑洞大开提出了一个想法：类似游戏引擎这样的高性能应用大多都是C/C++语言写的，如果能将C/C++转换成 Java ，那岂不是就能在浏览器里跑起来了吗？如果可以实现，那么浏览器是不是也就可以直接跑3D游戏之类的C/C++应用？于是Mozilla成立了一个叫做Emen的编译器研发项目， Emen可以将C/C++代码编译成Java，但不是普通的JS，而是一种被特殊改造的JS，其被命名为asm.js。

Emen 的官方描述是：

Emen is a toolchain for compiling to asm.js and WebAssembly, built using LLVM, that lets you run C and C++ on the web at near-native speed without plugins.

中文译文：

Emen是一个基于LLVM的将C/C++编译到asm.js和WebAssembly的工具链，它可以让你在web上以接近原生的速度运行C/C++而不需要任何插件。

如下图所示：实际上，不只是C/C++代码，只要能转换成LLVM IR的语言，都可以通过Emen转换成asm.js。

C++代码转换JS流程

1.3 另一次失败的尝试：Google Native Client

Google在很早之前也一直致力于研究如何让C/C++能够在Chrome里运行起来，并在2009年的安全领域顶级会议IEEE Symposium on Security and Privacy 发表了Google的技术方案NaCl（Google Native Client）以及PNaCl（Portable Google Native Client）。NaCl的本质也是一种沙盒技术，使用工具链编译后的C/C++代码能够以接近原生应用的速度在web端运行，也可以与JS和webapi进行交互。NaCl在安全这块做了大量的设计，其使用了内外双层沙盒，并利用x86内存分段机制来隔离内存，甚至还用上了静态代码分析技术来做沙盒里运行的程序进行检查。

然而在经过了8年的挣扎后，在2017 年5月30日Google宣布弃用NaCl。其根本原因是NaCl这套方案只有自家的Chrome愿意配合支持，所以压根就不具备跨浏览器运行的能力。最终Chrome与Mozilla达成一致，共同推进WebAssembly方案，Chrome也直接用WebAssembly替换掉了NaCl。

第二章 asm.js：WebAssembly的前身，一种更快的JS 2.1 C++转换asm.js示例

一般来说，asm.js并不是直接编写的，而是一个面向JS编译器的中间产物。例如以下的C++代码：

//计算i+1int f(int i) { return i + 1;}//计算字符串长度size_t strlen(char *ptr) { char *curr = ptr; while (*curr != 0) { curr++; } return (curr - ptr);}

使用Emen转换后，生成的JS代码如下：

function f(i) { i = i|0; return (i + 1)|0;}function strlen(ptr) { ptr = ptr|0; var curr = 0; curr = ptr; while ((MEM8[curr>>0]|0) != 0) { curr = (curr + 1)|0; } return (curr - ptr)|0;}

可以看到这种生成的JS跟普通JS还是区别很大的，就像刚才我们所说， 程序员不直接编写asm.js代码，这些看起来怪异的语法都是为了配合编译器生成更高效的机器码。比如在asm.js里反复出现的"按位或"操作，其目的是将原来Java 里的double类型计算转为整形运算(CPU进行整形运算的速度快于浮点型)。而这里被命名为MEM8的数组实际上充当了"堆"的作用。如果只是作为使用者可以不用深究这些优化的具体实现，直接使用Emen 来帮助我们完成这一转换过程即可。

2.2 asm.js为什么比原生Java 快？

由于 asm.js 在浏览器中运行，其性能在很大程度上也取决于浏览器和JS引擎的优化支持。2015年6月，Microsoft Edge也开始加入了对asm. js的支持。为了直观展示asm.js所带来的的性能提升，微软发布了一个叫做"Chess Battle"的demo。Chess Battle让两个版本的开源象棋AI对战，其中一个用C实现然后转成asm.js，另外一个用原生JS实现。如下图所示，每个走棋回合限制为200毫秒，其中asm.js版本的AI因为可以在每个回合进行更多的评估运算(用于决定走棋策略)，胜率获得了极大提升。

asm.js对战原生Java

asm.js运行的快慢取决于不同的测试用例、运行硬件、浏览器引擎优化程度等，一般来说我们可认为asm.js能达到原生C/C++运行速度的50%，有些场景下甚至能持平Clang编译的C/C++用例。asm.js运行比原生js快，那么它如此高效的原因是什么呢？阮一峰在他的一篇博客里写到的结论是：

一旦 Java 引擎发现运行的是 asm.js，就知道这是经过优化的代码，可以跳过语法分析这一步，直接转成汇编语言。另外，浏览器还会调用 WebGL 通过 GPU 执行 asm.js，即 asm.js 的执行引擎与普通的 Java 脚本不同。这些都是 asm.js 运行较快的原因。

这篇博客应该是对很多人造成了误导，具体错误在于：

1. 首先，"跳过语法分析,直接生成汇编"是不存在的，语法分析是编译中不可缺少的一环节，asm.js跟原生JS的编译运行过程是一致的。
2. 其次，WebGL作为一个图形api和asm.js技术可以说是没有任何直接关系，原生JS也调用WebGL来实现GPU硬件加速。
3. 最后，也是最离谱的一点，WebGL 通过 GPU 执行 asm.js ？不管是asm.js、原生Java还是WebAssembly其编译产物都是CPU机器码而不是GPU机器码。而且WebGL只是一个图形渲染api，就算是把JS编译到GPU也需要类似CUDA/OpenCL这些通用计算api来支持。最新的WebGPU同时支持了图形和通用计算，这倒是目前web端在GPU里"执行JS"的可行方法。

先抛开Java 不谈，我们可以思考一下，对于任何一门编程语言来说决定其运行快慢的根源是什么呢？我认为用一句话来总结就是： 代码运行的快慢，从硬件层面上看，直接取决于生成的机器码所需时钟周期的总和。从编程语言层面上看，取决于编译后的产物在运行时有多少"动态决议"。

例如，弱类型语言比强类型语言慢，是因为编译时类型是不确定的，需要运行时进行额外的型别推导，这就是"动态决议"；

例如，C++里虚函数比普通函数开销大，是因为编译时函数地址是不确定的。普通函数编译后生成的跳转目的地是一串固定的地址，而虚函数的跳转地址是在运行时从CPU的寄存器里读取的，这也是"动态决议"，编译后的机器码多了一条寄存器取值指令；

类似的场景还有GC机制、模板编程、JIT优化等等，归根结底就是如果在编译时候能完成更多事情，那么生成的机器码运行周期就越短，代码也就运行地越快。asm.js在减少运行时的"动态决议”这里所做的工作，wiki原文如下：

Much of this performance gain over normal Java is due to 100% type consistency and virtually no garbage collection.

可翻译为：

与原生Java相比，这里性能提升的主要原因是100%的类型一致性以及几乎没有(自动的)垃圾回收机制。

简而言之就是，asm.js的实现去掉大部分的自动GC机制，然后改成了强类型语言，编译器能够更大程度地进行优化，这才是asm.js能比普通JS运行更快的原因。在asm.js里不再支持除了浮点和整形之外的类型，内存的开辟和释放也需要代码手动进行处理。部分引擎甚至还可以以AOT或者JIT的形式运行asm.js。关于asm.js的原理，在微软的文档里也有一段更加详细的描述：

Asm.js is a strict subset of Java that can be used as a low-level, efficient target language for compilers. As a sublanguage, asm.js effectively describes a sandboxed virtual machine for memory-unsafe languages like C or C++. A combination of static and dynamic validation allows Java engines to employ techniques like type specialized compilation without bailouts and ahead-of-time (AOT) compilation for valid asm.js code. Such compilation techniques help Java execute at “predictable” and “near-native” performance, both of which are non-trivial in the world of compiler optimizations for dynamic languages like Java.

这段话从编译器优化的角度对asm.js原理描述地非常贴切了，比较难准确翻译，大概释义如下：

asm.js是Java的一个严格子集，是一种面向编译器的底层且高效的目标语言。作为一种子语言，asm.js高效地为类似C/C++这样的内存不安全语言描述了一个沙盒虚拟机。静态验证和动态验证的结合允许Java引擎对有效的asm.js代码使用型别特化编译和提前(AOT)编译等技术。这样的编译技术可以帮助Java具有"可预见性"和“接近原生”的性能表现，这两种特性在Java这样的动态语言编译器优化中是非常重要的。

其中"bailouts"应该是微软这个JS编译器里的专用名词，没有特别合适的翻译。"predictable"可理解为“更少的动态决议”。asm.js目前看已经是过时的技术，并非本文的重点也不再展开继续讨论，如果想继续了解Java编译优化的实现细节，读者可参阅文献的内容自行研读。

第三章 WebAssembly：绕过JS 直接生成机器码

3.1 WebAssembly是什么？

如上图所示，为了能便于程序员阅读和编辑 WebAssembly，源码除了被编译成二进制外还会生成一份文本文件。左边红色部分是C++源码，中间紫色部分是文本格式的.Wat文件的内容，右边蓝色部分是.wasm文件的内容。

多数情况下，人们把Wasm定义成web上的编程语言，认为这是一个前端编程技术。其实这里有一些的误解，首先Wasm并不是一个新的"编程语言"，没有人会手写.wasm文件来进行编程。 WebAssembly 有一套完整的语义，但作为开发者并不需要去了解它，开发者依然可以继续使用自己熟悉的编程语言，由各个语言的编译器将其编译成Wasm格式后运行在浏览器内置的Wasm虚拟机中，我认为Wasm更倾向于是一个应用在web场景中的编译领域新技术。其次，Wasm也并非只能运行在浏览器内，设计者对其抱有更加远大的宏图大业，这部分我们将在后面Wasm容器化这里继续展开讨论。

Mozzila官方对WebAssembly的描述为：

WebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a compilation target so that they can run on the web. It is also designed to run alongside Java, allowing both to work together.

可翻译为：

WebAssembly是一种可以在现代浏览器中运行的新型代码——它是一种低级的类似汇编的语言，具有紧凑的二进制格式，运行起来具有接近原生的性能，其为C/C++、C#和Rust等语言提供了一个编译目标，以便它们可以在web上运行。它还被设计为与Java一起运行，允许两者一起工作。

通过这段描述已经可以对WebAssembly有一个初步认识，我们再进一步给它拆开来看：

1. 首先，WebAssembly是一门新的编程语言，它于2019年12月5日正式成为与HTML、CSS以及Java 并列的web领域第四类编程语言。
2. 其次，WebAssembly是"汇编语言"而不是高级语言， 程序员不直接编写WebAssembly代码，而是通过特殊的编译器将高级语言转换成WebAssembly代码。
3. 再次， WebAssembly是预处理过后的二进制格式，它实际是一个IR(Intermediate Representation)！类似Java的ByteCode或者.Net的MSIL/CIL。
4. 最后，WebAssembly是web上的语言，这意味着主流的浏览器可以读取并且执行它。

最后简单总结，程序员依然还是编写高级语言，然后通过“特殊的编译器”生成WebAssembly二进制代码，最终WebAssembly代码再被一个嵌入在浏览器里的"特殊的虚拟机"执行。这就是WebAssembly的全部工作过程。

3.2 为什么需要WebAssembly？

在web领域，我们已经有了Java这样利器，但美中不足的是Java的性能不佳，即使可以通过第二章里提到的各种编译优化来解决一部分问题，但在类似图形图像处理、3D游戏、AR、VR这些高性能应用的场景下，我们似乎任然需要一个更好的选择。

“ 快”是相对的，目前我们可以认为在运行速度上：原生C/C++代码 > WebAssembly > asm.js > 原生Java。其中WebAssembly比asm.js要快的原因在于：

1. WebAssembly 体积更小，Java 通过gzip压缩后已经可以节约很大一部分空间，但WebAssembly 的二进制格式在被精心设计之后可以比gzip压缩后的Java 代码 小10-20%左右。
2. WebAssembly 解析更快，WebAssembly 解析速度比 Java 快了一个数量级，这也是得益于其二进制的格式。除此之外，WebAssembly还可以在多核CPU上进行并行解析。
3. WebAssembly 可以更好利用CPU特性，之前我们说到asm.js可以通过各种“奇技淫巧”来编译优化，但其还是受限于Java的实现。而WebAssembly可以完全自由发挥，使得其可以利用更多CPU特性，其中例如：64位整数、加载/存储偏移量以及各种CPU指令。在这一部分，WebAssembly能比asm.js 平均提速5%左右。
4. 编译工具链的优化，WebAssembly的运行效率同时取决于两部分，第一个是生成代码的编译器，第二个是运行它的虚拟机。WebAssembly对其编译器进行了更多的优化，使用Binaryen编译器代替了Emen， 这部分所带来的的速度提升大约在5%-7%。

当然，速度上的提升并不是全部。WebAssembly的意义在于开辟了一个新的标准，不再拘泥于Java而是直接面向跟底层的机器码。用任何语言都可以开发WebAssembly，而WebAssembly又可以高效运行在任何环境下，这也是Mozilla的程序员对WebAssembly抱有的最远大的宏图大业。文章将在第六章对WebAssembly在非web端的应用继续展开讨论。

3.3 WebAssembly与Java运行性能详细对比

关于WebAssembly的性能，整体上我认为可以描述为“很快，但是不够快”。也就是说， 我们期望它比Java快非常多，快个10倍或者8倍，但实际上只能快一点点，大概也就是不到2倍左右，而且在不同的测试场景下差异可能会很大。也许你会说100%的性能提升已经很高了，但实际上这也许不能说服大量开发人员完全转向一个崭新的有学习成本的技术。

Zaplib(一个高性能web框架)的工程师从最大性能和标准性能两方面对WebAssembly与Java性能进行更详细的对比，结论如下：

3.3.1 最大性能(尽可能"奇技淫巧"地使用JS)

在最大性能上，特殊编写的原生JS是可以跟Wasm大致持平的。其原因在于JS可以通过ArrayBuffer来模拟成一个"memory managed language"：

1. 可以尽可能避免掉自动GC的额外开销。
2. 可以对数据的局部性(cache locality)进行优化来提升缓存命中，从而提升数据读写的效率。( 缓存局部性对数组的性能很重要！)
3. 当你尽可能避免掉其它开销，只使用循环、局部变量、算术、函数调用的时候，原生JS会非常快。

举个例子如下，这是一个计算多个2维向量平均长度的TS函数

// Unoptimized Typetype Vec2 = { x: number, y: number };function avgLen(vecs: Vec2[]): number { let total = 0; for (const vec of vecs) { total += Math.sqrt(vec.x*vec.x + vec.y*vec.y); } return total / vecs.length;a}

这是使用了ArrayBuffer替换数组了实现：

// Optimized Type, using ArrayBuffersfunction avgLen(vecs: ArrayBuffer): number { let total = 0; const float64 = new Float64Array(vecs); for (let i=0; i

在示例中，ArrayBuffer每16位存储一个二维向量，前8位是向量x，后8位是向量y。后者代码的性能会远高于前者，具体细节有兴趣可以参考( https://zaplib.com/docs/blog_ts ++.html)。总而言之就是，可以通过JS的ArrayBuffer来手动管理JS内存，尽量避免掉性能开销大的地方，剩下的普通指令的执行跟Wasm并无本质差异。除此之外，浏览器里的JS相比Wasm在某些方面甚至还具有优势：

1. JS可以访问一些零拷贝(zero-copy)的方法。例如 TextEncoder和 FileReader.readAsArrayBuffer，而Wasm还需要额外再进行一次内存拷贝。

而Wasm相比JS的优势在于：

1. SIMD加速。SIMD.js的API已经被弃用，取而代之的是Wasm的SIMD实现。
2. 前置的编译优化。

3.3.2 标准性能(正常使用编程语言)

对于实际情况而言，用标准的JS的进行性能对比才是有意义的，原因在于：

1. 代码的编写复杂度和可维护性也是很重要的，"奇技淫巧"并不适合生产工作中使用。
2. 代码工程会依赖大量第三方库，这些库大概率都是标准JS来编写的。

如上图，这个3D人物动画是一个经典的CPU计算密集的测试用例，且可以直观感受到性能在帧数上的表现( http://aws-website-webassemblyskeletalanimation-ffaza.s3-website-us-east-1.amazonaws.com/)。感兴趣的同学可以在自己浏览器里尝试一下，当3D人物数量为100时JS版本会有明显卡顿，切换到Wasm则不会有卡顿感。

这是在17年Wasm诞生之初的测试，可以看到在不同的环境下Wasm比标准JS快了8-15倍。随着JS的不断优化，现在再去测试可能就不会有这么大的差异了。更重要的是，这个测试用例不一定能代表真实的web应用， 真正的web应用可能不会命中这么多"优化项"，8倍以上的性能差异往往只存在于测试用例中。这里我必须再重复一下就是，Wasm快10%到1000%都有可能，不同的测试环境下不可一概而论。

3.4 如何正确使用WebAssembly？

首先需要再次强调的是 ，WebAssembly的诞生并不是要取代Java，web端整个主框架还是HTML+JS+CSS这一套。web应用的大部分基础功能也依然是靠Java来实现，我们只是将web应用中对性能有较高要求的模块替换为wasm实现。在这样的场景下，正确使用WebAssembly的步骤为 ：返回搜狐，查看更多

1. 整理web应用中所有模块，梳理出有性能瓶颈的地方。例如你的web应用里有视频上传、文件对比、视频编解码、游戏等模块，这些都是很适合用WebAssembly来实现的。相反，基础的网页交互功能并不适合用WebAssembly来实现。
2. 进行简单的demo性能测试，看是否能达到预期的加速效果。如果加速效果并不明显，那么就不适合切换到Wasm。
3. 确定用来编译成WebAssembly的源语言，目前主流的语言基本都是支持WebAssembly的，唯一不同的区别是其编译器的优化程度。如果你使用过C++、RUST，最好还是用这两种语言来编写，其编译优化程度会更高。当然了如果你想使用PHP/GO/JS/Python这些你更加熟悉的语言的话，也是不错的选择，毕竟有时候开发效率会比运行效率要更加重要。
4. 编码实现，然后导出.wasm文件。这一步基本没什么难度，确定了语言之后使用对应的编译器即可，需要注意的是记得尽量多打开debug选项，不然有运行时报错的话你就只能对着一堆二进制代码懵逼了。
5. 编写Java胶水代码，加载.wasm模块。在最小可行版本的实现中 ，在 Web 上访问 WebAssembly 的唯一方法是通过显式的Java API调用，而在ES6标准中，WebAssembly 也可以直接从

作者：yannduan，腾讯IEG客户端开发工程师

说明

带有密钥验证的卡,必读每次在读 或者写时都要先验证在读写, 不然就会失败

指令

通常的是 指令(1字节)+要操作的块(1字节) + 14个内容字节

扇区: 小程序没有扇区的概念因为NFC块都是连续的, 所以一般卡16个扇区, 每个扇区4个块, 对于小程序来说就是 0~63 块共计64块

例如 :
1扇区 第0块 小程序对应的就是第0块
2扇区 第3块 小程序对应的就是第8块 以此类推

验证指令: 0x60  
\[0x60\]+要操作的块\[0x01\]+卡的ID\[0xde, 0x63, 0x35, 0x9c,\]+秘钥\[0xFF, 0xFF, 0xFF, 0xFF, 0xFF, 0xFF\]



写入或读取不同的块 要验证不同的块, 比如读取 0x01 块 要操作的块就要写\[0x01\]  
当要要操作 16扇区第3块时, 小程序的要操作的块就要写\[0x3f\]十进制63

读取指令: 0x30  
\[0x30,0x01\] : 读取第0个扇区第二块,

写入指令: 0xa0  
\[0xa0,0x09,0xff, 0xff, 0xff, 0xff, 0xff, 0xff\] : 在第9块写入 6个字节的数据  
我的这个卡写入时必须要组合成 18个字节才能写入, 少于或多都会写入失败  
\[指令(0xa0),块号(0x09),…16个字节\].length = 18, 内容不够的填充FF或者填充其他的内容, 数组必须凑够18个元素

例如:

const params = {
		cmd: 0x60, // 验证指令
		block: 0x01, // 块
		cardId: [0xde, 0x63, 0x35, 0x9c], // 卡片id 获取从 NFCAdapter.onDiscovered((res)=>{ // res中含有卡片id });
		key: [0xff, 0xff, 0xff, 0xff, 0xff, 0xff], // 验证密钥
	};
	const arr = [params.cmd, params.block, ...params.cardId, ...params.key];
	const writeBuffer = new Uint8Array(arr).buffer;

	const NFCAdapter = wx.getNFCAdapter();
	const NFCType = NFCAdapter.getNfcA();

	// 验证密钥
	NFCType.transceive({
		data: writeBuffer,
		success: function(res) {
			console.log("解密成功, 接收数据如下:", res);
			// 开始读写
		},
		fail: function(err) {
			console.log("解密失败", err);
			log.push("解密失败" + checkErr(err));
		},
	});

为了防止用户将小程序内的隐私数据进行截图或者录屏分享导致信息泄露，我们会在小程序全局添加一个水印浮层。这样即使被截图或者拍照，也能轻松地确定泄露的源头。

小程序防止用户截屏的方法有很多，其中一种常见的方法就是在小程序的页面中添加水印。具体实现方法如下：

1. 在小程序中的页面中添加水印浮层，一般通过绝对定位来实现，这样可以使水印在页面的最上层，无法被其他元素覆盖。
2. 设计水印的样式和位置，通常可以在小程序的样式文件中设置，例如设置水印的位置为右下角，样式为半透明的字体，以免影响正常的内容展示。
3. 对于不同类型的页面，可以根据需要添加不同的水印，例如在敏感信息页面添加比较醒目的水印，而在其他普通页面只添加轻微的水印。
4. 如果需要防止用户截屏或者拍照，可以在小程序中添加截屏监听事件，并在用户进行截屏或者拍照操作时，自动添加水印。

总的来说，小程序防止用户截屏的方法还有很多，例如使用安全键盘等，但是添加水印仍然是最为常见的一种方法。通过添加水印，可以有效地防止用户截屏和分享敏感信息，保护用户和单位的信息安全。

下面是一个简单的示例，position选择固定定位fixed，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动。用z-index将元素的层级设置为最低，将view旋转45度，效果就出来啦

<view style="position: fixed;top: -10vh; left:-100vw;width: 250vw; height: 100vh; z-index: -999;transform: rotate(-45deg);">
  <block wx:for="{{30}}" wx:key="index" wx:if="{{userInfo}}">
    <view style="color:gray; margin:30rpx; padding:20rpx; opacity: 0.15;">
    {{userInfo.user_name + '　　' + userInfo.user_phone}}　　　　　　{{userInfo.user_name + '　　' + userInfo.user_phone}}　　　　　{{userInfo.user_name + '　　' + userInfo.user_phone}}　　　　{{userInfo.user_name + '　　' + userInfo.user_phone}}
    </view>
  </block>
</view>

看图

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

真的是搜索不到。以前可以的。不知道什么原因。大神们解答下

【小程序appid】wxdbb1173cb13dc02b

【小程序主体】 江苏互蓝环保科技有限公司

【申请模板类目】商业服务  >  环保回收/废品回收

【申请模板名称】 通知提醒

【使用场景】用户及时收到环保材料的交易成功通知

【模板字段】回收端用户，时间，价格，地址

【消息示例】

回收端用户：张三三

时间：2023.4.20.11.16

价格：799

地址：河南省-郑州市-中原区

名称：飞飞的心里话 ID: gh_c9657d8f1ad2

突然就搜索不到了 后台无任何违规记录 账号也认证过了 麻烦官方帮忙处理下

名称：飞飞的心里话 ID: gh_c9657d8f1ad2

由于微信云托管快速部署没有 egg.js 模板，所以只能自己创建服务。

1.创建服务

2.在项目根目录创建 Dockerfile 文件，注意没有后缀名：

3.配置 egg.js 项目

3.1修改 package.json，删除 --daemon 参数

3.2在 config.default.js 中新增监听配置：

划重点：hostname，一定设置为 0.0.0.0

4.打包根目录除node_modules以外的目录为zip。

最后：选择，上传，发布。一定会成功！

【产品功能-直播预约可领券使用方法】

学习如何在创建直播预告时使用预约可领券功能

第一步：

进入手机端直播预告页面，打开【预约可领券】开关

第二步：

选择要关联的优惠券

第三步：

返回预告创建页面，【关联优惠券】显示已关联的优惠券

第四步：

查看已关联的商品 

预约领券功能开放范围更新为：

1、小店店主视频号可用。

2、开放小店范围：官方旗舰店和旗舰店都可以使用，其他店铺类型评分>=4.0分可使用。

特殊说明：目前该功能仅支持手机端使用，PC端敬请期待

产品功能介绍：视频号“直播预约可领券”功能，是商家在创建直播预告时可以选择“预约可领券”这一选项，使用该功能后用户在预约后可领取一张商品的优惠券。该功能旨在提升商家预约直播的用户规模和转化效率。

WXML代码
<view class="wrap">
  <view class="circleBox ">
    <canvas class="circle c1" canvas-id="canvasCircle">
    </canvas>
    <canvas class="circle c2" canvas-id="canvasArcCir">
    </canvas>
    <view class="drawBtn" bindtap="drawCircle">开始动态绘制</view>
  </view>
</view>

WXSS代码
Page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.circleBox {
  text-align: center;
  margin-top: 100rpx;
}

.circle {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.c1 {
  z-index: -99;
  width:300rpx;
  height:300rpx;
}
.c2 {
  width:300rpx;
  height:300rpx;
}

.drawBtn {
  width: 70rpx;
  position: absolute;
  top: 60rpx;
  right: 0;
  left: 0;
  margin: 0 auto;
  border: 1px #000000 solid;
  border-radius: 10rpx;
}

js
//获取应用实例
var app = getApp()
var interval;
var varName;
var ctx = wx.createCanvasContext('canvasArcCir');

Page({
  data: {
  },
  onReady: function () {
    //创建并返回绘图上下文context对象。
    var cc = wx.createCanvasContext('canvasCircle');
    cc.setLineWidth(6);
    cc.setStrokeStyle('#eaeaea');
    cc.setLineCap('round');
    cc.beginPath();
    cc.arc(100, 100, 96, 0, 2 * Math.PI, false);
    cc.stroke();
    cc.draw();
  },
  onLoad: function (options) {

  }
  drawCircle: function () {
    clearInterval(varName);
    function drawArc(s, e) {
      ctx.setFillStyle('white');
      ctx.clearRect(0, 0, 200, 200);
      ctx.draw();
      var x = 100, y = 100, radius = 96;
      ctx.setLineWidth(5);
      ctx.setStrokeStyle('#d81e06');
      ctx.setLineCap('round');
      ctx.beginPath();
      ctx.arc(x, y, radius, s, e, false);
      ctx.stroke()
      ctx.draw()
    }
    var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0;
    var animation_interval = 1000, n = 60;
    var animation = function () {
      if (step <= n) {
        endAngle = step * 2 * Math.PI / n + 1.5 * Math.PI;
        drawArc(startAngle, endAngle);
        step++;
      } else {
        clearInterval(varName);
      }
    };
    varName = setInterval(animation, animation_interval);
  },
})

微信小程序云开发实战系列-答题积分赛小程序

界面交互篇：个人中心页布局样式与逻辑交互开发

个人中心页效果图

个人中心布局与样式实现

页头布局

在my.wxml中，编写布局代码：

<view class='UCenter-bg'>
    <view class="margin-bottom">
      <view class="cu-avatar xl round">
        <image class="avatar" src="/images/0.png" mode="widthFix"></image>
      </view>
    </view>
    <view class='text-xl'>
      姑苏洛言
    </view>
    <view class='margin-top-sm'>
      <text class="cu-tag bg-yellow">积分：100</text>
    </view>
  </view>

微页头样式

在my.wxss中，编写样式代码：

.UCenter-bg {
      background: url(https://tc.meng.cn/index1.jpg?sign=8f9ea11ad30c0607c60d16d4fab4368d&t=1677080243) center center no-repeat;
      background-size: cover;
      height: 350rpx;
      display: flex;
      justify-content: center;
      padding-top: 10rpx;
      overflow: hidden;
      position: relative;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-weight: 300;
      text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
 
.UCenter-bg text {
  		border-radius: 6rpx;
}
 
.UCenter-bg image {
      width: 200rpx;
      height: 200rpx;
}
 
.UCenter-bg .gif-wave{
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      z-index: 99;
      mix-blend-mode: screen;  
      height: 100rpx;   
}

保存预览

页面链接

这里我使用了导航组件navigator，实现跳转到修改资料页面和关于程序页面。

在my.wxml中，编写代码：

<view class="cu-item arrow">
  <navigator class='content' url='../login/login?type=edit' hover-class='none'>
    <text class='icon-formfill text-sky'></text>
    <text class='text-grey'>修改资料</text>
  </navigator>
</view>
 
<view class="cu-item arrow">
  <navigator class='content' url='../about/about' hover-class='none'>
    <text class='icon-creativefill text-sky'></text>
    <text class='text-grey'>关于程序</text>
  </navigator>
</view>

页面内发起转发

通过给 button 组件设置属性 open-type="share"，可以在用户点击按钮后触发 Page.onShareAppMessage 事件。

在my.wxml中，编写代码：

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='share'>
    <text class='icon-appreciatefill text-sky'></text>
    <text class='text-grey'>好用分享</text>
  </button>
</view>

在my.js中，编写代码：

onShareAppMessage() {
    return {
      title: '@你，快来「护网专题信息安全知识竞答」，答题赢积分吧~'
    }
}

转发分享演示图

添加客服人员

在【客服】，添加客服；

绑定客服人员

绑定后的客服帐号，可以登录 【网页端客服】 或 【移动端小程序客服】 进行客服沟通。我一般使用移动端小程序客服，比较方便。

打开客服会话

在页面使用客服消息，需要将 button 组件 open-type 的值设置为 contact，当用户点击后就会进入客服会话。

在my.wxml中，编写代码：

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='contact'>
    <text class='icon-servicefill text-sky'></text>
    <text class='text-grey'>联系客服</text>
  </button>
</view>

用户咨询

在小程序客户端，点击【联系客服】按钮，进入即时聊天会话界面，与客服发起即时聊天。

客服回复

客服人员可以通过【移动端小程序客服】，进行实时接入与用户的即时聊天。

打开意见反馈

打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容。

在my.wxml中，编写代码：

<view class="cu-item arrow">
  <button class='cu-btn content' open-type='feedback'>
    <text class='icon-writefill text-sky'></text>
    <text class='text-grey'>问题反馈</text>
  </button>
</view>

用户反馈

在小程序客户端，点击【问题反馈】按钮，选择反馈类型、反馈内容，然后填写详细描述，提交即可。

管理员查看反馈

管理员在后台【用户反馈】-【功能异常】或者【产品建议】即可查看具体反馈内容，然后做出相应的处理或者优化。

leafletwx是基于leaflet，使用微信原生组件开发的一套开源地图组件，目的是替换小程序内的原生map组件，项目开源地址：leatletwx。

 本示例开源地址在leafletwx的mymap页面。

加载自制手绘地图效果：



如何将手绘地图转换为瓦片

可以使用gdal，安装成功后，使用命令

切分瓦片（使用gdal）： gdal2tiles-l.py -l -p raster -z 1-3 -w none [source_image] [target_dir]

例如：gdal2tiles-l.py -l -p raster -z 1-3 -w none 1.jpg out

即可生成瓦片地图数据

如果需要在不同的地图层级加载不同的地图细节，可以制作两张大小一样的地图图片，生成不同的层级即可

图片坐标与地理坐标如何转换

图片坐标点与地理坐标点互转方法如下(引入的库在组件内可以找到，须知道原始图片大小和图片左上角及右下角分别对应的地理坐标):

import {LagLngPoint} from './LagLng.Utils'
import {latLng2xy, xy2latLng} from './utils/util'

// 图片坐标点转地理坐标点
function rasterImage2latLng(imgPosition, imgSize, leftUpLatLng, rightDownLatLng) {
  let latLng = new LagLngPoint(0, 0);
  let _imgPos = [
    Math.max(0, Math.max(imgSize[0], imgPosition[0])),
    imgSize[1] - Math.max(0, Math.max(imgSize[1], imgPosition[1])),
  ];
  const ag = xy2latLng(_imgPos[0], _imgPos[1], 0, 0, imgSize[0], imgSize[1], leftUpLatLng.longitude, leftUpLatLng.latitude, rightDownLatLng.longitude, rightDownLatLng.latitude);
  latLng.longitude = ag.lon;
  latLng.latitude = ag.lat;
  return latLng;
}
// 地理坐标点转图片坐标点
function latLng2rasterImage(latLng, imgSize, leftUpLatLng, rightDownLatLng) {
  let imgPosition = [0, 0];
  const minLng = Math.min(leftUpLatLng.longitude, rightDownLatLng.longitude);
  const maxLng = Math.max(leftUpLatLng.longitude, rightDownLatLng.longitude);
  const minLat = Math.min(leftUpLatLng.latitude, rightDownLatLng.latitude);
  const maxLat = Math.max(leftUpLatLng.latitude, rightDownLatLng.latitude);
  let lng = Math.min(maxLng, Math.max(latLng.longitude, minLng));
  let lat = Math.min(maxLat, Math.max(latLng.latitude, minLat));
 
  let xy = latLng2xy(lng, lat, 0, 0, imgSize[0], imgSize[1], leftUpLatLng.longitude, leftUpLatLng.latitude, rightDownLatLng.longitude, rightDownLatLng.latitude)
  return [Math.round(xy.x), Math.round(xy.y)];
}

无缘无故所有微信直播账号封了，无任何提示无任何违规信息

无任何违规就是无法开播。

无缘无故所有微信直播账号封了，无任何提示无任何违规信息

无任何违规就是无法开播。