使用的是扩展组件vtabs 首次点击左侧，右侧能定位到对应的分类，滑动右侧列表，再次点击左侧菜单分类，会导致多次bindscroll回调导致多次调用而导致多次滚动，最终右侧列表和左侧菜单定位都不准确的问题 问题手机：[图片][图片]

写在前面如果你想要自主开发，但没有云开发相关经验，可以采用演示视频来学习本教程： [视频] 一、能力介绍境内非个人主体的认证的小程序，开通静态网站后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 总之，短信跳转能力的实现分为两个步骤，「配置拉起网页」和「发送短信」。本教程将介绍如何执行操作完成短信跳转小程序的能力。 如果你想要无需写代码就能完成短信跳转小程序的能力，可以参照无代码版教程进行逐步实现。 二、操作指引1、网页创建首先我们需要构建一个基础的网页应用，在任何代码编辑器创建一个 html 文件，在教程这里命名为 index.html 在这个 html 文件中输入如下代码，并根据注释提示更换自己的信息： window.onload = function(){ window.web2weapp.init({ appId: 'wx999999', //替换为自己小程序的AppID gh_ID: 'gh_999999',//替换为自己小程序的原始ID env_ID: 'tcb-env',//替换小程序底下云开发环境ID function: { name:'openMini',//提供UrlScheme服务的云函数名称 data:{} //向这个云函数中传入的自定义参数 }, path: 'pages/index/index.html' //打开小程序时的路径 }) } 以上引入的 web2weapp.js 文件是教程封装的有关拉起微信小程序的极简应用，我们直接引用即可轻松使用。 如果你想进一步学习和修改其中的一些WEB展示信息，可以前往 github 获取源码并做修改。 有关于网页拉起小程序的更多信息可以访问官方文档 如果你只想体验短信跳转功能，在执行完上述文件创建操作后，继续以下步骤。 2、创建服务云函数在上面创建网页的过程中，需要填写一个UrlScheme服务云函数。这个云函数主要用来调用微信服务端能力，获取对应的Scheme信息返回给调用前端。 我们在示例中填写的是 openMini 这个命名的云函数。 我们前往微信开发者工具，定位对应的云开发环境，创建一个云函数，名称叫做 openMini 。 在云函数目录中 index.js 文件替换输入以下代码： const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { return cloud.openapi.urlscheme.generate({ jumpWxa: { path: '', // 打开小程序时访问路径，为空则会进入主页 query: '',// 可以使用 event 传入的数据制作特定参数，无需求则为空 }, isExpire: true, //是否到期失效，如果为true需要填写到期时间，默认false expire_time: Math.round(new Date().getTime()/1000) + 3600 //我们设置为当前时间3600秒后，也就是1小时后失效 //无需求可以去掉这两个参数（isExpire，expire_time） }) } 保存代码后，在 index.js 右键，选择增量更新文件即可更新成功。 接下来，我们需要开启云函数的未登录访问权限。进入小程序云开发控制台，转到设置-权限设置，找到下方未登录，选择上几步我们统一操作的那个云开发环境（注意：第一步配置的云开发环境和云函数所在的环境，还有此步操作的环境要一致），勾选打开未登录 [图片] 接下来，前往云函数控制台，点击云函数权限，安全规则最后的修改，在弹出框中按如下配置： [图片] 3、本地测试我们在本地浏览器打开第一步创建的 index.html ；唤出控制台，如果效果如下图则证明成功！ 需要注意，此处本地打开需要时HTTP协议，建议使用live server等扩展打开。不要直接在资源管理器打开到浏览器，会有跨域的问题！ [图片] 4、上传本地创建好的 index.html 至静态网站托管将本地创建好的 index.html 上传至静态网站托管，在这里静态托管需要是小程序本身的云开发环境里的静态托管。 如果你上传至其他静态托管或者是服务器，你仍然可以使用外部浏览器拉起小程序的能力，但会丧失在微信浏览器用开放标签拉起小程序的功能，也不会享受到云开发短信发送跳转链接的能力。 如果你的目标小程序底下有多个云开发环境，则不需要保证云函数和静态托管在一个环境中，无所谓。 比如你有A、B两个环境，A部署了上述的云函数，但是把 index.html 部署到B的环境静态托管中了，这个是没问题的，符合各项能力要求。只需要保证第一步 index.html 网页中的云开发环境配置是云函数所在环境即可。 部署成功后，你便可以访问静态托管的所在地址了，可以通过手机外部浏览器以及微信内部浏览器测试打开小程序的能力了。 5、短信发送云函数的配置在上面创建 openMini 云函数的环境中再来一个云函数，名字叫 sendsms 。 在此云函数 index.js 中配置如下代码： const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV, }) exports.main = async (event, context) => { try { const config = { env: event.env, content: event.content ? event.content : '发布了短信跳转小程序的新能力', path: event.path, phoneNumberList: event.number } const result = await cloud.openapi.cloudbase.sendSms(config) return result } catch (err) { return err } } 保存代码后，在 index.js 右键，选择增量更新文件即可更新成功。 6、测试短信发送能力在小程序代码中，在 app.js 初始化云开发后，调用云函数，示例代码如下： App({ onLaunch: function () { wx.cloud.init({ env:"tcb-env", //短信云函数所在环境ID traceUser: true }) wx.cloud.callFunction({ name:'sendsms', data:{ "env": "tcb-env",//网页上传的静态托管的环境ID "path":"/index.html",//上传的网页相对根目录的地址，如果是根目录则为/index.html "number":[ "+8616599997777" //你要发送短信的目标手机，前面需要添加「+86」 ] },success(res){ console.log(res) } }) } }) 重新编译运行后，在控制台中看到如下输出，即为测试成功： [图片] 你会在发送的目标手机中收到短信，因为短信中包含「退订回复T」字段，可能会触发手机的自动拦截机制，需要手动在拦截短信中查看。 需要注意：你可以把短信云函数和URLScheme云函数分别放置在不同云开发环境中，但必须保证所放置的云开发环境属于你操作的小程序 另外，出于防止滥用考虑，短信发送的云调用能力需要真实小程序用户访问才可以生效，你不能使用云端测试、云开发JS-SDK以及其他非wx.cloud调用方式（微信侧WEB-SDK除外），会提示如下错误： [图片] 如果你想在其他处使用此能力，可以使用服务端API来做正常HTTP调用，具体访问官方文档 7、查看短信监控图表进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控，即可查看短信监控曲线图、短信发送记录。 [图片] 三、总结短信跳转小程序核心是静态网站中配置的可跳转网页，外部浏览器通过URL Scheme 来实现的，这个方式不适用于微信浏览器，需要使用开放标签才可以URL Scheme的生成是云调用能力，需要是目标小程序的云开发环境的云函数中使用才可以。并且生成的URL Scheme只能是自己小程序的打开链接，不能是任意小程序（和开放标签的任意不一致）短信发送能力的体验是每个有免费配额的环境首月100条，如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包，进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送也是云调用能力，需要真实小程序用户调用才可以正常触发，其他方式均报错返回参数错误，出于防止滥用考虑云函数和网页的放置可以不在同一个环境中，只需要保证所属小程序一致即可。（需要保证对应环境ID都能接通）如果你不需要短信能力，可以忽略最后两个步骤CMS配置渠道投放、数据统计可参考官方文档

写在前面你可以通过视频演示的方式学习本教程，更加利于学习和理解。 [视频] 一、能力介绍境内非个人主体的认证的小程序，开通静态网站并后，可以免鉴权下发支持跳转到相应小程序的短信。短信中会包含支持在微信内或微信外打开的静态网站链接，用户打开页面后可一键跳转至你的小程序。 这个链接的网页在外部浏览器是通过 URL Scheme 的方式来拉起微信打开主体小程序的。 本教程将介绍如何操作开通CMS内容管理系统进而操作使用短信跳转小程序能力，全程无需写代码。 如果你想要进行自定义开发，可以参照自定义开发教程进行逐步实现。 二、操作步骤1.下载微信开发者工具访问微信公众平台工具下载页，按照自己的系统版本下载安装开发者工具。建议安装【开发版 Nightly Build】版本。  [图片] 2.打开开发者工具并登录安装完开发者工具后，打开工具会弹出二维码登录框。使用你目标小程序具有开发者权限的微信号扫码登录。 点击创建小程序+号，会有自动填写默认名称和目录，你可以直接默认，当然也可以自定义路径和名称；在APPID处填写你目标小程序的appid；后端服务选择【小程序·云开发】 [图片] 设置完毕后，点击新建，等待项目创建完成并全部加载完毕，最终效果如下：  [图片] 3.开通云开发并创建环境如果你之前从未使用过云开发，点击左上角工具栏中的【云开发】按钮，会弹出一个窗口，显示如下：  [图片] 此时只需要点击开通按钮，并在弹出提示框中同意【服务协议】，即可开通云开发。 注意这里的开通是创建一个新的腾讯云账号，如果你不想有太多的账号，可以选择通过已有的腾讯云账号开通，会绑定你目前的已有腾讯云账号，在统一管理和计费方面更加方便。 开通之后需要创建一个云开发环境，上一步同意之后会自动弹出创建窗口，效果如下：  [图片] 这个时候，我们需要选择【按量付费：腾讯云账户扣款】，创建一个按量付费环境。 如果你之前已经使用过云开发了，建议可以创建一个新的环境。每一个微信小程序有两个免费环境，所以可以创建一个新的按量付费环境（有免费额度），或者2个环境转其中一个为按量付费环境（依然有免费额度）。 4.开通内容管理CMS我们创建一个按量计费环境之后，就进入这个环境的控制台了。我们只需要在顶部导航栏中选择【更多-内容管理】，进入内容管理开通页面，效果如下：  [图片] 我们点击开通按钮，会弹出一个确认窗口，告诉我们是在环境中部署CMS应用，需要的资源。  [图片] 点击下一步后，会弹出管理员设置框，我们输入管理员的ID和密码即可。  [图片] 确定之后，内容管理就进入部署阶段，大约3分钟左右。完成之后效果如下：  [图片] 我们只需要打开访问地址，通过浏览器进入内容管理平台，输入我们设置的密码就可以进入内容管理的主页了  [图片] 我们在上图所示页面，点击【创建新项目】，弹出创建项目信息框，随意输入名称和ID，比如在这里我们输入名称为「短信」，id为「SMS」 创建成功后会在我的项目中有对应名字的项目，如下图所示：  [图片] 我们点击项目，进入项目的详情，如下图所示：  [图片] 4.创建短信活动项目进入项目详情后，我们发现左侧栏会有【营销工具】，我们点击其中的营销活动  [图片] 在右上角点击【新建】按钮，创建一个新的活动，内容信息如下： 活动名：用来标记描述活动的名称。活动开启：是否开启活动，如果关闭活动，将不能通过页面拉起小程序。活动开闭时间：在开启时间内，才可以正常的拉起小程序。跳转中间页图片：建议海报，用于在跳转页中展示大图，可以不上传，会有默认样式。小程序跳转路径：已发布上线的小程序中页面路径，不填则默认首页。小程序跳转参数：附带路径的传入参数，一般配合小程序代码联动。我们创建一个活动后展示如上图所示 5.创建短信群发任务在左侧栏点击【群发短信】，进入群发短信页面，点击右上角新建群发，进入信息页。  [图片] 我们需要填写以下3个信息： 短信内容：实际发送时目标手机收到的短信内容，短信的前后缀无法自定义。手机号码包：发送的目标手机号，可以填写一个或多个手机号，用回车或者逗号分割。活动：选择刚才我们创建的活动。填写完毕后，我们点击【创建】按钮，系统会自动进行短信发送，此时我们便可以在目标手机号中收到短信了。 [图片] 在群发短信的页面列表中，可以查看短信的发送状态，以及每一个手机的接收情况。  6.测试短信跳转小程序点击短信的链接后，会跳转到浏览器打开链接，展示如下效果（左默认、右海报）  [图片] 一般页面会自动拉起微信打开小程序，个别机型或浏览器有拦截会导致打开失败，需要手动点击按钮才可以打开。 7.投放外部平台短信的链接可以复制发布到其他外部平台。 8.查看短信监控图表打开微信开发者工具并登录，进入 云开发控制台 > 运营分析 > 监控图表 > 短信监控，即可查看短信监控曲线图、短信发送记录。 [图片] 总结短信发送能力的体验是每个有免费配额的环境首月100条，如有超过额度的需求可前往开发者工具-云开发控制台-对应按量付费环境-资源包-短信资源包，进行购买。如当前资源包无法满足需求也可通过云开发 工单 提交申请[图片]短信发送时间：8:00 - 22:00短信发送能力支持小程序和小游戏发送国内短信的号码是1069开头，尾数是运营商随机号的号码发送成功代表请求发送短信成功，短信异步下发，实际状态以运营商回执为准。没有发送成功的短信不计费,可用性参阅服务等级协议相同内容短信对同一个手机号，30 秒内发送短信条数不超过1条；对同一个手机号，1自然日内发送短信条数不超过10条CMS配置渠道投放、数据统计可参考官方文档

[代码]<?php /** * 关于微信退款的说明 * 1.微信退款要求必传证书，需要到https://pay.weixin.qq.com 账户中心->账户设置->API安全->下载证书，证书路径在第119行和122行修改 * 2.错误码参照 ：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_4 */ header('Content-type:text/html; Charset=utf-8'); $mchid = 'xxxxx'; //微信支付商户号 PartnerID 通过微信支付商户资料审核后邮件发送 $appid = 'xxxxx'; //微信支付申请对应的公众号的APPID $apiKey = 'xxxxx'; //https://pay.weixin.qq.com 帐户设置-安全设置-API安全-API密钥-设置API密钥 $orderNo = ''; //商户订单号（商户订单号与微信订单号二选一，至少填一个） $wxOrderNo = ''; //微信订单号（商户订单号与微信订单号二选一，至少填一个） $totalFee = 0.01; //订单金额，单位:元 $refundFee = 0.01; //退款金额，单位:元 $refundNo = 'refund_'.uniqid(); //退款订单号(可随机生成) $wxPay = new WxpayService($mchid,$appid,$apiKey); $result = $wxPay->doRefund($totalFee, $refundFee, $refundNo, $wxOrderNo,$orderNo); if($result===true){ echo 'refund success';exit(); } echo 'refund fail'; class WxpayService { protected $mchid; protected $appid; protected $apiKey; public $data = null; public function __construct($mchid, $appid, $key) { $this->mchid = $mchid; //https://pay.weixin.qq.com 产品中心-开发配置-商户号 $this->appid = $appid; //微信支付申请对应的公众号的APPID $this->apiKey = $key; //https://pay.weixin.qq.com 帐户设置-安全设置-API安全-API密钥-设置API密钥 } /** * 退款 * @param float $totalFee 订单金额 单位元 * @param float $refundFee 退款金额 单位元 * @param string $refundNo 退款单号 * @param string $wxOrderNo 微信订单号 * @param string $orderNo 商户订单号 * @return string */ public function doRefund($totalFee, $refundFee, $refundNo, $wxOrderNo='',$orderNo='') { $config = array( 'mch_id' => $this->mchid, 'appid' => $this->appid, 'key' => $this->apiKey, ); $unified = array( 'appid' => $config['appid'], 'mch_id' => $config['mch_id'], 'nonce_str' => self::createNonceStr(), 'total_fee' => intval($totalFee * 100), //订单金额 单位 转为分 'refund_fee' => intval($refundFee * 100), //退款金额 单位 转为分 'sign_type' => 'MD5', //签名类型 支持HMAC-SHA256和MD5，默认为MD5 'transaction_id'=>$wxOrderNo, //微信订单号 'out_trade_no'=>$orderNo, //商户订单号 'out_refund_no'=>$refundNo, //商户退款单号 'refund_desc'=>'商品已售完', //退款原因（选填） ); $unified['sign'] = self::getSign($unified, $config['key']); $responseXml = $this->curlPost('https://api.mch.weixin.qq.com/secapi/pay/refund', self::arrayToXml($unified)); $unifiedOrder = simplexml_load_string($responseXml, 'SimpleXMLElement', LIBXML_NOCDATA); if ($unifiedOrder === false) { die('parse xml error'); } if ($unifiedOrder->return_code != 'SUCCESS') { die($unifiedOrder->return_msg); } if ($unifiedOrder->result_code != 'SUCCESS') { die($unifiedOrder->err_code); } return true; } public static function curlGet($url = '', $options = array()) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_TIMEOUT, 30); if (!empty($options)) { curl_setopt_array($ch, $options); } //https请求 不验证证书和host curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); $data = curl_exec($ch); curl_close($ch); return $data; } public function curlPost($url = '', $postData = '', $options = array()) { if (is_array($postData)) { $postData = http_build_query($postData); } $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $postData); curl_setopt($ch, CURLOPT_TIMEOUT, 30); //设置cURL允许执行的最长秒数 if (!empty($options)) { curl_setopt_array($ch, $options); } //https请求 不验证证书和host curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); //第一种方法，cert 与 key 分别属于两个.pem文件 //默认格式为PEM，可以注释 curl_setopt($ch,CURLOPT_SSLCERTTYPE,'PEM'); curl_setopt($ch,CURLOPT_SSLCERT,getcwd().'/cert/apiclient_cert.pem'); //默认格式为PEM，可以注释 curl_setopt($ch,CURLOPT_SSLKEYTYPE,'PEM'); curl_setopt($ch,CURLOPT_SSLKEY,getcwd().'/cert/apiclient_key.pem'); //第二种方式，两个文件合成一个.pem文件 // curl_setopt($ch,CURLOPT_SSLCERT,getcwd().'/all.pem'); $data = curl_exec($ch); curl_close($ch); return $data; } public static function createNonceStr($length = 16) { $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; $str = ''; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } public static function arrayToXml($arr) { $xml = "<xml>"; foreach ($arr as $key => $val) { if (is_numeric($val)) { $xml .= "<" . $key . ">" . $val . "</" . $key . ">"; } else $xml .= "<" . $key . "><![CDATA[" . $val . "]]></" . $key . ">"; } $xml .= "</xml>"; return $xml; } public static function getSign($params, $key) { ksort($params, SORT_STRING); $unSignParaString = self::formatQueryParaMap($params, false); $signStr = strtoupper(md5($unSignParaString . "&key=" . $key)); return $signStr; } protected static function formatQueryParaMap($paraMap, $urlEncode = false) { $buff = ""; ksort($paraMap); foreach ($paraMap as $k => $v) { if (null != $v && "null" != $v) { if ($urlEncode) { $v = urlencode($v); } $buff .= $k . "=" . $v . "&"; } } $reqPar = ''; if (strlen($buff) > 0) { $reqPar = substr($buff, 0, strlen($buff) - 1); } return $reqPar; } } ?> [代码]

首先话不多说元素样式走起来 canvas宽高由js变量动态定义 html <canvas class=‘canvas’ canvas-id=“shareCanvas” style=“width:{{canvasWidth}}px;height:{{canvasHeight}}px”></canvas> css .canvas{ margin: 0 auto; letter-spacing: 2rpx; //画布上文字间距 我实在不知道canvas api怎么控制字间距 margin-top: 10%; } 然后绘制canvas代码 canvasImg：function（）{ [代码]var that = this; wx.showLoading({ title: '图片正在生成' }); //拿到用户名称和用户头像 name ，img var name = app.header.userInfo.nickName; var img = app.header.userInfo.avatarUrl.replace("http:", "https:"); //请求后台接口拿到小程序码临时url //这里是我们后台根据我传递的页面路径和标识获取对应小程序的小程序码 返回一个图片临时缓存的url wx.request({ url: app.data.proxy + '/miniprogram/getUnlimited', data: { type: app.data.pdd, page:'pages/index/index' }, success(res) { var image = res.data.result; //拿到临时url 使用getImageInfo缓存到本地 wx.getImageInfo({ src:image, success(res){ //liload 小程序码本地缓存地址 var liload = res; //获取用户设备宽高 wx.getImageInfo({ src: img, success(res) { var width,height; wx.getSystemInfo({ success(res) { width = res.screenWidth * 0.6; height = Math.round(width * 1066 / 600); that.setData({ canvasWidth: width, canvasHeight: height }); } }); var x = width/750; //设置相对canvas自适应根元素大小 const ctx = wx.createCanvasContext('shareCanvas'); ctx.drawImage('../img/pinduoduo.jpg', 0, 0, 500*x, 812*x); ctx.save(); ctx.setTextAlign('center'); // 文字居中 ctx.setFillStyle('#fff'); // 文字颜色：黑色 ctx.setFontSize(16); // 文字字号 ctx.fillText(name, 250*x, 250*x); //名字 ctx.setFontSize(14); // 文字字号 ctx.fillText('邀请你使用【拼拼宝盒】', 250*x, 300*x); ctx.save(); //圆形头像框 ctx.setStrokeStyle('rgba(0,0,0,.2)'); ctx.arc(250 * x, 140 * x, 60 * x, 0, 2 * Math.PI); ctx.setStrokeStyle('rgba(0,0,0,.2)'); ctx.arc(250 * x, 460 * x, 120 * x, 0, 2 * Math.PI); ctx.fill('#fff'); //小程序码 ctx.clip(); ctx.drawImage(liload.path, 150*x, 360*x, 200*x, 200*x); //头像 ctx.clip(); ctx.drawImage(res.path, 190*x, 80*x, 120*x, 120*x); ctx.save(); ctx.stroke(); ctx.draw(); wx.hideLoading(); } }); } }) } }); [代码] } 绘制完成 [图片] 保存事件 这里首先用getSetting检测用户有没有开启相册权限 有的话直接保存 没有的话弹到权限页面让用户授权 btnTap:function () { [代码]var that = this; wx.showLoading({ title: '正在保存', mask: true, }); wx.getSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { that.saveImg(); } else if (res.authSetting['scope.writePhotosAlbum'] === undefined) { wx.authorize({ scope: 'scope.writePhotosAlbum', success() { that.saveImg(); }, fail() { wx.showToast({ title: '您没有授权，无法保存到相册', icon: 'none' }) } }) } else { wx.openSetting({ success(res) { if (res.authSetting['scope.writePhotosAlbum']) { that.saveImg(); } else { wx.showToast({ title: '您没有授权，无法保存到相册', icon: 'none' }) } } }) } } }) [代码] } 用户有授权调用保存图片API 保存图片到手机 saveImg：function（）{ [代码] wx.canvasToTempFilePath({ canvasId: 'shareCanvas', success: function (res) { wx.hideLoading(); var tempFilePath = res.tempFilePath; wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success(res) { wx.showModal({ content: '图片已保存到相册，赶紧晒一下吧~', showCancel: false, confirmText: '好的', confirmColor: '#333', success: function (res) { if (res.confirm) { var arr = []; arr.push(tempFilePath); //保存后全屏显示 wx.previewImage({ urls: arr, current: arr }); } }, fail: function (res) { } }) }, fail: function (res) { wx.showToast({ title: '没有相册权限', icon: 'none', duration: 2000 }); } }) } }); [代码] } 好了 就这么多了 第一次发帖 有不足之处望各路大佬见谅、指出不胜感激 附代码片段：https://developers.weixin.qq.com/s/8Z8oXbm17ojh

你好，想咨询下官方人员，激励视频的奖励不能提现的话可以用来兑换话费吗？ 小程序《步数宝》就是看60次广告兑换120火力值，然后120火力值兑换1元话费 [图片]

[图片] [图片] 请问怎么处理? Appid是wx061e4b9f73885f51, 已经收到3个用户反馈问题。

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

我们在做小程序开发时，难免会遇到地图相关的开发，而小程序已经为我们提供的比较完善的地图组件。我们只需要调用相关的api就可以实现大致的功能。如：获取经纬度，获取位置，获取地址，获取地名。结下来就具体给大家讲解。 老规矩先看效果图 [图片] 接下来我们就来看看具体实现步骤 一，定义一个按钮来调用位置获取的api [代码]<!--index.wxml--> <button bindtap='getLocation'>获取位置信息</button> <text>{{jingwei}}</text> <text>{{address}}</text> <text>{{name}}</text> [代码] 二，调用获取地理位置的方法 [代码]//index.js Page({ getLocation() { let that = this; wx.chooseLocation({ success: function(res) { console.log(res) var latitude = res.latitude var longitude = res.longitude; that.setData({ jingwei: "经纬度：" + longitude + ", " + latitude, address: " 地址：" + res.address, name: " 地名：" + res.name }) } }); } }) [代码] 其实到这里我们就可以实现获取经纬度，获取位置信息的功能了。 但是呢？？现在小程序调用用户位置信息时，需要用户授权，如下图，如果用户点击了拒绝，我们就没有办法调用地图获取位置信息了。 [图片] 所以呢，我们要想实现一个完整的获取用户位置信息的功能，就要在监测到用户拒绝的位置权限时，引导用户去重新授权。这样才是一个友好的健壮的程序。下面就来教大家如何引导用户去打开授权。 三，在app.json里注册位置权限 [图片] 上图红色框里就是我们的位置权限的注册代码,app.json的完整代码如下。 [代码]{ "pages": [ "pages/index/index", "pages/setting/setting" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "sitemapLocation": "sitemap.json" } [代码] 四，定义检查位置权限是否打开的方法 [代码] //校验位置权限是否打开 checkLocation() { let that = this; //选择位置，需要用户授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', success() { wx.showToast({ //这里提示失败原因 title: '授权成功！', duration: 1500 }) }, fail() { that.showSettingToast('需要授权位置信息'); } }) } } }) }, [代码] 这个方法就是来检查用户的位置权限是否授权，如果没有授权，就弹窗提示用户去授权页授权。弹窗代码如下： [代码] // 打开权限设置页提示框 showSettingToast: function(e) { wx.showModal({ title: '提示！', confirmText: '去设置', showCancel: false, content: e, success: function(res) { if (res.confirm) { wx.navigateTo({ url: '../setting/setting', }) } } }) }, [代码] 至此就可以实现一个完整的获取用户位置信息的小程序了，index.js完整代码如下 [代码]//index.js Page({ getLocation() { this.checkLocation(); let that = this; wx.chooseLocation({ success: function(res) { console.log(res) var latitude = res.latitude var longitude = res.longitude; that.setData({ jingwei: "经纬度：" + longitude + ", " + latitude, address: " 地址：" + res.address, name: " 地名：" + res.name }) } }); }, //校验位置权限是否打开 checkLocation() { let that = this; //选择位置，需要用户授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.userLocation']) { wx.authorize({ scope: 'scope.userLocation', success() { wx.showToast({ //这里提示失败原因 title: '授权成功！', duration: 1500 }) }, fail() { that.showSettingToast('需要授权位置信息'); } }) } } }) }, // 打开权限设置页提示框 showSettingToast: function(e) { wx.showModal({ title: '提示！', confirmText: '去设置', showCancel: false, content: e, success: function(res) { if (res.confirm) { wx.navigateTo({ url: '../setting/setting', }) } } }) }, }) [代码] 从代码中可以看到，我们在用户拒绝授权时的提示框，点击会跳转到setting页，setting也是我们自己的页面，但是这个页面特别简单。就定义一个button。 [代码]<!--pages/setting/setting.wxml--> <button class="button" open-type="openSetting" type='primary'> 打开授权设置页 </button> [代码] 为什么要这么做呢，因为微信不允许我们直接打开权限设置页，必须通过button组件提供的开发能力去到设置页，这里的开放能力就是open-type=“openSetting” 中的openSetting。我们点击按钮后就到了权限设置页。 [图片] 这样就可以引导用户再次授权了。 有任何关于编程的问题都可以加我微信2501902696（备注编程开发） 编程小石头，码农一枚，非著名全栈开发人员。分享自己的一些经验，学习心得，希望后来人少走弯路，少填坑。 完整的源码可以加老师微信获取，也可以关注下面老师公号，回复“地图源码” 获取。 [图片]