payMoney() { ///开始支付     wx.showLoading({       title: '加载...',     })     //console.log('app.globalData.user.vid,', app.globalData, app.globalData.user.vid)     wx.cloud.callFunction({       name: 'createOrder',       data: {         vid: app.globalData.user.vid,         totalFee: this.data.totalFee,       }     }).then(res => {       wx.hideLoading()       console.log('createorder :',res.result, res)       this.unifiedOrder(res.result)     }).catch(err => {       wx.hideLoading()     })   },   unifiedOrder(data) { //统一下单     console.log('unifiedOrder data',data)     wx.showLoading({       title: '加载...',     })     wx.cloud.callFunction({       name: 'unifiedOrder',       data: data     }).then(res => {       //同一下单预处理order       console.log('res.result.payment',res)       wx.hideLoading()       this.requestPayment(res.result.payment)     }).catch(err => {       console.log(err)       wx.hideLoading()     })   },   requestPayment(payment) {     let that = this     wx.requestPayment({       ...payment,       success(res) {         console.log('pay success', res)         wx.showModal({           content: '打赏成功!',           showCancel: false,           success: res2 => {             if (res2.confirm) {               //console.log('app.globalData.user', app.globalData.user)               app.globalData.user.coin = app.globalData.user.coin + parseInt(that.data.totalFee / 100)               wx.redirectTo({                 url: `/pages/${that.data.page}/${that.data.page}`,               })             }           }         })       },       fail(err) {         console.error('pay fail', err)         wx.showModal({           content: '打赏失败!',           showCancel: false,         })       }     })   }, ////////// 提示{returnCode: "FAIL", returnMsg: "sub_mch_id与sub_appid不匹配", errCode: 0, errMsg: "cloudPay.unifiedOrder:ok"} 基于腾讯云开发的,

我统一下单，我的functionName:pay_cb函数中返回 retrun{ errcode:0 ,errmsg:success}怎么传回小程序端呢？我现在只能在日志里面能看到这个返回值。  统一下单云函数：  const res = await cloud.cloudPay.unifiedOrder({     "body" : "德海生鲜",     "outTradeNo" : event.order_number_send,     "spbillCreateIp" : "127.0.0.1",     "subMchId" : "1591",     "totalFee" : 1,     "envId": "dehai-alpha-bq",     "functionName": "pay_cb",   })   console.log("bpay=",res)   return res } "functionName": "pay_cb" 云函数： // pay_cb 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init({   env:'dehai-alpha-bk9zq' }) const db = cloud.database() const _ = db.command exports.main = async (event, context) => {   await db.collection('orders').doc(event.outTradeNo).set({     data:event   })   return {     errcode:0,     errmsg:'SUCCESS'   } }

场景:使用微信扫一扫,直接打开小程序里的某一个界面. 谢谢

云开发收费了，不管你怎么选择，只要你还继续使用云开发，共享云环境的课题就不可避免。 我们知道，共享云环境下，fileID是无法使用的，怎么兼容，一个最简的方法如下： <wxs module="wxs"> module.exports = { getUrl: function (link) { if (link) { } else return '' if (link.substring(0, 5) == 'cloud') { } else return link var arr = link.split('/') arr[0] = 'https:' arr[2] = arr[2].split('.')[1] + '.tcb.qcloud.la' return arr.join('/') } } </wxs> <image src="{{wxs.getUrl(link)}}"></image> 可见：只要将原项目所有的fileID换成wxs.getUrl(link) 其他代码可以一分不动，也不需要用到wx.cloud.getTempFileURL 可以将wxs.getUrl放在lib.wxs里，任何wxml引用即可。

功能优化 1、用户习惯引导 在小程序中设置明显的「添加」文案，引导用户添加到桌面、添加到我的小程序。这是在培养用户的使用习惯，达到二次使用的效果。 2、优化运营功能 优化产品功能，提高用户的转化，例如通过团购、助力、砍价、打卡、分销、红包奖励等实现留存和转化效果的运营手段。 3、增加分享引导功能 可以结合小程序的使用场景，引导用户分享，产生裂变效果。例如微信读书中分享可以获得免费阅读天数；生成成绩单引导分享。 渠道宣传 4、公众号宣传 利用公众号庞大的粉丝基数，在推文中分享小程序，在自定义菜单设置入口，从公众号的各个方面触发新老用户。 5、私欲流量转化 直接分享至通私欲流量池（个人号、用户群等），任意时间、任意频次，直接触达到用户。私欲流量需要精细化运营，通过不断提供优质内容提高用户粘性，并且不断将私域流量进行裂变，实现更低成本的精准获客。 6、线上多渠道推广 找到有相同用户群体的渠道，直接转发至微信群，也可通过海报/文章+二维码转到朋友圈、微博、贴吧、论坛、垂直社区等社交平台。 7、线下推广 将小程序二维码放置在商场、店铺桌面、小礼品、宣传海报、车身等显眼位置，通过吸引眼球的文字与图片，引导用户扫码体验。 8、充分利用流量入口 微信小程序的流量入口众多，充分利用入口，也能达到良好的用户导流。如订阅消息（模板消息升级）、附近发券功能、附近小程序等。 9、搜索优化 优化自己的小程序名称，让其与行业搜索关键词或相关产品名称相近，在客户搜索时可以获得靠前的展示。 合作共赢 10、小程序换量 这里涉及到导流问题，强强联手制造双赢。同一用户群体的小程序合作，互相推广宣传，比如美业与健身服务、驾考练习与售车平台、外语培训机构与留学机构等等。 11、付费广告 包括公众号文中广告、朋友圈广告、小程序小游戏广告等，也包括与大 v 合作的付费推广，但这种方式费用较高，不适合没有推广预算的平台。 12、小程序商店 目前绝大多数小程序商店是免费入驻的，部分可以通过付费或合作进行小程序推荐。小程序商店：知晓程序、91ud小程序商店、大梦想程序商店、极乐小程序商店、轻应用商店等。

