遇到的问题: 目前公司只有一个appid,可是却要开发多个微信小程序,有什么办法可以做到一个appid有两个微信公众平台后台,这样就可以一个appid,上传多个体验版的小程序?

[图片] H5时代用来做图表的插件有很多比如：[代码]ECharts[代码]、[代码]Bizcharts[代码]、[代码]JSCharts[代码]等，而这次的小程序本人选用了 ECharts 作为图表组件。 1、选择原因主要有3点： 官方某度在持续维护这个插件 官方推出了直接适配小程序的版本，且有demo，开盖即食，不用迁移 简单实用，覆盖面广且可通过配置控制包的大小，小程序毕竟大小有限制~ eCharts来自BAT中的B前端团队，对应的小程序版本为：echarts-for-weixin 官网地址 https://echarts.apache.org/ github地址 https://github.com/ecomfe/echarts-for-weixin 小程序demo地址 https://github.com/ecomfe/echarts-examples 2、用法 （1）官方教程 [代码]index.json[代码] 配置如下： [代码]{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } [代码] 这一配置的作用是，允许我们在 [代码]pages/bar/index.wxml[代码] 中使用 [代码]<ec-canvas>[代码] 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。 [代码]index.wxml[代码] 中创建了一个 [代码]<ec-canvas>[代码] 组件： [代码]<view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> [代码] 其中 [代码]ec[代码] 是一个我们在 [代码]index.js[代码] 中定义的对象，它使得图表能够在页面加载后被初始化并设置。 [代码]index.js[代码] 配置： [代码]function initChart(canvas, width, height, dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // 像素 }); canvas.setChart(chart); var option = { ... }; chart.setOption(option); return chart; } Page({ data: { ec: { onInit: initChart } } }); [代码] 这对于所有 ECharts 图表都是通用的，用户只需要修改上面 [代码]option[代码] 的内容，即可改变图表。[代码]option[代码] 的使用方法参见 ECharts 配置项文档。 官方demo里的一些用法指导： 如何延迟加载图表？ 参见 [代码]pages/lazyLoad[代码] 的例子，可以在获取数据后再初始化数据。 如何在一个页面中加载多个图表？ 参见 [代码]pages/multiCharts[代码] 的例子。 如何使用 Tooltip？ 目前，本项目已支持 ECharts Tooltip，但是由于 ECharts 相关功能尚未发版，因此需要使用当前本项目中 [代码]ec-canvas/echarts.js[代码]，这个文件包含了可以在微信中使用 Tooltip 的相关代码。目前在 ECharts 官网下载的 [代码]echarts.js[代码] 还不能直接替换使用，等 ECharts 正式发版后即可。 具体使用方法和 ECharts 相同，例子参见 [代码]pages/line/index.js[代码]。 如何保存为图片？ 参见 [代码]pages/saveCanvas[代码] 的例子。 （2）本人实战操作 [图片] [代码]import * as echarts from '../ec-canvas/echarts'; const app = getApp(); let chart; function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr // new }); canvas.setChart(chart); chart.setOption(option); return chart; } var option = { title: { text: '智酷君 echarts 切换效果测试', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['AAA', 'BBB', 'CCC', 'DDD', 'EEE'] }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center' }, emphasis: { label: { show: true, fontSize: '30', fontWeight: 'bold' } }, labelLine: { show: false }, data: [ {value: 335, name: 'AAA'}, {value: 310, name: 'BBB'}, {value: 234, name: 'CCC'}, {value: 135, name: 'DDD'}, {value: 1548, name: 'EEE'} ] } ] }; Page({ data: { ec: { onInit: initChart } }, onLoad: function () {}, //单曲线 line() { let option2 = { title: { text: '同一canvas更新成折线图', left: 'center' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line' }] }; chart.setOption(option2) }, //切换柱状图 bar(){ let option3 = { title: { text: '直接更新数据，减少性能消耗', left: 'center' }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(220, 220, 220, 0.8)' } }] }; chart.setOption(option3) } }) [代码] 建议大家尽量使用同一个canvas对象来切换不同的图表效果，而不是初始加载多个不同的，我们可以将 [代码]chart[代码] 对象设置为全局，然后通过 [代码]chart.setOption()[代码] 的方法来更新配置数据，可以减少性能消耗避免闪退等 （3）代码片段 代码段：https://developers.weixin.qq.com/s/OOTwnsms7Cin 建议将IDE工具升级到 1.02.18以上，避免一些BUG [图片] 3、Tips （1）包大小可以配置 在线定制地址： https://echarts.apache.org/zh/builder.html [图片] [图片] 通过选择和配置想要的功能，可以大大减少原本JS包的尺寸。 （2）Canvas 2d 版本要求 最新版的 ECharts 微信小程序支持微信 Canvas 2d，当用户的基础库版本 >= 2.9.0 且没有设置 [代码]force-use-old-canvas="true"[代码] 的情况下，使用新的 Canvas 2d（默认）。 使用新的 Canvas 2d 可以提升渲染性能，解决非同层渲染问题，强烈建议开启 如果仍需使用旧版 Canvas，使用方法如下： [代码]<ec-canvas id="xxx" canvas-id="xxx" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas> [代码] （3）数据点过多造成闪退和卡死 本人简单测试了下，iphone7p手机在[代码]1500个[代码]左右数据点的时候，出现了小程序闪退，iphoneX 测试下来大概在[代码]2500个[代码]左右，猜测可能由于微信本身给小程序的内存有限，所以建议大家控制数据点的个数 （4）单页面图表canvas加载过多卡死 建议单页面图表加载不要超过[代码]5个canvas[代码]，尽可能共用一个图表Canvas对象，通过动态更新数据的方式来展示内容（还有帅气的特效），如果一定要加载多个canvas的话，建议控制数量，提供复用性~ 看完觉得有帮助记得点个赞哦~ 你的赞是我继续分享的最大动力！^-^