一、搜索优化三板斧 在制定搜索优化策略前，我们要清楚小程序的搜索入口有：微信搜索、小程序垂搜、购物单搜索以及搜一搜，这4个入口结合小程序排序规则，就衍生出以下3种推广方式： 01 取个容易被搜到的名称先占位 小程序的取名需要结合产品特点，也要考虑到用户对所提供服务的称呼习惯和搜索习惯，把最关键和最常使用的词语放在名称的前面，尽量避免复生僻词语，也不宜太长，不然影响用户记忆。 另外，由于小程序的名称是唯一的，商家应该尽早注册小程序名称，不然就会出现名字被已被注册的局面。不过，出现这个尴尬局面也不用慌，可以在名称前面或者后面加上标志性的英文字母，比如「i麦当劳」、「肯德基+」、「YH永辉生活+」、等。 02 提升小程序商品的搜索排行 微信近期上线新功能，搜索栏边购物商城，小程序商品均可接入。据微信官方透露，这商品的销量和评价有直接关系，那么商家可以通过打造小程序爆款商品，引导用户给好评的方式提高商品的搜索排名。 二、巧用微信免费端口 公众号和小程序都是微信生态内极为重要的组成部分，在微信官方的持续迭代下，两者在流量上基本可以实现互通有无。 03 公众号绑定/解绑小程序的消息通知 只要公众号关联成功小程序，就会自动向用户推送一条关联通知，用户点击卡片即可进入小程序。这里要划重点了：这条关联通知不限次数、不占用推送次数。 也就是说，你可以重复「绑定- 解绑」这个动作，当然前提是不引起用户的反感。因此我的建议是，当公众号新增粉丝到一定量后，操作一次，来达到同时引导新老用户使用小程序的目的，「百果园」就是活用「绑定- 解绑」这个动作的典型例子。 04 小程序和公众号菜单结合 当你的小程序和公众号关联后，你可以选择将小程序放置在公众号菜单栏内，无论新老用户只要看到点击菜单栏，即可实现把公众号粉丝引流到小程序中。 05 公众号文章插入小程序码/卡片 有了前面和公众号的关联，公众号文章中就可以直接插入小程序卡片，这种形式的插入十分直观，特别适合做内容电商的企业。 他们基本都是采用「公众号+电商小程序」引导用户购买的形式，黎贝卡于在17年12月份上线自有品牌的小程序，短短7分钟告罄；第二次上线更是只用了59秒就告罄，如此成绩实在令人艳羡。 但如果你的小程序没有和公众号关联，还可以采取这种更简单粗暴的方法：直接插入小程序码，引导用户长按扫码进入小程序（效果比前一种卡片式的嵌入要差）。 06 小程序跳转（免费互推） 小程序跳转有两种玩法，一种是同一企业之间的小程序跳转，另一种是不同企业之间的资源互换。 前者的相互跳转，其实是企业服务的互补和完善，它一般会这么做：将每个产品线各做一个07 支付后消息通知 商家可以在微信支付推送的支付成功通知页面设置「进入商家小程序」链接，引导消费者使用微信支付付款后进入小程序，形成二次触达。 08「附近的小程序」 「附近的小程序」可以说是微信收割线下场景的大杀器。用户到达一个地点想要服务时就可以使用这个功能去发现附近的小程序，完全不用借助中间商，就可以帮助线下商户更好获取用户。 以麦当劳小程序为例，通过「附近的小程序」访问麦当劳小程序的用户中，新用户占比高达94%。在麦当劳小程序所有新用户中，通过「附近的小程序」入口进入的用户占比达 23%，是小程序新用户的主要来源。 那么怎么用好这个新功能呢？主要有两个小技巧： 第一、添加门店客服。商家在添加门店时，可以认证微信客服，待门店通过审核上线后，再使用小程序所绑定的微信登陆客服后台并保持在线状态，即可实现客服外显至门店列表页。这样一来，用户更容易看到你的门店，也更方便联系你，从而为你的小程序获得更多服务机会。 第二、在店铺页上配置发放卡券。如果商家开通了微信买单、会员或优惠服务，会展现在店铺信息页。这样用户在选择特定分类下附近的小程序时，可以通过点击标签筛选开通了以上服务的商家，完成拉新转化和招募会员的同时，打通了「微信卡包」这个一级入口。 三、利用微信进行社交裂变 坐拥10亿用户的微信俨然是一个巨大的流量池，为小程序的社交裂变提供了支持。 09 社交立减金+卡包 在小程序支付成功后，商家可向用户赠送「社交立减金」，用户可以分享给多位好友或微信群。当「立减金」被好友领取后会放入卡包「我的票券」中，用户下次再到这个小程序内消费支付就能进行核销，比如星巴克、周黑鸭、屈臣氏等商家都上线了该功能，这是打通「微信卡包」这个一级入口的另一种推广方式， 据2018年1月微信公开课PRO公布的数据，已上线社交立减金的小程序已经取得不错的效果：社交立减金裂变率达到150%，每次分享机会可以至少带来1个新的客人，同时获客成本可以低至1.7元，券核销率超过20%。 10 红包裂变 玩红包裂变的套路一般是这样的，以「拼多多」为例，你打开它的小程序，会弹出一个霸屏的大红包，当你领取后，它会引导你将红包分发到微信群，这样你就可以再领红包。它实质上就是一个借助原有用户经小程序通过微信群裂变首个用户的过程。 11 功能玩法裂变 除了用立减金、红包这种简单直接的利益刺激，商家还会对它们进行变形，于是出现比如拼团、砍价、抽奖等玩法。玩法很多，就看你怎么能不能玩出新花样来。 以电商小程序为例，商家可以做拼团、分销、秒杀这些功能扩散到有匹配度的群里做社群裂变；同时可以挑选一款产品作为拼团、秒杀的一个亮点，结合公众号推文做活动裂变；另外还可以开启分销系统，做朋友圈海报进行朋友圈裂变，三种裂变方式一起作用的效果基本不会差。 12 小程序和H5的组合打法 今年我们看到各种刷屏H5，十分火爆，这给了我们新的思路：通过H5引爆活动吸引流量进入，然后用小程序进行用户沉淀，这种组合打法或许会成为接下来的一种小趋势。 四、微信生态内投放广告 以上给大家介绍了一些不怎么花钱的推广方式，下面我们来聊点花钱的——投广告。首先你在公众号后台找到「广告主」一栏，点击进入，然后就可以根据你的需求进行一一设置。 13 公众号文中广告 现在公众号新增了文中广告位，支持小程序落地页投放，只要点击广告外层的图片或按钮即可跳转到指定的小程序。只要公众号的流量足够大，一大波广告会自动寻找到你；另外如果线下商家需要推广，也可以利用这种方式和知名的本地号做推广。 14 公众号底部广告 在公众号底部广告处也支持了小程序的落地页投放，与在公众号文中的广告位类似，用户点击广告外层图片即跳转指定小程序。该功能将对电商类小程序有很大的好处，其成交率将比之前的H5推广要高得多。但该功能没有对门店推广开放，而且对线下商家的意义不大。 15 朋友圈小程序广告 朋友圈广告支持小程序投放，广告投放落地页以小程序作承载，点击广告即可进入小程序页面。另外，根据微信官方最新消息，朋友圈广告上线新能力——多门店投放，广告主可实现单条广告支持承载不超过100家线下门店，同时广告系统可以智能拉取并向用户展示与其最近的门店，引导用户到店转化，这对于做本地推广的线下商家来说是一个绝佳的好消息 16 小程序内广告 现在企业也能在其他小程序内对自家的小程序进行广告投放，本质上也是一次小程序间的跳转，不过这种要花广告费而已。 五、微信生态外投放广告 除了在微信生态内进行广告投放，当然还有在微信生态外进行广告投放。 17 媒体曝光 不管小程序推广方式多么“丰富多彩”，寻求互联网行业媒体的曝光，永远都是一种经济且效果较为可观的方式，而「小打卡」小程序初期的用户增长，很大程度上就是依靠这种方法实现的。 18 APP分享 在APP内分享内容到微信群或好友时，分享出来的也可以以小程序的方式进行展示，比如大众点评、智行火车票等APP分享出来的就是小程序，很多核心的用户不需要使用APP，也可以使用小程序触达。 19 WiFi推广 通过WiFi推广小程序是建立在此前公众号推广的基础上，通过微信连WiFi关注公众号后，落地页跳转小程序，进而为小程序导流。其场景地位主要在线下实体门店、餐饮店、服装，商超等，可以帮助更多商户解放线下流量，更快拥抱新零售。 20 海报、宣传单等物料的线下扫码 线下扫码是小程序最基础的获客方式之一，通过微信扫描小程序码，即可进入小程序，简单快捷。线下门店可以采用这种简单的方式，通过与线下营销活动相结合，以易拉宝、宣传单或相片架等方式进行宣传，吸引用户主动扫码参与活动，典型如喜茶，它就是通过门店物料，赠送相片架等方式实现用户快速增长。 21 委托第三方运营公司 将小程序委托给第三方运营公司，然后通过第三方运营公司下的众多微信社群进行转发流通促成大量激活，但是这个方法比较粗放，因为投放的用户群不一定都是小程序的目标用户，转化率可能会比较低。 最后，我们用一张思维导图总结下小程序的21种推广方式: [图片]

之前一直在研究微信小程序产品和微信小程序开发相关的内容，最近在开始研究如何把微信小程序推出去，所以总结了以下 7 种推广方式： 社交媒体营销：可以在社交媒体平台上，如微信、微博、抖音等上，发布有关微信小程序的内容，吸引用户关注。 合作伙伴推广：可以与一些小程序开发公司或营销公司合作，让他们在自己的平台上推广微信小程序，给予收益分佣。付费广告投放：可以在一些知名的社交媒体平台上投放广告，吸引用户关注微信小程序。搜索引擎优化：可以在搜索引擎上做优化，提高微信小程序在搜索结果中的排名，从而吸引更多的用户。线下推广：可以通过线下活动、宣传单页等方式，向潜在用户推广微信小程序。口碑传播：可以通过用户的好评或评论，口碑传播，吸引更多的用户来使用微信小程序。与微信生态结合：可以将小程序与微信公众号/视频号结合，通过微信公众号/视频号带来更多的曝光和用户。 最后，微信小程序的推广需要多种方式结合，从不同角度去吸引用户，提高用户体验，从而增加小程序的曝光率和使用率。

前言 上次写了一篇《微信小程序如何推广？》这篇文章中介绍了一些常用的方法，其实里面的每一种推广方法都可以展开来聊。 推广方式 今天我给大家来分享下我自己在微信生态用到的一些推广方式： 1.市场调研和分析： 首先，你需要对目标市场进行深入的调研和分析，先确定要做什么小程序，市场有没有这个需求，然后找出你的竞争对手，挖掘独特的竞争优势和机会。 2.寻找蓝海关键词： 基于市场调研和分析，使用关键词工具（是用微信指数、百度指数等）查找与你的业务相关的高搜索量、低竞争的关键词，这将有助于你在微信生态内找到蓝海市场。 3.优化小程序内容： 根据找到的蓝海关键词，优化你的小程序内容，包括名字、描述、图标等。确保内容质量高、有价值，能够吸引用户关注和分享。 4.搭建公众号和视频号： 在微信生态内建立公众号和视频号，与你的小程序紧密结合。在公众号菜单/文章都可以插入小程序链接跳转，视频号内容引导用户搜索小程序，以及可以关联文章插入你的小程序内容，这将有助于你在微信生态内形成一个完整的内容矩阵，提高品牌曝光度。 5.合作与推广： 寻找合作伙伴和资源，与其他公众号、视频号或微信群联合推广，扩大你的小程序在微信生态内的影响力。此外，可以考虑投放微信广告，利用微信广告平台精准投放，吸引潜在用户。 6.数据分析与优化： 持续关注小程序、公众号和视频号的数据表现，包括访问量、转化率、用户留存等。通过数据分析，找到优化方向，不断改进产品和运营策略。 总结 市场分析/关键词查找：找到有机会的方向，做小众垂直产品 优化小程序内容/搭建公众号和视频号：利用微信搜一搜SEO来进行自然流量获取 合作与推广/数据分析与优化：学会合作资源置换，不断优化转化率，持续迭代 如果你有更好的推广方式，欢迎你与我讨论