如果在小程序做运动模块，如何计算用户实际运动距离？配速等等 通过腾讯地图可以计算两点距离 那如何得知用户跑了整圈呢? 比如 起止经纬度一样的情况

wx.onLocationChange什么理由才能申请通过

https://developers.weixin.qq.com/miniprogram/dev/framework/wx.onLocationChange申请一直不通过是什么原因

有多条数据，需要一次性add导入数据库，客户端高级里是可以，云函数也直接add会报错，看了官方文档好像也没有批量导入数据库的方法，求各位大佬指点迷津。。。

按照官方的文档npm后，再引用组件时，始终找不到路径。 [图片] 下面是再app.json中全局引用，或者index.json引用，都试过了，不管写全路径，还是写@vant/weapp/button/index 都不行。 [图片]

请问哪位有2022年微信小程序应用开发全国赛的完整答辩回放

在模拟器中的效果： [图片] 在真机上面的效果： [图片]

使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。 基本用法 基础用法 [代码]<!--web开发中顶层变量的key名是:root，小程序使用page--> page { --main-bg-color: brown; } .one { color: white; background-color: var(--main-bg-color); margin: 10px; } .two { color: white; background-color: black; margin: 10px; } .three { color: white; background-color: var(--main-bg-color); } [代码] 提升用法 [代码]<div class="one"> <div class="two"> <div class="three"> </div> <div class="four"> </div> <div> </div> [代码] [代码].two { --test: 10px; } .three { --test: 2em; } [代码] 在这个例子中，[代码]var(--test)[代码]的结果是： class=“two” 对应的节点: 10px class=“three” 对应的节点: element: 2em class=“four” 对应的节点: 10px (继承自父级.two) class=“one” 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值 上述是一些基本概念，大致说明css变量的使用方法，注意在web开发中，我们使用[代码]:root[代码]来设置顶层变量，更多详细说明参考MDN的 文档 妙用css变量 开发中经常遇到的问题是，css的数据是写死的，不能够和js变量直通，即有些数据使用动态变化的，但css用不了。对了，可以使用css变量试试呀 wxml js [代码]// 在js中设置css变量 let myStyle = ` --bg-color:red; --border-radius:50%; --wid:200px; --hgt:200px; ` let chageStyle = ` --bg-color:red; --border-radius:50%; --wid:300px; --hgt:300px; ` Page({ data: { viewData: { style: myStyle } }, onLoad(){ setTimeout(() => { this.setData({'viewData.style': chageStyle}) }, 2000); } }) [代码] wxml [代码]<!--将css变量(js中设置的那些)赋值给style--> <view class="container"> <view class="my-view" style="{{viewData.style}}"> <image src="/images/abc.png" mode="widthFix"/> </view> </view> [代码] wxss [代码]/* 使用var */ .my-view{ width: var(--wid); height: var(--hgt); border-radius: var(--border-radius); padding: 10px; box-sizing: border-box; background-color: var(--bg-color); transition: all 0.3s ease-in; } .my-view image{ width: 100%; height: 100%; border-radius: var(--border-radius); } [代码] 通过css变量就可以动态设置css的属性值 代码片段 https://developers.weixin.qq.com/s/aWfUGCmG7Efe github 小程序演示 [图片]

本文参加2019年「小程序征文·大学篇」征文活动。 大家好，我是「Resser 阅见」小程序的开发团队DeveSA的队长，虽然小程序暂时无缘赛区决赛，那我就只能先厚颜无耻地码下这些字，作为对比赛以来小程序开发中收获的经验与教训的总结。 What —— 我们开发的是什么？ 我们开发的「Resser 阅见」（以下简称「阅见」）是一款基于RSS/ATOM的资讯聚合阅读小程序，其特点是门槛低，姿态新，聚合度高。 说得太拗口？看图就懂了👇 [图片] 接触过RSS的朋友可能会说，“哦，不就是个RSS阅读器嘛，RSS不是已经半死不活了吗”。的确，「阅见」就是一款基于微信小程序平台的RSS的阅读器。不过，我们降低了RSS的使用门槛，让普通用户能像关注微信公众号一样简单的关注自己喜欢的几乎所有内容（从微信公众号、B站到微博等），而高级用户也能延续RSS的使用习惯玩出各种高阶功能。 由于小程序尚在参赛阶段，为了评委能第一时间用上最新版本的小程序，我们还未将小程序正式上线，因此很遗憾大家暂时无法体验到小程序的功能了。 How —— 我们是怎样从入门到不入土的？ 作为在校生，要从繁忙的课程和考试中抽出时间来开发一个完整的小程序，着实不易。能在ddl之前完成这个项目，主要归功于我们团队良好的时间规划和任务安排。作为队长，我将比赛过程分为备赛、开发、精修三大过程。 备赛过程 对上届获奖作品分析 既然开发这个小程序的目的是为了参赛，那么当然要奔着获奖为终极目标。因此，团队在4月份体验了去年获奖的30个小程序，从小程序的界面、操作、新颖程度等方面进行分析。在体验这些优秀作品的同时，我们也获益良多。产品中让我们惊喜的点可以作为之后开发的参考和灵感，产品中使用不畅的地方也为我们提前敲响警钟。 [图片] 初步入门 在参赛之前，我们团队中无一人有小程序开发经验，但是凭着初生牛犊不怕虎的精神和魄力，我们照着学做小程序-学堂在线-精品中文慕课(mooc)平台上的课程和官方开发文档实现了对小程序的初步入门。 当然，学习小程序的开发并不是一个单向的吸收知识的过程，边学边做是最好的入门方式。 开发过程 前期规划 考虑到我们开发小程序的过程也是学习小程序的过程，我们并不清楚某个提出的功能是否能得到实现。因此，我们先确定了小程序的大体架构，也就是页面的布局，每个页面要实现怎样的功能，通过什么方式去实现。通过经验的累积，再逐步往这个框架中填沙子，这样便不至于出现“走一步看一步”的窘况。 [图片] 协同工具 由于团队规模很小，只由两人构成，因此使用各种todo工具就显得杀鸡用牛刀了，我们选择的团队协作工具是非常质朴而接地气的——QQ群。 [图片] 在每周我会给团队布置任务并要求组员提交任务报告，这种半强迫性质的ddl一定程度上能有效防止组员划水并且增加团队成员的参与感。 而我作为主开发手，将各种功能划分为基础型、进阶型、配置型、魅力型四种类型，使用Markdown编辑器Bear记录功能的完成进度。 [图片] 当然，如果是较大型的团队，则需要更加专业的协同工具，这里推荐Slack和Teambition。 开发工具 虽然在备赛学习过程中看到许多开发者都使用VS Code和JetBrains系列软件，但我们依旧采用了官方的微信开发者工具，因为微信开发者工具毕竟是微信官方专门为小程序开发的IDE，体验上来说更加原生，也方便从IDE的更新日志中了解到小程序的最新动向。 [图片] 但是由于微信开发者工具还不够完善，实际使用过程中出现过几次问题，这里一个小技巧就是——稳定版出问题换Beta版，Beta版出问题换稳定版。 填坑与技巧 微信小程序合法域名校验：可以使用云函数进行反向代理 常用API接口：BAT都有在做NLP的接口、以及url2io的正文提取接口等等、更多接口提供商如易源数据等 云开发云存储图片可以直接调用，但是加载速度比较慢，建议还是用七牛云CDN SVG图片的体积小而且矢量图更清晰 精修过程 这里的精修，一方面是指对小程序的操作流程中可能存在的Bug进行排查和修复，另一方面是对用户界面和交互逻辑进行更细致地精调。 内测排查Bug 在这一过程中，我们在校园内开放了内测活动，聆听不同的声音，也从这些内测用户口中得到宝贵的意见和建议。在获得用户反馈这一过程中，我们发现用户特别懒于前往我们提供的反馈网址提交反馈，因此我们在小程序中加入了客服功能，用户在体验小程序的过程中遇到任何Bug或是有任何建议都可以不需要离开小程序就能够反馈给我们。 UI设计 我们也在比赛ddl前一周完成了对小程序Icon的绘制、UI的精调。 [图片] 有必要说一下Icon的设计理念，因为完成了Icon的设计后，UI的设计也就完成了一半。何出此言呢？因为小程序的界面配色要和Icon呼应，配色确定好了，可不就是完成了一半的设计嘛。 图标背景色使用Brandeis Blue（布兰迪斯大学蓝，蔚蓝色）和Solitude（孤独蓝，浅蓝）。布兰迪斯大学被称为全美最年轻的主要研究大学，而布兰迪斯大学蓝也被寄予“年轻”、“实践”、“应用性”的美好寓意。正如同「阅见」这款小程序一样，年轻而实用。孤独蓝则对应「阅见」小程序的Slogan——看见开放互联网未经过滤的样子，「阅见」希望每个人能作为一个独立的个体，去客观看待这个世界。 外形上，图标由中文汉字和圆弧形背景组成。蔚蓝色的圆弧象征地球（舒适区内），另一半的浅蓝色象征大气（舒适区外），「阅见」两字分别位于两种颜色上，寄予「阅见」能打破回音壁，让用户看到更全局的世界的美好愿景。 发布之前的收尾工作 对于小程序来说，除了用户用的了看得到的功能，还有隐藏在功能和界面之下的东西，比如小程序的体积、打开的速度、边界条件的设定等等，这些是用户不容易感知到的，但无形中又影响着用户体验的点。 减小小程序的体积：去除不需要的console.log等测试代码、代码文件压缩、图片尽量使用SVG格式。 加快小程序的打开速度：其实在减小小程序的体积的操作里，就能加快程序的运行速度了，还有就是可以将引用的图片CDN加速。 边界条件的设定：所有需要用户输入的地方，都需要边界条件的设定，比如用户输入RSS订阅链接时不小心输错成了标题，如果不做边界条件设定的话，小程序就会request一个不合法的网址，就可能造成小程序崩溃 One More Thing —— 上线之后的规划 说实话，在做这个小程序之前，我一直没有找到称心如意的跨平台RSS阅读器，然后碰巧看到有这么一个比赛，就想着自己开发一个好用的RSS阅读器。开发过程中，也调研了很多国内外的相似产品，比如国内的轻芒阅读、国外的红板报、Feedly、Inoreader等等。资料查得越多，心就越凉，因为几乎都是RSS已死的论调。但既然选择了这个主题，一条路也要走到黑。所以我又去探究RSS没落的原因，归纳成如下几点： 订阅源规范不统一：当前存在的Feed规范有RSS 0.91、1.0、2.0和ATOM等，不同源输出的XML格式不同，导致解析困难。 正文获取困难：越来越多网站为了广告和引流停止输出RSS或者不输出正文，传统的RSS 阅读器无法正常显示。 使用门槛高：传统RSS阅读器手动输入链接添加RSS操作麻烦。 无参与感：RSS相当于提供了一种单向的服务，用户只能作为信息的被动接受者，没有参与感。 平台和内容提供方盈利困难：RSS Feed不能给内容提供者带来流量和收益，提供者放弃RSS内容输出，也导致内容平台流失用户。 说白了，就是没有盈利去维持RSS的生态，所以我想，如果能够解决内容平台和内容提供者的盈利问题，是不是可以给RSS续一秒。 我们计划采用盈利补贴、竞价排名、数据反馈三种方式打通和内容提供者之间的壁垒，实现内容平台与内容提供者互利共赢。 盈利补贴：我们计划在小程序上线并积累一定用户后，在首页信息流和文章内投放广告。文章内广告的营收将按一定比例作为该文章内容提供者的补贴。即：优质的文章带来大量流量，广告投放将流量变现，变现的一部分作为对内容提供者的补贴。 竞价排名：并且，对于知名度不高的内容提供方，「阅见」可以作为除微信公众号、网站、今日头条外另一个平台帮助其推广。发现页面每个分类下展示的订阅源以及搜索建议将采用竞价排名形式，即前3个订阅源根据用户订阅热度排名，往后的4-10个订阅源采用竞价排名形式，一方面为「阅见」提供营收，一方面也可以增加内容提供方的曝光率。 数据反馈：由于「表态」功能的引入，「阅见」可以获得用户对特定文章的反馈，我们不希望这些反馈只是作为一个摆设，而希望用户的反馈能够达到内容提供方，帮助其提升内容质量，了解用户的心理。 喜欢就点个赞吧 😃 有任何疑问，欢迎联系作者：rhinoc@outlook.com