【0基础入门案例】组件库使用练习——使用VantUI复刻瑞幸小程序首页 前言 本教程一共包含三部分 文档； 介绍文档*1：介绍基本知识及实现思路； 详细操作文档*1：可以跟着一步一步操作的文档； 视频资料一套； 还在审核 练习使用素材一套（图片素材仅供学习用途）； luckincoffee-miniprogram (gitee.com) 导入项目即可开始玩耍！ 效果图 （配套素材均已认为损坏，与该图有出入，仅供学习用途）! [图片] 目录 [TOC] 一、 思路分析 我们的思路会遵循： 页面需要的组件 - > VantUI里面的组件 -> 根据需求进行修改 （一）布局分析 [图片] （二）组件分析 1、顶部透明的导航栏 [图片] 在[代码]app.json[代码]中可以自定义顶部导航栏。 2、 幻灯片 [图片] 可以使用微信原生swiper组件。 3、 主功能卡片 （1）卡片区1 [图片] 使用[代码]Vantui[代码]的栅格进行排列。栅格文档-Layout 布局 [图片] （2）卡片区2 [图片] 同上，使用栅格进行排列 （3）带背景的容器 [图片] 使用容器并设置容器背景，文字颜色即可。 4、中底部幻灯片 [图片] 幻灯片和上面第一张幻灯片的操作一样，进行一定的设置以显示下一张幻灯片的一部分 5、标签页 [图片] 使用[代码]Vantui[代码]的标签页进行实现 Tab 标签页 - Vant Weapp [图片] 6、商品卡片布局 商品卡片可以采用[代码]grid[代码]宫格进行布局，Grid 宫格 [图片] 7、商品卡片 [图片] 使用css对样式进行调整即可，标签使用VantUI Tag 标签实现。 二、实现 进行效果对比时，左边为原图，右边是我们实现的效果 [图片] （一）初步实现 1、顶部导航栏 在[代码]app.json[代码]的 [代码]window[代码]节点中自定义顶部导航栏。 [代码]{ "window": { "navigationStyle": "custom", //让导航栏变透明 "navigationBarTextStyle": "white" //让胶囊的背景变成黑色半透明 } } [代码] 复刻效果/ [图片] 2、幻灯片 使用swiper组件即可，此处需要注意的是，此处导航点的颜色喝位置都需要变一下 在[代码]swiper[代码]组件中定义导航点的颜色 [代码]<swiper indicator-color="rgba(252, 254, 255, 80%)" indicator-active-color="#ffff" indicator-dots="{{true}}"> [代码] 在样式中，使用类选择器选中导航点[代码].wx-swiper-dots.wx-swiper-dots-horizontal[代码]，调整其位置 [代码].wx-swiper-dots.wx-swiper-dots-horizontal { top: 65%; } [代码] 复刻效果 [图片] 3、主功能区 （1）卡片区1 我们可以把布局想象成一个列表，一共有两行，总行宽为[代码]24[代码]，分成两列，[代码]10[代码]、[代码]14[代码]; 左边一列只有一张图片，右边一列有两行，一行内，它的长度又被分成[代码]24[代码]份，每个方格占一半[代码]12[代码]即可； 最后使用[代码]van-row[代码]的[代码]gutter[代码]属性 ，加上列与列，行与行的间距 [图片] [代码]<!-- 最外面的一行 --> <van-row gutter="6"> <!-- 左边一列 --> <van-col span="10"> <image/> </van-col> <!-- 右边一列 --> <van-col span="14"> <!-- 右边列的上面 --> <van-row span="14"> <image/> </van-row> <!-- 右边列的下面一行 --> <van-row gutter="2"> <!-- 右边列的下面一行的左边一列 --> <van-col span="12"> <image/> </van-col> <!-- 右边列的下面一行的有边一列 --> <van-col span="12"> <image/> </van-col> </van-row> </van-col> </van-row> [代码] 效果 [图片] （2）卡片区2 [图片] 同理可得两组卡片 效果 [图片] （3）带背景的容器 [图片] 使用容器并设置容器背景，文字颜色即可，但在微信小程序中，通过css设置的背景图需要放在http/https静态资源服务器中，此处提供素材[代码]https://cdn.notcloud.net/static/luckin/entrance/mid2-1.png[代码] [代码].带背景容器的类名{ background: url("https://cdn.notcloud.net/static/luckin/entrance/mid2-1.png") no-repeat ; background-size: 685rpx; height: 160rpx; } [代码] 效果 [图片] 5、标签页 [图片] 使用[代码]Vantui[代码]的标签页进行实现 Tab 标签页 - Vant Weapp 有几个地方需要改变的，首先底部小横条，改变底部小横条颜色等，在导航栏右侧加上“更多” 先改变一下导航栏的颜色，改成[代码]#f5f5f5[代码] [代码]<van-tabs line-width="30rpx" color="#e44812" sticky="{{true}}" nav-class="tabsnav" /> [代码] [代码].tabsnav{ background-color: #f5f5f5; line-height: 2rem; } [代码] 在tab标签页右边增加一个插槽，用来放“更多”和箭头，同时为插槽定义[代码]width: 150rpx;[代码] [代码] <view slot="nav-right" style="width: 350rpx;text-align: right;"> <view class="icontext"> 更多 </view> <!-- 更多 --> <van-icon name="arrow" color="#b6b3b6" custom-class="tabicon"/> </view> [代码] 插槽内放置文字和符号，使用图标的[代码]custom-class[代码]属性，自定义样式 [代码].icontext{ display: inline; background-color: #f5f5f5; font-size: 0.8rem; color: #b6b3b6; width: 2rem; } .tabicon{ font-size: smaller; line-height: 1rem; margin-top: 30rpx; color: #b6b3b6; } [代码] 效果 [图片] 6、卡片布局 使用[代码]grid[代码]进行布局，需要调整的项目有 <van-grid 下 column-num=“2”：每行的列数 border="{{ false }}" 关闭边框 gutter=“10” 每个卡片的间距 custom-class=“grids” 外部样式类，给这个组件绑定一个样式类，用于改变背景颜色，因为默认是白色 [代码]<van-grid column-num="2" border="{{ false }}" gutter="10" custom-class="grids"> <van-grid-item use-slot wx:for="{{ 8 }}" wx:for-item="index" content-class="product-card"> <image style="width: 100%; height: 130px;" src="$PROJECT_ROOT/images/products/{{index}}.jpg" /> <van-row> <van-col offset="2"> <!-- 放商品小卡片 --> </van-col> </van-row> </van-grid-item> </van-grid> [代码] [图片] 7、 商品小卡片 [图片] 先来做个标题 设置样式 line-height:2.5rem 设置行高为2.5个字的高度 font-size: 0.8rem 设置字体大小为0.8rem [代码] <view style="line-height:0.8rem;font-size: small;width: 300rpx;"> 瑞幸吸猫系列 </view> [代码] 再做个价格栏 使用[代码]text-align: left;[代码]将文字向左对齐 使用::before在[代码]price[代码]价格前填充价格单位 给原价[代码]originPrice[代码]加上横线装饰[代码]text-decoration: line-through;[代码] [代码] <view style="text-align: left;" class="price"> 99 <text class="originPrice">129</text> </view> [代码] [代码].price::before{ content: "￥"; font-size:1.2rem; } .price{ width: 300rpx; color: #d36f11; font-size: 1rem; } .originPrice::before{ content: "￥"; } .originPrice{ color: gray; font-size: 0.9rem; text-decoration: line-through; } [代码] 标签栏，使用VantUI的tag组件[代码]<van-tag/>[代码]实现 color="#fce5dd" 标签背景颜色 text-color="#ca6540" 标签文字颜色 custom-class 指定外部样式，在外部样式加上[代码]margin-right[代码]以隔开小标签 [代码] <view style="text-align: left; width: 100%;"> <van-tag color="#fce5dd" text-color="#ca6540" custom-class="tag"> 赠品 </van-tag> <van-tag color="#fce5dd" text-color="#ca6540" custom-class="tag"> 返卷 </van-tag> </view> [代码] [代码].tag{ margin-right: 10rpx; } [代码] 效果图 [图片] （二）扣一点小细节 1、 主功能区 图之间的缝隙需要微调 [图片] [图片] 2、标签页 横线位置 需要贴着字 [图片] 三、总结 1、 可能出现的报错 基础库报错，解决办法，降调试库版本，建议2.19.* [图片] [图片] 无法引入组件，检查是否打开使用NPM [图片] [图片] 2、 总结 本次案例主要练习的是对常用组件的辨析以及调整组件的设置，基本上沿着：“分析使用了哪些组件、布局 -> 寻找组件库对应的组件、布局 -> 对引入的组件进行定制” 有以下重点知识点： 当发现框架内部错误时，可以尝试检查“测试基础库”的版本，根据需要降低版本； 组件库中的组件可以通过设置外部类的方式更改样式； swiper中的导航点可以通过特定样式类直接进行调整 在原生容器中，通过wxss调整背景图片时，url只能接受[代码]http/https[代码]文件路径

多个用户同时查询同一个数据表，然后都做减1操作，最终数据库中变成负数。请问如何给云数据库中的某个表单独加锁，待一个用户完成减1之后，下一个用户才可以查询，然后再减1，这样就可以在查询时先判断是否为0，再决定能否继续减1，来保证数据库中最终剩余0，而非负数。

小商店是一种卖货小程序，用户可以从小程序当前展示的场景，比如任务栏、会话框、扫码、搜索、分享等进入小商店。已经有公众号的商家可以将小程序嵌入公众号文章中，同时，也可以和企业微信结合或通过广告的形式进行推广。 [图片] 未来小商店还将与微信生态的场景更紧密地结合，为商家提供更多连接用户的方式。

开通流量主流程 [图片] 1）点击左侧导航栏的“流量主”进入专属模块 小程序累计独立访客（UV）1000以上，且无违规记录，即可开通流量主功能。 [图片] 2）点击“新建广告位”开始创建  输入广告位名称即可，如计划插入多个广告位，需要分别新建。 [图片] 3）获取广告位代码片段  系统将生成广告位的代码片段，开发者点击“复制代码”留用。 [图片] 4）嵌入代码片段&测试&发布  嵌入代码片段至希望展示广告的位置，并在发布前通过测试预览广告位展示情况。  注：请务必完成主流机型的适配测试，由于适配原因带来的违规问题，将受到同等处罚。 ①原生模板广告 .adContainer { width: 100%; } <view class="adContainer"> <ad-custom unit-id="xxxx"></ad-custom> </view> [图片] ②插屏广告 let interstitialAd = null Page({ onLoad() { if(wx.createInterstitialAd){ //创建 interstitialAd = wx.createInterstitialAd({ adUnitId: 'xxxx' }) interstitialAd.onLoad(() => { console.log('onLoad event emit') //显示 interstitialAd.show().catch((err) => { console.error(err) }) }) interstitialAd.onError((err) => { console.log('onError event emit', err) }) interstitialAd.onClose((res) => { console.log('onClose event emit', res) }) } } }) [图片] ③激励视频广告 let rewardedVideoAd = null Page({ onLoad() { if(wx.createRewardedVideoAd){ rewardedVideoAd = wx.createRewardedVideoAd({ adUnitId: 'xxxx' }) rewardedVideoAd.onLoad(() => { console.log('onLoad event emit') }) rewardedVideoAd.onError((err) => { console.log('onError event emit', err) }) rewardedVideoAd.onClose((res) => { console.log('onClose event emit', res) const { isEnded } = res //视频是否播放结束、可以向用户下发奖励 if (isEnded) {       //@todo 获得积分数据交互     } }) } }, showVideoAd() {     // 用户触发广告后，显示激励视频广告     if (rewardedVideoAd) {       rewardedVideoAd.show().catch(() => {         // 失败重试         rewardedVideoAd.load()           .then(() => rewardedVideoAd.show())           .catch(err => {             console.log('激励视频 广告显示失败')           })       })     }   }, }) <button type="default" bindtap="showVideoAd">观看完整视频广告</button> [图片] [图片] [图片] 总结 以上便是这次手把手教我开通小程序广告组件、接入场景与操作指引的学习笔记。多个页面接入同一种类型的流量主广告组件务必使用同一个adUnitId，不要问为什么，我也不知道，就是会提高单价曝光率。

小程序流量主、广告位类型和广告收益分析 ## 本文介绍 最近在小程序的几个微信群，经常有朋友问到以下几个问题 1、小程序怎么盈利 2、小程序流量主是什么以及怎么开通 3、小程序广告有哪些类型，哪种广告类型相对收益最大 4、 ## 小程序如何盈利 目前对个人小程序开发者而言，只有通过开通流量主，并且按照官方规范要求添加广告位，才能获取收益，当然打赏除外。 ## 什么是流量主如何开通 流量主是微信对外提供的一个服务，通过开通流量主，就可以在小程序合适的位置引入广告位，进而实现收益 登录公众号后台（ https://mp.weixin.qq.com/ ）在左侧菜单中，找到 推广-流量主，点击进去会看到如下截图 [图片] 小程序流量主： 1.开通条件：小程序累计独立访客（UV）1000以上，且无违规记录，即可开通流量主功能。 温馨提示：如满足条件仍无法开通，可能是数据同步问题，建议等待1-2个工作日后再试。 2.申请方法：进入微信公众平台小程序后台，点击左侧面板“流量主”，满足开通门槛的小程序开发者点击“开通”，提交财务资料，待审核通过后成功开通流量主功能，即可创建相应的广告位。 3.广告接入指引： 广告接入可查看： 微信小程序广告接入指引 在开通流量主的过程中，会绑定个人银行卡，以方便进行后续的广告收益结算，目前结算每月两次，具体官方公告可以查阅 [流量主结算周期及开票规则调整说明][2019-12-03发布] https://mp.weixin.qq.com/promotion/readtemplate?t=notice/detail_page&time=1575340587&notice_id=634169 ## 广告类型有哪些 Banner激励式视频插屏视频广告前贴视频 以下为各广告类型，截图示例， [banner广告] [图片] [插屏广告] [图片] 视频广告 [图片] 由于插屏广告会影响用户体验，所以不建议放太多场景使用。 具体不同类型广告体验，可以扫码 [图片] 首页模块-->>插屏广告使用说明-->>视频广告关于我们-->>banner广告 ## 哪种广告类型收益相对最大 [图片] 在10月30号，将banner广告同一替换为激励式视频广告和视频广告，收益很明显从30元上升到90元、150元 可以看到视频广告相对于banner广告，对于收益增加是有用的。 下图是某小程序12月4号一天的收益数据 [图片] 12月4号一天，不同广告类型，收益分析 总收益 194.74+23.27+147.82=365.83 具体分拆来看 广告类型点击量总收益单个点击收益(元)banner1956194.740.099插屏广告6223.270.375激励式视频广告152147.820.972 通过上图我们对比分析，不难得出以下结论：激励式视频广告单个点击的收益最大、 当然我们不能通过单一维度来了解哪种收益最好，还要综合考虑，比如哪种广告对用户影响最小，毕竟不管哪种方式，广告的接入肯定会带来交互体验上的障碍， 我们必须在交互体验和广告收益这两者之间做好权衡。 ## 系统公告 激励式广告于7月31日支持30秒视频素材，广告流量将逐步放开，MP后台-广告位管理模块可支持选择6-15秒视频或6-30秒视频素材的功能，请流量主根据产品进行调整。程序视频广告已于9月4日正式全量上线，开通后即按广告曝光获得分成收入，进一步提升流量变现收益。小程序视频前贴广告组件已于8月30日正式全量上线，开通后即按广告曝光获得分成收入，进一步提升流量变现收益。## 官方文档 小程序广告组件流量主操作指引https://wximg.qq.com/wxp/pdftool/get.html?id=BJSyDkLqz&pa=14&name=miniprogramAds_supplier_manual应用规范https://wxa.wxs.qq.com/mpweb/delivery/legacy/pdftool/get.html?id=rynYA8o3f&pa=10&name=miniprogramAds_supplier_guidance小程序流量主应用规范https://wximg.qq.com/wxp/pdftool/get.html?id=rynYA8o3f&pa=10&name=miniprogramAds_supplier_guidance处罚标准https://wxa.wxs.qq.com/mpweb/delivery/legacy/pdftool/get.html?id=BkTGkbs2G&pa=1&name=miniprogramAds_supplier_regulation小程序视频广告流量主指引https://wximg.qq.com/wxp/pdftool/get.html?post_id=1317小程序视频前贴广告流量主指引https://wximg.qq.com/wxp/pdftool/get.html?post_id=1318## 总结三点 从纯收益的角度来讲，在各种广告类型中，视频广告（包含激励式视频广告、视频广告、视频前贴广告）要比banner广告要好，而且好很多从用户体验来讲，插屏广告是首次打开带插屏广告的页面强制弹出的，但是广告过后，在页面是不占空间的，这是区分与其他广告的地方，banner广告、激励式视频广告、视频广告、视频前贴广告都是在页面中占固定的空间的，这一点要小程序运营同学权衡。Banner广告是按点击，激励式视频、视频广告、插屏广告都是按照曝光来收取广告费用的，这一点非常重要，难怪我每次手工点击我的视频广告没有见流量的增加[哭脸.jpg]。[感谢 @ 仙森 补充于2019年12月9号] 虽然对个人开发者而言，我们开发小程序的目的是为了收益（当然也有为了情怀而开发），在了解如何收益的情况下，我们还是应该尽量把精力放在小程序本身的开发上面。 感谢 在此特别感谢，小程序运营讨论群的两位小伙伴，微信号中间两位已打码 1、@迭戈 (yang_##chun) 2、@风猫 (cs##26)

小程序怎么通过接口获取绑定公众号的文章并通过web-view展示呢？

小程序云开发时效数据刷新和存储 (access_token等) 1.问题描述 小程序中经常有需要进行OCR识别，或者使用外部api例如百度AI识别等接口，请求调用这些接口需要令牌，即一些具有时效性的数据。本文以小程序云开发使用百度API接口为例，介绍access_token定时刷新和请求机制。 下面是百度调用身份证识别的一段需求，需要传的参数需要有access_token。 请求示例 HTTP 方法：[代码]POST[代码] 请求URL： [代码]https://aip.baidubce.com/rest/2.0/ocr/v1/idcard[代码] URL参数： 参数 值 access_token 通过API Key和Secret Key获取的access_token,参考“Access Token获取” access_token 是具有时效性的数据，每次请求一次接口就进行一次请求刷新，显然是对计算机资源的极大浪费，且影响效率。 2.问题解决方案 [图片] 2.1.云数据库配置 新建一个云数据库名为setconfig。作为配置型信息存储数据库，类似access_token的数据都可以向其中存储。 对access_token配置下列字段： _openid (你的openid* 必填) config_name (配置名，填access_token) value (access_token的值，默认为null) id会自动生成，配置完效果如下（这个value是已经更新后的值） [图片] 2.2 定时云函数配置 阅读access_token获取的文档，可知，我们需要请求一个地址来获取access_token的值。 获取Access_Token 请求URL数据格式 向授权服务地址[代码]https://aip.baidubce.com/oauth/2.0/token[代码]发送请求（推荐使用POST），并在URL中带上以下参数： grant_type： 必须参数，固定为[代码]client_credentials[代码]； client_id： 必须参数，应用的[代码]API Key[代码]； client_secret： 必须参数，应用的[代码]Secret Key[代码]； 例如： [代码]https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHlA4Fq5eR3LT0vuXV4&client_secret=0rDSjzQ20XUj5itV6WRtznPQSzr5pVw2&[代码] 实现 我们需要在云函数中模拟请求，并根据返回结果刷新云数据库中的access_token值。 想要运行通过该程序，需要开发者自己去百度创建账号并创建应用。 云函数index.js [代码]// 云函数入口文件 index.js const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) const db = cloud.database() var request = require('request') // 定时器 exports.main = async(event, context) => { const appkey = '填写你的百度AppKey'; const appsecret = '填写你的百度AppSecret'; var url = 'https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=' + appkey + '&client_secret=' + appsecret; return new Promise((resolve, reject) => { request({ url: url, method: "POST", json: true, headers: { "content-type": "application/json", }, }, function(error, response, body) { if (!error && response.statusCode == 200) { console.log('通行证为' + body.access_token) resolve(body.access_token) //记得修改.doc('xxx') 中的内容 db.collection('setconfig').doc('aaaf5a56-1dd9-4e50-974b-34688fa47b20').update({ data: { value: body.access_token } }).then(res => { console.log('调用完成') console.log(res) }) } }) }) } [代码] docid是setconfig生成的，每个人不同注意修改 还有一种更新写法,不过更推荐使用上面的方法，效率更高，且稳定。 [代码]db.collection('setconfig').where({ config_name:'access_token' }).update({ data: { value: body.access_token } }) [代码] 云函数config.json(定时触发器功能实现) [代码]{ // triggers 字段是触发器数组，目前仅支持一个触发器，即数组只能填写一个，不可添加多个 "triggers": [ { // name: 触发器的名字，规则见下方说明 "name": "myTrigger", // type: 触发器类型，目前仅支持 timer (即 定时触发器) "type": "timer", // config: 触发器配置，在定时触发器下，config 格式为 cron 表达式， //现在为每天凌晨两点触发 "config": "0 0 2 * * * *" } ] } [代码] 云函数整体结构为： [图片] 然后上传并部署（云端安装依赖）。 2.3 小程序端获取Access_token 在小程序进入相应界面的时候，请求云数据库，获取access_token [代码]onLoad: function (options) { //页面初始化 var that = this; db.collection('setconfig').where({ config_name:'access_token' }).get({ success(res){ that.setData({ access_token:res.data[0].value }) //console.log(res.data[0]) }, fail(res){ wx.showToast({ title: '请求失败，无法通过扫描填充数据', }) } }) }, [代码] 3. 参考资料 [1]百度AI鉴权认证机制 [2]微信小程序云开发数据库update函数更新不了数据的问题 [3]小程序云开发定时触发器

代码如下： app.js: //如果担心openid的安全，就用这个函数 getCloudOpenid: async function () { return this.openid = this.openid || (await wx.cloud.callFunction({name: 'login'})).result.OPENID }, //最佳方案。 getOpenid: async function () { (this.openid = this.openid || wx.getStorageSync('openid')) || wx.setStorageSync('openid', await this.getCloudOpenid()) return this.openid }, 任何page: onLoad: async function () {   console.log(this.openid = await getApp().getOpenid()) }, //在本page的其他函数里获得openid。 yourFunc: function(){ console.log(this.openid) } 云函数login: const cloud = require('wx-server-sdk') cloud.init() exports.main=async()=>{return cloud.getWXContext()}

提起 WeUI，相信大家都不陌生，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。 不过，对于 WeUI 样式库，开发者就有疑问了。 [图片] [图片] 我们来看看 WeUI 组件库到底有什么可用的 UI 组件呢？WeUI 样式库有的各个元素，WeUI 组件库是基于 WeUI 样式库做了组件化处理，开发者可以便捷的使用，无需考虑组件层面的逻辑问题。 [图片] 有了心动的组件之后，大家肯定想知道 WeUI 组件库是怎么使用的。 [图片] 要使用 WeUI，首先要把 WeUI 引入我们的小程序项目，引入 WeUI 的方式有以下两种，使用其中一种即可～ 方法一：通过 useExtendedLib 扩展库 的方式引入，这种方式引入的组件将不会计入代码包大小。（推荐👍） 方法二：可以通过 npm方式下载构建，npm 包名为 weui-miniprogram。 与方法一不同，npm 引入的方式需要多操作一步，在 app.wxss 中引用 weui.wxss。 // app.wxss @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss'; [图片] 引入之后，我们就要开始来使用了，WeUI 组件库是基于小程序自定义组件构建的，所以使用是以自定义组件的形式来使用。 下面通过几个例子来感受下 WeUI 组件库的使用。 由于是自定义组件的形式，所以使用组件都需要在页面配置中引入，像这样： // page.json { "usingComponents": { "mp-half-screen-dialog": "weui-miniprogram/half-screen-dialog/half-screen-dialog", "mp-searchbar": "weui-miniprogram/searchbar/searchbar" } } 引入组件之后，就可以直接在 wxml 中使用了，当然，为了让开发者接入更加简便，我们也加入了做了一些常见的实用性功能。 半屏弹窗 小程序提供了 wx.showModal、wx.showToast 供开发者进行页面交互，在开发过程中，可能需要自定义按钮相关的内容，所以 WeUI 提供了半屏弹窗让开发者可以有更多的自定义空间。 我们来看下代码，使用很简单，直接使用 mp-half-screen-dialog，配置相关属性即可。 // page.wxml <mp-half-screen-dialog              bindbuttontap="buttontap"     show="{{show}}"     mask-closable="{{false}}"      title="测试标题B"      sub-title="测试标题B的副标题"      desc="辅助描述内容，可根据实际需要安排"      tips="辅助提示内容，可根据实际需要安排"      buttons="{{buttons}}"> </mp-half-screen-dialog> // page.js data配置 buttons: [ { type: 'default', className: '', text: '辅助操作', value: 0 }, { type: 'primary', className: '', text: '主操作', value: 1 } ] 来看下半屏弹窗的效果～ u1s1，这交互体验真的爱了😍 [图片] Form 表单校验 Form 表单这里，除了基础的的功能之外，WeUI 组件库还提供了表单校验的能力，通过 rules 规则的配置（支持长度、手机号码、电子邮件、url 链接地址等），轻松解决表单校验问题。 [图片] 左滑删除 相比 Web 端，手机端的操作按钮更多的是通过⬅️左滑等来实现，考虑到左滑删除的普遍性，WeUI 组件库也是支持的。 在 mp-slideview 组件中设置 buttons属性即可。 [图片] 搜索组件 同样是基本功能的搜索，WeUI 组件库也封装了搜索组件，开发者只需配置搜索结果即可拥有搜索功能～ [图片] 除了这些组件之外，WeUI 组件库还提供了很多实用的组件，包括基础的 icon、loading，表单的 uploader、cell 等等。 [图片] 伴随客户端、小程序对 DarkMode 的支持，WeUI 组件库也同步适配 DarkMode 的模式，让 WeUI 组件库的使用同学可以快速适配 DarkMode。 在根结点（或组件的外层结点）增加属性 data-weui-theme="dark" ，即可把 WeUI 组件切换到 DarkMode 的表现，如： <view data-weui-theme="dark">     ... </view> [图片] 最后，如果想体验 WeUI 组件库的效果，欢迎点击下方小程序示例体验👏及接入使用，使用过程中如有建议或者疑问，欢迎到微信开放社区与我们交流。 [图片]             

公告更新时间：2021年04月15日考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈，为优化开发者调整接口的体验，回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。为优化用户的使用体验，平台将进行以下调整： 2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。新增getUserProfile接口（基础库2.10.4版本开始支持），可获取用户头像、昵称、性别及地区信息，开发者每次通过该接口获取用户个人信息均需用户确认。具体接口文档：《getUserProfile接口文档》由于getUserProfile接口从2.10.4版本基础库开始支持（覆盖微信7.0.9以上版本），考虑到开发者在低版本中有获取用户头像昵称的诉求，对于未支持getUserProfile的情况下，开发者可继续使用getUserInfo能力。开发者可参考getUserProfile接口文档中的示例代码进行适配。请使用了wx.getUserInfo接口或<button open-type="getUserInfo"/>的开发者尽快适配。开发者工具1.05.2103022版本开始支持getUserProfile接口调试，开发者可下载该版本进行改造。 小游戏不受本次调整影响。 一、调整背景很多开发者在打开小程序时就通过组件方式唤起getUserInfo弹窗，如果用户点击拒绝，无法使用小程序，这种做法打断了用户正常使用小程序的流程，同时也不利于小程序获取新用户。 二、调整说明通过wx.login接口获取的登录凭证可直接换取unionID 若小程序已在微信开放平台进行绑定，原wx.login接口获取的登录凭证若需换取unionID需满足以下条件： 如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号如果开发者帐号下存在同主体的公众号或移动应用，并且该用户已经授权登录过该公众号或移动应用2月23日后，开发者调用wx.login获取的登录凭证可以直接换取unionID，无需满足以上条件。 回收wx.getUserInfo接口可获取用户个人信息能力 4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或<button open-type="getUserInfo"/>将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。 具体变化如下表： [图片] 即wx.getUserInfo接口的返回参数不变，但开发者获取的userInfo为匿名信息。  [图片] 此外，针对scope.userInfo将做如下调整： 若开发者调用wx.authorize接口请求scope.userInfo授权，用户侧不会触发授权弹框，直接返回授权成功若开发者调用wx.getSetting接口请求用户的授权状态，会直接读取到scope.userInfo为true新增getUserProfile接口 若开发者需要获取用户的个人信息（头像、昵称、性别与地区），可以通过wx.getUserProfile接口进行获取，该接口从基础库2.10.4版本开始支持，该接口只返回用户个人信息，不包含用户身份标识符。该接口中desc属性（声明获取用户个人信息后的用途）后续会展示在弹窗中，请开发者谨慎填写。开发者每次通过该接口获取用户个人信息均需用户确认，请开发者妥善保管用户快速填写的头像昵称，避免重复弹窗。 插件用户信息功能页 插件申请获取用户头像昵称与用户身份标识符仍保留功能页的形式，不作调整。用户在用户信息功能页中授权之后，插件就可以直接调用 wx.login 和 wx.getUserInfo 。 三、最佳实践调整后，开发者如需获取用户身份标识符只需要调用wx.login接口即可。 开发者若需要在界面中展示用户的头像昵称信息，可以通过<open-data>组件进行渲染，该组件无需用户确认，可以在界面中直接展示。 在部分场景（如社交类小程序）中，开发者需要在获取用户的头像昵称信息，可调用wx.getUserProfile接口，开发者每次通过该接口均需用户确认，请开发者妥善处理调用接口的时机，避免过度弹出弹窗骚扰用户。 微信团队 2021年4月15日